graph-post: updated reducers and node tree

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

@@ -138,9 +138,14 @@ export default class GraphPostApp extends React.Component {
             let resource =
               `${props.match.params.ship}/${props.match.params.name}`;
             const graph = state.graphs[resource] || new Map();
-            const node = graph.get(parseInt(props.match.params.nodeId, 10));
-            console.log(graph);
-            console.log(node);
+            let index = props.match.params.nodeId
+              .split('-').map((ind) => {
+                return parseInt(ind, 10);
+              });
+            let node = null;
+            if (index.length > 0) {
+              node = graph.get(index[0]) || null;
+            }
 
             return (
               <Skeleton
@@ -157,6 +162,7 @@ export default class GraphPostApp extends React.Component {
                   subscription={this.subscription}
                   node={node}
                   sidebarShown={state.sidebarShown}
+                  parentIndex={'/' + props.match.params.nodeId.split('-').join('/')}
                   {...props}
                 />
               </Skeleton>

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

@@ -51,20 +51,22 @@ export class Message extends Component {
 
   renderContent() {
     const { props } = this;
+    console.log(props.msg);
     const content = props.msg.contents[0];
+    const font = !!props.isParent ? "f6" : "f7";
 
     if ('code' in content) {
       const outputElement =
         (Boolean(content.code.output) &&
          content.code.output.length && content.code.output.length > 0) ?
         (
-          <pre className="f7 clamp-attachment pa1 mt0 mb0 b--gray4 b--gray1-d bl br bb">
+          <pre className={`${font} clamp-attachment pa1 mt0 mb0 b--gray4 b--gray1-d bl br bb`}>
             {content.code.output[0].join('\n')}
           </pre>
         ) : null;
       return (
         <div className="mv2">
-          <pre className="f7 clamp-attachment pa1 mt0 mb0 bg-light-gray b--gray4 b--gray1-d ba">
+          <pre className={`${font} clamp-attachment pa1 mt0 mb0 bg-light-gray b--gray4 b--gray1-d ba`}>
             {content.code.expression}
           </pre>
           {outputElement}
@@ -93,7 +95,7 @@ export class Message extends Component {
           ></img>
         );
         return (
-          <a className="f7 lh-copy v-top word-break-all"
+          <a className={`${font} lh-copy v-top word-break-all`}
             href={content.url}
             target="_blank"
             rel="noopener noreferrer"
@@ -120,7 +122,7 @@ export class Message extends Component {
         return (
           <div>
           <a href={content.url}
-          className="f7 lh-copy v-top bb b--white-d word-break-all"
+          className={`${font} lh-copy v-top bb b--white-d word-break-all`}
           href={content.url}
           target="_blank"
           rel="noopener noreferrer"
@@ -137,7 +139,7 @@ export class Message extends Component {
         );
       } else {
         return (
-          <a className="f7 lh-copy v-top bb b--white-d b--black word-break-all"
+          <a className={`${font} lh-copy v-top bb b--white-d b--black word-break-all`}
             href={content.url}
             target="_blank"
             rel="noopener noreferrer"
@@ -146,12 +148,6 @@ export class Message extends Component {
           </a>
         );
       }
-    } else if ('me' in content) {
-      return (
-        <p className='f7 i lh-copy v-top'>
-          {content.me}
-        </p>
-      );
     } else {
         return (
           <section>
@@ -169,67 +165,51 @@ export class Message extends Component {
 
     const paddingTop = { 'paddingTop': '6px' };
 
-    if (true) {
-      const timestamp = moment.unix(props.msg['time-sent'] / 1000).format('hh:mm a');
+    const timestamp = moment.unix(props.msg['time-sent'] / 1000).format('hh:mm a');
 
-      let name = `~${props.msg.author}`;
-      let color = '#000000';
-      let sigilClass = 'mix-blend-diff';
+    let name = `~${props.msg.author}`;
+    let color = '#000000';
+    let sigilClass = 'mix-blend-diff';
 
-      return (
+    const bodyFont = !!props.isParent ? "f6" : "f8";
+    const smallFont = !!props.isParent ? "f7" : "f9";
+
+    return (
+      <div
+        ref={this.containerRef}
+        className={
+          `w-100 ${bodyFont} pl3 pt4 pr3 cf flex lh-copy bt b--white pointer`
+        }
+        style={{
+          minHeight: 'min-content'
+        }}
+        onClick={() => {
+          props.history.push(`/~post/room/${props.resource}/${props.index}`);
+        }} 
+      >
+       <OverlaySigil
+         ship={props.msg.author}
+         color={'#000'}
+         sigilClass={sigilClass}
+         group={props.group}
+         className="fl pr3 v-top bg-white bg-gray0-d"
+       />
         <div
-          ref={this.containerRef}
-          className={
-            'w-100 f7 pl3 pt4 pr3 cf flex lh-copy bt b--white pointer'
-          }
-          style={{
-            minHeight: 'min-content'
-          }}
-          onClick={() => {
-            props.history.push(`/~post/room/${props.resource}/${props.index}`);
-          }} 
+          className="fr clamp-message white-d"
+          style={{ flexGrow: 1, marginTop: -8 }}
         >
-         <OverlaySigil
-           ship={props.msg.author}
-           color={'#000'}
-           sigilClass={sigilClass}
-           group={props.group}
-           className="fl pr3 v-top bg-white bg-gray0-d"
-         />
-          <div
-            className="fr clamp-message white-d"
-            style={{ flexGrow: 1, marginTop: -8 }}
-          >
-            <div className="hide-child" style={paddingTop}>
-              <p className="v-mid f9 gray2 dib mr3 c-default">
-                <span
-                  title={`~${props.msg.author}`}
-                >
-                </span>
-              </p>
-              <p className="v-mid mono f9 gray2 dib">{timestamp}</p>
-              <p className="v-mid mono f9 ml2 gray2 dib child dn-s">{datestamp}</p>
-            </div>
-            {this.renderContent()}
+          <div className="hide-child" style={paddingTop}>
+            <p className={`v-mid ${smallFont} gray2 dib mr3 c-default`}>
+              <span>{`~${props.msg.author}`}</span>
+            </p>
+            <p className={`v-mid mono ${smallFont} gray2 dib`}>{timestamp}</p>
+            <p className={`v-mid mono ${smallFont} ml2 gray2 dib child dn-s`}>
+              {datestamp}
+            </p>
           </div>
+          {this.renderContent()}
         </div>
-      );
-    } else {
-      const timestamp = moment.unix(props.msg['time-sent'] / 1000).format('hh:mm');
-
-      return (
-        <div
-          className={'w-100 pr3 cf hide-child flex'}
-          style={{
-            minHeight: 'min-content'
-          }}
-        >
-          <p className="child pt2 pl2 pr1 mono f9 gray2 dib">{timestamp}</p>
-          <div className="fr f7 clamp-message white-d pr3 lh-copy" style={{ flexGrow: 1 }}>
-           {this.renderContent()}
-          </div>
-        </div>
-      );
-    }
+      </div>
+    );
   }
 }

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

@@ -147,7 +147,7 @@ export class PostInput extends Component {
             output: null
           }
         }
-      ]);
+      ], props.parentIndex);
 
       props.api.addPost(props.resource.ship, props.resource.name, post);
       this.editor.setValue('');
@@ -155,7 +155,7 @@ export class PostInput extends Component {
     }
 
     let message = this.getLetterType(editorMessage);
-    let post = props.api.createPost([message]);
+    let post = props.api.createPost([message], props.parentIndex);
     props.api.addPost(props.resource.ship, props.resource.name, post);
 
     // perf:

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

@@ -13,6 +13,8 @@ export class NodeTreeScreen extends Component {
   constructor(props) {
     super(props);
 
+    this.state = {};
+
     console.log(props);
 
     moment.updateLocale('en', {
@@ -28,18 +30,30 @@ export class NodeTreeScreen extends Component {
   }
 
   parentPost() {
+    const { props } = this;
     console.log(props);
+
+    const node = props.node;
+    if (!node) { return (<div></div>); }
+    
     return (
-      <div></div>
+      <div>
+        <Message
+          isParent={true}
+          key={node.index}
+          msg={node.post}
+        />
+      </div>
     );
   }
 
   postWindow() {
     const { props } = this;
 
-    //let graph = props.graph;
-    let graph = new Map();
+    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];
@@ -65,6 +79,22 @@ export class NodeTreeScreen extends Component {
     );
   }
 
+  replyModal() {
+    const { props, state } = this;
+
+    return (
+      <div>
+        <PostInput
+          api={props.api}
+          resource={props.resource}
+          owner={deSig(props.match.params.ship)}
+          placeholder="Message..."
+          parentIndex={props.parentIndex}
+        />
+      </div>
+    );
+  }
+
   render() {
     const { props } = this;
 
@@ -102,13 +132,8 @@ export class NodeTreeScreen extends Component {
             api={props.api}
           />
         </div>
-        <PostInput
-          api={props.api}
-          resource={props.resource}
-          owner={deSig(props.match.params.ship)}
-          placeholder="Message..."
-        />
         {this.parentPost()}
+        {this.replyModal()}
         {this.postWindow()}
       </div>
     );

pkg/interface/src/reducers/graph-update.js

@@ -65,6 +65,7 @@ export default class GraphReducer {
     //  is graph
     let converted = new OrderedMap();
     for (let i in node.children) {
+      console.log(i);
       let item = node.children[i];
       let index = item[0].split('/').slice(1).map((ind) => {
         return parseInt(ind, 10);
@@ -72,8 +73,10 @@ export default class GraphReducer {
 
       if (index.length === 0) { break; }
       
-      let node = this._processNode(item[1]);
-      converted.set(index[index.length - 1], node);
+      converted.set(
+        index[index.length - 1],
+        this._processNode(item[1])
+      );
     }
     node.children = converted;
     return node;
@@ -107,6 +110,9 @@ export default class GraphReducer {
         });
 
         if (index.length === 0) { return; }
+
+        //  TODO: support adding nodes with children
+        item[1].children = new Map();
         
         state.graphs[resource] = this._addNode(
           state.graphs[resource],