Refactor leave/report chat

app/soapbox/components/ui/modal/modal.tsx

@@ -3,6 +3,7 @@ import * as React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import Button from '../button/button';
+import { ButtonThemes } from '../button/useButtonStyles';
 import IconButton from '../icon-button/icon-button';
 
 const messages = defineMessages({
@@ -39,7 +40,7 @@ interface IModal {
   /** Confirmation button text. */
   confirmationText?: React.ReactNode,
   /** Confirmation button theme. */
-  confirmationTheme?: 'danger',
+  confirmationTheme?: ButtonThemes,
   /** Callback when the modal is closed. */
   onClose?: () => void,
   /** Callback when the secondary action is chosen. */

app/soapbox/features/chats/components/chat-box.tsx

@@ -8,6 +8,8 @@ import {
   markChatRead,
 } from 'soapbox/actions/chats';
 import { uploadMedia } from 'soapbox/actions/media';
+import { openModal } from 'soapbox/actions/modals';
+import { initReport } from 'soapbox/actions/reports';
 import { Avatar, Button, HStack, Icon, IconButton, Input, Stack, Text, Textarea } from 'soapbox/components/ui';
 import UploadProgress from 'soapbox/components/upload-progress';
 import UploadButton from 'soapbox/features/compose/components/upload_button';
@@ -184,6 +186,23 @@ const ChatBox: React.FC<IChatBox> = ({ chat, onSetInputRef, autosize }) => {
     });
   };
 
+  const handleLeaveChat = () => {
+    dispatch(openModal('CONFIRM', {
+      heading: 'Leave Chat',
+      message: 'Are you sure you want to leave this chat? This conversation will be removed from your inbox.',
+      confirm: 'Leave Chat',
+      confirmationTheme: 'primary',
+      onConfirm: () => {
+        deleteChat.mutate();
+      },
+    }));
+  };
+
+  const handleReportChat = () => {
+    dispatch(initReport(chat.account));
+    acceptChat.mutate();
+  };
+
   const renderAttachment = () => {
     if (!attachment) return null;
 
@@ -244,13 +263,18 @@ const ChatBox: React.FC<IChatBox> = ({ chat, onSetInputRef, autosize }) => {
                 <Button
                   theme='accent'
                   block
-                  onClick={() => deleteChat.mutate()}
+                  onClick={handleLeaveChat}
-                  disabled={deleteChat.isLoading}
                 >
                   Leave chat
                 </Button>
 
-                <Button theme='secondary' block>Report</Button>
+                <Button
+                  theme='secondary'
+                  block
+                  onClick={handleReportChat}
+                >
+                  Report
+                </Button>
               </HStack>
             </Stack>
           </Stack>

app/soapbox/features/chats/components/chat-pane.tsx

@@ -133,14 +133,14 @@ const ChatPane = () => {
               className='px-4 py-2 w-full flex flex-col hover:bg-gray-100'
             >
               <HStack alignItems='center' space={2}>
-                <Avatar src={chat.account.avatar} size={40} />
+                <Avatar src={chat.account?.avatar} size={40} />
 
                 <Stack alignItems='start'>
                   <div className='flex items-center space-x-1 flex-grow'>
-                    <Text weight='semibold' truncate>{chat.account.display_name}</Text>
+                    <Text weight='semibold' truncate>{chat.account?.display_name}</Text>
-                    {chat.account.verified && <VerificationBadge />}
+                    {chat.account?.verified && <VerificationBadge />}
                   </div>
-                  <Text theme='muted' truncate>{chat.account.acct}</Text>
+                  <Text theme='muted' truncate>{chat.account?.acct}</Text>
                 </Stack>
               </HStack>
             </button>

app/soapbox/features/ui/components/confirmation_modal.tsx

@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { Modal, Text } from 'soapbox/components/ui';
+import { ButtonThemes } from 'soapbox/components/ui/button/useButtonStyles';
 import { SimpleForm, FieldsGroup, Checkbox } from 'soapbox/features/forms';
 
 interface IConfirmationModal {
@@ -14,6 +15,7 @@ interface IConfirmationModal {
   onSecondary?: () => void,
   onCancel: () => void,
   checkbox?: JSX.Element,
+  confirmationTheme?: ButtonThemes
 }
 
 const ConfirmationModal: React.FC<IConfirmationModal> = ({
@@ -26,6 +28,7 @@ const ConfirmationModal: React.FC<IConfirmationModal> = ({
   onSecondary,
   onCancel,
   checkbox,
+  confirmationTheme = 'danger',
 }) => {
   const [checked, setChecked] = useState(false);
 
@@ -54,7 +57,7 @@ const ConfirmationModal: React.FC<IConfirmationModal> = ({
       confirmationAction={handleClick}
       confirmationText={confirm}
       confirmationDisabled={checkbox && !checked}
-      confirmationTheme='danger'
+      confirmationTheme={confirmationTheme}
       cancelText={<FormattedMessage id='confirmation_modal.cancel' defaultMessage='Cancel' />}
       cancelAction={handleCancel}
       secondaryText={secondary}