fix: fixed crash on list contributor grid when in card view changing page size

package.json

@@ -97,6 +97,7 @@
     "react-day-picker": "^8.7.1",
     "react-dom": "^18.2.0",
     "react-emoji-render": "^2.0.1",
+    "react-error-boundary": "^4.0.11",
     "react-hot-toast": "^2.4.0",
     "react-icons": "^4.11.0",
     "react-loading-skeleton": "^3.1.0",

pages/lists/[listId]/contributors.tsx

@@ -2,10 +2,11 @@ import { GetServerSidePropsContext } from "next";
 import { createPagesServerClient } from "@supabase/auth-helpers-nextjs";
 import { useRouter } from "next/router";
 
+import { ErrorBoundary } from "react-error-boundary";
 import ListPageLayout from "layouts/lists";
 import { fetchApiData, validateListPath } from "helpers/fetchApiData";
 import Error from "components/atoms/Error/Error";
-import { convertToContributors, useContributorsList } from "lib/hooks/api/useContributorList";
+import { useContributorsList } from "lib/hooks/api/useContributorList";
 import ContributorsList from "components/organisms/ContributorsList/contributors-list";
 import { FilterParams } from "./activity";
 
@@ -17,48 +18,38 @@ export const getServerSideProps = async (ctx: GetServerSidePropsContext) => {
   } = await supabase.auth.getSession();
   const bearerToken = session ? session.access_token : "";
 
-  const { listId, limit: rawLimit, range } = ctx.params as FilterParams;
+  const { listId } = ctx.params as FilterParams;
 
-  const limit = rawLimit ?? "10"; // Can pull this from the querystring in the future
-  const [{ data, error: contributorListError }, { data: list, error }] = await Promise.all([
-    fetchApiData<PagedData<DBListContributor>>({
-      path: `lists/${listId}/contributors?limit=${limit}&range=${range ?? "30"}`,
-      bearerToken,
-      pathValidator: validateListPath,
-    }),
-    fetchApiData<DBList>({ path: `lists/${listId}`, bearerToken, pathValidator: validateListPath }),
-  ]);
+  const { data: list, error } = await fetchApiData<DBList>({
+    path: `lists/${listId}`,
+    bearerToken,
+    pathValidator: validateListPath,
+  });
 
   if (error?.status === 404) {
     return {
       notFound: true,
     };
   }
 
-  const contributors = convertToContributors(data?.data);
   const userId = Number(session?.user.user_metadata.sub);
 
   return {
     props: {
       list,
-      initialData: data ? { data: contributors, meta: data.meta } : { data: [], meta: {} },
-      isError: error || contributorListError,
+      isError: error,
       isOwner: list && list.user_id === userId,
     },
   };
 };
 
 interface ContributorListPageProps {
   list?: DBList;
-  initialData: {
-    meta: Meta;
-    data: DbPRContributor[];
-  };
   isError: boolean;
   isOwner: boolean;
 }
 
-const ContributorsListPage = ({ list, initialData, isError, isOwner }: ContributorListPageProps) => {
+const ContributorsListPage = ({ list, isError, isOwner }: ContributorListPageProps) => {
   const router = useRouter();
   const { range, limit } = router.query;
 
@@ -68,7 +59,6 @@ const ContributorsListPage = ({ list, initialData, isError, isOwner }: Contribut
     data: { data: contributors, meta },
   } = useContributorsList({
     listId: list?.id,
-    initialData,
     defaultRange: range ? (range as string) : "30",
     defaultLimit: limit ? (limit as unknown as number) : 10,
   });
@@ -78,13 +68,17 @@ const ContributorsListPage = ({ list, initialData, isError, isOwner }: Contribut
       {isError ? (
         <Error errorMessage="Unable to load list of contributors" />
       ) : (
-        <ContributorsList
-          contributors={contributors}
-          meta={meta}
-          isLoading={isLoading}
-          setPage={setPage}
-          range={String(range) ?? "30"}
-        />
+        <ErrorBoundary
+          fallback={<div className="grid place-content-center">Error loading the list of contributors</div>}
+        >
+          <ContributorsList
+            contributors={contributors}
+            meta={meta}
+            isLoading={isLoading}
+            setPage={setPage}
+            range={String(range) ?? "30"}
+          />
+        </ErrorBoundary>
       )}
     </ListPageLayout>
   );