Handle removed livestream comments

flow-typed/Comment.js

@@ -18,6 +18,7 @@ declare type Comment = {
   is_creator: boolean,
   is_global_mod: boolean,
   is_fiat?: boolean,
+  removed?: boolean,
 };
 
 declare type PerChannelSettings = {

ui/component/livestreamComment/view.jsx

@@ -2,6 +2,7 @@
 import * as ICONS from 'constants/icons';
 import React from 'react';
 import { parseURI } from 'util/lbryURI';
+import Empty from 'component/common/empty';
 import MarkdownPreview from 'component/common/markdown-preview';
 import Tooltip from 'component/common/tooltip';
 import ChannelThumbnail from 'component/channelThumbnail';
@@ -107,7 +108,11 @@ function LivestreamComment(props: Props) {
             </span>
           )}
 
-          {stickerFromMessage ? (
+          {comment.removed ? (
+            <div className="livestream-comment__text">
+              <Empty text={__('[Removed]')} />
+            </div>
+          ) : stickerFromMessage ? (
             <div className="sticker__comment">
               <OptimizedImage src={stickerFromMessage.url} waitLoad loading="lazy" />
             </div>

ui/constants/action_types.js

@@ -392,6 +392,7 @@ export const COMMENT_REACT_FAILED = 'COMMENT_REACT_FAILED';
 export const COMMENT_PIN_STARTED = 'COMMENT_PIN_STARTED';
 export const COMMENT_PIN_COMPLETED = 'COMMENT_PIN_COMPLETED';
 export const COMMENT_PIN_FAILED = 'COMMENT_PIN_FAILED';
+export const COMMENT_MARK_AS_REMOVED = 'COMMENT_MARK_AS_REMOVED';
 export const COMMENT_MODERATION_BLOCK_LIST_STARTED = 'COMMENT_MODERATION_BLOCK_LIST_STARTED';
 export const COMMENT_MODERATION_BLOCK_LIST_COMPLETED = 'COMMENT_MODERATION_BLOCK_LIST_COMPLETED';
 export const COMMENT_MODERATION_BLOCK_LIST_FAILED = 'COMMENT_MODERATION_BLOCK_LIST_FAILED';

ui/redux/actions/websocket.js

@@ -121,6 +121,13 @@ export const doCommentSocketConnect = (uri, claimId) => (dispatch) => {
         },
       });
     }
+    if (response.type === 'removed') {
+      const { comment_id } = response.data.comment;
+      dispatch({
+        type: ACTIONS.COMMENT_MARK_AS_REMOVED,
+        data: { comment_id },
+      });
+    }
   });
 };
 

ui/redux/reducers/comments.js

@@ -697,6 +697,18 @@ export default handleActions(
       };
     },
 
+    [ACTIONS.COMMENT_MARK_AS_REMOVED]: (state: CommentsState, action: any) => {
+      const { comment_id } = action.data;
+      const commentById = Object.assign({}, state.commentById);
+
+      if (!commentById[comment_id]) {
+        return state;
+      }
+
+      commentById[comment_id] = { ...commentById[comment_id], removed: true };
+      return { ...state, commentById };
+    },
+
     [ACTIONS.COMMENT_MODERATION_BLOCK_LIST_STARTED]: (state: CommentsState, action: any) => ({
       ...state,
       fetchingModerationBlockList: true,