bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add Chat context api to main page

Browse source
This commit is contained in:
Justin 2022-09-13 11:18:46 -04:00
parent 09d73b1c45
commit 0952fe6dae
2 changed files with 80 additions and 65 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

72
app/soapbox/features/chats/components/chat-page.tsx Normal file
View file

@ -0,0 +1,72 @@
import React from 'react';
import { defineMessages, useIntl } from 'react-intl';
import { useHistory } from 'react-router-dom';
import { launchChat } from 'soapbox/actions/chats';
import AccountSearch from 'soapbox/components/account_search';
import { Card, CardTitle, Stack } from 'soapbox/components/ui';
import { useChatContext } from 'soapbox/contexts/chat-context';
import { useAppDispatch } from 'soapbox/hooks';
import Chat from './chat';
import ChatList from './chat-list';
import ChatListItem from './chat-list-item';
const messages = defineMessages({
title: { id: 'column.chats', defaultMessage: 'Messages' },
searchPlaceholder: { id: 'chats.search_placeholder', defaultMessage: 'Start a chat with…' },
});
const ChatPage = () => {
const intl = useIntl();
const dispatch = useAppDispatch();
const history = useHistory();
const { chat, setChat } = useChatContext();
const handleSuggestion = (accountId: string) => {
dispatch(launchChat(accountId, history, true));
};
const handleClickChat = (chat: any) => {
// history.push(`/chats/${chat.id}`);
setChat(chat);
};
return (
<Card className='p-0 h-[calc(100vh-176px)] overflow-hidden' variant='rounded'>
<div className='grid grid-cols-9 overflow-hidden h-full dark:divide-x-2 dark:divide-solid dark:divide-gray-800'>
<Stack
className='col-span-3 p-6 bg-gradient-to-r from-white to-gray-100 dark:bg-gray-900 dark:bg-none overflow-hidden dark:inset'
space={6}
>
<CardTitle title={intl.formatMessage(messages.title)} />
<AccountSearch
placeholder={intl.formatMessage(messages.searchPlaceholder)}
onSelected={handleSuggestion}
/>
<Stack className='-mx-3 flex-grow h-full'>
<ChatList onClickChat={handleClickChat} />
</Stack>
</Stack>
<Stack className='col-span-6 h-full overflow-hidden'>
{chat && (
<Stack className='h-full overflow-hidden'>
<ChatListItem chat={chat} onClick={() => { }} />
<div className='h-full overflow-hidden'>
<Chat className='h-full overflow-hidden' chat={chat} />
</div>
</Stack>
)}
</Stack>
</div>
</Card>
);
};
export default ChatPage;

73
app/soapbox/features/chats/index.tsx
View file

@ -1,70 +1,13 @@
import React, { useState } from 'react'; import React from 'react';
import { defineMessages, useIntl } from 'react-intl';
import { useDispatch } from 'react-redux';
import { useHistory } from 'react-router-dom';
import { launchChat } from 'soapbox/actions/chats'; import { ChatProvider } from 'soapbox/contexts/chat-context';
import AccountSearch from 'soapbox/components/account_search';
import { Card, CardTitle, Stack } from '../../components/ui'; import ChatPage from './components/chat-page';
import Chat from './components/chat'; const ChatIndex: React.FC = () => (
import ChatList from './components/chat-list'; <ChatProvider>
import ChatListItem from './components/chat-list-item'; <ChatPage />
</ChatProvider>
const messages = defineMessages({ );
title: { id: 'column.chats', defaultMessage: 'Messages' },
searchPlaceholder: { id: 'chats.search_placeholder', defaultMessage: 'Start a chat with…' },
});
const ChatIndex: React.FC = () => {
const intl = useIntl();
const dispatch = useDispatch();
const history = useHistory();
const [chat, setChat] = useState<any>(null);
const handleSuggestion = (accountId: string) => {
dispatch(launchChat(accountId, history, true));
};
const handleClickChat = (chat: any) => {
// history.push(`/chats/${chat.id}`);
setChat(chat);
};
return (
<Card className='p-0 h-[calc(100vh-176px)] overflow-hidden' variant='rounded'>
<div className='grid grid-cols-9 overflow-hidden h-full dark:divide-x-2 dark:divide-solid dark:divide-gray-800'>
<Stack
className='col-span-3 p-6 bg-gradient-to-r from-white to-gray-100 dark:bg-gray-900 dark:bg-none overflow-hidden dark:inset'
space={6}
>
<CardTitle title={intl.formatMessage(messages.title)} />
<AccountSearch
placeholder={intl.formatMessage(messages.searchPlaceholder)}
onSelected={handleSuggestion}
/>
<Stack className='-mx-3 flex-grow h-full'>
<ChatList onClickChat={handleClickChat} />
</Stack>
</Stack>
<Stack className='col-span-6 h-full overflow-hidden'>
{chat && (
<Stack className='h-full overflow-hidden'>
<ChatListItem chat={chat} onClick={() => { }} />
<div className='h-full overflow-hidden'>
<Chat className='h-full overflow-hidden' chat={chat} />
</div>
</Stack>
)}
</Stack>
</div>
</Card>
);
};
export default ChatIndex; export default ChatIndex;