[ArticleReply] add report abuse button and load required data

cofacts · Jan 23, 2022 · 7b3cf40 · 7b3cf40
1 parent 35b067c
commit 7b3cf40
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 13 deletions.
diff --git a/components/ArticleReply/ArticleReply.js b/components/ArticleReply/ArticleReply.js
@@ -56,12 +56,14 @@ const ArticleReplyData = gql`
     }
     ...ArticleReplySummaryData
     ...ArticleReplyFeedbackControlData
+    ...ReplyActionsData
   }
   ${Hyperlinks.fragments.HyperlinkData}
   ${ArticleReplyFeedbackControl.fragments.ArticleReplyFeedbackControlData}
   ${ReplyInfo.fragments.replyInfo}
   ${Avatar.fragments.AvatarData}
   ${ArticleReplySummary.fragments.ArticleReplySummaryData}
+  ${ReplyActions.fragments.ReplyActionsData}
 `;
 
 const ArticleReplyForUser = gql`
@@ -71,9 +73,11 @@ const ArticleReplyForUser = gql`
     replyId
     canUpdateStatus
     ...ArticleReplyFeedbackControlDataForUser
+    ...ReplyActionsDataForUser
   }
   ${ArticleReplyFeedbackControl.fragments
     .ArticleReplyFeedbackControlDataForUser}
+  ${ReplyActions.fragments.ReplyActionsDataForUser}
 `;
 
 const ArticleReply = React.memo(({ articleReply }) => {

diff --git a/components/ArticleReply/ReplyActions.js b/components/ArticleReply/ReplyActions.js
@@ -3,9 +3,27 @@ import gql from 'graphql-tag';
 import { useMutation } from '@apollo/react-hooks';
 import { t } from 'ttag';
 
-import ActionMenu from 'components/ActionMenu';
+import ActionMenu, {
+  ReportAbuseMenuItem,
+  useCanReportAbuse,
+} from 'components/ActionMenu';
 import { MenuItem } from '@material-ui/core';
 
+const ReplyActionsData = gql`
+  fragment ReplyActionsData on ArticleReply {
+    articleId
+    replyId
+    userId
+    status
+  }
+`;
+
+const ReplyActionsDataForUser = gql`
+  fragment ReplyActionsDataForUser on ArticleReply {
+    canUpdateStatus
+  }
+`;
+
 const UPDATE_ARTICLE_REPLY_STATUS = gql`
   mutation UpdateArticleReplyStatus(
     $articleId: String!
@@ -17,14 +35,17 @@ const UPDATE_ARTICLE_REPLY_STATUS = gql`
       replyId: $replyId
       status: $status
     ) {
-      articleId
-      replyId
-      status
+      ...ReplyActionsData
+      ...ReplyActionsDataForUser
     }
+    ${ReplyActionsData}
+    ${ReplyActionsDataForUser}
   }
 `;
 
 const ReplyActions = ({ articleReply }) => {
+  const canReportAbuse = useCanReportAbuse(articleReply.userId);
+
   const [
     updateArticleReplyStatus,
     { loading: updatingArticleReplyStatus },
@@ -50,20 +71,34 @@ const ReplyActions = ({ articleReply }) => {
     });
   }, [updateArticleReplyStatus]);
 
-  if (!articleReply.canUpdateStatus) return null;
+  if (!articleReply.canUpdateStatus && !canReportAbuse) return null;
 
   return (
     <ActionMenu>
-      <MenuItem
-        disabled={updatingArticleReplyStatus}
-        onClick={
-          articleReply.status === 'NORMAL' ? handleDelete : handleRestore
-        }
-      >
-        {articleReply.status === 'NORMAL' ? t`Delete` : t`Restore`}
-      </MenuItem>
+      {articleReply.canUpdateStatus && (
+        <MenuItem
+          disabled={updatingArticleReplyStatus}
+          onClick={
+            articleReply.status === 'NORMAL' ? handleDelete : handleRestore
+          }
+        >
+          {articleReply.status === 'NORMAL' ? t`Delete` : t`Restore`}
+        </MenuItem>
+      )}
+      {canReportAbuse && (
+        <ReportAbuseMenuItem
+          itemId={articleReply.replyId}
+          itemType="reply"
+          userId={articleReply.userId}
+        />
+      )}
     </ActionMenu>
   );
 };
 
+ReplyActions.fragments = {
+  ReplyActionsData,
+  ReplyActionsDataForUser,
+};
+
 export default ReplyActions;