Refactor
This commit is contained in:
Justin
parent
a2e2d60fc7
commit
e7bd56f959
9 changed files with 240 additions and 328 deletions
|
|
@ -1,44 +1,15 @@
|
|||
import { Map as ImmutableMap } from 'immutable';
|
||||
import React, { useCallback } from 'react';
|
||||
import { defineMessages, useIntl } from 'react-intl';
|
||||
import React from 'react';
|
||||
import { useDispatch } from 'react-redux';
|
||||
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 { Card, Text } from 'soapbox/components/ui';
|
||||
import PlaceholderChat from 'soapbox/features/placeholder/components/placeholder_chat';
|
||||
import { useAppSelector } from 'soapbox/hooks';
|
||||
import { Stack } from 'soapbox/components/ui';
|
||||
import PlaceholderChat from 'soapbox/features/placeholder/components/placeholder-chat';
|
||||
import { useChats } from 'soapbox/queries/chats';
|
||||
|
||||
import Chat from './chat';
|
||||
|
||||
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,
|
||||
);
|
||||
import Blankslate from './chat-pane/blankslate';
|
||||
|
||||
interface IChatList {
|
||||
onClickChat: (chat: any) => void,
|
||||
|
|
@ -47,44 +18,51 @@ interface IChatList {
|
|||
|
||||
const ChatList: React.FC<IChatList> = ({ onClickChat, useWindowScroll = false }) => {
|
||||
const dispatch = useDispatch();
|
||||
const intl = useIntl();
|
||||
|
||||
const chatIds = useAppSelector(state => sortedChatIdsSelector(state.chats.items));
|
||||
const hasMore = useAppSelector(state => !!state.chats.next);
|
||||
const isLoading = useAppSelector(state => state.chats.isLoading);
|
||||
const { chatsQuery: { data: chats, isFetching } } = useChats();
|
||||
|
||||
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 = () => {
|
||||
return dispatch(fetchChats()) as any;
|
||||
};
|
||||
|
||||
const renderEmpty = () => isLoading ? <PlaceholderChat /> : (
|
||||
<Card className='mt-2' variant='rounded' size='lg'>
|
||||
<Text>{intl.formatMessage(messages.emptyMessage)}</Text>
|
||||
</Card>
|
||||
);
|
||||
const renderEmpty = () => {
|
||||
if (isFetching) {
|
||||
return (
|
||||
<Stack space={2}>
|
||||
<PlaceholderChat />
|
||||
<PlaceholderChat />
|
||||
<PlaceholderChat />
|
||||
</Stack>
|
||||
);
|
||||
} else {
|
||||
return <Blankslate />;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<PullToRefresh onRefresh={handleRefresh}>
|
||||
{isEmpty ? renderEmpty() : (
|
||||
<Virtuoso
|
||||
className='chat-list'
|
||||
useWindowScroll={useWindowScroll}
|
||||
data={chatIds.toArray()}
|
||||
data={chats}
|
||||
endReached={handleLoadMore}
|
||||
itemContent={(_index, chatId) => (
|
||||
<Chat chatId={chatId} onClick={onClickChat} />
|
||||
itemContent={(_index, chat) => (
|
||||
<Chat chat={chat} onClick={onClickChat} />
|
||||
)}
|
||||
components={{
|
||||
ScrollSeekPlaceholder: () => <PlaceholderChat />,
|
||||
Footer: () => hasMore ? <PlaceholderChat /> : null,
|
||||
// Footer: () => hasMore ? <PlaceholderChat /> : null,
|
||||
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 { useChatContext } from 'soapbox/contexts/chat-context';
|
||||
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 { MediaGallery } from 'soapbox/features/ui/util/async-components';
|
||||
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'>
|
||||
{isLoading ? (
|
||||
<>
|
||||
<PlaceholderChat isMyMessage />
|
||||
<PlaceholderChat />
|
||||
<PlaceholderChat isMyMessage />
|
||||
<PlaceholderChat isMyMessage />
|
||||
<PlaceholderChat />
|
||||
<PlaceholderChatMessage isMyMessage />
|
||||
<PlaceholderChatMessage />
|
||||
<PlaceholderChatMessage isMyMessage />
|
||||
<PlaceholderChatMessage isMyMessage />
|
||||
<PlaceholderChatMessage />
|
||||
</>
|
||||
) : (
|
||||
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;
|
||||
138
app/soapbox/features/chats/components/chat-pane/chat-pane.tsx
Normal file
138
app/soapbox/features/chats/components/chat-pane/chat-pane.tsx
Normal file
|
|
@ -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 ChatPane from './chat-pane';
|
||||
import ChatPane from './chat-pane/chat-pane';
|
||||
|
||||
const ChatWidget = () => {
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -1,72 +1,35 @@
|
|||
import React from 'react';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
|
||||
import Avatar from 'soapbox/components/avatar';
|
||||
import DisplayName from 'soapbox/components/display-name';
|
||||
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 { Avatar, HStack, Stack, Text } from 'soapbox/components/ui';
|
||||
import VerificationBadge from 'soapbox/components/verification_badge';
|
||||
|
||||
import type { Account as AccountEntity, Chat as ChatEntity } from 'soapbox/types/entities';
|
||||
import type { IChat } from 'soapbox/queries/chats';
|
||||
|
||||
const getChat = makeGetChat();
|
||||
|
||||
interface IChat {
|
||||
chatId: string,
|
||||
interface IChatInterface {
|
||||
chat: IChat,
|
||||
onClick: (chat: any) => void,
|
||||
}
|
||||
|
||||
const Chat: React.FC<IChat> = ({ chatId, 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) : '';
|
||||
|
||||
const Chat: React.FC<IChatInterface> = ({ chat, onClick }) => {
|
||||
return (
|
||||
<div className='account'>
|
||||
<button className='floating-link' onClick={() => onClick(chat)} />
|
||||
<div className='account__wrapper'>
|
||||
<div key={account.id} className='account__display-name'>
|
||||
<div className='account__avatar-wrapper'>
|
||||
<Avatar account={account} size={36} />
|
||||
<button
|
||||
key={chat.id}
|
||||
type='button'
|
||||
onClick={() => onClick(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>
|
||||
<DisplayName account={account} />
|
||||
{attachment && (
|
||||
<Icon
|
||||
className='chat__attachment-icon'
|
||||
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>
|
||||
<Text size='sm' weight='medium' theme='muted' truncate>@{chat.account?.acct}</Text>
|
||||
</Stack>
|
||||
</HStack>
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
Loading…
Reference in a new issue