moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Support pagination in My Groups

This commit is contained in:
Chewbacca 2023-04-19 16:22:34 -04:00
parent 7675b18e52
commit bc72b1822e
1 changed files with 9 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
app/soapbox/features/groups/index.tsx
View File

@ -30,12 +30,16 @@ const Groups: React.FC = () => {
const [searchValue, setSearchValue] = useState<string>('');
const debouncedValue = debounce(searchValue, 300);
const { groups, isLoading } = useGroups(debouncedValue);
const { groups, isLoading, hasNextPage, fetchNextPage } = useGroups(debouncedValue);
const createGroup = () => {
dispatch(openModal('CREATE_GROUP'));
const handleLoadMore = () => {
if (hasNextPage) {
fetchNextPage();
}
};
const createGroup = () => dispatch(openModal('CREATE_GROUP'));
const renderBlankslate = () => (
<Stack space={4} alignItems='center' justifyContent='center' className='py-6'>
<Stack space={2} className='max-w-sm'>
@ -104,6 +108,8 @@ const Groups: React.FC = () => {
showLoading={isLoading && groups.length === 0}
placeholderComponent={PlaceholderGroupCard}
placeholderCount={3}
onLoadMore={handleLoadMore}
hasMore={hasNextPage}
>
{groups.map((group) => (
<Link key={group.id} to={`/group/${group.slug}`}>