Refactor commentsReplies

ui/component/commentsReplies/index.js

@@ -7,7 +7,7 @@ import CommentsReplies from './view';
 const select = (state, props) => ({
   fetchedReplies: makeSelectRepliesForParentId(props.parentId)(state),
   claimIsMine: makeSelectClaimIsMine(props.uri)(state),
-  commentingEnabled: IS_WEB ? Boolean(selectUserVerifiedEmail(state)) : true,
+  userCanComment: IS_WEB ? Boolean(selectUserVerifiedEmail(state)) : true,
   myChannels: selectMyChannelClaims(state),
   isFetchingByParentId: selectIsFetchingCommentsByParentId(state),
 });

ui/component/commentsReplies/view.jsx

@@ -1,8 +1,8 @@
 // @flow
 import * as ICONS from 'constants/icons';
-import React from 'react';
-import Comment from 'component/comment';
 import Button from 'component/button';
+import Comment from 'component/comment';
+import React from 'react';
 import Spinner from 'component/spinner';
 
 type Props = {
@@ -12,13 +12,13 @@ type Props = {
   claimIsMine: boolean,
   myChannels: ?Array<ChannelClaim>,
   linkedCommentId?: string,
-  commentingEnabled: boolean,
+  userCanComment: boolean,
   threadDepth: number,
   numDirectReplies: number, // Total replies for parentId as reported by 'comment[replies]'. Includes blocked items.
   isFetchingByParentId: { [string]: boolean },
-  onShowMore?: () => void,
   hasMore: boolean,
   supportDisabled: boolean,
+  onShowMore?: () => void,
 };
 
 function CommentsReplies(props: Props) {
@@ -29,41 +29,20 @@ function CommentsReplies(props: Props) {
     claimIsMine,
     myChannels,
     linkedCommentId,
-    commentingEnabled,
+    userCanComment,
     threadDepth,
     numDirectReplies,
     isFetchingByParentId,
-    onShowMore,
     hasMore,
     supportDisabled,
+    onShowMore,
   } = props;
 
   const [isExpanded, setExpanded] = React.useState(true);
 
-  function showMore() {
+  return !numDirectReplies ? null : (
-    if (onShowMore) {
-      onShowMore();
-    }
-  }
-
-  // todo: implement comment_list --mine in SDK so redux can grab with selectCommentIsMine
-  function isMyComment(channelId: string) {
-    if (myChannels != null && channelId != null) {
-      for (let i = 0; i < myChannels.length; i++) {
-        if (myChannels[i].claim_id === channelId) {
-          return true;
-        }
-      }
-    }
-    return false;
-  }
-
-  const displayedComments = fetchedReplies;
-
-  return (
-    Boolean(numDirectReplies) && (
     <div className="comment__replies-container">
-        {Boolean(numDirectReplies) && !isExpanded && (
+      {!isExpanded ? (
         <div className="comment__actions--nested">
           <Button
             className="comment__action"
@@ -72,16 +51,13 @@ function CommentsReplies(props: Props) {
             icon={isExpanded ? ICONS.UP : ICONS.DOWN}
           />
         </div>
-        )}
+      ) : (
-        {isExpanded && (
-          <div>
         <div className="comment__replies">
           <Button className="comment__threadline" aria-label="Hide Replies" onClick={() => setExpanded(false)} />
 
           <ul className="comments--replies">
-                {displayedComments &&
+            {fetchedReplies &&
-                  displayedComments.map((comment) => {
+              fetchedReplies.map((comment) => (
-                    return (
                 <Comment
                   threadDepth={threadDepth}
                   uri={uri}
@@ -93,24 +69,31 @@ function CommentsReplies(props: Props) {
                   message={comment.comment}
                   timePosted={comment.timestamp * 1000}
                   claimIsMine={claimIsMine}
-                        commentIsMine={comment.channel_id && isMyComment(comment.channel_id)}
+                  commentIsMine={
+                    comment.channel_id &&
+                    myChannels &&
+                    myChannels.some(({ claim_id }) => claim_id === comment.channel_id)
+                  }
                   linkedCommentId={linkedCommentId}
-                        commentingEnabled={commentingEnabled}
+                  commentingEnabled={userCanComment}
                   supportAmount={comment.support_amount}
                   numDirectReplies={comment.replies}
                   isModerator={comment.is_moderator}
                   isGlobalMod={comment.is_global_mod}
                   supportDisabled={supportDisabled}
                 />
-                    );
+              ))}
-                  })}
           </ul>
         </div>
-          </div>
       )}
       {isExpanded && fetchedReplies && hasMore && (
         <div className="comment__actions--nested">
-            <Button button="link" label={__('Show more')} onClick={showMore} className="button--uri-indicator" />
+          <Button
+            button="link"
+            label={__('Show more')}
+            onClick={() => onShowMore && onShowMore()}
+            className="button--uri-indicator"
+          />
         </div>
       )}
       {isFetchingByParentId[parentId] && (
@@ -121,7 +104,6 @@ function CommentsReplies(props: Props) {
         </div>
       )}
     </div>
-    )
   );
 }