LivestreamComment: pass Comment prop instead of individual values

The number of props to pass is getting out hand, so just pass the Comment object directly.

Also, moved the "is my comment" check into LivestreamComment, so we don't need to pass it as a prop from the parent.

ui/component/livestreamComment/index.js

@@ -1,10 +1,11 @@
 import { connect } from 'react-redux';
-import { selectStakedLevelForChannelUri, selectClaimForUri } from 'redux/selectors/claims';
+import { selectStakedLevelForChannelUri, selectClaimForUri, selectMyClaimIdsRaw } from 'redux/selectors/claims';
 import LivestreamComment from './view';
 
 const select = (state, props) => ({
   claim: selectClaimForUri(state, props.uri),
   stakedLevel: selectStakedLevelForChannelUri(state, props.authorUri),
+  myChannelIds: selectMyClaimIdsRaw(state),
 });
 
 export default connect(select)(LivestreamComment);

ui/component/livestreamComment/view.jsx

@@ -15,42 +15,30 @@ import OptimizedImage from 'component/optimizedImage';
 import { parseSticker } from 'util/comments';
 
 type Props = {
+  comment: Comment,
   uri: string,
+  // --- redux:
   claim: StreamClaim,
-  authorUri: string,
-  commentId: string,
-  message: string,
-  commentIsMine: boolean,
   stakedLevel: number,
-  supportAmount: number,
-  isModerator: boolean,
-  isGlobalMod: boolean,
-  isFiat: boolean,
-  isPinned: boolean,
+  myChannelIds: ?Array<string>,
 };
 
 function LivestreamComment(props: Props) {
-  const {
-    claim,
-    uri,
-    authorUri,
-    message,
-    commentIsMine,
-    commentId,
-    stakedLevel,
-    supportAmount,
-    isModerator,
-    isGlobalMod,
-    isFiat,
-    isPinned,
-  } = props;
+  const { comment, claim, uri, stakedLevel, myChannelIds } = props;
+  const { channel_url: authorUri, comment: message, support_amount: supportAmount } = comment;
 
   const [hasUserMention, setUserMention] = React.useState(false);
+  const commentIsMine = comment.channel_id && isMyComment(comment.channel_id);
 
   const commentByOwnerOfContent = claim && claim.signing_channel && claim.signing_channel.permanent_url === authorUri;
-  const { claimName } = parseURI(authorUri);
+  const { claimName } = parseURI(authorUri || '');
   const stickerFromMessage = parseSticker(message);
 
+  // todo: implement comment_list --mine in SDK so redux can grab with selectCommentIsMine
+  function isMyComment(channelId: string) {
+    return myChannelIds ? myChannelIds.includes(channelId) : false;
+  }
+
   return (
     <li
       className={classnames('livestream-comment', {
@@ -62,7 +50,12 @@ function LivestreamComment(props: Props) {
       {supportAmount > 0 && (
         <div className="super-chat livestream-superchat__banner">
           <div className="livestream-superchat__banner-corner" />
-          <CreditAmount isFiat={isFiat} amount={supportAmount} superChat className="livestream-superchat__amount" />
+          <CreditAmount
+            isFiat={comment.is_fiat}
+            amount={supportAmount}
+            superChat
+            className="livestream-superchat__amount"
+          />
         </div>
       )}
 
@@ -73,7 +66,7 @@ function LivestreamComment(props: Props) {
             'livestream-comment__info--sticker': Boolean(stickerFromMessage),
           })}
         >
-          {isGlobalMod && (
+          {comment.is_global_mod && (
             <Tooltip title={__('Admin')}>
               <span className="comment__badge comment__badge--global-mod">
                 <Icon icon={ICONS.BADGE_MOD} size={16} />
@@ -81,7 +74,7 @@ function LivestreamComment(props: Props) {
             </Tooltip>
           )}
 
-          {isModerator && (
+          {comment.is_moderator && (
             <Tooltip title={__('Moderator')}>
               <span className="comment__badge comment__badge--mod">
                 <Icon icon={ICONS.BADGE_MOD} size={16} />
@@ -107,7 +100,7 @@ function LivestreamComment(props: Props) {
             {claimName}
           </Button>
 
-          {isPinned && (
+          {comment.is_pinned && (
             <span className="comment__pin">
               <Icon icon={ICONS.PIN} size={14} />
               {__('Pinned')}
@@ -139,10 +132,10 @@ function LivestreamComment(props: Props) {
           </MenuButton>
           <CommentMenuList
             uri={uri}
-            commentId={commentId}
+            commentId={comment.comment_id}
             authorUri={authorUri}
             commentIsMine={commentIsMine}
-            isPinned={isPinned}
+            isPinned={comment.is_pinned}
             disableRemove={supportAmount > 0}
             isTopLevel
             disableEdit

ui/component/livestreamComments/index.js

@@ -1,7 +1,7 @@
 import { connect } from 'react-redux';
 import { MAX_LIVESTREAM_COMMENTS } from 'constants/livestream';
 import { doResolveUris } from 'redux/actions/claims';
-import { selectClaimForUri, selectMyClaimIdsRaw } from 'redux/selectors/claims';
+import { selectClaimForUri } from 'redux/selectors/claims';
 import { doCommentList, doSuperChatList } from 'redux/actions/comments';
 import {
   selectTopLevelCommentsForUri,
@@ -20,7 +20,6 @@ const select = (state, props) => ({
   fetchingComments: selectIsFetchingComments(state),
   superChats: selectSuperChatsForUri(state, props.uri),
   superChatsTotalAmount: selectSuperChatTotalAmountForUri(state, props.uri),
-  myChannelIds: selectMyClaimIdsRaw(state),
 });
 
 export default connect(select, {

ui/component/livestreamComments/view.jsx

@@ -23,7 +23,6 @@ type Props = {
   fetchingComments: boolean,
   doSuperChatList: (string) => void,
   superChats: Array<Comment>,
-  myChannelIds: ?Array<string>,
   doResolveUris: (Array<string>, boolean) => void,
 };
 
@@ -44,7 +43,6 @@ export default function LivestreamComments(props: Props) {
     doCommentList,
     fetchingComments,
     doSuperChatList,
-    myChannelIds,
     superChats: superChatsByAmount,
     doResolveUris,
   } = props;
@@ -180,11 +178,6 @@ export default function LivestreamComments(props: Props) {
     });
   }
 
-  // todo: implement comment_list --mine in SDK so redux can grab with selectCommentIsMine
-  function isMyComment(channelId: string) {
-    return myChannelIds ? myChannelIds.includes(channelId) : false;
-  }
-
   if (!claim) {
     return null;
   }
@@ -293,19 +286,7 @@ export default function LivestreamComments(props: Props) {
 
           {pinnedComment && showPinned && viewMode === VIEW_MODES.CHAT && (
             <div className="livestream-pinned__wrapper">
-              <LivestreamComment
-                key={pinnedComment.comment_id}
-                uri={uri}
-                authorUri={pinnedComment.channel_url}
-                commentId={pinnedComment.comment_id}
-                message={pinnedComment.comment}
-                supportAmount={pinnedComment.support_amount}
-                isModerator={pinnedComment.is_moderator}
-                isGlobalMod={pinnedComment.is_global_mod}
-                isFiat={pinnedComment.is_fiat}
-                isPinned={pinnedComment.is_pinned}
-                commentIsMine={pinnedComment.channel_id && isMyComment(pinnedComment.channel_id)}
-              />
+              <LivestreamComment comment={pinnedComment} key={pinnedComment.comment_id} uri={uri} />
               <Button
                 title={__('Dismiss pinned comment')}
                 button="inverse"
@@ -321,18 +302,7 @@ export default function LivestreamComments(props: Props) {
             <div className="livestream__comments">
               {viewMode === VIEW_MODES.CHAT &&
                 commentsToDisplay.map((comment) => (
-                  <LivestreamComment
-                    key={comment.comment_id}
-                    uri={uri}
-                    authorUri={comment.channel_url}
-                    commentId={comment.comment_id}
-                    message={comment.comment}
-                    supportAmount={comment.support_amount}
-                    isModerator={comment.is_moderator}
-                    isGlobalMod={comment.is_global_mod}
-                    isFiat={comment.is_fiat}
-                    commentIsMine={comment.channel_id && isMyComment(comment.channel_id)}
-                  />
+                  <LivestreamComment comment={comment} key={comment.comment_id} uri={uri} />
                 ))}
 
               {viewMode === VIEW_MODES.SUPERCHAT && resolvingSuperChat && (
@@ -345,18 +315,7 @@ export default function LivestreamComments(props: Props) {
                 !resolvingSuperChat &&
                 superChatsReversed &&
                 superChatsReversed.map((comment) => (
-                  <LivestreamComment
-                    key={comment.comment_id}
-                    uri={uri}
-                    authorUri={comment.channel_url}
-                    commentId={comment.comment_id}
-                    message={comment.comment}
-                    supportAmount={comment.support_amount}
-                    isModerator={comment.is_moderator}
-                    isGlobalMod={comment.is_global_mod}
-                    isFiat={comment.is_fiat}
-                    commentIsMine={comment.channel_id && isMyComment(comment.channel_id)}
-                  />
+                  <LivestreamComment comment={comment} key={comment.comment_id} uri={uri} />
                 ))}
             </div>
           ) : (