interface: got settings page partially working

pkg/interface/src/logic/api/graph.ts

@@ -87,6 +87,15 @@ export default class GraphApi extends BaseApi<StoreState> {
     });
   }
 
+  leaveGraph(ship: Patp, name: string) {
+    const resource = makeResource(ship, name);
+    return this.viewAction('graph-leave', {
+      "leave": {
+        resource
+      }
+    });
+  }
+
   groupifyGraph(ship: Patp, name: string, toPath?: string) {
     const resource = makeResource(ship, name);
     const to = toPath && resourceFromPath(toPath);
@@ -109,14 +118,6 @@ export default class GraphApi extends BaseApi<StoreState> {
     });
   }
 
-  removeGraph(ship: Patp, name: string) {
-    return this.storeAction({
-      'remove-graph': {
-        resource: { ship, name }
-      }
-    });
-  }
-
   addPost(ship: Patp, name: string, post: Post) {
     let nodes = {};
     const resource = { ship, name };

pkg/interface/src/logic/store/store.ts

@@ -66,7 +66,7 @@ export default class GlobalStore extends BaseStore<StoreState> {
       associations: {
         chat: {},
         contacts: {},
-        link: {},
+        graph: {},
         publish: {}
       },
       groups: {},

pkg/interface/src/views/apps/links/app.js

@@ -14,7 +14,6 @@ import { LinkList } from './components/link-list';
 import { LinkDetail } from './components/link-detail';
 
 import {
-  makeRoutePath,
   amOwnerOfGroup,
   base64urlDecode
 } from '~/logic/lib/util';
@@ -39,7 +38,8 @@ export class LinksApp extends Component {
     const { props } = this;
     const contacts = props.contacts ? props.contacts : {};
     const groups = props.groups ? props.groups : {};
-    const associations = props.associations ? props.associations : { link: {}, contacts: {} };
+    const associations =
+      props.associations ? props.associations : { graph: {}, contacts: {} };
     const graphKeys = props.graphKeys || new Set([]);
     const graphs = props.graphs || {};
 
@@ -113,9 +113,10 @@ export class LinksApp extends Component {
               const resourcePath = 
                 `${props.match.params.ship}/${props.match.params.name}`;
               const popout = props.match.url.includes('/popout/');
+              const metPath = `/ship/~${resourcePath}`;
               const resource =
-                associations.link[resourcePath] ?
-                  associations.link[resourcePath] : { metadata: {} };
+                associations.graph[metPath] ?
+                  associations.graph[metPath] : { metadata: {} };
 
               const contactDetails = contacts[resource['group-path']] || {};
               const group = groups[resource['group-path']] || new Set([]);
@@ -152,8 +153,8 @@ export class LinksApp extends Component {
               const resourcePath = 
                 `${props.match.params.ship}/${props.match.params.name}`;
               const resource =
-                associations.link[resourcePath] ?
-                  associations.link[resourcePath] : { metadata: {} };
+                associations.graph[resourcePath] ?
+                  associations.graph[resourcePath] : { metadata: {} };
               const contactDetails = contacts[resource['group-path']] || {};
               const popout = props.match.url.includes('/popout/');
               const graph = graphs[resourcePath] || null;
@@ -198,8 +199,8 @@ export class LinksApp extends Component {
               const resourcePath = 
                 `${props.match.params.ship}/${props.match.params.name}`;
               const resource =
-                associations.link[resourcePath] ?
-                  associations.link[resourcePath] : { metadata: {} };
+                associations.graph[resourcePath] ?
+                  associations.graph[resourcePath] : { metadata: {} };
               const popout = props.match.url.includes('/popout/');
               const contactDetails = contacts[resource['group-path']] || {};
 

pkg/interface/src/views/apps/links/components/link-list.js

@@ -35,7 +35,7 @@ export const LinkList = (props) => {
           sidebarShown={props.sidebarShown}
           popout={props.popout}
           api={props.api} />
-        <h2 className='dib f9 fw4 lh-solid v-top pt2'>{title}</h2>
+        <h2 className='white-d dib f9 fw4 lh-solid v-top pt2'>{title}</h2>
         <TabBar
           location={props.location}
           popout={props.popout}

pkg/interface/src/views/apps/links/components/settings.js

@@ -26,6 +26,8 @@ export class SettingsScreen extends Component {
   componentDidUpdate() {
     const { props, state } = this;
 
+    console.log(props.resource);
+
     if (Boolean(state.isLoading) && !props.resource) {
       this.setState({
         isLoading: false
@@ -52,7 +54,10 @@ export class SettingsScreen extends Component {
       type: 'Removing'
     });
 
-    // TODO: removeCollection
+    props.api.graph.leaveGraph(
+      `~${props.match.params.ship}`,
+      props.match.params.name
+    );
   }
 
   deleteCollection() {
@@ -64,22 +69,29 @@ export class SettingsScreen extends Component {
       type: 'Deleting'
     });
 
-    // TODO: deleteCollection
+    console.log(props.match.params.name);
+    props.api.graph.deleteGraph(props.match.params.name);
   }
 
   renderRemove() {
-    return (
-      <div className="w-100 fl mt3">
-        <p className="f8 mt3 lh-copy db">Remove Collection</p>
-        <p className="f9 gray2 db mb4">
-          Remove this collection from your collection list.
-        </p>
-        <a onClick={this.removeCollection.bind(this)}
-           className="dib f9 black gray4-d bg-gray0-d ba pa2 b--black b--gray1-d pointer">
-          Remove collection
-        </a>
-      </div>
-    );
+    const { props } = this;
+
+    if (props.amOwner) {
+      return null;
+    } else {
+      return (
+        <div className="w-100 fl mt3">
+          <p className="f8 mt3 lh-copy db">Remove Collection</p>
+          <p className="f9 gray2 db mb4">
+            Remove this collection from your collection list.
+          </p>
+          <a onClick={this.removeCollection.bind(this)}
+             className="dib f9 black gray4-d bg-gray0-d ba pa2 b--black b--gray1-d pointer">
+            Remove collection
+          </a>
+        </div>
+      );
+    }
   }
 
   renderDelete() {
@@ -107,6 +119,7 @@ export class SettingsScreen extends Component {
     const { props, state } = this;
 
     const title = props.resource.metadata.title || props.resourcePath;
+    console.log(props);
 
     if (!props.graphResource || !props.resource.metadata.color) {
       return <LoadingScreen />;
@@ -145,10 +158,6 @@ export class SettingsScreen extends Component {
           </div>
         <div className="w-100 pl3 mt4 cf">
           <h2 className="f8 pb2">Collection Settings</h2>
-          <p className="f8 mt3 lh-copy db">Mark all links as read</p>
-          <p className="f9 gray2 db mb4">
-            Mark all links in this collection as read.
-          </p>
           {this.renderRemove()}
           {this.renderDelete()}
           <MetadataSettings
@@ -157,7 +166,7 @@ export class SettingsScreen extends Component {
             api={props.api}
             association={props.resource}
             resource="collection"
-            app="link"
+            app="graph"
           />
           <Spinner
             awaiting={this.state.awaiting}