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

46
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,28 +65,30 @@ 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}>
<Virtuoso {isEmpty ? renderEmpty() : (
className='chat-list' <Virtuoso
useWindowScroll={useWindowScroll} className='chat-list'
data={chatIds.toArray()} useWindowScroll={useWindowScroll}
endReached={handleLoadMore} data={chatIds.toArray()}
itemContent={(_index, chatId) => ( endReached={handleLoadMore}
<Chat chatId={chatId} onClick={onClickChat} /> itemContent={(_index, chatId) => (
)} <Chat chatId={chatId} onClick={onClickChat} />
components={{ )}
ScrollSeekPlaceholder: () => <PlaceholderChat />, components={{
Footer: () => hasMore ? <PlaceholderChat /> : null, ScrollSeekPlaceholder: () => <PlaceholderChat />,
EmptyPlaceholder: () => { Footer: () => hasMore ? <PlaceholderChat /> : null,
if (isLoading) { EmptyPlaceholder: renderEmpty,
return <PlaceholderChat />; }}
} else { />
return <Text>{intl.formatMessage(messages.emptyMessage)}</Text>; )}
}
},
}}
/>
</PullToRefresh> </PullToRefresh>
); );
}; };