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

Display 'No chats found' in a card

Browse source 
Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
This commit is contained in:
marcin mikołajczak 2022-07-18 23:00:58 +02:00
parent 827146ad17
commit 2f5ca7c740
1 changed files with 25 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
app/soapbox/features/chats/components/chat-list.tsx
View file

@ -7,7 +7,7 @@ import { createSelector } from 'reselect';
import { fetchChats, expandChats } from 'soapbox/actions/chats'; import { fetchChats, expandChats } from 'soapbox/actions/chats';
import PullToRefresh from 'soapbox/components/pull-to-refresh'; import PullToRefresh from 'soapbox/components/pull-to-refresh';
import { Text } from 'soapbox/components/ui'; import { Card, Text } 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 { useAppSelector } from 'soapbox/hooks';
@ -53,6 +53,8 @@ const ChatList: React.FC<IChatList> = ({ onClickChat, useWindowScroll = false })
const hasMore = useAppSelector(state => !!state.chats.next); const hasMore = useAppSelector(state => !!state.chats.next);
const isLoading = useAppSelector(state => state.chats.isLoading); const isLoading = useAppSelector(state => state.chats.isLoading);
const isEmpty = chatIds.size === 0;
const handleLoadMore = useCallback(() => { const handleLoadMore = useCallback(() => {
if (hasMore && !isLoading) { if (hasMore && !isLoading) {
dispatch(expandChats()); dispatch(expandChats());
@ -63,8 +65,15 @@ const ChatList: React.FC<IChatList> = ({ onClickChat, useWindowScroll = false })
return dispatch(fetchChats()) as any; return dispatch(fetchChats()) as any;
}; };
const renderEmpty = () => isLoading ? <PlaceholderChat /> : (
<Card className='mt-2' variant='rounded' size='lg'>
<Text>{intl.formatMessage(messages.emptyMessage)}</Text>
</Card>
);
return ( return (
<PullToRefresh onRefresh={handleRefresh}> <PullToRefresh onRefresh={handleRefresh}>
{isEmpty ? renderEmpty() : (
<Virtuoso <Virtuoso
className='chat-list' className='chat-list'
useWindowScroll={useWindowScroll} useWindowScroll={useWindowScroll}
@ -76,15 +85,10 @@ const ChatList: React.FC<IChatList> = ({ onClickChat, useWindowScroll = false })
components={{ components={{
ScrollSeekPlaceholder: () => <PlaceholderChat />, ScrollSeekPlaceholder: () => <PlaceholderChat />,
Footer: () => hasMore ? <PlaceholderChat /> : null, Footer: () => hasMore ? <PlaceholderChat /> : null,
EmptyPlaceholder: () => { EmptyPlaceholder: renderEmpty,
if (isLoading) {
return <PlaceholderChat />;
} else {
return <Text>{intl.formatMessage(messages.emptyMessage)}</Text>;
}
},
}} }}
/> />
)}
</PullToRefresh> </PullToRefresh>
); );
}; };