sforkowany z mirror/soapbox
Refactor
Justin
rodzic
a2e2d60fc7
commit
e7bd56f959
|
|
@ -1,44 +1,15 @@
|
||||||
import { Map as ImmutableMap } from 'immutable';
|
import React from 'react';
|
||||||
import React, { useCallback } from 'react';
|
|
||||||
import { defineMessages, useIntl } from 'react-intl';
|
|
||||||
import { useDispatch } from 'react-redux';
|
import { useDispatch } from 'react-redux';
|
||||||
import { Virtuoso } from 'react-virtuoso';
|
import { Virtuoso } from 'react-virtuoso';
|
||||||
import { createSelector } from 'reselect';
|
|
||||||
|
|
||||||
import { fetchChats, expandChats } from 'soapbox/actions/chats';
|
import { fetchChats } from 'soapbox/actions/chats';
|
||||||
import PullToRefresh from 'soapbox/components/pull-to-refresh';
|
import PullToRefresh from 'soapbox/components/pull-to-refresh';
|
||||||
import { Card, Text } from 'soapbox/components/ui';
|
import { Stack } from 'soapbox/components/ui';
|
||||||
import PlaceholderChat from 'soapbox/features/placeholder/components/placeholder_chat';
|
import PlaceholderChat from 'soapbox/features/placeholder/components/placeholder-chat';
|
||||||
import { useAppSelector } from 'soapbox/hooks';
|
import { useChats } from 'soapbox/queries/chats';
|
||||||
|
|
||||||
import Chat from './chat';
|
import Chat from './chat';
|
||||||
|
import Blankslate from './chat-pane/blankslate';
|
||||||
const messages = defineMessages({
|
|
||||||
emptyMessage: { id: 'chat_panels.main_window.empty', defaultMessage: 'No chats found. To start a chat, visit a user\'s profile' },
|
|
||||||
});
|
|
||||||
|
|
||||||
const getSortedChatIds = (chats: ImmutableMap<string, any>) => (
|
|
||||||
chats
|
|
||||||
.toList()
|
|
||||||
.sort(chatDateComparator)
|
|
||||||
.map(chat => chat.id)
|
|
||||||
);
|
|
||||||
|
|
||||||
const chatDateComparator = (chatA: { updated_at: string }, chatB: { updated_at: string }) => {
|
|
||||||
// Sort most recently updated chats at the top
|
|
||||||
const a = new Date(chatA.updated_at);
|
|
||||||
const b = new Date(chatB.updated_at);
|
|
||||||
|
|
||||||
if (a === b) return 0;
|
|
||||||
if (a > b) return -1;
|
|
||||||
if (a < b) return 1;
|
|
||||||
return 0;
|
|
||||||
};
|
|
||||||
|
|
||||||
const sortedChatIdsSelector = createSelector(
|
|
||||||
[getSortedChatIds],
|
|
||||||
chats => chats,
|
|
||||||
);
|
|
||||||
|
|
||||||
interface IChatList {
|
interface IChatList {
|
||||||
onClickChat: (chat: any) => void,
|
onClickChat: (chat: any) => void,
|
||||||
|
|
@ -47,44 +18,51 @@ interface IChatList {
|
||||||
|
|
||||||
const ChatList: React.FC<IChatList> = ({ onClickChat, useWindowScroll = false }) => {
|
const ChatList: React.FC<IChatList> = ({ onClickChat, useWindowScroll = false }) => {
|
||||||
const dispatch = useDispatch();
|
const dispatch = useDispatch();
|
||||||
const intl = useIntl();
|
|
||||||
|
|
||||||
const chatIds = useAppSelector(state => sortedChatIdsSelector(state.chats.items));
|
const { chatsQuery: { data: chats, isFetching } } = useChats();
|
||||||
const hasMore = useAppSelector(state => !!state.chats.next);
|
|
||||||
const isLoading = useAppSelector(state => state.chats.isLoading);
|
|
||||||
|
|
||||||
const isEmpty = chatIds.size === 0;
|
const isEmpty = chats?.length === 0;
|
||||||
|
|
||||||
|
// const handleLoadMore = useCallback(() => {
|
||||||
|
// if (hasMore && !isLoading) {
|
||||||
|
// dispatch(expandChats());
|
||||||
|
// }
|
||||||
|
// }, [dispatch, hasMore, isLoading]);
|
||||||
|
|
||||||
|
const handleLoadMore = () => console.log('load more');
|
||||||
|
|
||||||
const handleLoadMore = useCallback(() => {
|
|
||||||
if (hasMore && !isLoading) {
|
|
||||||
dispatch(expandChats());
|
|
||||||
}
|
|
||||||
}, [dispatch, hasMore, isLoading]);
|
|
||||||
|
|
||||||
const handleRefresh = () => {
|
const handleRefresh = () => {
|
||||||
return dispatch(fetchChats()) as any;
|
return dispatch(fetchChats()) as any;
|
||||||
};
|
};
|
||||||
|
|
||||||
const renderEmpty = () => isLoading ? <PlaceholderChat /> : (
|
const renderEmpty = () => {
|
||||||
<Card className='mt-2' variant='rounded' size='lg'>
|
if (isFetching) {
|
||||||
<Text>{intl.formatMessage(messages.emptyMessage)}</Text>
|
return (
|
||||||
</Card>
|
<Stack space={2}>
|
||||||
);
|
<PlaceholderChat />
|
||||||
|
<PlaceholderChat />
|
||||||
|
<PlaceholderChat />
|
||||||
|
</Stack>
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
return <Blankslate />;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<PullToRefresh onRefresh={handleRefresh}>
|
<PullToRefresh onRefresh={handleRefresh}>
|
||||||
{isEmpty ? renderEmpty() : (
|
{isEmpty ? renderEmpty() : (
|
||||||
<Virtuoso
|
<Virtuoso
|
||||||
className='chat-list'
|
|
||||||
useWindowScroll={useWindowScroll}
|
useWindowScroll={useWindowScroll}
|
||||||
data={chatIds.toArray()}
|
data={chats}
|
||||||
endReached={handleLoadMore}
|
endReached={handleLoadMore}
|
||||||
itemContent={(_index, chatId) => (
|
itemContent={(_index, chat) => (
|
||||||
<Chat chatId={chatId} onClick={onClickChat} />
|
<Chat chat={chat} onClick={onClickChat} />
|
||||||
)}
|
)}
|
||||||
components={{
|
components={{
|
||||||
ScrollSeekPlaceholder: () => <PlaceholderChat />,
|
ScrollSeekPlaceholder: () => <PlaceholderChat />,
|
||||||
Footer: () => hasMore ? <PlaceholderChat /> : null,
|
// Footer: () => hasMore ? <PlaceholderChat /> : null,
|
||||||
EmptyPlaceholder: renderEmpty,
|
EmptyPlaceholder: renderEmpty,
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
|
|
|
||||||
|
|
@ -18,7 +18,7 @@ import { Avatar, Button, HStack, IconButton, Spinner, Stack, Text } from 'soapbo
|
||||||
import DropdownMenuContainer from 'soapbox/containers/dropdown_menu_container';
|
import DropdownMenuContainer from 'soapbox/containers/dropdown_menu_container';
|
||||||
import { useChatContext } from 'soapbox/contexts/chat-context';
|
import { useChatContext } from 'soapbox/contexts/chat-context';
|
||||||
import emojify from 'soapbox/features/emoji/emoji';
|
import emojify from 'soapbox/features/emoji/emoji';
|
||||||
import PlaceholderChat from 'soapbox/features/placeholder/components/placeholder_chat';
|
import PlaceholderChatMessage from 'soapbox/features/placeholder/components/placeholder-chat-message';
|
||||||
import Bundle from 'soapbox/features/ui/components/bundle';
|
import Bundle from 'soapbox/features/ui/components/bundle';
|
||||||
import { MediaGallery } from 'soapbox/features/ui/util/async-components';
|
import { MediaGallery } from 'soapbox/features/ui/util/async-components';
|
||||||
import { useAppSelector, useAppDispatch, useRefEventHandler, useOwnAccount } from 'soapbox/hooks';
|
import { useAppSelector, useAppDispatch, useRefEventHandler, useOwnAccount } from 'soapbox/hooks';
|
||||||
|
|
@ -412,11 +412,11 @@ const ChatMessageList: React.FC<IChatMessageList> = ({ chat, chatMessageIds, aut
|
||||||
<div className='flex-grow flex flex-col justify-end space-y-4'>
|
<div className='flex-grow flex flex-col justify-end space-y-4'>
|
||||||
{isLoading ? (
|
{isLoading ? (
|
||||||
<>
|
<>
|
||||||
<PlaceholderChat isMyMessage />
|
<PlaceholderChatMessage isMyMessage />
|
||||||
<PlaceholderChat />
|
<PlaceholderChatMessage />
|
||||||
<PlaceholderChat isMyMessage />
|
<PlaceholderChatMessage isMyMessage />
|
||||||
<PlaceholderChat isMyMessage />
|
<PlaceholderChatMessage isMyMessage />
|
||||||
<PlaceholderChat />
|
<PlaceholderChatMessage />
|
||||||
</>
|
</>
|
||||||
) : (
|
) : (
|
||||||
formattedChatMessages.reduce((acc: any, curr: any, idx: number) => {
|
formattedChatMessages.reduce((acc: any, curr: any, idx: number) => {
|
||||||
|
|
|
||||||
|
|
@ -1,206 +0,0 @@
|
||||||
import { useMutation } from '@tanstack/react-query';
|
|
||||||
import { AxiosError } from 'axios';
|
|
||||||
import { List as ImmutableList, Map as ImmutableMap } from 'immutable';
|
|
||||||
import sumBy from 'lodash/sumBy';
|
|
||||||
import React, { useEffect, useState } from 'react';
|
|
||||||
import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
|
|
||||||
import { useHistory } from 'react-router-dom';
|
|
||||||
import { createSelector } from 'reselect';
|
|
||||||
|
|
||||||
import { openChat, launchChat, toggleMainWindow } from 'soapbox/actions/chats';
|
|
||||||
import { getSettings } from 'soapbox/actions/settings';
|
|
||||||
import snackbar from 'soapbox/actions/snackbar';
|
|
||||||
import AccountSearch from 'soapbox/components/account_search';
|
|
||||||
import { Avatar, Button, Counter, HStack, Icon, IconButton, Input, Spinner, Stack, Text } from 'soapbox/components/ui';
|
|
||||||
import VerificationBadge from 'soapbox/components/verification_badge';
|
|
||||||
import { ChatProvider, useChatContext } from 'soapbox/contexts/chat-context';
|
|
||||||
import AudioToggle from 'soapbox/features/chats/components/audio-toggle';
|
|
||||||
import PlaceholderAccount from 'soapbox/features/placeholder/components/placeholder_account';
|
|
||||||
import { useAppDispatch, useAppSelector, useDebounce, useSettings } from 'soapbox/hooks';
|
|
||||||
import { IChat, useChats } from 'soapbox/queries/chats';
|
|
||||||
import useAccountSearch from 'soapbox/queries/search';
|
|
||||||
import { RootState } from 'soapbox/store';
|
|
||||||
import { Chat } from 'soapbox/types/entities';
|
|
||||||
|
|
||||||
import ChatList from './chat-list';
|
|
||||||
import ChatPaneHeader from './chat-pane-header';
|
|
||||||
import ChatWindow from './chat-window';
|
|
||||||
import { Pane } from './ui';
|
|
||||||
|
|
||||||
const messages = defineMessages({
|
|
||||||
searchPlaceholder: { id: 'chats.search_placeholder', defaultMessage: 'Type a name' },
|
|
||||||
});
|
|
||||||
|
|
||||||
const getChatsUnreadCount = (state: RootState) => {
|
|
||||||
const chats = state.chats.items;
|
|
||||||
return chats.reduce((acc, curr) => acc + Math.min(curr.get('unread', 0), 1), 0);
|
|
||||||
};
|
|
||||||
|
|
||||||
// Filter out invalid chats
|
|
||||||
const normalizePanes = (chats: ImmutableMap<string, Chat>, panes = ImmutableList<ImmutableMap<string, any>>()) => (
|
|
||||||
panes.filter(pane => chats.get(pane.get('chat_id')))
|
|
||||||
);
|
|
||||||
|
|
||||||
const makeNormalizeChatPanes = () => createSelector([
|
|
||||||
(state: RootState) => state.chats.items,
|
|
||||||
(state: RootState) => getSettings(state).getIn(['chats', 'panes']) as any,
|
|
||||||
], normalizePanes);
|
|
||||||
|
|
||||||
const normalizeChatPanes = makeNormalizeChatPanes();
|
|
||||||
|
|
||||||
const ChatPane = () => {
|
|
||||||
const intl = useIntl();
|
|
||||||
const dispatch = useAppDispatch();
|
|
||||||
const debounce = useDebounce;
|
|
||||||
|
|
||||||
const { chat, setChat, isOpen, toggleChatPane } = useChatContext();
|
|
||||||
|
|
||||||
const [value, setValue] = useState<string>();
|
|
||||||
const debouncedValue = debounce(value as string, 300);
|
|
||||||
|
|
||||||
const { chatsQuery: { data: chats, isFetching }, getOrCreateChatByAccountId } = useChats();
|
|
||||||
const { data: accounts } = useAccountSearch(debouncedValue);
|
|
||||||
|
|
||||||
const panes = useAppSelector((state) => normalizeChatPanes(state));
|
|
||||||
const unreadCount = sumBy(chats, (chat) => chat.unread);
|
|
||||||
|
|
||||||
const isSearching = accounts && accounts.length > 0;
|
|
||||||
const hasSearchValue = value && value.length > 0;
|
|
||||||
|
|
||||||
const handleClickOnSearchResult = useMutation((accountId: string) => {
|
|
||||||
return getOrCreateChatByAccountId(accountId);
|
|
||||||
}, {
|
|
||||||
onError: (error: AxiosError) => {
|
|
||||||
const data = error.response?.data as any;
|
|
||||||
dispatch(snackbar.error(data?.error));
|
|
||||||
},
|
|
||||||
onSuccess: (response) => {
|
|
||||||
setChat(response.data);
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
const clearValue = () => {
|
|
||||||
if (hasSearchValue) {
|
|
||||||
setValue('');
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const renderBody = () => {
|
|
||||||
if (isFetching) {
|
|
||||||
return (
|
|
||||||
<div className='flex flex-grow h-full items-center justify-center'>
|
|
||||||
<Spinner withText={false} />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
} else if (isSearching) {
|
|
||||||
return (
|
|
||||||
<Stack className='overflow-y-scroll flex-grow h-full' space={2}>
|
|
||||||
{accounts.map((account: any) => (
|
|
||||||
<button key={account.id} type='button' className='px-4 py-2 w-full flex flex-col hover:bg-gray-100' onClick={() => handleClickOnSearchResult.mutate(account.id)}>
|
|
||||||
<HStack alignItems='center' space={2}>
|
|
||||||
<Avatar src={account.avatar} size={40} />
|
|
||||||
|
|
||||||
<Stack alignItems='start'>
|
|
||||||
<div className='flex items-center space-x-1 flex-grow'>
|
|
||||||
<Text weight='semibold' truncate>{account.display_name}</Text>
|
|
||||||
{account.verified && <VerificationBadge />}
|
|
||||||
</div>
|
|
||||||
<Text theme='muted' truncate>@{account.acct}</Text>
|
|
||||||
</Stack>
|
|
||||||
</HStack>
|
|
||||||
</button>
|
|
||||||
))}
|
|
||||||
</Stack>
|
|
||||||
);
|
|
||||||
} else if (chats && chats.length > 0) {
|
|
||||||
return (
|
|
||||||
<Stack className='overflow-y-scroll flex-grow h-full' space={2}>
|
|
||||||
{chats.map((chat) => (
|
|
||||||
<button
|
|
||||||
key={chat.id}
|
|
||||||
type='button'
|
|
||||||
onClick={() => setChat(chat)}
|
|
||||||
className='px-4 py-2 w-full flex flex-col hover:bg-gray-100'
|
|
||||||
>
|
|
||||||
<HStack alignItems='center' space={2}>
|
|
||||||
<Avatar src={chat.account?.avatar} size={40} />
|
|
||||||
|
|
||||||
<Stack alignItems='start'>
|
|
||||||
<div className='flex items-center space-x-1 flex-grow'>
|
|
||||||
<Text weight='bold' size='sm' truncate>{chat.account?.display_name}</Text>
|
|
||||||
{chat.account?.verified && <VerificationBadge />}
|
|
||||||
</div>
|
|
||||||
<Text size='sm' weight='medium' theme='muted' truncate>@{chat.account?.acct}</Text>
|
|
||||||
</Stack>
|
|
||||||
</HStack>
|
|
||||||
</button>
|
|
||||||
))}
|
|
||||||
</Stack>
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
return (
|
|
||||||
<Stack justifyContent='center' alignItems='center' space={4} className='px-4 flex-grow'>
|
|
||||||
<Stack space={2}>
|
|
||||||
<Text weight='semibold' size='xl' align='center'>No messages yet</Text>
|
|
||||||
<Text theme='muted' align='center'>You can start a conversation with anyone that follows you.</Text>
|
|
||||||
</Stack>
|
|
||||||
|
|
||||||
<Button theme='primary'>Message someone</Button>
|
|
||||||
</Stack>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<Pane isOpen={isOpen} index={0} main>
|
|
||||||
{chat?.id ? (
|
|
||||||
<ChatWindow />
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
<ChatPaneHeader title='Messages' unreadCount={unreadCount} isOpen={isOpen} onToggle={toggleChatPane} />
|
|
||||||
|
|
||||||
{isOpen ? (
|
|
||||||
<Stack space={4} className='flex-grow h-full'>
|
|
||||||
<div className='px-4'>
|
|
||||||
<Input
|
|
||||||
type='text'
|
|
||||||
autoFocus
|
|
||||||
placeholder={intl.formatMessage(messages.searchPlaceholder)}
|
|
||||||
className='rounded-full'
|
|
||||||
value={value || ''}
|
|
||||||
onChange={(event) => setValue(event.target.value)}
|
|
||||||
isSearch
|
|
||||||
append={
|
|
||||||
<button onClick={clearValue}>
|
|
||||||
<Icon
|
|
||||||
src={hasSearchValue ? require('@tabler/icons/x.svg') : require('@tabler/icons/search.svg')}
|
|
||||||
className='h-4 w-4 text-gray-700 dark:text-gray-600'
|
|
||||||
aria-hidden='true'
|
|
||||||
/>
|
|
||||||
</button>
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{renderBody()}
|
|
||||||
</Stack>
|
|
||||||
) : null}
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</Pane>
|
|
||||||
|
|
||||||
{/* {panes.map((pane, i) => (
|
|
||||||
<ChatWindow
|
|
||||||
idx={i + 1}
|
|
||||||
key={pane.get('chat_id')}
|
|
||||||
chatId={pane.get('chat_id')}
|
|
||||||
windowState={pane.get('state')}
|
|
||||||
/>
|
|
||||||
))} */}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default ChatPane;
|
|
||||||
|
|
@ -0,0 +1,16 @@
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
import { Button, Stack, Text } from 'soapbox/components/ui';
|
||||||
|
|
||||||
|
const Blankslate = () => (
|
||||||
|
<Stack justifyContent='center' alignItems='center' space={4} className='px-4 h-full'>
|
||||||
|
<Stack space={2}>
|
||||||
|
<Text weight='semibold' size='xl' align='center'>No messages yet</Text>
|
||||||
|
<Text theme='muted' align='center'>You can start a conversation with anyone that follows you.</Text>
|
||||||
|
</Stack>
|
||||||
|
|
||||||
|
{/* <Button theme='primary'>Message someone</Button> */}
|
||||||
|
</Stack>
|
||||||
|
);
|
||||||
|
|
||||||
|
export default Blankslate;
|
||||||
|
|
@ -0,0 +1,138 @@
|
||||||
|
import { useMutation } from '@tanstack/react-query';
|
||||||
|
import { AxiosError } from 'axios';
|
||||||
|
import sumBy from 'lodash/sumBy';
|
||||||
|
import React, { useState } from 'react';
|
||||||
|
import { defineMessages, useIntl } from 'react-intl';
|
||||||
|
|
||||||
|
import snackbar from 'soapbox/actions/snackbar';
|
||||||
|
import { Avatar, HStack, Icon, Input, Stack, Text } from 'soapbox/components/ui';
|
||||||
|
import VerificationBadge from 'soapbox/components/verification_badge';
|
||||||
|
import { useChatContext } from 'soapbox/contexts/chat-context';
|
||||||
|
import { useAppDispatch, useDebounce } from 'soapbox/hooks';
|
||||||
|
import { useChats } from 'soapbox/queries/chats';
|
||||||
|
import useAccountSearch from 'soapbox/queries/search';
|
||||||
|
|
||||||
|
import ChatList from '../chat-list';
|
||||||
|
import ChatPaneHeader from '../chat-pane-header';
|
||||||
|
import ChatWindow from '../chat-window';
|
||||||
|
import { Pane } from '../ui';
|
||||||
|
|
||||||
|
const messages = defineMessages({
|
||||||
|
searchPlaceholder: { id: 'chats.search_placeholder', defaultMessage: 'Type a name' },
|
||||||
|
});
|
||||||
|
|
||||||
|
const ChatPane = () => {
|
||||||
|
const intl = useIntl();
|
||||||
|
const dispatch = useAppDispatch();
|
||||||
|
const debounce = useDebounce;
|
||||||
|
|
||||||
|
const { chat, setChat, isOpen, toggleChatPane } = useChatContext();
|
||||||
|
const { chatsQuery: { data: chats }, getOrCreateChatByAccountId } = useChats();
|
||||||
|
|
||||||
|
const [value, setValue] = useState<string>();
|
||||||
|
const debouncedValue = debounce(value as string, 300);
|
||||||
|
|
||||||
|
const { data: accounts } = useAccountSearch(debouncedValue);
|
||||||
|
|
||||||
|
const unreadCount = sumBy(chats, (chat) => chat.unread);
|
||||||
|
|
||||||
|
const isSearching = accounts && accounts.length > 0;
|
||||||
|
const hasSearchValue = value && value.length > 0;
|
||||||
|
|
||||||
|
const handleClickOnSearchResult = useMutation((accountId: string) => {
|
||||||
|
return getOrCreateChatByAccountId(accountId);
|
||||||
|
}, {
|
||||||
|
onError: (error: AxiosError) => {
|
||||||
|
const data = error.response?.data as any;
|
||||||
|
dispatch(snackbar.error(data?.error));
|
||||||
|
},
|
||||||
|
onSuccess: (response) => {
|
||||||
|
setChat(response.data);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
const clearValue = () => {
|
||||||
|
if (hasSearchValue) {
|
||||||
|
setValue('');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const renderBody = () => {
|
||||||
|
if (isSearching) {
|
||||||
|
return (
|
||||||
|
<Stack className='overflow-y-scroll flex-grow h-full' space={2}>
|
||||||
|
{accounts.map((account: any) => (
|
||||||
|
<button
|
||||||
|
key={account.id}
|
||||||
|
type='button'
|
||||||
|
className='px-4 py-2 w-full flex flex-col hover:bg-gray-100'
|
||||||
|
onClick={() => {
|
||||||
|
handleClickOnSearchResult.mutate(account.id);
|
||||||
|
clearValue();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<HStack alignItems='center' space={2}>
|
||||||
|
<Avatar src={account.avatar} size={40} />
|
||||||
|
|
||||||
|
<Stack alignItems='start'>
|
||||||
|
<div className='flex items-center space-x-1 flex-grow'>
|
||||||
|
<Text weight='bold' size='sm' truncate>{account.display_name}</Text>
|
||||||
|
{account.verified && <VerificationBadge />}
|
||||||
|
</div>
|
||||||
|
<Text size='sm' weight='medium' theme='muted' truncate>@{account.acct}</Text>
|
||||||
|
</Stack>
|
||||||
|
</HStack>
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</Stack>
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
return <ChatList onClickChat={(chat) => setChat(chat)} useWindowScroll={false} />;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Active chat
|
||||||
|
if (chat?.id) {
|
||||||
|
return (
|
||||||
|
<Pane isOpen={isOpen} index={0} main>
|
||||||
|
<ChatWindow />
|
||||||
|
</Pane>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Pane isOpen={isOpen} index={0} main>
|
||||||
|
<ChatPaneHeader title='Messages' unreadCount={unreadCount} isOpen={isOpen} onToggle={toggleChatPane} />
|
||||||
|
|
||||||
|
{isOpen ? (
|
||||||
|
<Stack space={4} className='flex-grow h-full'>
|
||||||
|
<div className='px-4'>
|
||||||
|
<Input
|
||||||
|
type='text'
|
||||||
|
autoFocus
|
||||||
|
placeholder={intl.formatMessage(messages.searchPlaceholder)}
|
||||||
|
className='rounded-full'
|
||||||
|
value={value || ''}
|
||||||
|
onChange={(event) => setValue(event.target.value)}
|
||||||
|
isSearch
|
||||||
|
append={
|
||||||
|
<button onClick={clearValue}>
|
||||||
|
<Icon
|
||||||
|
src={hasSearchValue ? require('@tabler/icons/x.svg') : require('@tabler/icons/search.svg')}
|
||||||
|
className='h-4 w-4 text-gray-700 dark:text-gray-600'
|
||||||
|
aria-hidden='true'
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{renderBody()}
|
||||||
|
</Stack>
|
||||||
|
) : null}
|
||||||
|
</Pane>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ChatPane;
|
||||||
|
|
@ -2,7 +2,7 @@ import React from 'react';
|
||||||
|
|
||||||
import { ChatProvider } from 'soapbox/contexts/chat-context';
|
import { ChatProvider } from 'soapbox/contexts/chat-context';
|
||||||
|
|
||||||
import ChatPane from './chat-pane';
|
import ChatPane from './chat-pane/chat-pane';
|
||||||
|
|
||||||
const ChatWidget = () => {
|
const ChatWidget = () => {
|
||||||
return (
|
return (
|
||||||
|
|
|
||||||
|
|
@ -1,72 +1,35 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { FormattedMessage } from 'react-intl';
|
|
||||||
|
|
||||||
import Avatar from 'soapbox/components/avatar';
|
import { Avatar, HStack, Stack, Text } from 'soapbox/components/ui';
|
||||||
import DisplayName from 'soapbox/components/display-name';
|
import VerificationBadge from 'soapbox/components/verification_badge';
|
||||||
import Icon from 'soapbox/components/icon';
|
|
||||||
import { Counter } from 'soapbox/components/ui';
|
|
||||||
import emojify from 'soapbox/features/emoji/emoji';
|
|
||||||
import { useAppSelector } from 'soapbox/hooks';
|
|
||||||
import { makeGetChat } from 'soapbox/selectors';
|
|
||||||
|
|
||||||
import type { Account as AccountEntity, Chat as ChatEntity } from 'soapbox/types/entities';
|
import type { IChat } from 'soapbox/queries/chats';
|
||||||
|
|
||||||
const getChat = makeGetChat();
|
interface IChatInterface {
|
||||||
|
chat: IChat,
|
||||||
interface IChat {
|
|
||||||
chatId: string,
|
|
||||||
onClick: (chat: any) => void,
|
onClick: (chat: any) => void,
|
||||||
}
|
}
|
||||||
|
|
||||||
const Chat: React.FC<IChat> = ({ chatId, onClick }) => {
|
const Chat: React.FC<IChatInterface> = ({ chat, onClick }) => {
|
||||||
const chat = useAppSelector((state) => {
|
|
||||||
const chat = state.chats.items.get(chatId);
|
|
||||||
return chat ? getChat(state, (chat as any).toJS()) : undefined;
|
|
||||||
}) as ChatEntity;
|
|
||||||
|
|
||||||
const account = chat.account as AccountEntity;
|
|
||||||
if (!chat || !account) return null;
|
|
||||||
const unreadCount = chat.unread;
|
|
||||||
const content = chat.getIn(['last_message', 'content']);
|
|
||||||
const attachment = chat.getIn(['last_message', 'attachment']);
|
|
||||||
const image = attachment && (attachment as any).getIn(['pleroma', 'mime_type'], '').startsWith('image/');
|
|
||||||
const parsedContent = content ? emojify(content) : '';
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className='account'>
|
<button
|
||||||
<button className='floating-link' onClick={() => onClick(chat)} />
|
key={chat.id}
|
||||||
<div className='account__wrapper'>
|
type='button'
|
||||||
<div key={account.id} className='account__display-name'>
|
onClick={() => onClick(chat)}
|
||||||
<div className='account__avatar-wrapper'>
|
className='px-4 py-2 w-full flex flex-col hover:bg-gray-100'
|
||||||
<Avatar account={account} size={36} />
|
>
|
||||||
|
<HStack alignItems='center' space={2}>
|
||||||
|
<Avatar src={chat.account?.avatar} size={40} />
|
||||||
|
|
||||||
|
<Stack alignItems='start'>
|
||||||
|
<div className='flex items-center space-x-1 flex-grow'>
|
||||||
|
<Text weight='bold' size='sm' truncate>{chat.account?.display_name}</Text>
|
||||||
|
{chat.account?.verified && <VerificationBadge />}
|
||||||
</div>
|
</div>
|
||||||
<DisplayName account={account} />
|
<Text size='sm' weight='medium' theme='muted' truncate>@{chat.account?.acct}</Text>
|
||||||
{attachment && (
|
</Stack>
|
||||||
<Icon
|
</HStack>
|
||||||
className='chat__attachment-icon'
|
</button>
|
||||||
src={image ? require('@tabler/icons/photo.svg') : require('@tabler/icons/paperclip.svg')}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
{content ? (
|
|
||||||
<span
|
|
||||||
className='chat__last-message'
|
|
||||||
dangerouslySetInnerHTML={{ __html: parsedContent }}
|
|
||||||
/>
|
|
||||||
) : attachment && (
|
|
||||||
<span
|
|
||||||
className='chat__last-message attachment'
|
|
||||||
>
|
|
||||||
{image ? <FormattedMessage id='chats.attachment_image' defaultMessage='Image' /> : <FormattedMessage id='chats.attachment' defaultMessage='Attachment' />}
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
{unreadCount > 0 && (
|
|
||||||
<div className='absolute top-1 right-0'>
|
|
||||||
<Counter count={unreadCount} />
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,23 @@
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
import { HStack, Stack } from 'soapbox/components/ui';
|
||||||
|
|
||||||
|
import PlaceholderAvatar from './placeholder_avatar';
|
||||||
|
import PlaceholderDisplayName from './placeholder_display_name';
|
||||||
|
|
||||||
|
/** Fake chat to display while data is loading. */
|
||||||
|
const PlaceholderChat = () => {
|
||||||
|
return (
|
||||||
|
<div className='px-4 py-2 w-full flex flex-col animate-pulse'>
|
||||||
|
<HStack alignItems='center' space={2}>
|
||||||
|
<PlaceholderAvatar size={40} />
|
||||||
|
|
||||||
|
<Stack alignItems='start'>
|
||||||
|
<PlaceholderDisplayName minLength={3} maxLength={15} />
|
||||||
|
</Stack>
|
||||||
|
</HStack>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default PlaceholderChat;
|
||||||
Ładowanie…
Reference in New Issue