From 0ccf9f2c050efe5438f88aef1ee0bbb0ac417e7a Mon Sep 17 00:00:00 2001
From: infinite-persistence <inf.persistence@gmail.com>
Date: Thu, 30 Dec 2021 11:43:53 +0800
Subject: [PATCH] Handle removed livestream comments

---
 flow-typed/Comment.js                   |  1 +
 ui/component/livestreamComment/view.jsx |  7 ++++++-
 ui/constants/action_types.js            |  1 +
 ui/redux/actions/websocket.js           |  7 +++++++
 ui/redux/reducers/comments.js           | 12 ++++++++++++
 5 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/flow-typed/Comment.js b/flow-typed/Comment.js
index 31da50f4a..2a1856570 100644
--- a/flow-typed/Comment.js
+++ b/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 = {
diff --git a/ui/component/livestreamComment/view.jsx b/ui/component/livestreamComment/view.jsx
index 17e42e42c..bc6da6815 100644
--- a/ui/component/livestreamComment/view.jsx
+++ b/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>
diff --git a/ui/constants/action_types.js b/ui/constants/action_types.js
index 4f029e169..613e6bc43 100644
--- a/ui/constants/action_types.js
+++ b/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';
diff --git a/ui/redux/actions/websocket.js b/ui/redux/actions/websocket.js
index 78552ab18..4c87b58a5 100644
--- a/ui/redux/actions/websocket.js
+++ b/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 },
+      });
+    }
   });
 };
 
diff --git a/ui/redux/reducers/comments.js b/ui/redux/reducers/comments.js
index a050ecd3d..0c3acf00d 100644
--- a/ui/redux/reducers/comments.js
+++ b/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,