fix: list activity and contirbutor page rerender issue (#2214)

components/molecules/ContributorListTableHeader/contributor-list-table-header.tsx

@@ -62,7 +62,7 @@ const ContributorListTableHeaders = ({ selected, handleOnSelectAllContributor }:
           <TableTitle>Contributions</TableTitle>
         </div>
         <div className={clsx(classNames.cols.contributors, "hidden lg:flex justify-center")}>
-          <TableTitle>{`Last ${range} Days`}</TableTitle>
+          <TableTitle>{`Last ${range ?? 30} Days`}</TableTitle>
         </div>
       </div>
     </div>

components/organisms/ContributorsList/contributors-list.tsx

@@ -64,10 +64,10 @@ const ContributorsList = ({ contributors, isLoading, meta, setPage, range }: Con
         {layout !== "grid" ? (
           <>
             <ContributorListTableHeaders />
-            <ContributorTable loading={isLoading} topic={"*"} contributors={contributors} range={range} />
+            <ContributorTable loading={isLoading} topic={"*"} contributors={contributors} range={range ?? 30} />
           </>
         ) : (
-          <ContributorCardList contributors={contributors} topic={"*"} range={range} />
+          <ContributorCardList contributors={contributors} topic={"*"} range={range ?? 30} />
         )}
       </ClientOnly>
       <div className="flex items-center justify-between w-full py-1 md:py-4 md:mt-5">

lib/hooks/api/useContributionsByEvolutionType.ts

@@ -11,18 +11,18 @@ import { ContributorType } from "components/Graphs/shared/contributor-type-filte
  */
 const useContributionsEvolutionByType = ({
   listId,
-  range = "30",
+  range = 30,
   defaultContributorType = "all",
 }: {
   listId: string;
-  range: string;
+  range: number;
   defaultContributorType?: ContributorType;
 }) => {
   const [contributorType, setContributorType] = useState<ContributorType>(defaultContributorType);
 
   const query = new URLSearchParams();
   query.set("contributorType", `${contributorType}`);
-  query.set("range", range);
+  query.set("range", `${range}`);
 
   const apiEndpoint = `lists/${listId}/stats/contributions-evolution-by-contributor-type?${query.toString()}`;
 

lib/hooks/api/useContributionsByProject.ts

@@ -7,17 +7,15 @@ export const useContributionsByProject = ({
   initialData,
 }: {
   listId: string;
-  range: string;
+  range: number;
   initialData?: DbProjectContributions[];
 }) => {
   const { data, error } = useSWR<DbProjectContributions[]>(
     listId ? `lists/${listId}/stats/contributions-by-project?range=${range}` : null,
-    publicApiFetcher as Fetcher<DbProjectContributions[], Error>
-    // {
-    //   fallbackData: {
-    //     `lists/${listId}/stats/contributions-by-project?range=${range}`: initialData
-    // },
-    // }
+    publicApiFetcher as Fetcher<DbProjectContributions[], Error>,
+    {
+      fallbackData: initialData,
+    }
   );
 
   return {

lib/hooks/api/useContributorsByProject.ts

@@ -2,10 +2,21 @@ import useSWR, { Fetcher } from "swr";
 import { useState } from "react";
 import publicApiFetcher from "lib/utils/public-api-fetcher";
 
-export const useContributorsByProject = (listId: string, range: string) => {
+export const useContributorsByProject = (listId: string, range = 30) => {
   const [repoId, setRepoId] = useState<number | null>(null);
+
+  const query = new URLSearchParams();
+
+  if (repoId) {
+    query.set("repo_id", `${repoId}`);
+  }
+  query.set("range", `${range}`);
+
+  const baseEndpoint = `lists/${listId}/stats/top-project-contributions-by-contributor`;
+
+  const endpointString = `${baseEndpoint}?${query.toString()}`;
   const { data, error } = useSWR<DBProjectContributor[]>(
-    listId ? `lists/${listId}/stats/top-project-contributions-by-contributor?repo_id=${repoId}&range=${range}` : null,
+    listId && repoId ? endpointString : null,
     publicApiFetcher as Fetcher<DBProjectContributor[], Error>
   );
 

pages/lists/[listId]/activity.tsx

@@ -2,7 +2,6 @@ import { createPagesServerClient } from "@supabase/auth-helpers-nextjs";
 import { GetServerSidePropsContext } from "next";
 import { NodeMouseEventHandler } from "@nivo/treemap";
 import { useRouter } from "next/router";
-import { useEffect } from "react";
 import Error from "components/atoms/Error/Error";
 import { fetchApiData, validateListPath } from "helpers/fetchApiData";
 import ListPageLayout from "layouts/lists";
@@ -14,7 +13,6 @@ import { useContributionsByProject } from "lib/hooks/api/useContributionsByProje
 import { getGraphColorPalette } from "lib/utils/color-utils";
 import ContributionsEvolutionByType from "components/molecules/ContributionsEvolutionByTypeCard/contributions-evolution-by-type-card";
 import useContributionsEvolutionByType from "lib/hooks/api/useContributionsByEvolutionType";
-import { setQueryParams } from "lib/utils/query-params";
 import { FeatureFlagged } from "components/shared/feature-flagged";
 import { FeatureFlag, getAllFeatureFlags } from "lib/utils/server/feature-flags";
 
@@ -41,8 +39,8 @@ export const getServerSideProps = async (ctx: GetServerSidePropsContext) => {
   const bearerToken = session ? session.access_token : "";
   const { listId, range: rawRange, limit: rawLimit } = ctx.params as FilterParams;
 
-  const range = rawRange ? Number(rawRange) : "30";
-  const limit = rawLimit ? Number(rawLimit) : "20";
+  const range = rawRange ? Number(rawRange) : 30;
+  const limit = rawLimit ? Number(rawLimit) : 20;
   const [{ data, error: contributorListError }, { data: list, error }] = await Promise.all([
     fetchApiData<PagedData<DBListContributor>>({
       path: `lists/${listId}/contributors?limit=1`,
@@ -83,17 +81,16 @@ const ListActivityPage = ({ list, numberOfContributors, isError, isOwner, featur
     contributorType,
   } = useMostActiveContributors({ listId: list!.id });
 
-  useEffect(() => {
-    if (!range) {
-      setQueryParams({ range: "30" });
-    }
-  }, [range]);
-
-  const { setRepoId, error, data: projectContributionsByUser, repoId } = useContributorsByProject(list!.id, range);
+  const {
+    setRepoId,
+    error,
+    data: projectContributionsByUser,
+    repoId,
+  } = useContributorsByProject(list!.id, Number(range ?? "30"));
 
   const { data: projectData, error: projectDataError } = useContributionsByProject({
     listId: list!.id,
-    range,
+    range: Number(range ?? "30"),
   });
 
   const onHandleClick: NodeMouseEventHandler<object> = (node) => {
@@ -123,7 +120,7 @@ const ListActivityPage = ({ list, numberOfContributors, isError, isOwner, featur
     data: evolutionData,
     isError: evolutionError,
     isLoading: isLoadingEvolution,
-  } = useContributionsEvolutionByType({ listId: list!.id, range });
+  } = useContributionsEvolutionByType({ listId: list!.id, range: Number(range ?? "30") });
 
   return (
     <ListPageLayout list={list} numberOfContributors={numberOfContributors} isOwner={isOwner}>

pages/lists/[listId]/contributors.tsx

@@ -1,13 +1,12 @@
 import { GetServerSidePropsContext } from "next";
 import { createPagesServerClient } from "@supabase/auth-helpers-nextjs";
 import { useRouter } from "next/router";
-import { useEffect } from "react";
+
 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 ContributorsList from "components/organisms/ContributorsList/contributors-list";
-import { setQueryParams } from "lib/utils/query-params";
 import { FilterParams } from "./activity";
 
 export const getServerSideProps = async (ctx: GetServerSidePropsContext) => {
@@ -19,10 +18,11 @@ export const getServerSideProps = async (ctx: GetServerSidePropsContext) => {
   const bearerToken = session ? session.access_token : "";
 
   const { listId, limit: rawLimit, range } = ctx.params as FilterParams;
-  const limit = 10; // Can pull this from the querystring in the future
+
+  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}`,
+      path: `lists/${listId}/contributors?limit=${limit}&range=${range ?? "30"}`,
       bearerToken,
       pathValidator: validateListPath,
     }),
@@ -62,20 +62,15 @@ const ContributorsListPage = ({ list, initialData, isError, isOwner }: Contribut
   const router = useRouter();
   const { range, limit } = router.query;
 
-  useEffect(() => {
-    if (!range) {
-      setQueryParams({ range: "30" });
-    }
-  }, [range]);
   const {
     isLoading,
     setPage,
     data: { data: contributors, meta },
   } = useContributorsList({
     listId: list?.id,
     initialData,
-    defaultRange: range as string,
-    defaultLimit: Number(limit),
+    defaultRange: range ? (range as string) : "30",
+    defaultLimit: limit ? (limit as unknown as number) : 10,
   });
 
   return (
@@ -88,7 +83,7 @@ const ContributorsListPage = ({ list, initialData, isError, isOwner }: Contribut
           meta={meta}
           isLoading={isLoading}
           setPage={setPage}
-          range={range as string}
+          range={String(range) ?? "30"}
         />
       )}
     </ListPageLayout>