From 1037aefc26cd9a972305973cff9d6f2acc114005 Mon Sep 17 00:00:00 2001 From: OGBONNA SUNDAY <62995161+OgDev-01@users.noreply.github.com> Date: Mon, 13 Nov 2023 16:51:28 +0100 Subject: [PATCH] feat: move range filter to global header (#2047) --- .../component-date-filter.tsx | 27 +++++++++++----- .../contributor-list-table-header.tsx | 11 +++---- .../contributor-list-table-row.tsx | 2 +- .../HoverCardWrapper/hover-card-wrapper.tsx | 2 +- .../InsightHeader/insight-header.tsx | 23 ++++++++++++-- .../PullRequestTable/pull-request-table.tsx | 2 +- .../molecules/TableHeader/table-header.tsx | 14 --------- .../ContributorCard/contributor-card.tsx | 2 +- .../contributor-profile-page.tsx | 2 +- .../organisms/Contributors/contributors.tsx | 12 +++---- .../ContributorsList/contributors-list.tsx | 7 ++--- .../ContributorsTable/contributors-table.tsx | 4 +-- .../organisms/Repositories/repositories.tsx | 8 ++--- components/organisms/ToolList/nav-item.tsx | 9 +++++- components/organisms/ToolList/nav.tsx | 18 +++++++++++ layouts/filter.tsx | 12 ++++++- layouts/hub-page.tsx | 11 +++++-- layouts/lists.tsx | 13 ++++++-- lib/hooks/api/useContributionsByProject.ts | 2 +- lib/hooks/api/useContributorList.ts | 6 ++-- lib/hooks/api/useContributorPullRequests.ts | 6 ++-- lib/hooks/api/useContributors.ts | 6 ++-- lib/hooks/api/useContributorsByProject.ts | 2 +- lib/hooks/api/useMostActiveContributors.ts | 8 +++-- lib/hooks/api/useRepositories.ts | 4 +-- lib/hooks/useContributorPullRequestsChart.ts | 2 +- lib/hooks/useNav.ts | 6 ++-- lib/store/index.ts | 3 -- pages/lists/[listId]/activity.tsx | 31 ++++++++++++++----- pages/lists/[listId]/contributors.tsx | 18 ++++++++--- pages/lists/[listId]/overview.tsx | 2 +- pages/user/[username]/index.tsx | 2 +- 32 files changed, 177 insertions(+), 100 deletions(-) diff --git a/components/molecules/ComponentDateFilter/component-date-filter.tsx b/components/molecules/ComponentDateFilter/component-date-filter.tsx index 534c5e2729..ad358f7c44 100644 --- a/components/molecules/ComponentDateFilter/component-date-filter.tsx +++ b/components/molecules/ComponentDateFilter/component-date-filter.tsx @@ -1,12 +1,14 @@ import { useState } from "react"; +import Tooltip from "components/atoms/Tooltip/tooltip"; + interface ComponentDateFilterProps { setRangeFilter: (range: number) => void; defaultRange?: number; } const ComponentDateFilter = ({ setRangeFilter, defaultRange }: ComponentDateFilterProps) => { - const [activeFilter, setActiveFilter] = useState(defaultRange || 30); + const [activeFilter, setActiveFilter] = useState(defaultRange ?? 30); const dates = [7, 30, 90]; const rangeFormatter = (value: number) => { @@ -22,15 +24,24 @@ const ComponentDateFilter = ({ setRangeFilter, defaultRange }: ComponentDateFilt return (
{dates.map((range, index) => ( - + + ))}
); diff --git a/components/molecules/ContributorListTableHeader/contributor-list-table-header.tsx b/components/molecules/ContributorListTableHeader/contributor-list-table-header.tsx index e62e30a5a5..a8915e0253 100644 --- a/components/molecules/ContributorListTableHeader/contributor-list-table-header.tsx +++ b/components/molecules/ContributorListTableHeader/contributor-list-table-header.tsx @@ -1,5 +1,6 @@ import clsx from "clsx"; import React from "react"; +import { useRouter } from "next/router"; import TableTitle from "components/atoms/TableTitle/table-title"; import { classNames } from "components/organisms/RepositoriesTable/repositories-table"; import Checkbox from "components/atoms/Checkbox/checkbox"; @@ -7,14 +8,12 @@ import Checkbox from "components/atoms/Checkbox/checkbox"; interface ContributorListTableHeadersProps { selected?: boolean; handleOnSelectAllContributor?: (checked: boolean) => void; - range?: number; } -const ContributorListTableHeaders = ({ - selected, - handleOnSelectAllContributor, - range = 30, -}: ContributorListTableHeadersProps) => { +const ContributorListTableHeaders = ({ selected, handleOnSelectAllContributor }: ContributorListTableHeadersProps) => { + const router = useRouter(); + const { range } = router.query; + return (
{/* Mobile */} diff --git a/components/molecules/ContributorListTableRow/contributor-list-table-row.tsx b/components/molecules/ContributorListTableRow/contributor-list-table-row.tsx index aeeeec706f..af22883556 100644 --- a/components/molecules/ContributorListTableRow/contributor-list-table-row.tsx +++ b/components/molecules/ContributorListTableRow/contributor-list-table-row.tsx @@ -19,7 +19,7 @@ interface ContributorListTableRow { topic: string; selected?: boolean; handleOnSelectContributor?: (state: boolean, contributor: DbPRContributor) => void; - range: number; + range: string; } function getLastContributionDate(contributions: DbRepoPR[]) { diff --git a/components/molecules/HoverCardWrapper/hover-card-wrapper.tsx b/components/molecules/HoverCardWrapper/hover-card-wrapper.tsx index 1238811eed..6bd3057067 100644 --- a/components/molecules/HoverCardWrapper/hover-card-wrapper.tsx +++ b/components/molecules/HoverCardWrapper/hover-card-wrapper.tsx @@ -13,7 +13,7 @@ const HoverCardWrapper = ({ username, repositories }: HoverCardWrapperProps) => const router = useRouter(); const topic = router.query.pageId as string; const { data: contributor } = useFetchUser(username); - const { repoList } = useContributorPullRequestsChart(username, "*", repositories, 30, true); + const { repoList } = useContributorPullRequestsChart(username, "*", repositories, "30", true); const profile: ContributorsProfileType = { githubAvatar: getAvatarByUsername(username, 40), diff --git a/components/molecules/InsightHeader/insight-header.tsx b/components/molecules/InsightHeader/insight-header.tsx index 58f4b85393..09530d815e 100644 --- a/components/molecules/InsightHeader/insight-header.tsx +++ b/components/molecules/InsightHeader/insight-header.tsx @@ -5,6 +5,7 @@ import { usePostHog } from "posthog-js/react"; import { FiCopy } from "react-icons/fi"; +import { useRouter } from "next/router"; import getRepoInsights from "lib/utils/get-repo-insights"; import Button from "components/atoms/Button/button"; import Title from "components/atoms/Typography/title"; @@ -13,7 +14,9 @@ import ContextThumbnail from "components/atoms/ContextThumbnail/context-thumbnai import { truncateString } from "lib/utils/truncate-string"; import useRepositories from "lib/hooks/api/useRepositories"; import { useToast } from "lib/hooks/useToast"; +import { setQueryParams } from "lib/utils/query-params"; import CardRepoList from "../CardRepoList/card-repo-list"; +import ComponentDateFilter from "../ComponentDateFilter/component-date-filter"; interface InsightHeaderProps { insight?: DbUserInsight; @@ -23,6 +26,8 @@ interface InsightHeaderProps { } const InsightHeader = ({ insight, repositories, insightId, isOwner }: InsightHeaderProps): JSX.Element => { + const router = useRouter(); + const { range } = router.query; const { data: repoData, meta: repoMeta } = useRepositories(repositories); const { repoList } = getRepoInsights(repoData); const [insightPageLink, setInsightPageLink] = useState(""); @@ -68,17 +73,29 @@ const InsightHeader = ({ insight, repositories, insightId, isOwner }: InsightHea
-
- {isOwner && ( - )} +
+ { + setQueryParams({ range: `${selectedRange}` }); + }} + defaultRange={Number(range)} + /> +
); diff --git a/components/molecules/PullRequestTable/pull-request-table.tsx b/components/molecules/PullRequestTable/pull-request-table.tsx index 8cf8b9aba6..56c7b65dfe 100644 --- a/components/molecules/PullRequestTable/pull-request-table.tsx +++ b/components/molecules/PullRequestTable/pull-request-table.tsx @@ -19,7 +19,7 @@ interface CardTableProps { repositories?: number[]; limit?: number; isHoverCard?: boolean; - range?: number; + range?: string; } const PullRequestTable = ({ diff --git a/components/molecules/TableHeader/table-header.tsx b/components/molecules/TableHeader/table-header.tsx index 525846c315..9f836b155e 100644 --- a/components/molecules/TableHeader/table-header.tsx +++ b/components/molecules/TableHeader/table-header.tsx @@ -7,7 +7,6 @@ import Search from "components/atoms/Search/search"; import Title from "components/atoms/Typography/title"; import LimitSelect from "components/atoms/Select/limit-select"; import LayoutToggle, { ToggleValue } from "components/atoms/LayoutToggle/layout-toggle"; -import ComponentDateFilter from "../ComponentDateFilter/component-date-filter"; import PaginationResult from "../PaginationResults/pagination-result"; interface TableHeaderProps { @@ -16,34 +15,22 @@ interface TableHeaderProps { entity: string; onSearch?: (search?: string) => void; updateLimit: Function; - range?: number; - setRangeFilter?: (range: number) => void; layout?: ToggleValue; onLayoutToggle?: (value: ToggleValue) => void; } -const options = [ - { name: "10 per page", value: 10 }, - { name: "20 per page", value: 20 }, - { name: "30 per page", value: 30 }, - { name: "40 per page", value: 40 }, - { name: "50 per page", value: 50 }, -]; const TableHeader = ({ title, metaInfo, entity, updateLimit, onSearch, - range, - setRangeFilter, layout, onLayoutToggle, }: TableHeaderProps): JSX.Element => { const router = useRouter(); const [searchTerm, setSearchTerm] = React.useState(""); const [suggestions, setSuggestions] = React.useState([]); - const [selected, setSelected] = React.useState(null); const { providerToken } = useSupabaseAuth(); const updateSuggestionsDebounced = useDebounce(async () => { @@ -96,7 +83,6 @@ const TableHeader = ({ />
- {setRangeFilter && range ? : null} {layout ? (
diff --git a/components/organisms/ContributorCard/contributor-card.tsx b/components/organisms/ContributorCard/contributor-card.tsx index 1dccc30199..3d2a88a5ea 100644 --- a/components/organisms/ContributorCard/contributor-card.tsx +++ b/components/organisms/ContributorCard/contributor-card.tsx @@ -26,7 +26,7 @@ interface ContributorCardProps { contributor: ContributorObject; topic: string; repositories?: number[]; - range?: number; + range?: string; } const ContributorCard = ({ className, contributor, topic, repositories, range }: ContributorCardProps) => { diff --git a/components/organisms/ContributorProfilePage/contributor-profile-page.tsx b/components/organisms/ContributorProfilePage/contributor-profile-page.tsx index 83e32f1d19..a9d58306dd 100644 --- a/components/organisms/ContributorProfilePage/contributor-profile-page.tsx +++ b/components/organisms/ContributorProfilePage/contributor-profile-page.tsx @@ -74,7 +74,7 @@ const ContributorProfilePage = ({ }); const { user: loggedInUser, signIn } = useSupabaseAuth(); - const { chart, repoList } = useContributorPullRequestsChart(githubName, "*", repositories, 30, true); + const { chart, repoList } = useContributorPullRequestsChart(githubName, "*", repositories, "30", true); const prsMergedPercentage = getPercent(prTotal, prMerged || 0); const { data: Follower, isError: followError, follow, unFollow } = useFollowUser(user?.login || ""); diff --git a/components/organisms/Contributors/contributors.tsx b/components/organisms/Contributors/contributors.tsx index 5681197822..49512d3c14 100644 --- a/components/organisms/Contributors/contributors.tsx +++ b/components/organisms/Contributors/contributors.tsx @@ -17,12 +17,13 @@ import useContributors from "lib/hooks/api/useContributors"; import { getAvatarByUsername } from "lib/utils/github"; import { ToggleValue } from "components/atoms/LayoutToggle/layout-toggle"; import ContributorListTableHeaders from "components/molecules/ContributorListTableHeader/contributor-list-table-header"; -import ClientOnly from "components/atoms/ClientOnly/client-only"; import { Popover, PopoverContent, PopoverTrigger } from "components/molecules/Popover/popover"; import Button from "components/atoms/Button/button"; import { addListContributor, useFetchAllLists } from "lib/hooks/useList"; import { Command, CommandGroup, CommandInput, CommandItem } from "components/atoms/Cmd/command"; import { useToast } from "lib/hooks/useToast"; + +import ClientOnly from "components/atoms/ClientOnly/client-only"; import ContributorCard from "../ContributorCard/contributor-card"; import ContributorTable from "../ContributorsTable/contributors-table"; @@ -33,14 +34,14 @@ interface ContributorProps { const Contributors = ({ repositories }: ContributorProps): JSX.Element => { const router = useRouter(); const topic = router.query.pageId as string; + + const { data, meta, setPage, setLimit, isError, isLoading } = useContributors(10, repositories); const { toast } = useToast(); - const store = useStore(); const range = useStore((state) => state.range); const [layout, setLayout] = useState("list"); const [selectedContributors, setSelectedContributors] = useState([]); const [selectedListIds, setSelectedListIds] = useState([]); const [popoverOpen, setPopoverOpen] = useState(false); - const { data, meta, setPage, setLimit, isError, isLoading } = useContributors(10, repositories, range); const contributors = data.map((pr) => { return { @@ -183,8 +184,6 @@ const Contributors = ({ repositories }: ContributorProps): JSX.Element => { updateLimit={setLimit} metaInfo={meta} entity="Contributors" - range={range} - setRangeFilter={store.updateRange} title="Contributors" layout={layout} onLayoutToggle={() => setLayout((prev) => (prev === "list" ? "grid" : "list"))} @@ -201,13 +200,12 @@ const Contributors = ({ repositories }: ContributorProps): JSX.Element => { contributor={{ ...contributor }} topic={topic} repositories={repositories} - range={range} /> ))}
) : (
- + {selectedContributors.length > 0 && (
{selectedContributors.length} Contributors selected
diff --git a/components/organisms/ContributorsList/contributors-list.tsx b/components/organisms/ContributorsList/contributors-list.tsx index fd36f7d192..b12e5f8159 100644 --- a/components/organisms/ContributorsList/contributors-list.tsx +++ b/components/organisms/ContributorsList/contributors-list.tsx @@ -16,13 +16,13 @@ interface ContributorsListProps { meta: Meta; setPage: (page: number) => void; setLimit: (limit: number) => void; - range: number; + range: string; } interface ContributorCardListProps { contributors: DbPRContributor[]; topic: string; - range: number; + range: string; } const ContributorCardList = ({ contributors = [], topic, range }: ContributorCardListProps) => { @@ -61,12 +61,11 @@ const ContributorsList = ({ contributors, isLoading, meta, setPage, setLimit, ra updateLimit={setLimit} layout={layout} onLayoutToggle={setLayout} - range={range} /> {layout !== "grid" ? ( <> - + ) : ( diff --git a/components/organisms/ContributorsTable/contributors-table.tsx b/components/organisms/ContributorsTable/contributors-table.tsx index 4e1f880747..2b3cd1e416 100644 --- a/components/organisms/ContributorsTable/contributors-table.tsx +++ b/components/organisms/ContributorsTable/contributors-table.tsx @@ -8,7 +8,7 @@ export interface ContributorTableProps { loading?: boolean; selectedContributors?: DbPRContributor[]; handleSelectContributors?: (state: boolean, contributor: DbPRContributor) => void; - range?: number; + range?: string; } const ContributorTable = ({ @@ -17,7 +17,7 @@ const ContributorTable = ({ loading, selectedContributors, handleSelectContributors, - range = 30, + range = "30", }: ContributorTableProps) => { return (
diff --git a/components/organisms/Repositories/repositories.tsx b/components/organisms/Repositories/repositories.tsx index 3af9c2d29d..d55d761d67 100644 --- a/components/organisms/Repositories/repositories.tsx +++ b/components/organisms/Repositories/repositories.tsx @@ -9,7 +9,6 @@ import TableHeader from "components/molecules/TableHeader/table-header"; import useRepositories from "lib/hooks/api/useRepositories"; import useSupabaseAuth from "lib/hooks/useSupabaseAuth"; -import useStore from "lib/store"; import Checkbox from "components/atoms/Checkbox/checkbox"; import Button from "components/atoms/Button/button"; @@ -27,8 +26,7 @@ const Repositories = ({ repositories }: RepositoriesProps): JSX.Element => { const { pageId, toolName, selectedFilter, userOrg } = router.query; const username = userOrg ? user?.user_metadata.user_name : undefined; const topic = pageId as string; - const store = useStore(); - const range = useStore((state) => state.range); + const { data: repoListData, meta: repoMeta, @@ -36,7 +34,7 @@ const Repositories = ({ repositories }: RepositoriesProps): JSX.Element => { isLoading: repoListIsLoading, setPage, setLimit, - } = useRepositories(repositories, range); + } = useRepositories(repositories); const filteredRepoNotIndexed = selectedFilter && !repoListIsLoading && !repoListIsError && repoListData.length === 0; const [selectedRepos, setSelectedRepos] = useState([]); @@ -97,8 +95,6 @@ const Repositories = ({ repositories }: RepositoriesProps): JSX.Element => { onSearch={(e) => handleOnSearch(e)} metaInfo={repoMeta} entity="repos" - range={range} - setRangeFilter={store.updateRange} title="Repositories" />
diff --git a/components/organisms/ToolList/nav-item.tsx b/components/organisms/ToolList/nav-item.tsx index 7067805159..bcb2ae55a0 100644 --- a/components/organisms/ToolList/nav-item.tsx +++ b/components/organisms/ToolList/nav-item.tsx @@ -1,5 +1,6 @@ import Link from "next/link"; import { useEffect, useState } from "react"; +import { useRouter } from "next/router"; import humanizeNumber from "lib/utils/humanizeNumber"; @@ -13,6 +14,8 @@ interface NavItemProps { const NavItem: React.FC = ({ username, filterName, tool, selectedFilter, selectedTool }) => { const [total, setTotal] = useState(); + const router = useRouter(); + const { range } = router.query; useEffect(() => { setTotal(tool.numOf); @@ -21,7 +24,11 @@ const NavItem: React.FC = ({ username, filterName, tool, selectedF return ( {/* Button component was here and needed to be removed to resolve issue #187. Button component had styling that will eventually need to be replaced. */} diff --git a/components/organisms/ToolList/nav.tsx b/components/organisms/ToolList/nav.tsx index a01511ad69..ff3e4cbe10 100644 --- a/components/organisms/ToolList/nav.tsx +++ b/components/organisms/ToolList/nav.tsx @@ -1,4 +1,9 @@ import React from "react"; +import { useRouter } from "next/router"; + +import { setQueryParams } from "lib/utils/query-params"; + +import ComponentDateFilter from "components/molecules/ComponentDateFilter/component-date-filter"; import NavItem from "./nav-item"; type toolListArray = { @@ -15,6 +20,9 @@ interface NavProps { } const Nav: React.FC = ({ toolList, selectedTool = "dashboard", selectedFilter, filterName, username }) => { + const router = useRouter(); + const { range } = router.query; + return (
))} + {range ? ( +
+ { + setQueryParams({ range: `${selectedRange}` }); + }} + defaultRange={Number(range)} + /> +
+ ) : null} ); }; diff --git a/layouts/filter.tsx b/layouts/filter.tsx index 744f49c7ee..c89b4dfd71 100644 --- a/layouts/filter.tsx +++ b/layouts/filter.tsx @@ -1,4 +1,5 @@ -import React from "react"; +import React, { useEffect } from "react"; +import { useRouter } from "next/router"; import Footer from "components/organisms/Footer/footer"; import Header from "components/organisms/Header/header"; @@ -6,10 +7,19 @@ import Nav from "components/organisms/ToolList/nav"; import TopNav from "components/organisms/TopNav/top-nav"; import FilterHeader from "components/molecules/FilterHeader/filter-header"; +import { setQueryParams } from "lib/utils/query-params"; import useNav from "lib/hooks/useNav"; const FilterLayout = ({ children }: { children: React.ReactNode }) => { const { toolList, selectedTool, filterName, selectedFilter, userOrg } = useNav(); + const router = useRouter(); + const { range } = router.query; + + useEffect(() => { + if (!range) { + setQueryParams({ range: "30" }); + } + }, [range, router.isReady]); return (
diff --git a/layouts/hub-page.tsx b/layouts/hub-page.tsx index 6ca06757bc..0bc12a80d4 100644 --- a/layouts/hub-page.tsx +++ b/layouts/hub-page.tsx @@ -1,4 +1,4 @@ -import React from "react"; +import React, { useEffect } from "react"; import { useRouter } from "next/router"; import Footer from "components/organisms/Footer/footer"; @@ -11,15 +11,22 @@ import useNav from "lib/hooks/useNav"; import useInsight from "lib/hooks/useInsight"; import useSupabaseAuth from "lib/hooks/useSupabaseAuth"; import SkeletonWrapper from "components/atoms/SkeletonLoader/skeleton-wrapper"; +import { setQueryParams } from "lib/utils/query-params"; const HubPageLayout = ({ children }: { children: React.ReactNode }) => { const router = useRouter(); const { userId } = useSupabaseAuth(); - const { pageId } = router.query; + const { pageId, range } = router.query; const insightId = pageId as string; const { data: insight, isLoading, isError } = useInsight(insightId); const repositories = insight?.repos.map((repo) => repo.repo_id); + useEffect(() => { + if (!range) { + setQueryParams({ range: "30" }); + } + }, [range, router.isReady]); + const { toolList, selectedTool, selectedFilter, userOrg } = useNav(repositories); let isOwner = !!(userId && insight && `${userId}` === `${insight.user.id}`); diff --git a/layouts/lists.tsx b/layouts/lists.tsx index ea2438a6d2..cccfeea57f 100644 --- a/layouts/lists.tsx +++ b/layouts/lists.tsx @@ -7,21 +7,23 @@ import TopNav from "components/organisms/TopNav/top-nav"; import ListHeader from "components/ListHeader/list-header"; import TabsList from "components/TabList/tab-list"; import ComponentDateFilter from "components/molecules/ComponentDateFilter/component-date-filter"; +import { setQueryParams } from "lib/utils/query-params"; const ListPageLayout = ({ children, list, numberOfContributors, isOwner = false, - setRange, + showRangeFilter = true, }: { children: React.ReactNode; list?: DBList; numberOfContributors: number; isOwner: boolean; - setRange?: (range: number) => void; + showRangeFilter?: boolean; }) => { const router = useRouter(); + const { range } = router.query; const paths = router.asPath.split("/"); const selectedTab = paths[3] ?? "overview"; @@ -49,7 +51,12 @@ const ListPageLayout = ({ {list && }
- {setRange && } + {showRangeFilter && ( + setQueryParams({ range: `${range}` })} + /> + )}
diff --git a/lib/hooks/api/useContributionsByProject.ts b/lib/hooks/api/useContributionsByProject.ts index e43fcaa525..29108a2363 100644 --- a/lib/hooks/api/useContributionsByProject.ts +++ b/lib/hooks/api/useContributionsByProject.ts @@ -7,7 +7,7 @@ export const useContributionsByProject = ({ initialData, }: { listId: string; - range: number; + range: string; initialData?: DbProjectContributions[]; }) => { const { data, error } = useSWR( diff --git a/lib/hooks/api/useContributorList.ts b/lib/hooks/api/useContributorList.ts index 24144ce99d..48f33ce6b3 100644 --- a/lib/hooks/api/useContributorList.ts +++ b/lib/hooks/api/useContributorList.ts @@ -22,7 +22,7 @@ export const useContributorsList = ({ initialData, initialPage = 1, defaultLimit = 10, - defaultRange = 30, + defaultRange = "30", }: { listId: string | undefined; initialData?: { @@ -31,7 +31,7 @@ export const useContributorsList = ({ }; initialPage?: number; defaultLimit?: number; - defaultRange?: number; + defaultRange?: string; }) => { const [range, setRange] = useState(defaultRange); // [start, end const [page, setPage] = useState(initialPage); @@ -39,7 +39,7 @@ export const useContributorsList = ({ const query = new URLSearchParams(); query.append("page", page.toString()); query.append("limit", limit.toString()); - query.append("range", range.toString()); + query.append("range", range); const { data, error, mutate } = useSWR( listId ? `lists/${listId}/contributors?${query}` : null, diff --git a/lib/hooks/api/useContributorPullRequests.ts b/lib/hooks/api/useContributorPullRequests.ts index 467c3cdc74..1492c7b69d 100644 --- a/lib/hooks/api/useContributorPullRequests.ts +++ b/lib/hooks/api/useContributorPullRequests.ts @@ -15,7 +15,7 @@ export function getContributorPRUrl( topic: string, repoIds: number[] = [], limit = 8, - range = 30, + range = "30", mostRecent = false ) { const filterQuery = getFilterQuery(filter); @@ -53,7 +53,7 @@ interface ContributorPullRequestOptions { topic: string; repoIds?: number[]; limit?: number; - range?: number; + range?: string; mostRecent?: boolean; } @@ -62,7 +62,7 @@ const useContributorPullRequests = ( contributor: "", topic: "", limit: 8, - range: 30, + range: "30", mostRecent: false, } ) => { diff --git a/lib/hooks/api/useContributors.ts b/lib/hooks/api/useContributors.ts index 48a121d166..73e63525cf 100644 --- a/lib/hooks/api/useContributors.ts +++ b/lib/hooks/api/useContributors.ts @@ -18,11 +18,11 @@ interface PaginatedResponse { * @param range * @returns */ -const useContributors = (intialLimit = 10, repoIds: number[] = [], range = 30) => { +const useContributors = (intialLimit = 10, repoIds: number[] = []) => { const router = useRouter(); const [page, setPage] = useState(1); const [limit, setLimit] = useState(intialLimit); - const { pageId, selectedFilter } = router.query; + const { pageId, selectedFilter, range } = router.query; const topic = pageId as string; const filterQuery = getFilterQuery(selectedFilter); const query = new URLSearchParams(filterQuery); @@ -48,7 +48,7 @@ const useContributors = (intialLimit = 10, repoIds: number[] = [], range = 30) = query.delete("topic"); } - query.set("range", `${range}`); + query.set("range", `${range ?? 30}`); const baseEndpoint = "contributors/search"; const endpointString = `${baseEndpoint}?${query.toString()}`; diff --git a/lib/hooks/api/useContributorsByProject.ts b/lib/hooks/api/useContributorsByProject.ts index b7883ced0f..9360299797 100644 --- a/lib/hooks/api/useContributorsByProject.ts +++ b/lib/hooks/api/useContributorsByProject.ts @@ -2,7 +2,7 @@ import useSWR, { Fetcher } from "swr"; import { useState } from "react"; import publicApiFetcher from "lib/utils/public-api-fetcher"; -export const useContributorsByProject = (listId: string, range: number) => { +export const useContributorsByProject = (listId: string, range: string) => { const [repoId, setRepoId] = useState(null); const { data, error } = useSWR( listId ? `lists/${listId}/stats/top-project-contributions-by-contributor?repo_id=${repoId}&range=${range}` : null, diff --git a/lib/hooks/api/useMostActiveContributors.ts b/lib/hooks/api/useMostActiveContributors.ts index dc276aef02..1804223ac6 100644 --- a/lib/hooks/api/useMostActiveContributors.ts +++ b/lib/hooks/api/useMostActiveContributors.ts @@ -1,5 +1,6 @@ import { useState } from "react"; import useSWR, { Fetcher } from "swr"; +import { useRouter } from "next/router"; import publicApiFetcher from "lib/utils/public-api-fetcher"; import { @@ -20,22 +21,23 @@ const useMostActiveContributors = ({ listId, initData, intialLimit = 20, - range = 30, defaultContributorType = "all", }: { listId: string; initData?: ContributorStat[]; intialLimit?: number; - range?: number; + defaultContributorType?: ContributorType; }) => { const [limit, setLimit] = useState(intialLimit); + const router = useRouter(); + const { range = "30" } = router.query; const [contributorType, setContributorType] = useState(defaultContributorType); const query = new URLSearchParams(); query.set("contributorType", `${contributorType}`); query.set("limit", `${limit}`); - query.set("range", `${range}`); + query.set("range", range as string); // Change this to total_contributions once implemented query.set("orderBy", "total_contributions"); query.set("orderDirection", "DESC"); diff --git a/lib/hooks/api/useRepositories.ts b/lib/hooks/api/useRepositories.ts index f07aea5d13..134d64dc0b 100644 --- a/lib/hooks/api/useRepositories.ts +++ b/lib/hooks/api/useRepositories.ts @@ -10,11 +10,11 @@ interface PaginatedResponse { readonly meta: Meta; } -const useRepositories = (repoIds: number[] = [], range = 30) => { +const useRepositories = (repoIds: number[] = []) => { const router = useRouter(); const [page, setPage] = useState(1); const [limit, setLimit] = useState(10); - const { pageId, selectedFilter } = router.query; + const { pageId, selectedFilter, range } = router.query; const topic = pageId as string; const filterQuery = getFilterQuery(selectedFilter); const query = new URLSearchParams(filterQuery); diff --git a/lib/hooks/useContributorPullRequestsChart.ts b/lib/hooks/useContributorPullRequestsChart.ts index 81654ba69c..b345ab69b2 100644 --- a/lib/hooks/useContributorPullRequestsChart.ts +++ b/lib/hooks/useContributorPullRequestsChart.ts @@ -9,7 +9,7 @@ const useContributorPullRequestsChart = ( contributor: string, topic: string, repoIds: number[] = [], - range = 30, + range = "30", mostRecent = false ) => { const lineChart = { diff --git a/lib/hooks/useNav.ts b/lib/hooks/useNav.ts index f5b4ca8db6..a4828277ff 100644 --- a/lib/hooks/useNav.ts +++ b/lib/hooks/useNav.ts @@ -1,13 +1,11 @@ import { useRouter } from "next/router"; -import useStore from "lib/store"; import useRepositories from "./api/useRepositories"; import useContributors from "./api/useContributors"; const useNav = (repositories: number[] = []) => { const router = useRouter(); - const range = useStore((state) => state.range); - const { meta: repoMetaData } = useRepositories(repositories, range); - const { meta: conMetaData } = useContributors(10, repositories, range); + const { meta: repoMetaData } = useRepositories(repositories); + const { meta: conMetaData } = useContributors(10, repositories); const defaultTools = [ { diff --git a/lib/store/index.ts b/lib/store/index.ts index c6059aec23..9b8a0d7164 100644 --- a/lib/store/index.ts +++ b/lib/store/index.ts @@ -4,7 +4,6 @@ import { User } from "@supabase/supabase-js"; import { GlobalStateInterface } from "interfaces/global-state-types"; const initialState: GlobalStateInterface = { - range: 30, insightRepoLimit: 10, user: null, sessionToken: null, @@ -27,7 +26,6 @@ interface AppStore extends GlobalStateInterface { waitlisted: boolean; insightRepoLimit: number; }) => void; - updateRange: (range: number) => void; setUser: (user: User | null) => void; setSessionToken: (sessionToken?: string | null) => void; setProviderToken: (providerToken?: string | null) => void; @@ -50,7 +48,6 @@ const store = create()((set) => ({ waitlisted: boolean; insightRepoLimit: number; }) => set((state) => ({ ...state, onboarded, waitlisted, insightRepoLimit })), - updateRange: (range: number) => set((state) => ({ ...state, range })), setUser: (user: User | null) => set((state) => ({ ...state, user })), setSessionToken: (sessionToken?: string | null) => set((state) => ({ ...state, sessionToken })), setProviderToken: (providerToken?: string | null) => set((state) => ({ ...state, providerToken })), diff --git a/pages/lists/[listId]/activity.tsx b/pages/lists/[listId]/activity.tsx index 05211dec85..0b53674607 100644 --- a/pages/lists/[listId]/activity.tsx +++ b/pages/lists/[listId]/activity.tsx @@ -1,7 +1,8 @@ import { createPagesServerClient } from "@supabase/auth-helpers-nextjs"; import { GetServerSidePropsContext } from "next"; -import { useState } from "react"; 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,6 +15,7 @@ import { ContributionsTreemap } from "components/molecules/ContributionsTreemap/ import { useContributorsByProject } from "lib/hooks/api/useContributorsByProject"; import { useContributionsByProject } from "lib/hooks/api/useContributionsByProject"; import { getGraphColorPalette } from "lib/utils/color-utils"; +import { setQueryParams } from "lib/utils/query-params"; interface ContributorListPageProps { list?: DBList; @@ -33,8 +35,9 @@ export const getServerSideProps = async (ctx: GetServerSidePropsContext) => { data: { session }, } = await supabase.auth.getSession(); const bearerToken = session ? session.access_token : ""; - const { listId } = ctx.params as { listId: string }; - const range = 30; + const { listId, range: rawRange } = ctx.params as { listId: string; range: string }; + + const range = rawRange ? Number(rawRange) : "30"; const [ { data, error: contributorListError }, { data: list, error }, @@ -80,7 +83,8 @@ export const getServerSideProps = async (ctx: GetServerSidePropsContext) => { }; const ListActivityPage = ({ list, numberOfContributors, isError, activityData }: ContributorListPageProps) => { - const [range, setRange] = useState(30); + const router = useRouter(); + const { range } = router.query; const isOwner = false; const { data: contributorStats, @@ -88,13 +92,24 @@ const ListActivityPage = ({ list, numberOfContributors, isError, activityData }: isError: isMostActiveError, setContributorType, contributorType, - } = useMostActiveContributors({ listId: list!.id, initData: activityData.contributorStats.data, range }); + } = useMostActiveContributors({ listId: list!.id, initData: activityData.contributorStats.data }); + + 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, range as string); const { data: projectData, error: projectDataError } = useContributionsByProject({ listId: list!.id, - range, + range: range as string, initialData: activityData.projectData, }); @@ -122,7 +137,7 @@ const ListActivityPage = ({ list, numberOfContributors, isError, activityData }: }; return ( - + {isError ? ( ) : ( diff --git a/pages/lists/[listId]/contributors.tsx b/pages/lists/[listId]/contributors.tsx index ebe820abda..2e041f7316 100644 --- a/pages/lists/[listId]/contributors.tsx +++ b/pages/lists/[listId]/contributors.tsx @@ -1,10 +1,13 @@ 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"; export const getServerSideProps = async (ctx: GetServerSidePropsContext) => { const supabase = createPagesServerClient(ctx); @@ -54,17 +57,24 @@ interface ContributorListPageProps { const ContributorsListPage = ({ list, initialData, isError }: ContributorListPageProps) => { // create useIsOwner(list?.user_id, userId) once we're ready to implement this. const isOwner = false; + const router = useRouter(); + const { range } = router.query; + + useEffect(() => { + if (!range) { + setQueryParams({ range: "30" }); + } + }, [range]); const { isLoading, setPage, setLimit, setRange, - range, data: { data: contributors, meta }, - } = useContributorsList({ listId: list?.id, initialData }); + } = useContributorsList({ listId: list?.id, initialData, defaultRange: range as string }); return ( - + {isError ? ( ) : ( @@ -74,7 +84,7 @@ const ContributorsListPage = ({ list, initialData, isError }: ContributorListPag isLoading={isLoading} setPage={setPage} setLimit={setLimit} - range={range} + range={range as string} /> )} diff --git a/pages/lists/[listId]/overview.tsx b/pages/lists/[listId]/overview.tsx index 5c1270ac9f..e66df84d30 100644 --- a/pages/lists/[listId]/overview.tsx +++ b/pages/lists/[listId]/overview.tsx @@ -147,7 +147,7 @@ const ListsOverview = ({ list, numberOfContributors, isOwner }: ListsOverviewPro }, 0); return ( - +
diff --git a/pages/user/[username]/index.tsx b/pages/user/[username]/index.tsx index 3da18a8041..f264c49562 100644 --- a/pages/user/[username]/index.tsx +++ b/pages/user/[username]/index.tsx @@ -38,7 +38,7 @@ const Contributor: WithPageLayout = ({ username, user, ogIm topic: "*", repoIds: [], limit: 30, - range: 30, + range: "30", mostRecent: true, }); const isError = contributorError;