From bc72b1822ec8f9df9e4215c6f2015fc4a6f1b1a8 Mon Sep 17 00:00:00 2001
From: Chewbacca <dice.warrant-02@icloud.com>
Date: Wed, 19 Apr 2023 16:22:34 -0400
Subject: [PATCH] Support pagination in My Groups

---
 app/soapbox/features/groups/index.tsx | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/app/soapbox/features/groups/index.tsx b/app/soapbox/features/groups/index.tsx
index 0407ff8e0..7528989f6 100644
--- a/app/soapbox/features/groups/index.tsx
+++ b/app/soapbox/features/groups/index.tsx
@@ -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}`}>