Handle deleted comments

ui/component/commentCreate/index.js

@@ -7,7 +7,7 @@ import {
   doSendTip,
 } from 'lbry-redux';
 import { doOpenModal, doSetActiveChannel } from 'redux/actions/app';
-import { doCommentCreate, doFetchCreatorSettings } from 'redux/actions/comments';
+import { doCommentCreate, doFetchCreatorSettings, doCommentById } from 'redux/actions/comments';
 import { selectUserVerifiedEmail } from 'redux/selectors/user';
 import { selectActiveChannelClaim } from 'redux/selectors/app';
 import { selectSettingsByChannelId } from 'redux/selectors/comments';
@@ -43,6 +43,7 @@ const perform = (dispatch, ownProps) => ({
   sendTip: (params, callback, errorCallback) => dispatch(doSendTip(params, false, callback, errorCallback, false)),
   doToast: (options) => dispatch(doToast(options)),
   doFetchCreatorSettings: (channelClaimId) => dispatch(doFetchCreatorSettings(channelClaimId)),
+  fetchComment: (commentId) => dispatch(doCommentById(commentId, false)),
 });
 
 export default connect(select, perform)(CommentCreate);

ui/component/commentCreate/view.jsx

@@ -51,6 +51,8 @@ type Props = {
   doFetchCreatorSettings: (channelId: string) => Promise<any>,
   settingsByChannelId: { [channelId: string]: PerChannelSettings },
   setQuickReply: (any) => void,
+  fetchComment: (commentId: string) => Promise<any>,
+  shouldFetchComment: boolean,
 };
 
 export function CommentCreate(props: Props) {
@@ -75,6 +77,8 @@ export function CommentCreate(props: Props) {
     settingsByChannelId,
     supportDisabled,
     setQuickReply,
+    fetchComment,
+    shouldFetchComment,
   } = props;
   const buttonRef: ElementRef<any> = React.useRef();
   const {
@@ -94,7 +98,8 @@ export function CommentCreate(props: Props) {
   const charCount = commentValue.length;
   const [activeTab, setActiveTab] = React.useState('');
   const [tipError, setTipError] = React.useState();
-  const disabled = isSubmitting || isFetchingChannels || !commentValue.length;
+  const [deletedComment, setDeletedComment] = React.useState(false);
+  const disabled = deletedComment || isSubmitting || isFetchingChannels || !commentValue.length;
   const [shouldDisableReviewButton, setShouldDisableReviewButton] = React.useState();
   const channelId = getChannelIdFromClaim(claim);
   const channelSettings = channelId ? settingsByChannelId[channelId] : undefined;
@@ -103,6 +108,15 @@ export function CommentCreate(props: Props) {
   const minAmount = minTip || minSuper || 0;
   const minAmountMet = minAmount === 0 || tipAmount >= minAmount;
 
+  // Fetch top-level comments to identify if it has been deleted and can reply to it
+  React.useEffect(() => {
+    if (shouldFetchComment && fetchComment) {
+      fetchComment(parentId).then((result) => {
+        setDeletedComment(String(result).includes('Error'));
+      });
+    }
+  }, [fetchComment, shouldFetchComment, parentId]);
+
   const minAmountRef = React.useRef(minAmount);
   minAmountRef.current = minAmount;
 
@@ -568,6 +582,7 @@ export function CommentCreate(props: Props) {
             )}
           </>
         )}
+        {deletedComment && <div className="error__text">{__('This comment has been deleted.')}</div>}
         {MinAmountNotice}
       </div>
     </Form>

ui/component/notification/view.jsx

@@ -283,6 +283,7 @@ export default function Notification(props: Props) {
               onCancelReplying={() => setReplying(false)}
               setQuickReply={setQuickReply}
               supportDisabled
+              shouldFetchComment
             />
           )}
 

ui/redux/actions/comments.js

@@ -170,6 +170,8 @@ export function doCommentById(commentId: string, toastIfNotFound: boolean = true
         } else {
           devToast(dispatch, error.message);
         }
+
+        return error;
       });
   };
 }