Chats: do routing a simpler way (keep context wrapper but set chat from route)

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

@@ -3,12 +3,18 @@ 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, setChat } = useChatContext();
+  const { chat: chatQueryResult } = useChat(chatId);
 
   const containerRef = useRef<HTMLDivElement>(null);
   const [height, setHeight] = useState<string | number>('100%');
@@ -27,6 +33,14 @@ const ChatPage = () => {
     setHeight(fullHeight - top + offset);
   };
 
+  useEffect(() => {
+    const data = chatQueryResult?.data;
+
+    if (data) {
+      setChat(data);
+    }
+  }, [chatQueryResult?.isLoading]);
+
   useEffect(() => {
     calculateHeight();
   }, [containerRef.current]);

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

@@ -1,5 +1,6 @@
 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';
@@ -15,6 +16,7 @@ const messages = defineMessages({
 
 const ChatPageSidebar = () => {
   const intl = useIntl();
+  const history = useHistory();
   const features = useFeatures();
 
   const [search, setSearch] = useState('');
@@ -22,7 +24,10 @@ const ChatPageSidebar = () => {
 
   const debouncedSearch = useDebounce(search, 300);
 
-  const handleClickChat = (chat: IChat) => setChat(chat);
+  const handleClickChat = (chat: IChat) => {
+    setChat(chat);
+    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/queries/chats.ts

@@ -53,6 +53,7 @@ export interface IChatSilence {
 }
 
 const chatKeys = {
+  chat: (chatId?: string) => ['chats', 'chat', chatId] as const,
   chatMessages: (chatId: string) => ['chats', 'messages', chatId] as const,
   chatSearch: (searchQuery?: string) => ['chats', 'search', searchQuery] as const,
   chatSilences: ['chatSilences'] as const,
@@ -155,6 +156,22 @@ const useChats = (search?: string) => {
   return { chatsQuery, getOrCreateChatByAccountId };
 };
 
+const useChat = (chatId?: string) => {
+  const api = useApi();
+  const actions = useChatActions(chatId!);
+
+  const getChat = async () => {
+    if (chatId) {
+      const { data } = await api.get<IChat>(`/api/v1/pleroma/chats/${chatId}`);
+      return data;
+    }
+  };
+
+  const chat = useQuery<IChat | undefined>(chatKeys.chat(chatId), getChat);
+
+  return { ...actions, chat };
+};
+
 const useChatActions = (chatId: string) => {
   const api = useApi();
   const { setChat, setEditing } = useChatContext();
@@ -264,4 +281,4 @@ const useChatSilence = (chat: IChat | null) => {
   return { isSilenced, handleSilence, fetchChatSilence };
 };
 
-export { chatKeys, useChatActions, useChats, useChatMessages, useChatSilences, useChatSilence };
+export { chatKeys, useChat, useChatActions, useChats, useChatMessages, useChatSilences, useChatSilence };