From 0246bea613e533481974594d97a5ab229f8ed3a9 Mon Sep 17 00:00:00 2001
From: Matilde Park <matilde@tlon.io>
Date: Fri, 20 Mar 2020 13:23:47 -0400
Subject: [PATCH] publish: add pending state for comments

---
 .../src/js/components/lib/comment-item.js     |  3 +-
 .../publish/src/js/components/lib/comments.js | 54 +++++++++++++++++--
 2 files changed, 52 insertions(+), 5 deletions(-)

diff --git a/pkg/interface/publish/src/js/components/lib/comment-item.js b/pkg/interface/publish/src/js/components/lib/comment-item.js
index 80215431bd..23a6b83a12 100644
--- a/pkg/interface/publish/src/js/components/lib/comment-item.js
+++ b/pkg/interface/publish/src/js/components/lib/comment-item.js
@@ -29,6 +29,7 @@ export class CommentItem extends Component {
     });
   }
   render() {
+    let pending = !!this.props.pending ? "o-60" : "";
     let commentData = this.props.comment[Object.keys(this.props.comment)[0]];
     let content = commentData.content.split("\n").map((line, i)=> {
       return (
@@ -55,7 +56,7 @@ export class CommentItem extends Component {
     }
 
     return (
-      <div>
+      <div className={pending}>
         <div className="flex mv3 bg-white bg-gray0-d">
         <Sigil
           ship={commentData.author}
diff --git a/pkg/interface/publish/src/js/components/lib/comments.js b/pkg/interface/publish/src/js/components/lib/comments.js
index 114d96a0b2..9ccc522278 100644
--- a/pkg/interface/publish/src/js/components/lib/comments.js
+++ b/pkg/interface/publish/src/js/components/lib/comments.js
@@ -1,17 +1,38 @@
 import React, { Component } from 'react'
 import { CommentItem } from './comment-item';
+import { dateToDa } from '/lib/util';
 
 export class Comments extends Component {
   constructor(props){
     super(props);
     this.state = {
       commentBody: '',
-      disabled: false
+      disabled: false,
+      pending: new Set()
     }
     this.commentSubmit = this.commentSubmit.bind(this);
     this.commentChange = this.commentChange.bind(this);
   }
- commentSubmit(evt){
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.comments && (
+      Object.keys(prevProps.comments[0]) !==
+      Object.keys(this.props.comments[0]))
+      ) {
+        let pendingSet = this.state.pending;
+        Object.keys(this.props.comments[0]).map((com) => {
+          let obj = this.props.comments[0][com];
+          for (let each of pendingSet.values()) {
+            if (obj.content === each["new-comment"].body) {
+              pendingSet.delete(each);
+              this.setState({ pending: pendingSet });
+            }
+          }
+        })
+      }
+    }
+
+  commentSubmit(evt){
    let comment = {
      "new-comment": {
        who: this.props.ship.slice(1),
@@ -21,13 +42,17 @@ export class Comments extends Component {
      }
    };
 
+   let pendingState = this.state.pending;
+   pendingState.add(comment);
+   this.setState({pending: pendingState});
+
    this.textArea.value = '';
    window.api.setSpinner(true);
-   this.setState({disabled: true});
+   this.setState({commentBody: ""});
    let submit = window.api.action("publish", "publish-action", comment);
    submit.then(() => {
      window.api.setSpinner(false);
-     this.setState({ disabled: false, commentBody: "" });
+     this.setState({ disabled: false });
     })
    }
 
@@ -41,6 +66,26 @@ export class Comments extends Component {
     if (!this.props.enabled) {
       return null;
     }
+
+    let pendingArray = Array.from(this.state.pending).map((com, i) => {
+      let da = dateToDa(new Date);
+      let comment = {
+        [da]: {
+          author: this.props.ship,
+          content: com["new-comment"].body,
+          "date-created": Math.round(new Date().getTime() / 1000)
+        }
+      }
+      return (
+        <CommentItem
+          comment={comment}
+          key={i}
+          contacts={this.props.contacts}
+          pending={true}
+        />
+      )
+    });
+
     let commentArray = this.props.comments.map((com, i) => {
       return (
         <CommentItem
@@ -78,6 +123,7 @@ export class Comments extends Component {
             Add comment
           </button>
         </div>
+        {pendingArray}
         {commentArray}
       </div>
     )