interface: added /~graph route with joining logic and partial redirect logic

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

@@ -0,0 +1,66 @@
+import React, { Component } from 'react';
+import { Switch, Route } from 'react-router-dom';
+
+
+export default class GraphApp extends Component {
+  render() {
+    const { props } = this;
+    const contacts = props.contacts ? props.contacts : {};
+    const groups = props.groups ? props.groups : {};
+    const associations =
+      props.associations ? props.associations : { graph: {}, contacts: {} };
+    const graphKeys = props.graphKeys || new Set([]);
+    const graphs = props.graphs || {};
+
+    const { api, sidebarShown, hideAvatars, hideNicknames, s3, 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}`;
+
+              const autoJoin = () => {
+                try {
+                  api.graph.joinGraph(
+                    `~${props.match.params.ship}`,
+                    props.match.params.name
+                  );
+                  props.history.push(`/~graph/${resource}`);
+                } catch(err) {
+                  setTimeout(autoJoin, 2000);
+                }
+              };
+              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();
+              }
+
+              return (
+                <div>Redirecting...</div>
+              );
+            }}
+          />
+        </Switch>
+      </>
+    );
+  }
+}
+

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

@@ -92,25 +92,6 @@ export class LinksApp extends Component {
               );
             }}
           />
-          <Route exact path="/~link/join/:ship/:name"
-            render={ (props) => {
-              const resource =
-                `${props.match.params.ship}/${props.match.params.name}`;
-
-              const autoJoin = () => {
-                try {
-                  api.graph.joinGraph(
-                    `~${props.match.params.ship}`,
-                    props.match.params.name
-                  );
-                  props.history.push(`/~link/${resource}`);
-                } catch(err) {
-                  setTimeout(autoJoin, 2000);
-                }
-              };
-              autoJoin();
-            }}
-          />
           <Route exact path="/~link/(popout)?/:ship/:name/settings"
             render={ (props) => {
               const resourcePath = 

pkg/interface/src/views/components/Content.js

@@ -54,7 +54,8 @@ export const Content = (props) => {
           path={[
             '/~chat',
             '/~publish',
-            '/~link'
+            '/~link',
+            '/~graph'
           ]}
           render={ p => (
             <TwoPaneApp

pkg/interface/src/views/components/TwoPaneApp.js

@@ -4,6 +4,7 @@ import { Route, Switch } from 'react-router-dom';
 import LinksApp from '../apps/links/app';
 import PublishApp from '../apps/publish/app';
 import ChatApp from '../apps/chat/app';
+import GraphApp from '../apps/graph/app';
 
 
 export const TwoPaneApp = (props) => {
@@ -39,6 +40,16 @@ export const TwoPaneApp = (props) => {
             {...props} />
         )}
       />
+      <Route
+        path='/~graph'
+        render={p => (
+          <GraphApp
+            location={p.location}
+            match={p.match}
+            history={p.history}
+            {...props} />
+        )}
+      />
     </Switch>
   );
 }