fix: removed comment content empty for mods

aeharding · Nov 27, 2024 · b6aa59d · b6aa59d
1 parent 7f23909
commit b6aa59d
Show file tree

Hide file tree

Showing 7 changed files with 98 additions and 17 deletions.
diff --git a/src/features/comment/Comment.tsx b/src/features/comment/Comment.tsx
@@ -147,6 +147,7 @@ export default function Comment({
                           item={comment}
                           showTouchFriendlyLinks={!context}
                           mdClassName="collapse-md-margins"
+                          canModerate={canModerate}
                         />
                       )}
                       {context}

diff --git a/src/features/comment/CommentContent.tsx b/src/features/comment/CommentContent.tsx
@@ -1,34 +1,65 @@
+import { IonText } from "@ionic/react";
 import { Comment, Post } from "lemmy-js-client";
+import { useEffect } from "react";
 
-import { useAppSelector } from "#/store";
+import { ModeratorRole } from "#/features/moderation/useCanModerate";
+import { useAppDispatch, useAppSelector } from "#/store";
 
 import CommentLinks from "./CommentLinks";
 import CommentMarkdown from "./CommentMarkdown";
+import { getCommentContent, LOADING_CONTENT } from "./commentSlice";
 
 interface CommentContentProps {
   item: Comment | Post;
   showTouchFriendlyLinks?: boolean;
   mdClassName?: string;
+  canModerate?: ModeratorRole | undefined;
 }
 
 export default function CommentContent({
   item,
   showTouchFriendlyLinks = true,
   mdClassName,
+  canModerate,
 }: CommentContentProps) {
+  const dispatch = useAppDispatch();
   const touchFriendlyLinks = useAppSelector(
     (state) => state.settings.general.comments.touchFriendlyLinks,
   );
+  const removedCommentContent = useAppSelector(
+    (state) => state.comment.commentContentById[item.id],
+  );
+
+  const content = (() => {
+    // is post
+    if (!("content" in item)) return item.body ?? item.name;
+
+    if (item.content === "") {
+      return removedCommentContent ?? "";
+    }
+
+    return item.content;
+  })();
+
+  useEffect(() => {
+    if (!item.removed) return;
+    if (!("content" in item)) return; // only comments
+    if (content) return;
+    if (!canModerate) return;
+
+    dispatch(getCommentContent(item.id));
+  }, [item, content, dispatch, canModerate]);
+
+  if (content === LOADING_CONTENT)
+    return <IonText color="medium">Loading comment...</IonText>;
 
   return (
     <>
       <CommentMarkdown className={mdClassName} id={item.ap_id}>
-        {"content" in item ? item.content : (item.body ?? item.name)}
+        {content}
       </CommentMarkdown>
       {showTouchFriendlyLinks && touchFriendlyLinks && (
-        <CommentLinks
-          markdown={"content" in item ? item.content : (item.body ?? item.name)}
-        />
+        <CommentLinks markdown={content} />
       )}
     </>
   );

diff --git a/src/features/comment/commentSlice.ts b/src/features/comment/commentSlice.ts
@@ -1,4 +1,4 @@
-import { createSlice, PayloadAction } from "@reduxjs/toolkit";
+import { createAsyncThunk, createSlice, PayloadAction } from "@reduxjs/toolkit";
 import { Comment, CommentView } from "lemmy-js-client";
 
 import { clientSelector } from "#/features/auth/authSelectors";
@@ -10,11 +10,14 @@ import {
 import { getRemoteHandle } from "#/helpers/lemmy";
 import { AppDispatch, RootState } from "#/store";
 
+export const LOADING_CONTENT = -1;
+
 interface CommentState {
   commentCollapsedById: Record<string, boolean>;
   commentVotesById: Record<string, 1 | -1 | 0 | undefined>;
   commentSavedById: Record<string, boolean | undefined>;
   commentById: Record<string, Comment>;
+  commentContentById: Record<number, string | typeof LOADING_CONTENT>;
 }
 
 const initialState: CommentState = {
@@ -25,6 +28,9 @@ const initialState: CommentState = {
    * surgical changes received after user edits or deletes comment
    */
   commentById: {},
+
+  // https://github.com/LemmyNet/lemmy/issues/5230
+  commentContentById: {},
 };
 
 export const commentSlice = createSlice({
@@ -76,8 +82,23 @@ export const commentSlice = createSlice({
     ) => {
       state.commentSavedById[action.payload.commentId] = action.payload.saved;
     },
+    setCommentContent: (state, action: PayloadAction<Comment>) => {
+      state.commentContentById[action.payload.id] = action.payload.content;
+    },
     resetComments: () => initialState,
   },
+  extraReducers: (builder) => {
+    builder
+      .addCase(getCommentContent.fulfilled, (state, action) => {
+        state.commentContentById[action.meta.arg] = action.payload ?? "";
+      })
+      .addCase(getCommentContent.pending, (state, action) => {
+        state.commentContentById[action.meta.arg] = LOADING_CONTENT;
+      })
+      .addCase(getCommentContent.rejected, (state, action) => {
+        state.commentContentById[action.meta.arg] = "";
+      });
+  },
 });
 
 // Action creators are generated for each case reducer function
@@ -87,6 +108,7 @@ export const {
   updateCommentVote,
   updateCommentSaved,
   resetComments,
+  setCommentContent,
 } = commentSlice.actions;
 
 export default commentSlice.reducer;
@@ -172,16 +194,17 @@ export const editComment =
   };
 
 export const modRemoveComment =
-  (commentId: number, removed: boolean, reason?: string) =>
+  (comment: Comment, removed: boolean, reason?: string) =>
   async (dispatch: AppDispatch, getState: () => RootState) => {
     const response = await clientSelector(getState())?.removeComment({
-      comment_id: commentId,
+      comment_id: comment.id,
       removed,
       reason,
     });
 
+    dispatch(setCommentContent(comment));
     dispatch(mutatedComment(response.comment_view));
-    await dispatch(resolveCommentReport(commentId));
+    await dispatch(resolveCommentReport(comment.id));
   };
 
 export const modNukeCommentChain =
@@ -232,3 +255,25 @@ export const receivedComments =
       fetchTagsForHandles(comments.map((c) => getRemoteHandle(c.creator))),
     );
   };
+
+export const getCommentContent = createAsyncThunk(
+  "comment/getCommentContent",
+  async (commentId: number, thunkAPI) => {
+    const rootState = thunkAPI.getState() as RootState;
+    const client = clientSelector(rootState);
+
+    const log = await client.getModlog({ comment_id: commentId });
+
+    return log.removed_comments[0]?.comment.content;
+  },
+  {
+    condition: (commentId, { getState }) => {
+      const state = getState() as RootState;
+
+      if (state.comment.commentContentById[commentId] === LOADING_CONTENT)
+        return false;
+
+      return true;
+    },
+  },
+);
diff --git a/src/features/moderation/banner/RemovedBanner.tsx b/src/features/moderation/banner/RemovedBanner.tsx
@@ -30,7 +30,7 @@ export default function RemovedBanner({ itemView }: RemovedBannerProps) {
               dispatch(modRemovePost(itemView.post.id, false));
               presentToast(postApproved);
             } else {
-              await dispatch(modRemoveComment(itemView.comment.id, false));
+              await dispatch(modRemoveComment(itemView.comment, false));
               presentToast(commentApproved);
             }
           })();

diff --git a/src/features/moderation/useCommentModActions.tsx b/src/features/moderation/useCommentModActions.tsx
@@ -101,7 +101,7 @@ export default function useCommentModActions(commentView: CommentView) {
               icon: trashOutline,
               handler: () => {
                 (async () => {
-                  await dispatch(modRemoveComment(comment.id, true));
+                  await dispatch(modRemoveComment(comment, true));
 
                   presentToast(commentRemovedMod);
                 })();
@@ -112,7 +112,7 @@ export default function useCommentModActions(commentView: CommentView) {
               icon: checkmarkCircleOutline,
               handler: () => {
                 (async () => {
-                  await dispatch(modRemoveComment(comment.id, false));
+                  await dispatch(modRemoveComment(comment, false));
 
                   presentToast(commentApproved);
                 })();
@@ -130,9 +130,7 @@ export default function useCommentModActions(commentView: CommentView) {
                   cssClass: "mod",
                   handler: ({ reason }) => {
                     (async () => {
-                      await dispatch(
-                        modRemoveComment(comment.id, true, reason),
-                      );
+                      await dispatch(modRemoveComment(comment, true, reason));
 
                       presentToast(commentRemovedMod);
                     })();

diff --git a/src/features/moderation/useModZoneActions.tsx b/src/features/moderation/useModZoneActions.tsx
@@ -83,7 +83,7 @@ export default function useModZoneActions(props: UseModZoneActionsProps) {
         //       icon: shieldCheckmarkOutline,
         //       handler: () => {
         //         (async () => {
-        //           // await dispatch(modRemoveComment(comment.id, false));
+        //           // await dispatch(modRemoveComment(comment, false));
         //           // presentToast(commentApproved);
         //         })();
         //       },

diff --git a/src/features/shared/markdown/editing/modal/contents/ItemReplyingTo.tsx b/src/features/shared/markdown/editing/modal/contents/ItemReplyingTo.tsx
@@ -6,6 +6,7 @@ import CommentContent from "#/features/comment/CommentContent";
 import Ago from "#/features/labels/Ago";
 import Edited from "#/features/labels/Edited";
 import Vote from "#/features/labels/Vote";
+import useCanModerate from "#/features/moderation/useCanModerate";
 import { preventModalSwipeOnTextSelection } from "#/helpers/ionic";
 import { getHandle } from "#/helpers/lemmy";
 
@@ -16,6 +17,7 @@ interface ItemReplyingToProps {
 }
 
 export default function ItemReplyingTo({ item }: ItemReplyingToProps) {
+  const canModerate = useCanModerate(item.community);
   const payload = "comment" in item ? item.comment : item.post;
 
   return (
@@ -30,7 +32,11 @@ export default function ItemReplyingTo({ item }: ItemReplyingToProps) {
         {...preventModalSwipeOnTextSelection}
         className={styles.commentContentWrapper}
       >
-        <CommentContent item={payload} showTouchFriendlyLinks={false} />
+        <CommentContent
+          item={payload}
+          showTouchFriendlyLinks={false}
+          canModerate={canModerate}
+        />
       </div>
     </div>
   );