From 86eae2c572321ec68c82665118e545e69321b4ed Mon Sep 17 00:00:00 2001 From: OGBONNA SUNDAY <62995161+OgDev-01@users.noreply.github.com> Date: Wed, 29 Nov 2023 20:32:57 +0100 Subject: [PATCH] fix: list activity and contirbutor page rerender issue (#2214) --- .../contributor-list-table-header.tsx | 2 +- .../ContributorsList/contributors-list.tsx | 4 ++-- .../api/useContributionsByEvolutionType.ts | 6 ++--- lib/hooks/api/useContributionsByProject.ts | 12 ++++------ lib/hooks/api/useContributorsByProject.ts | 15 ++++++++++-- pages/lists/[listId]/activity.tsx | 23 ++++++++----------- pages/lists/[listId]/contributors.tsx | 19 ++++++--------- 7 files changed, 41 insertions(+), 40 deletions(-) diff --git a/components/molecules/ContributorListTableHeader/contributor-list-table-header.tsx b/components/molecules/ContributorListTableHeader/contributor-list-table-header.tsx index 55c1dda881..fe2799c8ce 100644 --- a/components/molecules/ContributorListTableHeader/contributor-list-table-header.tsx +++ b/components/molecules/ContributorListTableHeader/contributor-list-table-header.tsx @@ -62,7 +62,7 @@ const ContributorListTableHeaders = ({ selected, handleOnSelectAllContributor }: Contributions
- {`Last ${range} Days`} + {`Last ${range ?? 30} Days`}
diff --git a/components/organisms/ContributorsList/contributors-list.tsx b/components/organisms/ContributorsList/contributors-list.tsx index 2d472d47a1..8e435dadbf 100644 --- a/components/organisms/ContributorsList/contributors-list.tsx +++ b/components/organisms/ContributorsList/contributors-list.tsx @@ -64,10 +64,10 @@ const ContributorsList = ({ contributors, isLoading, meta, setPage, range }: Con {layout !== "grid" ? ( <> - + ) : ( - + )}
diff --git a/lib/hooks/api/useContributionsByEvolutionType.ts b/lib/hooks/api/useContributionsByEvolutionType.ts index 3fb91fd77c..8c64e9d7a3 100644 --- a/lib/hooks/api/useContributionsByEvolutionType.ts +++ b/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(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()}`; diff --git a/lib/hooks/api/useContributionsByProject.ts b/lib/hooks/api/useContributionsByProject.ts index 29108a2363..de0f75eeab 100644 --- a/lib/hooks/api/useContributionsByProject.ts +++ b/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( listId ? `lists/${listId}/stats/contributions-by-project?range=${range}` : null, - publicApiFetcher as Fetcher - // { - // fallbackData: { - // `lists/${listId}/stats/contributions-by-project?range=${range}`: initialData - // }, - // } + publicApiFetcher as Fetcher, + { + fallbackData: initialData, + } ); return { diff --git a/lib/hooks/api/useContributorsByProject.ts b/lib/hooks/api/useContributorsByProject.ts index 9360299797..9ae0b7824a 100644 --- a/lib/hooks/api/useContributorsByProject.ts +++ b/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(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( - listId ? `lists/${listId}/stats/top-project-contributions-by-contributor?repo_id=${repoId}&range=${range}` : null, + listId && repoId ? endpointString : null, publicApiFetcher as Fetcher ); diff --git a/pages/lists/[listId]/activity.tsx b/pages/lists/[listId]/activity.tsx index 507fed53ac..ca821560ce 100644 --- a/pages/lists/[listId]/activity.tsx +++ b/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>({ 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 = (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 ( diff --git a/pages/lists/[listId]/contributors.tsx b/pages/lists/[listId]/contributors.tsx index ff58028bfc..adcd030f9b 100644 --- a/pages/lists/[listId]/contributors.tsx +++ b/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>({ - path: `lists/${listId}/contributors?limit=${limit}`, + path: `lists/${listId}/contributors?limit=${limit}&range=${range ?? "30"}`, bearerToken, pathValidator: validateListPath, }), @@ -62,11 +62,6 @@ 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, @@ -74,8 +69,8 @@ const ContributorsListPage = ({ list, initialData, isError, isOwner }: Contribut } = 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"} /> )}