feat(article): add report button to article detail

components/ActionMenu/ReportAbuseMenuItem.js

@@ -24,7 +24,7 @@ export function useCanReportAbuse(itemUserId) {
 /**
  * @param {object} props
  * @param {string} props.userId - spammer's user ID
- * @param {'replyRequest' | 'articleReplyFeedback' | 'reply'} props.itemType - reported spam item type
+ * @param {'replyRequest' | 'articleReplyFeedback' | 'reply' | 'article'} props.itemType - reported spam item type
  * @param {string} props.itemId - reply ID for reply; article ID for replyRequest; article ID,reply ID (separated in comma) for article reply feedback.
  *
  * @returns {string} Pre-filled URL to the google form that reports spam.

components/CreateReplyRequestForm/CreateReplyRequestForm.js

@@ -12,10 +12,14 @@ import {
   Fab,
 } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
+import MoreVertIcon from '@material-ui/icons/MoreVert';
 import Avatar from 'components/AppLayout/Widgets/Avatar';
 import { CardContent } from 'components/Card';
 import { PenIcon } from 'components/icons';
 import Hint from 'components/NewReplySection/ReplyForm/Hint';
+import ReportAbuseMenuItem, {
+  useCanReportAbuse,
+} from 'components/ActionMenu/ReportAbuseMenuItem';
 import useCurrentUser from 'lib/useCurrentUser';
 import cx from 'clsx';
 
@@ -135,14 +139,17 @@ const SubmitButton = ({
 };
 
 const CreateReplyRequestForm = React.memo(
-  ({ articleId, requestedForReply, onNewReplyButtonClick }) => {
+  ({ articleId, articleUserId, requestedForReply, onNewReplyButtonClick }) => {
     const buttonRef = useRef(null);
     const [disabled, setDisabled] = useState(false);
     const [showForm, setShowForm] = useState(false);
     const [showFloatButton, setShowFloatButton] = useState(false);
     const [text, setText] = useState('');
 
     const [shareAnchor, setShareAnchor] = useState(null);
+    const [moreAnchor, setMoreAnchor] = useState(null);
+
+    const canReportAbuse = useCanReportAbuse();
 
     useEffect(() => {
       // restore from localStorage if applicable.
@@ -252,6 +259,17 @@ const CreateReplyRequestForm = React.memo(
               >
                 {t`Share`}
               </Button>
+              {canReportAbuse && (
+                <Button
+                  type="button"
+                  className={cx({ [classes.isButtonActive]: !!moreAnchor })}
+                  onClick={e => setMoreAnchor(e.currentTarget)}
+                  disableElevation
+                  style={{ flex: 0 }}
+                >
+                  <MoreVertIcon />
+                </Button>
+              )}
             </ButtonGroup>
             <Menu
               id="share-article-menu"
@@ -279,6 +297,28 @@ const CreateReplyRequestForm = React.memo(
                 {t`Facebook`}
               </MenuItem>
             </Menu>
+            <Menu
+              id="more-article-menu"
+              anchorEl={moreAnchor}
+              keepMounted
+              getContentAnchorEl={null}
+              open={!!moreAnchor}
+              onClose={() => setMoreAnchor(null)}
+              anchorOrigin={{
+                vertical: 'bottom',
+                horizontal: 'center',
+              }}
+              transformOrigin={{
+                vertical: 'top',
+                horizontal: 'center',
+              }}
+            >
+              <ReportAbuseMenuItem
+                itemType="article"
+                itemId={articleId}
+                userId={articleUserId}
+              />
+            </Menu>
           </Box>
         </CardContent>
         <Button

pages/article/[id].js

@@ -176,6 +176,9 @@ const LOAD_ARTICLE = gql`
           visit
         }
       }
+      user {
+        id
+      }
     }
   }
   ${Hyperlinks.fragments.HyperlinkData}
@@ -467,6 +470,7 @@ function ArticlePage() {
             <CreateReplyRequestForm
               requestedForReply={article.requestedForReply}
               articleId={article.id}
+              articleUserId={article.user.id}
               onNewReplyButtonClick={() => {
                 setShowForm(true);
                 // use setTimeout to make sure the form has shown