From 35d959208a6c03a0d4fed6468ec3e76266eb60e4 Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Tue, 8 Sep 2020 14:08:39 -0400
Subject: [PATCH] fix first comment on claim not showing instantly

---
 ui/component/commentsList/view.jsx   | 12 +++---------
 ui/redux/actions/comments.js         |  2 +-
 ui/redux/reducers/comments.js        |  1 +
 ui/redux/selectors/comments.js       |  4 ++++
 ui/scss/component/_notification.scss |  5 ++---
 5 files changed, 11 insertions(+), 13 deletions(-)

diff --git a/ui/component/commentsList/view.jsx b/ui/component/commentsList/view.jsx
index 5720305db..138de9c9f 100644
--- a/ui/component/commentsList/view.jsx
+++ b/ui/component/commentsList/view.jsx
@@ -102,14 +102,13 @@ function CommentList(props: Props) {
               displayedComments &&
               displayedComments.map(comment => {
                 return (
-                  <>
+                  <React.Fragment key={comment.comment_id}>
                     <Comment
                       uri={uri}
                       authorUri={comment.channel_url}
                       author={comment.channel_name}
                       claimId={comment.claim_id}
                       commentId={comment.comment_id}
-                      key={comment.comment_id}
                       message={comment.comment}
                       parentId={comment.parent_id || null}
                       timePosted={comment.timestamp * 1000}
@@ -117,13 +116,8 @@ function CommentList(props: Props) {
                       commentIsMine={comment.channel_id && isMyComment(comment.channel_id)}
                       linkedComment={linkedComment}
                     />
-                    <CommentsReplies
-                      uri={uri}
-                      parentId={comment.comment_id}
-                      linkedComment={linkedComment}
-                      key={comment.comment_id + 'replies'}
-                    />
-                  </>
+                    <CommentsReplies uri={uri} parentId={comment.comment_id} linkedComment={linkedComment} />
+                  </React.Fragment>
                 );
               })}
           </ul>
diff --git a/ui/redux/actions/comments.js b/ui/redux/actions/comments.js
index abf0dbd64..0aa2da0b4 100644
--- a/ui/redux/actions/comments.js
+++ b/ui/redux/actions/comments.js
@@ -83,11 +83,11 @@ export function doCommentCreate(
             uri,
             comment: result,
             claimId: claim_id,
+            uri,
           },
         });
       })
       .catch(error => {
-        console.log('error', error);
         dispatch({
           type: ACTIONS.COMMENT_CREATE_FAILED,
           data: error,
diff --git a/ui/redux/reducers/comments.js b/ui/redux/reducers/comments.js
index 5812aead0..c158d438f 100644
--- a/ui/redux/reducers/comments.js
+++ b/ui/redux/reducers/comments.js
@@ -31,6 +31,7 @@ export default handleActions(
       const byId = Object.assign({}, state.byId);
       const topLevelCommentsById = Object.assign({}, state.topLevelCommentsById); // was byId {ClaimId -> [commentIds...]}
       const repliesByParentId = Object.assign({}, state.repliesByParentId); // {ParentCommentID -> [commentIds...] } list of reply comments
+      const commentsByUri = Object.assign({}, state.commentsByUri);
       const comments = byId[claimId] || [];
       const newCommentIds = comments.slice();
       const commentsByUri = Object.assign({}, state.commentsByUri);
diff --git a/ui/redux/selectors/comments.js b/ui/redux/selectors/comments.js
index 81b9268f9..b8a6e2720 100644
--- a/ui/redux/selectors/comments.js
+++ b/ui/redux/selectors/comments.js
@@ -150,6 +150,10 @@ export const makeSelectTopLevelCommentsForUri = (uri: string) =>
 
       return comments
         ? comments.filter(comment => {
+            if (!comment) {
+              return false;
+            }
+
             const channelClaim = claimsById[comment.channel_id];
 
             // Return comment if `channelClaim` doesn't exist so the component knows to resolve the author
diff --git a/ui/scss/component/_notification.scss b/ui/scss/component/_notification.scss
index f728f1999..45c81cf0e 100644
--- a/ui/scss/component/_notification.scss
+++ b/ui/scss/component/_notification.scss
@@ -77,9 +77,8 @@
 }
 
 .notification__time {
-  @extend .help;
-  margin-bottom: 0;
-  margin-top: 0;
+  font-size: var(--font-small);
+  color: var(--color-text-help);
   margin-left: var(--spacing-s);
   flex-shrink: 0;
 }