graph-post: fixed infinite nested reply functionality and added back navigation

pkg/interface/src/apps/graph-post/app.js

@@ -133,18 +133,26 @@ export default class GraphPostApp extends React.Component {
         />
         <Route
           exact
-          path="/~post/room/:ship/:name/:nodeId"
+          path="/~post/room/:ship/:name/:nodeId+"
           render={(props) => {
             let resource =
               `${props.match.params.ship}/${props.match.params.name}`;
-            const graph = state.graphs[resource] || new Map();
             let index = props.match.params.nodeId
-              .split('-').map((ind) => {
+              .split('/').map((ind) => {
                 return parseInt(ind, 10);
               });
-            let node = null;
-            if (index.length > 0) {
-              node = graph.get(index[0]) || null;
+            let graph = state.graphs[resource] || new Map();
+            let node = {};
+
+            while (index.length > 0) {
+              if (!node) {
+                return <div></div>;
+              }
+
+              node = graph.get(index[0]);
+              graph = (!!node && 'children' in node) ?
+                node.children : new Map();
+              index = index.slice(1);
             }
 
             return (
@@ -162,7 +170,7 @@ export default class GraphPostApp extends React.Component {
                   subscription={this.subscription}
                   node={node}
                   sidebarShown={state.sidebarShown}
-                  parentIndex={'/' + props.match.params.nodeId.split('-').join('/')}
+                  parentIndex={'/' + props.match.params.nodeId}
                   {...props}
                 />
               </Skeleton>

pkg/interface/src/apps/graph-post/components/lib/message.js

@@ -184,7 +184,8 @@ export class Message extends Component {
           minHeight: 'min-content'
         }}
         onClick={() => {
-          props.history.push(`/~post/room/${props.resource}/${props.index}`);
+          props.history.push(`/~post/room/` +
+            `${props.resource.ship}/${props.resource.name}${props.index}`);
         }} 
       >
        <OverlaySigil

pkg/interface/src/apps/graph-post/components/node-tree.js

@@ -31,16 +31,29 @@ export class NodeTreeScreen extends Component {
 
   parentPost() {
     const { props } = this;
-    console.log(props);
 
     const node = props.node;
     if (!node) { return (<div></div>); }
 
+    let prevIndex = node.post.index.split('/');
+    prevIndex.pop();
+    prevIndex = prevIndex.join('/');
+    
     return (
       <div>
+        <span className="dib f9 v-mid gray2 ml1 mr1 c-default inter">
+          <Link className="dib f9 v-mid inter ml2 no-underline white-d"
+             to={
+               "/~post/room/" +
+               `${props.resource.ship}/${props.resource.name}` +
+               `${prevIndex}`
+             }>
+            ⟵
+          </Link>
+        </span>
         <Message
           isParent={true}
-          key={node.index}
+          key={node.post.index}
           msg={node.post}
         />
       </div>
@@ -53,22 +66,24 @@ export class NodeTreeScreen extends Component {
     let graph = !!props.node && 'children' in props.node ?
       props.node.children : new Map();
     let messages = Array.from(graph).reverse();
-    console.log(messages);
 
     const messageElements = messages.map((msg, i) => {
       let index = msg[0];
       let node = msg[1];
       let post = node.post;
+      console.log(post);
 
       return (
         <Message
           key={index}
+          resource={props.resource}
+          index={post.index}
           msg={post}
+          history={props.history}
         />
       );
     });
 
-
     return (
       <div
         className="overflow-y-scroll bg-white bg-gray0-d pt3 pb2 flex flex-column relative"