[Glitch] Add collection report modal

Port 919b1e69b8 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>

app/javascript/flavours/glitch/features/collections/detail/collection_menu.tsx

@@ -2,11 +2,13 @@ import { useCallback, useMemo } from 'react';
 
 import { defineMessages, useIntl } from 'react-intl';
 
+import { useAccount } from '@/flavours/glitch/hooks/useAccount';
 import MoreVertIcon from '@/material-icons/400-24px/more_vert.svg?react';
 import { openModal } from 'flavours/glitch/actions/modal';
 import type { ApiCollectionJSON } from 'flavours/glitch/api_types/collections';
 import { Dropdown } from 'flavours/glitch/components/dropdown_menu';
 import { IconButton } from 'flavours/glitch/components/icon_button';
+import { me } from 'flavours/glitch/initial_state';
 import { useAppDispatch } from 'flavours/glitch/store';
 
 import { messages as editorMessages } from '../editor';
@@ -16,10 +18,18 @@ const messages = defineMessages({
     id: 'collections.view_collection',
     defaultMessage: 'View collection',
   },
+  viewOtherCollections: {
+    id: 'collections.view_other_collections_by_user',
+    defaultMessage: 'View other collections by this user',
+  },
   delete: {
     id: 'collections.delete_collection',
     defaultMessage: 'Delete collection',
   },
+  report: {
+    id: 'collections.report_collection',
+    defaultMessage: 'Report this collection',
+  },
   more: { id: 'status.more', defaultMessage: 'More' },
 });
 
@@ -31,9 +41,11 @@ export const CollectionMenu: React.FC<{
   const dispatch = useAppDispatch();
   const intl = useIntl();
 
-  const { id, name } = collection;
+  const { id, name, account_id } = collection;
+  const isOwnCollection = account_id === me;
+  const ownerAccount = useAccount(account_id);
 
-  const handleDeleteClick = useCallback(() => {
+  const openDeleteConfirmation = useCallback(() => {
     dispatch(
       openModal({
         modalType: 'CONFIRM_DELETE_COLLECTION',
@@ -45,34 +57,69 @@ export const CollectionMenu: React.FC<{
     );
   }, [dispatch, id, name]);
 
-  const menu = useMemo(() => {
-    const commonItems = [
-      {
-        text: intl.formatMessage(editorMessages.manageAccounts),
-        to: `/collections/${id}/edit`,
-      },
-      {
-        text: intl.formatMessage(editorMessages.editDetails),
-        to: `/collections/${id}/edit/details`,
-      },
-      null,
-      {
-        text: intl.formatMessage(messages.delete),
-        action: handleDeleteClick,
-        dangerous: true,
-      },
-    ];
+  const openReportModal = useCallback(() => {
+    dispatch(
+      openModal({
+        modalType: 'REPORT_COLLECTION',
+        modalProps: {
+          collection,
+        },
+      }),
+    );
+  }, [collection, dispatch]);
 
-    if (context === 'list') {
-      return [
-        { text: intl.formatMessage(messages.view), to: `/collections/${id}` },
+  const menu = useMemo(() => {
+    if (isOwnCollection) {
+      const commonItems = [
+        {
+          text: intl.formatMessage(editorMessages.manageAccounts),
+          to: `/collections/${id}/edit`,
+        },
+        {
+          text: intl.formatMessage(editorMessages.editDetails),
+          to: `/collections/${id}/edit/details`,
+        },
         null,
-        ...commonItems,
+        {
+          text: intl.formatMessage(messages.delete),
+          action: openDeleteConfirmation,
+          dangerous: true,
+        },
+      ];
+
+      if (context === 'list') {
+        return [
+          { text: intl.formatMessage(messages.view), to: `/collections/${id}` },
+          null,
+          ...commonItems,
+        ];
+      } else {
+        return commonItems;
+      }
+    } else if (ownerAccount) {
+      return [
+        {
+          text: intl.formatMessage(messages.viewOtherCollections),
+          to: `/@${ownerAccount.acct}/featured`,
+        },
+        null,
+        {
+          text: intl.formatMessage(messages.report),
+          action: openReportModal,
+        },
       ];
     } else {
-      return commonItems;
+      return [];
     }
-  }, [intl, id, handleDeleteClick, context]);
+  }, [
+    isOwnCollection,
+    intl,
+    id,
+    openDeleteConfirmation,
+    context,
+    ownerAccount,
+    openReportModal,
+  ]);
 
   return (
     <Dropdown scrollKey='collections' items={menu}>

app/javascript/flavours/glitch/features/collections/detail/index.tsx

@@ -79,7 +79,7 @@ const CollectionHeader: React.FC<{ collection: ApiCollectionJSON }> = ({
   collection,
 }) => {
   const intl = useIntl();
-  const { name, description, tag } = collection;
+  const { name, description, tag, account_id } = collection;
   const dispatch = useAppDispatch();
 
   const handleShare = useCallback(() => {
@@ -114,7 +114,7 @@ const CollectionHeader: React.FC<{ collection: ApiCollectionJSON }> = ({
       {description && <p className={classes.description}>{description}</p>}
       <AuthorNote id={collection.account_id} />
       <CollectionMetaData
-        extended
+        extended={account_id === me}
         collection={collection}
         className={classes.metaData}
       />

app/javascript/flavours/glitch/features/report/comment.jsx

@@ -1,121 +0,0 @@
-import PropTypes from 'prop-types';
-import { useCallback, useEffect, useRef } from 'react';
-
-import { useIntl, defineMessages, FormattedMessage } from 'react-intl';
-
-import { createSelector } from '@reduxjs/toolkit';
-import { OrderedSet, List as ImmutableList } from 'immutable';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import { shallowEqual } from 'react-redux';
-
-import Toggle from 'react-toggle';
-
-import { fetchAccount } from 'flavours/glitch/actions/accounts';
-import { Button } from 'flavours/glitch/components/button';
-import { useAppDispatch, useAppSelector } from 'flavours/glitch/store';
-
-const messages = defineMessages({
-  placeholder: { id: 'report.placeholder', defaultMessage: 'Type or paste additional comments' },
-});
-
-const selectRepliedToAccountIds = createSelector(
-  [
-    (state) => state.get('statuses'),
-    (_, statusIds) => statusIds,
-  ],
-  (statusesMap, statusIds) => statusIds.map((statusId) => statusesMap.getIn([statusId, 'in_reply_to_account_id'])),
-  {
-    resultEqualityCheck: shallowEqual,
-  }
-);
-
-const Comment = ({ comment, domain, statusIds, isRemote, isSubmitting, selectedDomains, onSubmit, onChangeComment, onToggleDomain }) => {
-  const intl = useIntl();
-
-  const dispatch = useAppDispatch();
-  const loadedRef = useRef(false);
-
-  const handleClick = useCallback(() => onSubmit(), [onSubmit]);
-  const handleChange = useCallback((e) => onChangeComment(e.target.value), [onChangeComment]);
-  const handleToggleDomain = useCallback(e => onToggleDomain(e.target.value, e.target.checked), [onToggleDomain]);
-
-  const handleKeyDown = useCallback((e) => {
-    if (e.keyCode === 13 && (e.ctrlKey || e.metaKey)) {
-      handleClick();
-    }
-  }, [handleClick]);
-
-  // Memoize accountIds since we don't want it to trigger `useEffect` on each render
-  const accountIds = useAppSelector((state) => domain ? selectRepliedToAccountIds(state, statusIds) : ImmutableList());
-
-  // While we could memoize `availableDomains`, it is pretty inexpensive to recompute
-  const accountsMap = useAppSelector((state) => state.get('accounts'));
-  const availableDomains = domain ? OrderedSet([domain]).union(accountIds.map((accountId) => accountsMap.getIn([accountId, 'acct'], '').split('@')[1]).filter(domain => !!domain)) : OrderedSet();
-
-  useEffect(() => {
-    if (loadedRef.current) {
-      return;
-    }
-
-    loadedRef.current = true;
-
-    // First, pre-select known domains
-    availableDomains.forEach((domain) => {
-      onToggleDomain(domain, true);
-    });
-
-    // Then, fetch missing replied-to accounts
-    const unknownAccounts = OrderedSet(accountIds.filter(accountId => accountId && !accountsMap.has(accountId)));
-    unknownAccounts.forEach((accountId) => {
-      dispatch(fetchAccount(accountId));
-    });
-  });
-
-  return (
-    <>
-      <h3 className='report-dialog-modal__title'><FormattedMessage id='report.comment.title' defaultMessage='Is there anything else you think we should know?' /></h3>
-
-      <textarea
-        className='report-dialog-modal__textarea'
-        placeholder={intl.formatMessage(messages.placeholder)}
-        value={comment}
-        onChange={handleChange}
-        onKeyDown={handleKeyDown}
-        disabled={isSubmitting}
-      />
-
-      {isRemote && (
-        <>
-          <p className='report-dialog-modal__lead'><FormattedMessage id='report.forward_hint' defaultMessage='The account is from another server. Send an anonymized copy of the report there as well?' /></p>
-
-          { availableDomains.map((domain) => (
-            <label className='report-dialog-modal__toggle' key={`toggle-${domain}`}>
-              <Toggle checked={selectedDomains.includes(domain)} disabled={isSubmitting} onChange={handleToggleDomain} value={domain} />
-              <FormattedMessage id='report.forward' defaultMessage='Forward to {target}' values={{ target: domain }} />
-            </label>
-          ))}
-        </>
-      )}
-
-      <div className='flex-spacer' />
-
-      <div className='report-dialog-modal__actions'>
-        <Button onClick={handleClick} disabled={isSubmitting}><FormattedMessage id='report.submit' defaultMessage='Submit report' /></Button>
-      </div>
-    </>
-  );
-};
-
-Comment.propTypes = {
-  comment: PropTypes.string.isRequired,
-  domain: PropTypes.string,
-  statusIds: ImmutablePropTypes.list.isRequired,
-  isRemote: PropTypes.bool,
-  isSubmitting: PropTypes.bool,
-  selectedDomains: ImmutablePropTypes.set.isRequired,
-  onSubmit: PropTypes.func.isRequired,
-  onChangeComment: PropTypes.func.isRequired,
-  onToggleDomain: PropTypes.func.isRequired,
-};
-
-export default Comment;

app/javascript/flavours/glitch/features/report/comment.tsx

@@ -0,0 +1,217 @@
+import { useCallback, useEffect, useId, useRef } from 'react';
+
+import { useIntl, defineMessages, FormattedMessage } from 'react-intl';
+
+import type { Map } from 'immutable';
+import { OrderedSet } from 'immutable';
+import { shallowEqual } from 'react-redux';
+
+import Toggle from 'react-toggle';
+
+import { fetchAccount } from 'flavours/glitch/actions/accounts';
+import { Button } from 'flavours/glitch/components/button';
+import type { Status } from 'flavours/glitch/models/status';
+import type { RootState } from 'flavours/glitch/store';
+import {
+  createAppSelector,
+  useAppDispatch,
+  useAppSelector,
+} from 'flavours/glitch/store';
+
+const messages = defineMessages({
+  placeholder: {
+    id: 'report.placeholder',
+    defaultMessage: 'Type or paste additional comments',
+  },
+});
+
+const selectRepliedToAccountIds = createAppSelector(
+  [
+    (state: RootState) => state.statuses,
+    (_: unknown, statusIds: string[]) => statusIds,
+  ],
+  (statusesMap: Map<string, Status>, statusIds: string[]) =>
+    statusIds.map(
+      (statusId) =>
+        statusesMap.getIn([statusId, 'in_reply_to_account_id']) as string,
+    ),
+  {
+    memoizeOptions: {
+      resultEqualityCheck: shallowEqual,
+    },
+  },
+);
+
+interface Props {
+  modalTitle?: React.ReactNode;
+  comment: string;
+  domain?: string;
+  statusIds: string[];
+  isRemote?: boolean;
+  isSubmitting?: boolean;
+  selectedDomains: string[];
+  submitError?: React.ReactNode;
+  onSubmit: () => void;
+  onChangeComment: (newComment: string) => void;
+  onToggleDomain: (toggledDomain: string, checked: boolean) => void;
+}
+
+const Comment: React.FC<Props> = ({
+  modalTitle,
+  comment,
+  domain,
+  statusIds,
+  isRemote,
+  isSubmitting,
+  selectedDomains,
+  submitError,
+  onSubmit,
+  onChangeComment,
+  onToggleDomain,
+}) => {
+  const intl = useIntl();
+
+  const dispatch = useAppDispatch();
+  const loadedRef = useRef(false);
+
+  const handleSubmit = useCallback(() => {
+    onSubmit();
+  }, [onSubmit]);
+
+  const handleChange = useCallback(
+    (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+      onChangeComment(e.target.value);
+    },
+    [onChangeComment],
+  );
+
+  const handleToggleDomain = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      onToggleDomain(e.target.value, e.target.checked);
+    },
+    [onToggleDomain],
+  );
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
+        handleSubmit();
+      }
+    },
+    [handleSubmit],
+  );
+
+  // Memoize accountIds since we don't want it to trigger `useEffect` on each render
+  const accountIds = useAppSelector((state) =>
+    domain ? selectRepliedToAccountIds(state, statusIds) : [],
+  );
+
+  // While we could memoize `availableDomains`, it is pretty inexpensive to recompute
+  const accountsMap = useAppSelector((state) => state.accounts);
+
+  const availableDomains = domain
+    ? OrderedSet([domain]).union(
+        accountIds
+          .map(
+            (accountId) =>
+              (accountsMap.getIn([accountId, 'acct'], '') as string).split(
+                '@',
+              )[1],
+          )
+          .filter((domain): domain is string => !!domain),
+      )
+    : OrderedSet<string>();
+
+  useEffect(() => {
+    if (loadedRef.current) {
+      return;
+    }
+
+    loadedRef.current = true;
+
+    // First, pre-select known domains
+    availableDomains.forEach((domain) => {
+      onToggleDomain(domain, true);
+    });
+
+    // Then, fetch missing replied-to accounts
+    const unknownAccounts = OrderedSet(
+      accountIds.filter(
+        (accountId) => accountId && !accountsMap.has(accountId),
+      ),
+    );
+    unknownAccounts.forEach((accountId) => {
+      dispatch(fetchAccount(accountId));
+    });
+  });
+
+  const titleId = useId();
+
+  return (
+    <>
+      <h3 className='report-dialog-modal__title' id={titleId}>
+        {modalTitle ?? (
+          <FormattedMessage
+            id='report.comment.title'
+            defaultMessage='Is there anything else you think we should know?'
+          />
+        )}
+      </h3>
+
+      <textarea
+        className='report-dialog-modal__textarea'
+        placeholder={intl.formatMessage(messages.placeholder)}
+        aria-labelledby={titleId}
+        value={comment}
+        onChange={handleChange}
+        onKeyDown={handleKeyDown}
+        disabled={isSubmitting}
+      />
+
+      {isRemote && (
+        <>
+          <p className='report-dialog-modal__lead'>
+            <FormattedMessage
+              id='report.forward_hint'
+              defaultMessage='The account is from another server. Send an anonymized copy of the report there as well?'
+            />
+          </p>
+
+          {availableDomains.map((domain) => (
+            <label
+              className='report-dialog-modal__toggle'
+              key={`toggle-${domain}`}
+              htmlFor={`input-${domain}`}
+            >
+              <Toggle
+                checked={selectedDomains.includes(domain)}
+                disabled={isSubmitting}
+                onChange={handleToggleDomain}
+                value={domain}
+                id={`input-${domain}`}
+              />
+              <FormattedMessage
+                id='report.forward'
+                defaultMessage='Forward to {target}'
+                values={{ target: domain }}
+              />
+            </label>
+          ))}
+        </>
+      )}
+
+      {submitError}
+
+      <div className='flex-spacer' />
+
+      <div className='report-dialog-modal__actions'>
+        <Button onClick={handleSubmit} disabled={isSubmitting}>
+          <FormattedMessage id='report.submit' defaultMessage='Submit report' />
+        </Button>
+      </div>
+    </>
+  );
+};
+
+// eslint-disable-next-line import/no-default-export
+export default Comment;

app/javascript/flavours/glitch/features/ui/components/modal_root.jsx

@@ -10,6 +10,7 @@ import {
   BlockModal,
   DomainBlockModal,
   ReportModal,
+  ReportCollectionModal,
   SettingsModal,
   EmbedModal,
   ListAdder,
@@ -83,6 +84,7 @@ export const MODAL_COMPONENTS = {
   'BLOCK': BlockModal,
   'DOMAIN_BLOCK': DomainBlockModal,
   'REPORT': ReportModal,
+  'REPORT_COLLECTION': ReportCollectionModal,
   'SETTINGS': SettingsModal,
   'DEPRECATED_SETTINGS': () => Promise.resolve({ default: DeprecatedSettingsModal }),
   'ACTIONS': () => Promise.resolve({ default: ActionsModal }),

app/javascript/flavours/glitch/features/ui/components/report_collection_modal.tsx

@@ -0,0 +1,173 @@
+import { useCallback, useEffect, useState } from 'react';
+
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+
+import { Callout } from '@/flavours/glitch/components/callout';
+import CloseIcon from '@/material-icons/400-24px/close.svg?react';
+import { submitReport } from 'flavours/glitch/actions/reports';
+import { fetchServer } from 'flavours/glitch/actions/server';
+import type { ApiCollectionJSON } from 'flavours/glitch/api_types/collections';
+import { Button } from 'flavours/glitch/components/button';
+import { IconButton } from 'flavours/glitch/components/icon_button';
+import { useAccount } from 'flavours/glitch/hooks/useAccount';
+import { useAppDispatch } from 'flavours/glitch/store';
+
+import Comment from '../../report/comment';
+
+const messages = defineMessages({
+  close: { id: 'lightbox.close', defaultMessage: 'Close' },
+});
+
+const CollectionThanks: React.FC<{
+  onClose: () => void;
+}> = ({ onClose }) => {
+  return (
+    <>
+      <h3 className='report-dialog-modal__title'>
+        <FormattedMessage
+          id='report.thanks.title_actionable'
+          defaultMessage="Thanks for reporting, we'll look into this."
+        />
+      </h3>
+
+      <div className='flex-spacer' />
+
+      <div className='report-dialog-modal__actions'>
+        <Button onClick={onClose}>
+          <FormattedMessage id='report.close' defaultMessage='Done' />
+        </Button>
+      </div>
+    </>
+  );
+};
+
+export const ReportCollectionModal: React.FC<{
+  collection: ApiCollectionJSON;
+  onClose: () => void;
+}> = ({ collection, onClose }) => {
+  const intl = useIntl();
+  const dispatch = useAppDispatch();
+
+  const { id: collectionId, name, account_id } = collection;
+  const account = useAccount(account_id);
+
+  useEffect(() => {
+    dispatch(fetchServer());
+  }, [dispatch]);
+
+  const [submitState, setSubmitState] = useState<
+    'idle' | 'submitting' | 'submitted' | 'error'
+  >('idle');
+
+  const [step, setStep] = useState<'comment' | 'thanks'>('comment');
+
+  const [comment, setComment] = useState('');
+  const [selectedDomains, setSelectedDomains] = useState<string[]>([]);
+
+  const handleDomainToggle = useCallback((domain: string, checked: boolean) => {
+    if (checked) {
+      setSelectedDomains((domains) => [...domains, domain]);
+    } else {
+      setSelectedDomains((domains) => domains.filter((d) => d !== domain));
+    }
+  }, []);
+
+  const handleSubmit = useCallback(() => {
+    setSubmitState('submitting');
+
+    dispatch(
+      submitReport(
+        {
+          account_id,
+          status_ids: [],
+          collection_ids: [collectionId],
+          forward_to_domains: selectedDomains,
+          comment,
+          forward: selectedDomains.length > 0,
+          category: 'spam',
+        },
+        () => {
+          setSubmitState('submitted');
+          setStep('thanks');
+        },
+        () => {
+          setSubmitState('error');
+        },
+      ),
+    );
+  }, [account_id, comment, dispatch, collectionId, selectedDomains]);
+
+  if (!account) {
+    return null;
+  }
+
+  const domain = account.get('acct').split('@')[1];
+  const isRemote = !!domain;
+
+  let stepComponent;
+
+  switch (step) {
+    case 'comment':
+      stepComponent = (
+        <Comment
+          modalTitle={
+            <FormattedMessage
+              id='report.collection_comment'
+              defaultMessage='Why do you want to report this collection?'
+            />
+          }
+          submitError={
+            submitState === 'error' && (
+              <Callout
+                variant='error'
+                title={
+                  <FormattedMessage
+                    id='report.submission_error'
+                    defaultMessage='Report could not be submitted'
+                  />
+                }
+              >
+                <FormattedMessage
+                  id='report.submission_error_details'
+                  defaultMessage='Please check your network connection and try again later.'
+                />
+              </Callout>
+            )
+          }
+          onSubmit={handleSubmit}
+          isSubmitting={submitState === 'submitting'}
+          isRemote={isRemote}
+          comment={comment}
+          domain={domain}
+          onChangeComment={setComment}
+          statusIds={[]}
+          selectedDomains={selectedDomains}
+          onToggleDomain={handleDomainToggle}
+        />
+      );
+      break;
+    case 'thanks':
+      stepComponent = <CollectionThanks onClose={onClose} />;
+  }
+
+  return (
+    <div className='modal-root__modal report-dialog-modal'>
+      <div className='report-modal__target'>
+        <IconButton
+          className='report-modal__close'
+          title={intl.formatMessage(messages.close)}
+          icon='times'
+          iconComponent={CloseIcon}
+          onClick={onClose}
+        />
+        <FormattedMessage
+          id='report.target'
+          defaultMessage='Report {target}'
+          values={{ target: <strong>{name}</strong> }}
+        />
+      </div>
+
+      <div className='report-dialog-modal__container'>{stepComponent}</div>
+    </div>
+  );
+};

app/javascript/flavours/glitch/features/ui/util/async-components.js

@@ -176,6 +176,11 @@ export function SettingsModal () {
   return import('../../local_settings');
 }
 
+export function ReportCollectionModal () {
+  return import('../components/report_collection_modal')
+    .then((module) => ({ default: module.ReportCollectionModal }));;
+}
+
 export function IgnoreNotificationsModal () {
   return import('../components/ignore_notifications_modal');
 }