diff --git a/components/ArticleReply/ArticleReply.js b/components/ArticleReply/ArticleReply.js index abd86eae..20cad5b7 100644 --- 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 index e3a1cb81..d0b2a9cc 100644 --- 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 ( - - {articleReply.status === 'NORMAL' ? t`Delete` : t`Restore`} - + {articleReply.canUpdateStatus && ( + + {articleReply.status === 'NORMAL' ? t`Delete` : t`Restore`} + + )} + {canReportAbuse && ( + + )} ); }; +ReplyActions.fragments = { + ReplyActionsData, + ReplyActionsDataForUser, +}; + export default ReplyActions;