Add ability to report a Chat Message

app/soapbox/actions/reports.ts

@@ -4,7 +4,7 @@ import { openModal } from './modals';
 
 import type { AxiosError } from 'axios';
 import type { AppDispatch, RootState } from 'soapbox/store';
-import type { Account, Status } from 'soapbox/types/entities';
+import type { Account, ChatMessage, Status } from 'soapbox/types/entities';
 
 const REPORT_INIT   = 'REPORT_INIT';
 const REPORT_CANCEL = 'REPORT_CANCEL';
@@ -20,17 +20,25 @@ const REPORT_BLOCK_CHANGE   = 'REPORT_BLOCK_CHANGE';
 
 const REPORT_RULE_CHANGE    = 'REPORT_RULE_CHANGE';
 
-const initReport = (account: Account, status?: Status) =>
-  (dispatch: AppDispatch) => {
-    dispatch({
-      type: REPORT_INIT,
-      account,
-      status,
-    });
+type ReportedEntity = {
+  status?: Status,
+  chatMessage?: ChatMessage
+}
 
-    return dispatch(openModal('REPORT'));
-  };
+const initReport = (account: Account, entities?: ReportedEntity) => (dispatch: AppDispatch) => {
+  const { status, chatMessage } = entities || {};
 
+  dispatch({
+    type: REPORT_INIT,
+    account,
+    status,
+    chatMessage,
+  });
+
+  return dispatch(openModal('REPORT'));
+};
+
+// TODO: no longer used. Can be removed.
 const initReportById = (accountId: string) =>
   (dispatch: AppDispatch, getState: () => RootState) => {
     dispatch({
@@ -59,6 +67,7 @@ const submitReport = () =>
     return api(getState).post('/api/v1/reports', {
       account_id: reports.getIn(['new', 'account_id']),
       status_ids: reports.getIn(['new', 'status_ids']),
+      message_ids: [reports.getIn(['new', 'chat_message', 'id'])],
       rule_ids: reports.getIn(['new', 'rule_ids']),
       comment: reports.getIn(['new', 'comment']),
       forward: reports.getIn(['new', 'forward']),

app/soapbox/components/status-action-bar.tsx

@@ -251,7 +251,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
       secondary: intl.formatMessage(messages.blockAndReport),
       onSecondary: () => {
         dispatch(blockAccount(account.id));
-        dispatch(initReport(account, status));
+        dispatch(initReport(account, { status }));
       },
     }));
   };
@@ -270,7 +270,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
 
   const handleReport: React.EventHandler<React.MouseEvent> = (e) => {
     e.stopPropagation();
-    dispatch(initReport(status.account as Account, status));
+    dispatch(initReport(status.account as Account, { status }));
   };
 
   const handleConversationMuteClick: React.EventHandler<React.MouseEvent> = (e) => {

app/soapbox/components/ui/divider/divider.tsx

@@ -18,7 +18,7 @@ const Divider = ({ text, textSize = 'md' }: IDivider) => (
 
     {text && (
       <div className='relative flex justify-center'>
-        <span className='px-2 bg-white dark:bg-gray-900 text-gray-400' data-testid='divider-text'>
+        <span className='px-2 bg-white dark:bg-gray-900 text-gray-700 dark:text-gray-600' data-testid='divider-text'>
           <Text size={textSize} tag='span' theme='inherit'>{text}</Text>
         </span>
       </div>

app/soapbox/features/chats/components/chat-message-list.tsx

@@ -7,6 +7,7 @@ import React, { useState, useEffect, useRef } from 'react';
 import { useIntl, defineMessages } from 'react-intl';
 
 import { openModal } from 'soapbox/actions/modals';
+import { initReport } from 'soapbox/actions/reports';
 import { Avatar, Button, Divider, HStack, Spinner, Stack, Text } from 'soapbox/components/ui';
 import DropdownMenuContainer from 'soapbox/containers/dropdown_menu_container';
 // import emojify from 'soapbox/features/emoji/emoji';
@@ -14,6 +15,7 @@ import PlaceholderChatMessage from 'soapbox/features/placeholder/components/plac
 import Bundle from 'soapbox/features/ui/components/bundle';
 import { MediaGallery } from 'soapbox/features/ui/util/async-components';
 import { useAppSelector, useAppDispatch, useOwnAccount } from 'soapbox/hooks';
+import { normalizeAccount } from 'soapbox/normalizers';
 import { chatKeys, IChat, IChatMessage, useChat, useChatMessages } from 'soapbox/queries/chats';
 import { queryClient } from 'soapbox/queries/client';
 import { onlyEmoji } from 'soapbox/utils/rich_content';
@@ -246,7 +248,7 @@ const ChatMessageList: React.FC<IChatMessageList> = ({ chat, autosize }) => {
     } else {
       menu.push({
         text: intl.formatMessage(messages.report),
-        action: () => null, // TODO: implement once API is available
+        action: () => dispatch(initReport(normalizeAccount(chat.account) as any, { chatMessage })),
         icon: require('@tabler/icons/flag.svg'),
       });
       menu.push({

app/soapbox/features/ui/components/modals/report-modal/report-modal.tsx

@@ -6,7 +6,7 @@ import { submitReport, submitReportSuccess, submitReportFail } from 'soapbox/act
 import { expandAccountTimeline } from 'soapbox/actions/timelines';
 import AttachmentThumbs from 'soapbox/components/attachment-thumbs';
 import StatusContent from 'soapbox/components/status_content';
-import { Modal, ProgressBar, Stack, Text } from 'soapbox/components/ui';
+import { Avatar, HStack, Modal, ProgressBar, Stack, Text } from 'soapbox/components/ui';
 import AccountContainer from 'soapbox/containers/account_container';
 import { useAccount, useAppDispatch, useAppSelector } from 'soapbox/hooks';
 
@@ -74,6 +74,12 @@ interface IReportModal {
   onClose: () => void
 }
 
+enum ReportedEntities {
+  Account = 'Account',
+  Status = 'Status',
+  ChatMessage = 'ChatMessage'
+}
+
 const ReportModal = ({ onClose }: IReportModal) => {
   const dispatch = useAppDispatch();
   const intl = useIntl();
@@ -86,10 +92,23 @@ const ReportModal = ({ onClose }: IReportModal) => {
   const rules = useAppSelector((state) => state.rules.items);
   const ruleIds = useAppSelector((state) => state.reports.new.rule_ids);
   const selectedStatusIds = useAppSelector((state) => state.reports.new.status_ids);
+  const selectedChatMessage = useAppSelector((state) => state.reports.new.chat_message);
 
-  const isReportingAccount = useMemo(() => selectedStatusIds.size === 0, []);
   const shouldRequireRule = rules.length > 0;
 
+  const reportedEntity = useMemo(() => {
+    if (selectedStatusIds.size === 0 && !selectedChatMessage) {
+      return ReportedEntities.Account;
+    } else if (selectedChatMessage) {
+      return ReportedEntities.ChatMessage;
+    } else {
+      return ReportedEntities.Status;
+    }
+  }, []);
+
+  const isReportingAccount = reportedEntity === ReportedEntities.Account;
+  const isReportingStatus = reportedEntity === ReportedEntities.Status;
+
   const [currentStep, setCurrentStep] = useState<Steps>(Steps.ONE);
 
   const handleSubmit = () => {
@@ -132,6 +151,31 @@ const ReportModal = ({ onClose }: IReportModal) => {
     }
   }, [selectedStatusIds.size]);
 
+  const renderSelectedChatMessage = () => {
+    if (account) {
+      return (
+        <HStack alignItems='center' space={4} className='rounded-md border dark:border-2 border-solid border-gray-400 dark:border-gray-800 p-4'>
+          <div>
+            <Avatar src={account.avatar} className='w-8 h-8' />
+          </div>
+
+          <div className='bg-gray-200 dark:bg-primary-800 rounded-md p-4 flex-grow'>
+            <Text dangerouslySetInnerHTML={{ __html: selectedChatMessage?.content as string }} />
+          </div>
+        </HStack>
+      );
+    }
+  };
+
+  const renderSelectedEntity = () => {
+    switch (reportedEntity) {
+      case ReportedEntities.Status:
+        return renderSelectedStatuses();
+      case ReportedEntities.ChatMessage:
+        return renderSelectedChatMessage();
+    }
+  };
+
   const confirmationText = useMemo(() => {
     switch (currentStep) {
       case Steps.TWO:
@@ -148,8 +192,8 @@ const ReportModal = ({ onClose }: IReportModal) => {
       return false;
     }
 
-    return isSubmitting || (shouldRequireRule && ruleIds.isEmpty()) || (!isReportingAccount && selectedStatusIds.size === 0);
-  }, [currentStep, isSubmitting, shouldRequireRule, ruleIds, selectedStatusIds.size, isReportingAccount]);
+    return isSubmitting || (shouldRequireRule && ruleIds.isEmpty()) || (isReportingStatus && selectedStatusIds.size === 0);
+  }, [currentStep, isSubmitting, shouldRequireRule, ruleIds, selectedStatusIds.size, isReportingStatus]);
 
   const calculateProgress = useCallback(() => {
     switch (currentStep) {
@@ -189,7 +233,7 @@ const ReportModal = ({ onClose }: IReportModal) => {
       <Stack space={4}>
         <ProgressBar progress={calculateProgress()} />
 
-        {(currentStep !== Steps.THREE && !isReportingAccount) && renderSelectedStatuses()}
+        {(currentStep !== Steps.THREE && !isReportingAccount) && renderSelectedEntity()}
 
         <StepToRender account={account} />
       </Stack>

app/soapbox/reducers/reports.ts

@@ -1,5 +1,7 @@
 import { Record as ImmutableRecord, Set as ImmutableSet } from 'immutable';
 
+import { ChatMessage } from 'soapbox/types/entities';
+
 import {
   REPORT_INIT,
   REPORT_SUBMIT_REQUEST,
@@ -19,6 +21,7 @@ const NewReportRecord = ImmutableRecord({
   isSubmitting: false,
   account_id: null as string | null,
   status_ids: ImmutableSet<string>(),
+  chat_message: null as null | ChatMessage,
   comment: '',
   forward: false,
   block: false,
@@ -38,6 +41,10 @@ export default function reports(state: State = ReducerRecord(), action: AnyActio
         map.setIn(['new', 'isSubmitting'], false);
         map.setIn(['new', 'account_id'], action.account.id);
 
+        if (action.chatMessage) {
+          map.setIn(['new', 'chat_message'], action.chatMessage);
+        }
+
         if (state.new.account_id !== action.account.id) {
           map.setIn(['new', 'status_ids'], action.status ? ImmutableSet([action.status.reblog?.id || action.status.id]) : ImmutableSet());
           map.setIn(['new', 'comment'], '');
@@ -76,6 +83,7 @@ export default function reports(state: State = ReducerRecord(), action: AnyActio
       return state.withMutations(map => {
         map.setIn(['new', 'account_id'], null);
         map.setIn(['new', 'status_ids'], ImmutableSet());
+        map.setIn(['new', 'chat_message'], null);
         map.setIn(['new', 'comment'], '');
         map.setIn(['new', 'isSubmitting'], false);
         map.setIn(['new', 'rule_ids'], ImmutableSet());