From d6e107dd0d90b06f6a8bd10c9b3ee4cccfb2e494 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Wed, 28 Sep 2022 15:38:05 -0500
Subject: [PATCH] Chats: do routing a simpler way (keep context wrapper but set
 chat from route)

---
 .../chats/components/chat-page/chat-page.tsx  | 18 ++++++++++++++++--
 .../components/chat-page-sidebar.tsx          |  7 ++++++-
 app/soapbox/features/chats/index.tsx          | 10 ++++++++--
 app/soapbox/queries/chats.ts                  | 19 ++++++++++++++++++-
 4 files changed, 48 insertions(+), 6 deletions(-)

diff --git a/app/soapbox/features/chats/components/chat-page/chat-page.tsx b/app/soapbox/features/chats/components/chat-page/chat-page.tsx
index 062aa5b18..453162e13 100644
--- a/app/soapbox/features/chats/components/chat-page/chat-page.tsx
+++ b/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]);
diff --git a/app/soapbox/features/chats/components/chat-page/components/chat-page-sidebar.tsx b/app/soapbox/features/chats/components/chat-page/components/chat-page-sidebar.tsx
index fec90dc40..22336dded 100644
--- a/app/soapbox/features/chats/components/chat-page/components/chat-page-sidebar.tsx
+++ b/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'>
diff --git a/app/soapbox/features/chats/index.tsx b/app/soapbox/features/chats/index.tsx
index c6de2b6ec..36814fd9d 100644
--- a/app/soapbox/features/chats/index.tsx
+++ b/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>
 );
 
diff --git a/app/soapbox/queries/chats.ts b/app/soapbox/queries/chats.ts
index ede4b5714..f84e43ff0 100644
--- a/app/soapbox/queries/chats.ts
+++ b/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 };