Merge remote-tracking branch 'origin/chats' into chats-router

app/soapbox/contexts/chat-context.tsx

@@ -50,7 +50,7 @@ const ChatProvider: React.FC = ({ children }) => {
 };
 
 interface IChatContext {
-  chat: IChat | null
+  chat?: IChat
   isEditing: boolean
   isOpen: boolean
   isSearching: boolean

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

@@ -2,13 +2,17 @@ import classNames from 'clsx';
 import React, { useEffect, useRef, useState } from 'react';
 
 import { Stack } from 'soapbox/components/ui';
-import { useChatContext } from 'soapbox/contexts/chat-context';
+import { useChat } from 'soapbox/queries/chats';
 
 import ChatPageMain from './components/chat-page-main';
 import ChatPageSidebar from './components/chat-page-sidebar';
 
-const ChatPage = () => {
-  const { chat } = useChatContext();
+interface IChatPage {
+  chatId?: string,
+}
+
+const ChatPage: React.FC<IChatPage> = ({ chatId }) => {
+  const { chat } = useChat(chatId);
 
   const containerRef = useRef<HTMLDivElement>(null);
   const [height, setHeight] = useState<string | number>('100%');
@@ -58,7 +62,7 @@ const ChatPage = () => {
           'hidden sm:block': !chat,
         })}
         >
-          <ChatPageMain />
+          <ChatPageMain chatId={chatId} />
         </Stack>
       </div>
     </div>

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

@@ -1,5 +1,6 @@
 import React, { useEffect } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
+import { useHistory } from 'react-router-dom';
 
 import { blockAccount } from 'soapbox/actions/accounts';
 import { openModal } from 'soapbox/actions/modals';
@@ -7,7 +8,6 @@ import { initReport } from 'soapbox/actions/reports';
 import List, { ListItem } from 'soapbox/components/list';
 import { Avatar, Divider, HStack, Icon, IconButton, Menu, MenuButton, MenuItem, MenuList, Stack, Text, Toggle } from 'soapbox/components/ui';
 import VerificationBadge from 'soapbox/components/verification_badge';
-import { useChatContext } from 'soapbox/contexts/chat-context';
 import { useAppDispatch, useOwnAccount } from 'soapbox/hooks';
 import { useChat, useChatSilence } from 'soapbox/queries/chats';
 
@@ -27,22 +27,26 @@ const messages = defineMessages({
   leaveChat: { id: 'chat_settings.options.leave_chat', defaultMessage: 'Leave Chat' },
 });
 
-const ChatPageMain = () => {
-  const dispatch = useAppDispatch();
+interface IChatPageMain {
+  chatId?: string,
+}
+
+const ChatPageMain: React.FC<IChatPageMain> = ({ chatId }) => {
   const intl = useIntl();
+  const history = useHistory();
+  const dispatch = useAppDispatch();
   const account = useOwnAccount();
 
-  const { chat, setChat } = useChatContext();
-  const { isSilenced, handleSilence, fetchChatSilence } = useChatSilence(chat);
-  const { deleteChat } = useChat(chat?.id as string);
+  const { chat, deleteChat } = useChat(chatId);
+  const { isSilenced, handleSilence, fetchChatSilence } = useChatSilence(chat?.data);
 
   const handleBlockUser = () => {
     dispatch(openModal('CONFIRM', {
-      heading: intl.formatMessage(messages.blockHeading, { acct: chat?.account.acct }),
+      heading: intl.formatMessage(messages.blockHeading, { acct: chat?.data?.account.acct }),
       message: intl.formatMessage(messages.blockMessage),
       confirm: intl.formatMessage(messages.blockConfirm),
       confirmationTheme: 'primary',
-      onConfirm: () => dispatch(blockAccount(chat?.account.id as string)),
+      onConfirm: () => dispatch(blockAccount(chat?.data?.account.id as any)),
     }));
   };
 
@@ -56,13 +60,13 @@ const ChatPageMain = () => {
     }));
   };
 
-  const handleReportChat = () => dispatch(initReport(chat?.account as any));
+  const handleReportChat = () => dispatch(initReport(chat?.data?.account as any));
 
   useEffect(() => {
-    if (chat?.id) {
+    if (chatId) {
       fetchChatSilence();
     }
-  }, [chat?.id]);
+  }, [chatId]);
 
   if (!chat && !account?.chats_onboarded) {
     return (
@@ -82,16 +86,16 @@ const ChatPageMain = () => {
             <IconButton
               src={require('@tabler/icons/arrow-left.svg')}
               className='sm:hidden h-7 w-7 mr-2 sm:mr-0'
-              onClick={() => setChat(null)}
+              onClick={() => history.push('/chats')}
             />
 
-            <Avatar src={chat.account?.avatar} size={40} className='flex-none' />
+            <Avatar src={chat?.data?.account?.avatar!} size={40} className='flex-none' />
           </HStack>
 
           <Stack alignItems='start' className='overflow-hidden'>
             <div className='flex items-center space-x-1 flex-grow w-full'>
-              <Text weight='bold' size='sm' align='left' truncate>{chat.account?.display_name || `@${chat.account.username}`}</Text>
-              {chat.account?.verified && <VerificationBadge />}
+              <Text weight='bold' size='sm' align='left' truncate>{chat?.data?.account?.display_name || `@${chat?.data?.account.username}`}</Text>
+              {chat?.data?.account?.verified && <VerificationBadge />}
             </div>
 
             <Text
@@ -102,7 +106,7 @@ const ChatPageMain = () => {
               truncate
               className='w-full'
             >
-              {chat.account.acct}
+              {chat?.data?.account.acct}
             </Text>
           </Stack>
         </HStack>
@@ -118,10 +122,10 @@ const ChatPageMain = () => {
           <MenuList className='w-80 py-6'>
             <Stack space={4} className='w-5/6 mx-auto'>
               <Stack alignItems='center' space={2}>
-                <Avatar src={chat.account.avatar_static} size={75} />
+                <Avatar src={chat?.data?.account.avatar_static!} size={75} />
                 <Stack>
-                  <Text size='lg' weight='semibold' align='center'>{chat.account.display_name}</Text>
-                  <Text theme='primary' align='center'>@{chat.account.acct}</Text>
+                  <Text size='lg' weight='semibold' align='center'>{chat?.data?.account.display_name}</Text>
+                  <Text theme='primary' align='center'>@{chat?.data?.account.acct}</Text>
                 </Stack>
               </Stack>
 
@@ -143,7 +147,7 @@ const ChatPageMain = () => {
                 >
                   <div className='w-full flex items-center space-x-2 font-bold text-sm text-primary-500 dark:text-accent-blue'>
                     <Icon src={require('@tabler/icons/ban.svg')} className='w-5 h-5' />
-                    <span>{intl.formatMessage(messages.blockUser, { acct: chat.account.acct })}</span>
+                    <span>{intl.formatMessage(messages.blockUser, { acct: chat?.data?.account.acct })}</span>
                   </div>
                 </MenuItem>
 
@@ -154,7 +158,7 @@ const ChatPageMain = () => {
                 >
                   <div className='w-full flex items-center space-x-2 font-bold text-sm text-primary-500 dark:text-accent-blue'>
                     <Icon src={require('@tabler/icons/flag.svg')} className='w-5 h-5' />
-                    <span>{intl.formatMessage(messages.reportUser, { acct: chat.account.acct })}</span>
+                    <span>{intl.formatMessage(messages.reportUser, { acct: chat?.data?.account.acct })}</span>
                   </div>
                 </MenuItem>
 
@@ -175,7 +179,9 @@ const ChatPageMain = () => {
       </HStack>
 
       <div className='h-full overflow-hidden'>
-        <Chat className='h-full overflow-hidden' chat={chat} />
+        {chat?.data && (
+          <Chat className='h-full overflow-hidden' chat={chat?.data} />
+        )}
       </div>
     </Stack>
   );

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

@@ -1,8 +1,8 @@
 import React, { useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
+import { useHistory } from 'react-router-dom';
 
 import { CardTitle, HStack, IconButton, Stack } from 'soapbox/components/ui';
-import { useChatContext } from 'soapbox/contexts/chat-context';
 import { useDebounce, useFeatures } from 'soapbox/hooks';
 import { IChat } from 'soapbox/queries/chats';
 
@@ -15,14 +15,13 @@ const messages = defineMessages({
 
 const ChatPageSidebar = () => {
   const intl = useIntl();
+  const history = useHistory();
   const features = useFeatures();
 
   const [search, setSearch] = useState('');
-  const { setChat } = useChatContext();
-
   const debouncedSearch = useDebounce(search, 300);
 
-  const handleClickChat = (chat: IChat) => setChat(chat);
+  const handleClickChat = (chat: IChat) => history.push(`/chats/${chat.id}`);
 
   return (
     <Stack space={4} className='h-full'>

app/soapbox/features/chats/index.tsx

@@ -4,9 +4,15 @@ import { ChatProvider } from 'soapbox/contexts/chat-context';
 
 import ChatPage from './components/chat-page/chat-page';
 
-const ChatIndex: React.FC = () => (
+interface IChatIndex {
+  params?: {
+    chatId: string,
+  }
+}
+
+const ChatIndex: React.FC<IChatIndex> = ({ params }) => (
   <ChatProvider>
-    <ChatPage />
+    <ChatPage chatId={params?.chatId} />
   </ChatProvider>
 );
 

app/soapbox/features/ui/index.tsx

@@ -86,7 +86,6 @@ import {
   // Backups,
   MfaForm,
   ChatIndex,
-  ChatRoom,
   ChatWidget,
   ServerInfo,
   Dashboard,
@@ -264,7 +263,7 @@ const SwitchingColumnsArea: React.FC = ({ children }) => {
       {features.profileDirectory && <WrappedRoute path='/directory' publicRoute page={DefaultPage} component={Directory} content={children} />}
 
       {features.chats && <WrappedRoute path='/chats' exact page={ChatsPage} component={ChatIndex} content={children} />}
-      {features.chats && <WrappedRoute path='/chats/:chatId' page={ChatsPage} component={ChatRoom} content={children} />}
+      {features.chats && <WrappedRoute path='/chats/:chatId' page={ChatsPage} component={ChatIndex} content={children} />}
 
       <WrappedRoute path='/follow_requests' page={DefaultPage} component={FollowRequests} content={children} />
       <WrappedRoute path='/blocks' page={DefaultPage} component={Blocks} content={children} />

app/soapbox/queries/chats.ts

@@ -155,10 +155,23 @@ const useChats = (search?: string) => {
   return { chatsQuery, getOrCreateChatByAccountId };
 };
 
-const useChat = (chatId: string) => {
+const useChat = (chatId?: string) => {
   const api = useApi();
+  const dispatch = useAppDispatch();
   const { setChat, setEditing } = useChatContext();
 
+  const chat = useQuery(['chats', 'chat', chatId], async(): Promise<IChat | undefined> => {
+    if (!chatId) return undefined;
+
+    const response = await api.get<IChat>(`/api/v1/pleroma/chats/${chatId}`);
+    const { data: chat } = response;
+
+    // Set the relationships to these users in the redux store.
+    dispatch(fetchRelationships([chat.account.id]));
+
+    return chat;
+  });
+
   const markChatAsRead = (lastReadId: string) => {
     api.post<IChat>(`/api/v1/pleroma/chats/${chatId}/read`, { last_read_id: lastReadId })
       .then(({ data }) => updatePageItem(['chats', 'search'], data, (o, n) => o.id === n.id))
@@ -188,7 +201,7 @@ const useChat = (chatId: string) => {
     },
   });
 
-  return { createChatMessage, markChatAsRead, deleteChatMessage, acceptChat, deleteChat };
+  return { chat, createChatMessage, markChatAsRead, deleteChatMessage, acceptChat, deleteChat };
 };
 
 const useChatSilences = () => {
@@ -205,7 +218,7 @@ const useChatSilences = () => {
   });
 };
 
-const useChatSilence = (chat: IChat | null) => {
+const useChatSilence = (chat?: IChat) => {
   const api = useApi();
   const dispatch = useAppDispatch();