groups: fixed joining of links resources from channels screen

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

@@ -35,7 +35,8 @@ export default class GraphApi extends BaseApi<StoreState> {
     name: string,
     title: string,
     description: string,
-    group: Path
+    group: Path,
+    mod: string
   ) {
     const associated = { group: resourceFromPath(group) };
     const resource = makeResource(`~${window.ship}`, name);
@@ -45,7 +46,8 @@ export default class GraphApi extends BaseApi<StoreState> {
         resource,
         title,
         description,
-        associated
+        associated,
+        "module": mod
       }
     });
   }
@@ -54,7 +56,8 @@ export default class GraphApi extends BaseApi<StoreState> {
     name: string,
     title: string,
     description: string,
-    policy: Enc<GroupPolicy>
+    policy: Enc<GroupPolicy>,
+    mod: string
   ) {
     const resource = makeResource(`~${window.ship}`, name);
 
@@ -63,7 +66,8 @@ export default class GraphApi extends BaseApi<StoreState> {
         resource,
         title,
         description,
-        associated: { policy }
+        associated: { policy },
+        "module": mod
       }
     });
   }

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

@@ -1,8 +1,10 @@
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import { Switch, Route } from 'react-router-dom';
+import { Center, Text } from "@tlon/indigo-react";
+import { deSig } from '~/logic/lib/util';
 
 
-export default class GraphApp extends Component {
+export default class GraphApp extends PureComponent {
   render() {
     const { props } = this;
     const contacts = props.contacts ? props.contacts : {};
@@ -12,54 +14,46 @@ export default class GraphApp extends Component {
     const graphKeys = props.graphKeys || new Set([]);
     const graphs = props.graphs || {};
 
-    const { api, sidebarShown, hideAvatars, hideNicknames, s3, remoteContentPolicy } = this.props;
+    const {
+      api, sidebarShown, s3,
+      hideAvatars, hideNicknames, remoteContentPolicy
+    } = this.props;
 
     return (
-      <>
-        <Switch>
-          <Route exact path="/~graph/join/ship/:ship/:name"
-            render={ (props) => {
-              const resource =
-                `${props.match.params.ship}/${props.match.params.name}`;
+      <Switch>
+        <Route exact path="/~graph/join/ship/:ship/:name/:module?"
+          render={ (props) => {
+            const resource =
+              `${deSig(props.match.params.ship)}/${props.match.params.name}`;
 
-              const autoJoin = () => {
-                try {
-                  api.graph.joinGraph(
-                    `~${props.match.params.ship}`,
-                    props.match.params.name
+            const autoJoin = () => {
+              try {
+                api.graph.joinGraph(
+                  `~${deSig(props.match.params.ship)}`,
+                  props.match.params.name
+                );
+                
+                if (props.match.params.module) {
+                  props.history.push(
+                    `/~${props.match.params.module}/${resource}`
                   );
-                  props.history.push(`/~graph/${resource}`);
-                } catch(err) {
-                  setTimeout(autoJoin, 2000);
+                } else {
+                  props.history.push('/');
                 }
-              };
-              autoJoin();
-            }}
-          />
-          <Route exact path="/~graph/(popout)?/:ship/:name"
-            render={ (props) => {
-              const resourcePath = 
-                `${props.match.params.ship}/${props.match.params.name}`;
-              const resource =
-                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;
-
-              if ('app-name' in resource) {
-                //  TODO: add proper tags to graph-store's tag-queries,
-                //  then push the proper path to history
-                props.history.push();
+              } catch(err) {
+                setTimeout(autoJoin, 2000);
               }
+            };
+            autoJoin();
 
-              return (
-                <div>Redirecting...</div>
-              );
-            }}
-          />
-        </Switch>
-      </>
+            return (
+              <Center width="100%" height="100%">
+                <Text fontSize={1}>Redirecting...</Text>
+              </Center>
+            );
+          }}
+        />
+      </Switch>
     );
   }
 }

pkg/interface/src/views/apps/groups/components/lib/group-detail.js

@@ -75,24 +75,37 @@ export class GroupDetail extends Component {
       return app !== 'contacts';
     }).map((app) => {
       Object.keys(props.associations[app]).filter((channel) => {
-        return props.associations[app][channel]['group-path'] === props.association['group-path'];
+        return props.associations[app][channel]['group-path'] === 
+               props.association['group-path'];
       })
       .map((channel) => {
         const channelObj = props.associations[app][channel];
         const title =
-        channelObj.metadata?.title || channelObj['app-path'] || '';
+          channelObj.metadata?.title || channelObj['app-path'] || '';
 
         const color = uxToHex(channelObj.metadata?.color) || '000000';
-        const channelPath = channelObj['app-path'];
-        const link = `/~${app}/join${channelPath}`;
-        return(
-          channelList.push({
-            title: title,
-            color: color,
-            app: app.charAt(0).toUpperCase() + app.slice(1),
-            link: link
-          })
-        );
+        const link = `/~${app}/join${channelObj['app-path']}`;
+        const module = channelObj.metadata?.module || '';
+
+        if (app === 'graph' && module) {
+          return (
+            channelList.push({
+              title: title,
+              color: color,
+              app: module.charAt(0).toUpperCase() + module.slice(1),
+              link: `${link}/${module}`
+            })
+          );
+        } else {
+          return (
+            channelList.push({
+              title: title,
+              color: color,
+              app: app.charAt(0).toUpperCase() + app.slice(1),
+              link: link
+            })
+          );
+        }
       });
     });
 

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

@@ -19,7 +19,7 @@ import {
 } from '~/logic/lib/util';
 
 
-export class LinksApp extends Component {
+export default class LinksApp extends Component {
   componentDidMount() {
     // preload spinner asset
     new Image().src = '/~landscape/img/Spinner.png';
@@ -46,7 +46,10 @@ export class LinksApp extends Component {
     const invites = props.invites ?
       props.invites : {};
 
-    const { api, sidebarShown, hideAvatars, hideNicknames, s3, remoteContentPolicy } = this.props;
+    const {
+      api, sidebarShown, s3,
+      hideAvatars, hideNicknames, remoteContentPolicy
+    } = this.props;
 
     return (
       <>
@@ -55,42 +58,38 @@ export class LinksApp extends Component {
         </Helmet>
         <Switch>
           <Route exact path="/~link"
-            render={ (props) => {
-              return (
-                <Skeleton
-                  active="collections"
-                  associations={associations}
-                  invites={invites}
-                  groups={groups}
-                  rightPanelHide={true}
-                  sidebarShown={sidebarShown}
-                  api={api}
-                  graphKeys={graphKeys}>
-                  <MessageScreen text="Select or create a collection to begin." />
-                </Skeleton>
-              );
-            }}
+            render={ (props) => (
+              <Skeleton
+                active="collections"
+                associations={associations}
+                invites={invites}
+                groups={groups}
+                rightPanelHide={true}
+                sidebarShown={sidebarShown}
+                api={api}
+                graphKeys={graphKeys}>
+                <MessageScreen text="Select or create a collection to begin." />
+              </Skeleton>
+            )}
           />
           <Route exact path="/~link/new"
-            render={(props) => {
-              return (
-                <Skeleton
-                  associations={associations}
-                  invites={invites}
-                  groups={groups}
-                  sidebarShown={sidebarShown}
+            render={ (props) => (
+              <Skeleton
+                associations={associations}
+                invites={invites}
+                groups={groups}
+                sidebarShown={sidebarShown}
+                api={api}
+                graphKeys={graphKeys}>
+                <NewScreen
                   api={api}
-                  graphKeys={graphKeys}>
-                  <NewScreen
-                    api={api}
-                    graphKeys={graphKeys}
-                    associations={associations}
-                    groups={groups}
-                    {...props}
-                  />
-                </Skeleton>
-              );
-            }}
+                  graphKeys={graphKeys}
+                  associations={associations}
+                  groups={groups}
+                  {...props}
+                />
+              </Skeleton>
+            )}
           />
           <Route exact path="/~link/(popout)?/:ship/:name/settings"
             render={ (props) => {
@@ -229,4 +228,3 @@ export class LinksApp extends Component {
   }
 }
 
-export default LinksApp;

pkg/interface/src/views/apps/links/components/new.tsx

@@ -36,14 +36,16 @@ export function NewScreen(props: object) {
           resourceId,
           name,
           description,
-          group
+          group,
+          "link"
         );
       } else {
         await props.api.graph.createUnmanagedGraph(
           resourceId,
           name,
           description,
-          { invite: { pending: [] } }
+          { invite: { pending: [] } },
+          "link"
         );
       }