diff --git a/components/ActionMenu/ReportAbuseMenuItem.js b/components/ActionMenu/ReportAbuseMenuItem.js index eee37de0..23569e4b 100644 --- a/components/ActionMenu/ReportAbuseMenuItem.js +++ b/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. diff --git a/components/CreateReplyRequestForm/CreateReplyRequestForm.js b/components/CreateReplyRequestForm/CreateReplyRequestForm.js index a6a02de8..f5eb9d98 100644 --- a/components/CreateReplyRequestForm/CreateReplyRequestForm.js +++ b/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,7 +139,7 @@ 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); @@ -143,6 +147,9 @@ const CreateReplyRequestForm = React.memo( 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`} + {canReportAbuse && ( + + )} + setMoreAnchor(null)} + anchorOrigin={{ + vertical: 'bottom', + horizontal: 'center', + }} + transformOrigin={{ + vertical: 'top', + horizontal: 'center', + }} + > + +