properly handle routing after deleting chat

app/soapbox/contexts/chat-context.tsx

@@ -1,5 +1,6 @@
 import React, { createContext, useContext, useMemo, useState } from 'react';
 import { useDispatch } from 'react-redux';
+import { useHistory } from 'react-router-dom';
 
 import { toggleMainWindow } from 'soapbox/actions/chats';
 import { useOwnAccount, useSettings } from 'soapbox/hooks';
@@ -20,10 +21,14 @@ enum ChatWidgetScreens {
 }
 
 const ChatProvider: React.FC = ({ children }) => {
+  const history = useHistory();
   const dispatch = useDispatch();
   const settings = useSettings();
   const account = useOwnAccount();
 
+  const path = history.location.pathname;
+  const isUsingMainChatPage = Boolean(path.match(/^\/chats/));
+
   const [screen, setScreen] = useState<ChatWidgetScreens>(ChatWidgetScreens.INBOX);
   const [currentChatId, setCurrentChatId] = useState<null | string>(null);
 
@@ -44,11 +49,12 @@ const ChatProvider: React.FC = ({ children }) => {
     chat,
     needsAcceptance,
     isOpen,
+    isUsingMainChatPage,
     toggleChatPane,
     screen,
     changeScreen,
     currentChatId,
-  }), [chat, currentChatId, needsAcceptance, isOpen, screen, changeScreen]);
+  }), [chat, currentChatId, needsAcceptance, isUsingMainChatPage, isOpen, screen, changeScreen]);
 
   return (
     <ChatContext.Provider value={value}>
@@ -60,6 +66,7 @@ const ChatProvider: React.FC = ({ children }) => {
 interface IChatContext {
   chat: IChat | null
   isOpen: boolean
+  isUsingMainChatPage?: boolean
   needsAcceptance: boolean
   toggleChatPane(): void
   screen: ChatWidgetScreens

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

@@ -1,11 +1,13 @@
 import React, { useMemo } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
+import { useHistory } from 'react-router-dom';
 
 import { openModal } from 'soapbox/actions/modals';
 import RelativeTimestamp from 'soapbox/components/relative-timestamp';
 import { Avatar, HStack, Stack, Text } from 'soapbox/components/ui';
 import VerificationBadge from 'soapbox/components/verification_badge';
 import DropdownMenuContainer from 'soapbox/containers/dropdown_menu_container';
+import { useChatContext } from 'soapbox/contexts/chat-context';
 import { useAppDispatch, useFeatures } from 'soapbox/hooks';
 import { IChat, useChatActions } from 'soapbox/queries/chats';
 
@@ -27,7 +29,9 @@ const ChatListItem: React.FC<IChatListItemInterface> = ({ chat, onClick }) => {
   const dispatch = useAppDispatch();
   const intl = useIntl();
   const features = useFeatures();
+  const history = useHistory();
 
+  const { isUsingMainChatPage } = useChatContext();
   const { deleteChat } = useChatActions(chat?.id as string);
 
   const menu = useMemo((): Menu => [{
@@ -40,7 +44,15 @@ const ChatListItem: React.FC<IChatListItemInterface> = ({ chat, onClick }) => {
         message: intl.formatMessage(messages.leaveMessage),
         confirm: intl.formatMessage(messages.leaveConfirm),
         confirmationTheme: 'primary',
-        onConfirm: () => deleteChat.mutate(),
+        onConfirm: () => {
+          deleteChat.mutate(undefined, {
+            onSuccess() {
+              if (isUsingMainChatPage) {
+                history.push('/chats');
+              }
+            },
+          });
+        },
       }));
     },
     icon: require('@tabler/icons/logout.svg'),

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

@@ -1,6 +1,7 @@
 import classNames from 'clsx';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
+import { useHistory } from 'react-router-dom';
 
 import { openModal } from 'soapbox/actions/modals';
 import Link from 'soapbox/components/link';
@@ -25,8 +26,9 @@ const ChatMessageListIntro = () => {
   const dispatch = useAppDispatch();
   const intl = useIntl();
   const features = useFeatures();
+  const history = useHistory();
 
-  const { chat, needsAcceptance } = useChatContext();
+  const { chat, isUsingMainChatPage, needsAcceptance } = useChatContext();
   const { acceptChat, deleteChat } = useChatActions(chat?.id as string);
 
   const handleLeaveChat = () => {
@@ -35,7 +37,15 @@ const ChatMessageListIntro = () => {
       message: intl.formatMessage(messages.leaveChatMessage),
       confirm: intl.formatMessage(messages.leaveChatConfirm),
       confirmationTheme: 'primary',
-      onConfirm: () => deleteChat.mutate(),
+      onConfirm: () => {
+        deleteChat.mutate(undefined, {
+          onSuccess() {
+            if (isUsingMainChatPage) {
+              history.push('/chats');
+            }
+          },
+        });
+      },
     }));
   };
 

app/soapbox/features/chats/components/chat-page/components/chat-page-main.tsx

@@ -82,7 +82,13 @@ const ChatPageMain = () => {
       message: intl.formatMessage(messages.leaveMessage),
       confirm: intl.formatMessage(messages.leaveConfirm),
       confirmationTheme: 'primary',
-      onConfirm: () => deleteChat.mutate(),
+      onConfirm: () => {
+        deleteChat.mutate(undefined, {
+          onSuccess() {
+            history.push('/chats');
+          },
+        });
+      },
     }));
   };