Chats: do routing a simpler way (keep context wrapper but set chat from route)
This commit is contained in:
parent
3ce5925280
commit
d6e107dd0d
|
@ -3,12 +3,18 @@ import React, { useEffect, useRef, useState } from 'react';
|
||||||
|
|
||||||
import { Stack } from 'soapbox/components/ui';
|
import { Stack } from 'soapbox/components/ui';
|
||||||
import { useChatContext } from 'soapbox/contexts/chat-context';
|
import { useChatContext } from 'soapbox/contexts/chat-context';
|
||||||
|
import { useChat } from 'soapbox/queries/chats';
|
||||||
|
|
||||||
import ChatPageMain from './components/chat-page-main';
|
import ChatPageMain from './components/chat-page-main';
|
||||||
import ChatPageSidebar from './components/chat-page-sidebar';
|
import ChatPageSidebar from './components/chat-page-sidebar';
|
||||||
|
|
||||||
const ChatPage = () => {
|
interface IChatPage {
|
||||||
const { chat } = useChatContext();
|
chatId?: string,
|
||||||
|
}
|
||||||
|
|
||||||
|
const ChatPage: React.FC<IChatPage> = ({ chatId }) => {
|
||||||
|
const { chat, setChat } = useChatContext();
|
||||||
|
const { chat: chatQueryResult } = useChat(chatId);
|
||||||
|
|
||||||
const containerRef = useRef<HTMLDivElement>(null);
|
const containerRef = useRef<HTMLDivElement>(null);
|
||||||
const [height, setHeight] = useState<string | number>('100%');
|
const [height, setHeight] = useState<string | number>('100%');
|
||||||
|
@ -27,6 +33,14 @@ const ChatPage = () => {
|
||||||
setHeight(fullHeight - top + offset);
|
setHeight(fullHeight - top + offset);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const data = chatQueryResult?.data;
|
||||||
|
|
||||||
|
if (data) {
|
||||||
|
setChat(data);
|
||||||
|
}
|
||||||
|
}, [chatQueryResult?.isLoading]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
calculateHeight();
|
calculateHeight();
|
||||||
}, [containerRef.current]);
|
}, [containerRef.current]);
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
import React, { useState } from 'react';
|
import React, { useState } from 'react';
|
||||||
import { defineMessages, useIntl } from 'react-intl';
|
import { defineMessages, useIntl } from 'react-intl';
|
||||||
|
import { useHistory } from 'react-router-dom';
|
||||||
|
|
||||||
import { CardTitle, HStack, IconButton, Stack } from 'soapbox/components/ui';
|
import { CardTitle, HStack, IconButton, Stack } from 'soapbox/components/ui';
|
||||||
import { useChatContext } from 'soapbox/contexts/chat-context';
|
import { useChatContext } from 'soapbox/contexts/chat-context';
|
||||||
|
@ -15,6 +16,7 @@ const messages = defineMessages({
|
||||||
|
|
||||||
const ChatPageSidebar = () => {
|
const ChatPageSidebar = () => {
|
||||||
const intl = useIntl();
|
const intl = useIntl();
|
||||||
|
const history = useHistory();
|
||||||
const features = useFeatures();
|
const features = useFeatures();
|
||||||
|
|
||||||
const [search, setSearch] = useState('');
|
const [search, setSearch] = useState('');
|
||||||
|
@ -22,7 +24,10 @@ const ChatPageSidebar = () => {
|
||||||
|
|
||||||
const debouncedSearch = useDebounce(search, 300);
|
const debouncedSearch = useDebounce(search, 300);
|
||||||
|
|
||||||
const handleClickChat = (chat: IChat) => setChat(chat);
|
const handleClickChat = (chat: IChat) => {
|
||||||
|
setChat(chat);
|
||||||
|
history.push(`/chats/${chat.id}`);
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Stack space={4} className='h-full'>
|
<Stack space={4} className='h-full'>
|
||||||
|
|
|
@ -4,9 +4,15 @@ import { ChatProvider } from 'soapbox/contexts/chat-context';
|
||||||
|
|
||||||
import ChatPage from './components/chat-page/chat-page';
|
import ChatPage from './components/chat-page/chat-page';
|
||||||
|
|
||||||
const ChatIndex: React.FC = () => (
|
interface IChatIndex {
|
||||||
|
params?: {
|
||||||
|
chatId?: string,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const ChatIndex: React.FC<IChatIndex> = ({ params }) => (
|
||||||
<ChatProvider>
|
<ChatProvider>
|
||||||
<ChatPage />
|
<ChatPage chatId={params?.chatId} />
|
||||||
</ChatProvider>
|
</ChatProvider>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|
|
@ -53,6 +53,7 @@ export interface IChatSilence {
|
||||||
}
|
}
|
||||||
|
|
||||||
const chatKeys = {
|
const chatKeys = {
|
||||||
|
chat: (chatId?: string) => ['chats', 'chat', chatId] as const,
|
||||||
chatMessages: (chatId: string) => ['chats', 'messages', chatId] as const,
|
chatMessages: (chatId: string) => ['chats', 'messages', chatId] as const,
|
||||||
chatSearch: (searchQuery?: string) => ['chats', 'search', searchQuery] as const,
|
chatSearch: (searchQuery?: string) => ['chats', 'search', searchQuery] as const,
|
||||||
chatSilences: ['chatSilences'] as const,
|
chatSilences: ['chatSilences'] as const,
|
||||||
|
@ -155,6 +156,22 @@ const useChats = (search?: string) => {
|
||||||
return { chatsQuery, getOrCreateChatByAccountId };
|
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 useChatActions = (chatId: string) => {
|
||||||
const api = useApi();
|
const api = useApi();
|
||||||
const { setChat, setEditing } = useChatContext();
|
const { setChat, setEditing } = useChatContext();
|
||||||
|
@ -264,4 +281,4 @@ const useChatSilence = (chat: IChat | null) => {
|
||||||
return { isSilenced, handleSilence, fetchChatSilence };
|
return { isSilenced, handleSilence, fetchChatSilence };
|
||||||
};
|
};
|
||||||
|
|
||||||
export { chatKeys, useChatActions, useChats, useChatMessages, useChatSilences, useChatSilence };
|
export { chatKeys, useChat, useChatActions, useChats, useChatMessages, useChatSilences, useChatSilence };
|
||||||
|
|
Loading…
Reference in New Issue