From 97155cdcc91ffda02061f33ff57962cc118caa1a Mon Sep 17 00:00:00 2001 From: Sunday Ogbonna Date: Fri, 3 Nov 2023 14:56:50 +0100 Subject: [PATCH 01/15] chore: initial commit for feature --- .../ComponentDateFilter/component-date-filter.tsx | 14 +++++++------- .../contributor-list-table-header.tsx | 11 +++++------ components/molecules/TableHeader/table-header.tsx | 13 +------------ 3 files changed, 13 insertions(+), 25 deletions(-) diff --git a/components/molecules/ComponentDateFilter/component-date-filter.tsx b/components/molecules/ComponentDateFilter/component-date-filter.tsx index ff1fdcde2f..e72c74f1a2 100644 --- a/components/molecules/ComponentDateFilter/component-date-filter.tsx +++ b/components/molecules/ComponentDateFilter/component-date-filter.tsx @@ -1,18 +1,18 @@ import { useState } from "react"; interface ComponentDateFilterProps { - setRangeFilter: (range: number) => void; - defaultRange?: number; + setRangeFilter: (range: string) => void; + defaultRange?: string; } const ComponentDateFilter = ({ setRangeFilter, defaultRange }: ComponentDateFilterProps) => { - const [activeFilter, setActiveFilter] = useState(defaultRange || 30); - const dates = [7, 30, 90]; + const [activeFilter, setActiveFilter] = useState(defaultRange ?? "30"); + const dates = ["7", "30", "90"]; - const rangeFormatter = (value: number) => { - return value === 7 ? "7d" : value === 30 ? "30d" : "3m"; + const rangeFormatter = (value: string) => { + return value === "7" ? "7d" : value === "30" ? "30d" : "3m"; }; - const handleFilterClick = (range: number) => { + const handleFilterClick = (range: string) => { setActiveFilter(range); // Logic to setDateFilter goes herein with the dates value diff --git a/components/molecules/ContributorListTableHeader/contributor-list-table-header.tsx b/components/molecules/ContributorListTableHeader/contributor-list-table-header.tsx index d276c179c6..d96169272d 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?: (contributor: any) => 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/TableHeader/table-header.tsx b/components/molecules/TableHeader/table-header.tsx index 525846c315..8f5715b027 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,27 +15,17 @@ 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 => { @@ -96,7 +85,7 @@ const TableHeader = ({ />
- {setRangeFilter && range ? : null} + {/* {setRangeFilter && range ? : null} */} {layout ? (
From e84006aa8795ea95cf1f0dd03b5dcc7dd08ceeee Mon Sep 17 00:00:00 2001 From: Sunday Ogbonna Date: Fri, 3 Nov 2023 15:37:15 +0100 Subject: [PATCH 02/15] chore: move range filter to global header --- .../InsightHeader/insight-header.tsx | 23 ++++++++-- .../molecules/TableHeader/table-header.tsx | 2 - .../organisms/Contributors/contributors.tsx | 44 ++++++++++--------- 3 files changed, 43 insertions(+), 26 deletions(-) diff --git a/components/molecules/InsightHeader/insight-header.tsx b/components/molecules/InsightHeader/insight-header.tsx index 6e4ac160ae..1e73bb8455 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={String(range)} + /> +
); diff --git a/components/molecules/TableHeader/table-header.tsx b/components/molecules/TableHeader/table-header.tsx index 8f5715b027..f0bb0a1f5e 100644 --- a/components/molecules/TableHeader/table-header.tsx +++ b/components/molecules/TableHeader/table-header.tsx @@ -15,7 +15,6 @@ interface TableHeaderProps { entity: string; onSearch?: (search?: string) => void; updateLimit: Function; - setRangeFilter?: (range: number) => void; layout?: ToggleValue; onLayoutToggle?: (value: ToggleValue) => void; } @@ -32,7 +31,6 @@ const TableHeader = ({ 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 () => { diff --git a/components/organisms/Contributors/contributors.tsx b/components/organisms/Contributors/contributors.tsx index 1c9937f676..656aeaf5e7 100644 --- a/components/organisms/Contributors/contributors.tsx +++ b/components/organisms/Contributors/contributors.tsx @@ -11,6 +11,7 @@ import { calcDistanceFromToday } from "lib/utils/date-utils"; import SkeletonWrapper from "components/atoms/SkeletonLoader/skeleton-wrapper"; import LimitSelect from "components/atoms/Select/limit-select"; +import ClientOnly from "components/atoms/ClientOnly/client-only"; import useContributors from "lib/hooks/api/useContributors"; import { getAvatarByUsername } from "lib/utils/github"; import { ToggleValue } from "components/atoms/LayoutToggle/layout-toggle"; @@ -24,11 +25,11 @@ interface ContributorProps { const Contributors = ({ repositories }: ContributorProps): JSX.Element => { const router = useRouter(); - const topic = router.query.pageId as string; + const { pageId: topic } = router.query; const store = useStore(); - const range = useStore((state) => state.range); + const [layout, setLayout] = useState("grid"); - const { data, meta, setPage, setLimit, isError, isLoading } = useContributors(10, repositories, range); + const { data, meta, setPage, setLimit, isError, isLoading } = useContributors(10, repositories); const contributors = data.map((pr) => { return { @@ -58,32 +59,33 @@ 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"))} /> {layout === "grid" ? ( -
- {isLoading ? : ""} - {isError ? <>An error occurred!.. : ""} - {contributorArray.map((contributor, index) => ( - - ))} -
+ +
+ {isLoading ? : ""} + {isError ? <>An error occurred!.. : ""} + {contributorArray.map((contributor, index) => ( + + ))} +
+ ) : (
- - + + + +
)} From 7e8827a6ca7d55bbc97548203254c8a7fb52231d Mon Sep 17 00:00:00 2001 From: Sunday Ogbonna Date: Fri, 3 Nov 2023 15:38:01 +0100 Subject: [PATCH 03/15] refactor: switch range state to live in url --- .../organisms/Repositories/repositories.tsx | 8 ++------ components/organisms/ToolList/nav-item.tsx | 9 ++++++++- components/organisms/ToolList/nav.tsx | 18 ++++++++++++++++++ layouts/hub-page.tsx | 11 +++++++++-- lib/hooks/api/useContributors.ts | 6 +++--- lib/hooks/api/useRepositories.ts | 4 ++-- 6 files changed, 42 insertions(+), 14 deletions(-) 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 990f50800e..62ad7c4bfc 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={String(range)} + /> +
+ ) : null} ); }; diff --git a/layouts/hub-page.tsx b/layouts/hub-page.tsx index 825ed9d3be..9d932c6682 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]); + const { toolList, selectedTool, selectedFilter, userOrg } = useNav(repositories); let isOwner = !!(userId && insight && `${userId}` === `${insight.user.id}`); 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/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); From 0aeaa716d3cdb42ef4f09d526de0685b7d64cda0 Mon Sep 17 00:00:00 2001 From: Sunday Ogbonna Date: Fri, 3 Nov 2023 15:50:06 +0100 Subject: [PATCH 04/15] refactor: minor cleanups and finishing touches --- .../ComponentDateFilter/component-date-filter.tsx | 14 +++++++------- lib/hooks/useNav.ts | 6 ++---- 2 files changed, 9 insertions(+), 11 deletions(-) diff --git a/components/molecules/ComponentDateFilter/component-date-filter.tsx b/components/molecules/ComponentDateFilter/component-date-filter.tsx index e72c74f1a2..00dc8c5963 100644 --- a/components/molecules/ComponentDateFilter/component-date-filter.tsx +++ b/components/molecules/ComponentDateFilter/component-date-filter.tsx @@ -1,18 +1,18 @@ import { useState } from "react"; interface ComponentDateFilterProps { - setRangeFilter: (range: string) => void; - defaultRange?: string; + setRangeFilter: (range: number) => void; + defaultRange?: number; } const ComponentDateFilter = ({ setRangeFilter, defaultRange }: ComponentDateFilterProps) => { - const [activeFilter, setActiveFilter] = useState(defaultRange ?? "30"); - const dates = ["7", "30", "90"]; + const [activeFilter, setActiveFilter] = useState(defaultRange ?? 30); + const dates = [7, 30, 90]; - const rangeFormatter = (value: string) => { - return value === "7" ? "7d" : value === "30" ? "30d" : "3m"; + const rangeFormatter = (value: number) => { + return value === 7 ? "7d" : value === 30 ? "30d" : "3m"; }; - const handleFilterClick = (range: string) => { + const handleFilterClick = (range: number) => { setActiveFilter(range); // Logic to setDateFilter goes herein with the dates value 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 = [ { From 235d5fa8e80cfc856144d44c3c5ded2afcfb5770 Mon Sep 17 00:00:00 2001 From: Sunday Ogbonna Date: Fri, 3 Nov 2023 15:52:30 +0100 Subject: [PATCH 05/15] chore: more cleanups and refactoring --- components/molecules/InsightHeader/insight-header.tsx | 4 ++-- components/organisms/ToolList/nav.tsx | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/components/molecules/InsightHeader/insight-header.tsx b/components/molecules/InsightHeader/insight-header.tsx index 1e73bb8455..09530d815e 100644 --- a/components/molecules/InsightHeader/insight-header.tsx +++ b/components/molecules/InsightHeader/insight-header.tsx @@ -91,9 +91,9 @@ const InsightHeader = ({ insight, repositories, insightId, isOwner }: InsightHea
{ - setQueryParams({ range: selectedRange }); + setQueryParams({ range: `${selectedRange}` }); }} - defaultRange={String(range)} + defaultRange={Number(range)} />
diff --git a/components/organisms/ToolList/nav.tsx b/components/organisms/ToolList/nav.tsx index 62ad7c4bfc..9ab0bf9d92 100644 --- a/components/organisms/ToolList/nav.tsx +++ b/components/organisms/ToolList/nav.tsx @@ -57,9 +57,9 @@ const Nav: React.FC = ({ toolList, selectedTool = "dashboard", selecte
{ - setQueryParams({ range: selectedRange }); + setQueryParams({ range: `${selectedRange}` }); }} - defaultRange={String(range)} + defaultRange={Number(range)} />
) : null} From 79f812b8dad03d01a44c22a636ca08640ef16998 Mon Sep 17 00:00:00 2001 From: Sunday Ogbonna Date: Fri, 3 Nov 2023 15:56:29 +0100 Subject: [PATCH 06/15] fix: build error --- components/organisms/ContributorsList/contributors-list.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/components/organisms/ContributorsList/contributors-list.tsx b/components/organisms/ContributorsList/contributors-list.tsx index fd36f7d192..1d73f33dfe 100644 --- a/components/organisms/ContributorsList/contributors-list.tsx +++ b/components/organisms/ContributorsList/contributors-list.tsx @@ -61,12 +61,11 @@ const ContributorsList = ({ contributors, isLoading, meta, setPage, setLimit, ra updateLimit={setLimit} layout={layout} onLayoutToggle={setLayout} - range={range} /> {layout !== "grid" ? ( <> - + ) : ( From e3544b8fa06af1e2c2b79392a189e8d14d2b2b15 Mon Sep 17 00:00:00 2001 From: Sunday Ogbonna Date: Sun, 5 Nov 2023 06:24:04 +0100 Subject: [PATCH 07/15] refactor: poolish range filter implementation --- .../component-date-filter.tsx | 25 +++++++++++++------ layouts/filter.tsx | 12 ++++++++- layouts/hub-page.tsx | 2 +- 3 files changed, 30 insertions(+), 9 deletions(-) diff --git a/components/molecules/ComponentDateFilter/component-date-filter.tsx b/components/molecules/ComponentDateFilter/component-date-filter.tsx index 00dc8c5963..c58917b4e6 100644 --- a/components/molecules/ComponentDateFilter/component-date-filter.tsx +++ b/components/molecules/ComponentDateFilter/component-date-filter.tsx @@ -1,5 +1,7 @@ import { useState } from "react"; +import Tooltip from "components/atoms/Tooltip/tooltip"; + interface ComponentDateFilterProps { setRangeFilter: (range: number) => void; defaultRange?: number; @@ -22,15 +24,24 @@ const ComponentDateFilter = ({ setRangeFilter, defaultRange }: ComponentDateFilt return (
{dates.map((range, index) => ( -
handleFilterClick(range)} - className={`px-4 py-1.5 rounded-lg cursor-pointer transition text-light-slate-9 ${ - activeFilter === range && "border text-light-slate-12 bg-light-slate-5" - }`} + - {rangeFormatter(range)} -
+
handleFilterClick(range)} + className={`px-4 py-1.5 rounded-lg cursor-pointer transition text-light-slate-9 ${ + activeFilter === range && "border text-light-slate-12 bg-light-slate-5" + }`} + key={index} + > + {rangeFormatter(range)} +
+ ))}
); diff --git a/layouts/filter.tsx b/layouts/filter.tsx index 7765010f97..15734d869c 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 9d932c6682..772ef5d371 100644 --- a/layouts/hub-page.tsx +++ b/layouts/hub-page.tsx @@ -25,7 +25,7 @@ const HubPageLayout = ({ children }: { children: React.ReactNode }) => { if (!range) { setQueryParams({ range: "30" }); } - }, [range]); + }, [range, router.isReady]); const { toolList, selectedTool, selectedFilter, userOrg } = useNav(repositories); From dc100c198881f175469e8827555212c7158ad18e Mon Sep 17 00:00:00 2001 From: Sunday Ogbonna Date: Sun, 5 Nov 2023 06:26:08 +0100 Subject: [PATCH 08/15] refactor: remove global state range --- lib/store/index.ts | 3 --- 1 file changed, 3 deletions(-) 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 })), From 36481e4f7e76489bce41e2b890c6c21bd30f7fbf Mon Sep 17 00:00:00 2001 From: Sunday Ogbonna Date: Mon, 6 Nov 2023 17:37:30 +0100 Subject: [PATCH 09/15] chore: remove unused code and revert changes --- components/molecules/TableHeader/table-header.tsx | 1 - components/organisms/Contributors/contributors.tsx | 8 +++----- 2 files changed, 3 insertions(+), 6 deletions(-) diff --git a/components/molecules/TableHeader/table-header.tsx b/components/molecules/TableHeader/table-header.tsx index f0bb0a1f5e..9f836b155e 100644 --- a/components/molecules/TableHeader/table-header.tsx +++ b/components/molecules/TableHeader/table-header.tsx @@ -83,7 +83,6 @@ const TableHeader = ({ />
- {/* {setRangeFilter && range ? : null} */} {layout ? (
diff --git a/components/organisms/Contributors/contributors.tsx b/components/organisms/Contributors/contributors.tsx index 656aeaf5e7..d72f38ce9a 100644 --- a/components/organisms/Contributors/contributors.tsx +++ b/components/organisms/Contributors/contributors.tsx @@ -1,6 +1,5 @@ import { useState } from "react"; import { useRouter } from "next/router"; -import useStore from "lib/store"; import Pagination from "components/molecules/Pagination/pagination"; import PaginationResults from "components/molecules/PaginationResults/pagination-result"; @@ -25,8 +24,7 @@ interface ContributorProps { const Contributors = ({ repositories }: ContributorProps): JSX.Element => { const router = useRouter(); - const { pageId: topic } = router.query; - const store = useStore(); + const topic = router.query.pageId as string; const [layout, setLayout] = useState("grid"); const { data, meta, setPage, setLimit, isError, isLoading } = useContributors(10, repositories); @@ -74,7 +72,7 @@ const Contributors = ({ repositories }: ContributorProps): JSX.Element => { key={index} className="" contributor={{ ...contributor }} - topic={topic as string} + topic={topic} repositories={repositories} /> ))} @@ -84,7 +82,7 @@ const Contributors = ({ repositories }: ContributorProps): JSX.Element => {
- +
)} From 2b5cdcc01e0b6f6aa76bd1e68b1e025eac7bcdf8 Mon Sep 17 00:00:00 2001 From: Sunday Ogbonna Date: Thu, 9 Nov 2023 17:20:48 +0100 Subject: [PATCH 10/15] refactor: replace range in serverside to use query --- pages/lists/[listId]/activity.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/pages/lists/[listId]/activity.tsx b/pages/lists/[listId]/activity.tsx index 05211dec85..925a805a99 100644 --- a/pages/lists/[listId]/activity.tsx +++ b/pages/lists/[listId]/activity.tsx @@ -33,8 +33,8 @@ 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 = "30" } = ctx.params as { listId: string; range: string }; + const range = Number(rawRange); const [ { data, error: contributorListError }, { data: list, error }, From 067d94b26325aef551869c8720e54248bf549a7f Mon Sep 17 00:00:00 2001 From: Sunday Ogbonna Date: Thu, 9 Nov 2023 20:21:05 +0100 Subject: [PATCH 11/15] refactor: move all range filter to query params serverside --- .../contributor-list-table-row.tsx | 2 +- .../PullRequestTable/pull-request-table.tsx | 2 +- .../ContributorCard/contributor-card.tsx | 2 +- .../ContributorsList/contributors-list.tsx | 4 +-- .../ContributorsTable/contributors-table.tsx | 4 +-- 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/useContributorsByProject.ts | 2 +- lib/hooks/api/useMostActiveContributors.ts | 8 +++-- lib/hooks/useContributorPullRequestsChart.ts | 2 +- pages/lists/[listId]/activity.tsx | 31 ++++++++++++++----- pages/lists/[listId]/contributors.tsx | 18 ++++++++--- pages/lists/[listId]/overview.tsx | 2 +- 15 files changed, 69 insertions(+), 35 deletions(-) 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/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/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/ContributorsList/contributors-list.tsx b/components/organisms/ContributorsList/contributors-list.tsx index 1d73f33dfe..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) => { 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/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/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/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/pages/lists/[listId]/activity.tsx b/pages/lists/[listId]/activity.tsx index 925a805a99..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, range: rawRange = "30" } = ctx.params as { listId: string; range: string }; - const range = Number(rawRange); + 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 ( - +
From 194b0690d8635125626a0e5a55b1f5b182a85e69 Mon Sep 17 00:00:00 2001 From: Sunday Ogbonna Date: Thu, 9 Nov 2023 20:28:23 +0100 Subject: [PATCH 12/15] chore: fix type issue with range across files --- components/molecules/HoverCardWrapper/hover-card-wrapper.tsx | 2 +- .../ContributorProfilePage/contributor-profile-page.tsx | 2 +- pages/user/[username]/index.tsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) 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/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/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; From c11f9a7897745e998815cb8f8442721846608451 Mon Sep 17 00:00:00 2001 From: Sunday Ogbonna Date: Fri, 10 Nov 2023 19:21:53 +0100 Subject: [PATCH 13/15] fix: improve accessibility --- .../ComponentDateFilter/component-date-filter.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/components/molecules/ComponentDateFilter/component-date-filter.tsx b/components/molecules/ComponentDateFilter/component-date-filter.tsx index c58917b4e6..8055639c1f 100644 --- a/components/molecules/ComponentDateFilter/component-date-filter.tsx +++ b/components/molecules/ComponentDateFilter/component-date-filter.tsx @@ -32,7 +32,10 @@ const ComponentDateFilter = ({ setRangeFilter, defaultRange }: ComponentDateFilt `} direction="top" > -
+ {rangeFormatter(range)} {rangeFormatter(range)}${range === 7 ? "from today" : "from the last commit"} + +
+ ))}
From 598e4dd86c89c3ec924ff129448d9387f65c174c Mon Sep 17 00:00:00 2001 From: Sunday Ogbonna Date: Fri, 10 Nov 2023 19:25:04 +0100 Subject: [PATCH 14/15] refactor: refactor client only usage --- .../organisms/Contributors/contributors.tsx | 31 +++++++++---------- 1 file changed, 15 insertions(+), 16 deletions(-) diff --git a/components/organisms/Contributors/contributors.tsx b/components/organisms/Contributors/contributors.tsx index 2ba4451915..49512d3c14 100644 --- a/components/organisms/Contributors/contributors.tsx +++ b/components/organisms/Contributors/contributors.tsx @@ -13,7 +13,6 @@ import { calcDistanceFromToday } from "lib/utils/date-utils"; import SkeletonWrapper from "components/atoms/SkeletonLoader/skeleton-wrapper"; import LimitSelect from "components/atoms/Select/limit-select"; -import ClientOnly from "components/atoms/ClientOnly/client-only"; import useContributors from "lib/hooks/api/useContributors"; import { getAvatarByUsername } from "lib/utils/github"; import { ToggleValue } from "components/atoms/LayoutToggle/layout-toggle"; @@ -23,6 +22,8 @@ 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"; @@ -189,21 +190,19 @@ const Contributors = ({ repositories }: ContributorProps): JSX.Element => { /> {layout === "grid" ? ( - -
- {isLoading ? : ""} - {isError ? <>An error occurred!.. : ""} - {contributorArray.map((contributor, index) => ( - - ))} -
- +
+ {isLoading ? : ""} + {isError ? <>An error occurred!.. : ""} + {contributorArray.map((contributor, index) => ( + + ))} +
) : (
From 8d76d1967e0033a8508dd32c238041b2b7ee7e8d Mon Sep 17 00:00:00 2001 From: Sunday Ogbonna Date: Mon, 13 Nov 2023 16:31:58 +0100 Subject: [PATCH 15/15] refactor: remove screen reader label --- .../molecules/ComponentDateFilter/component-date-filter.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/components/molecules/ComponentDateFilter/component-date-filter.tsx b/components/molecules/ComponentDateFilter/component-date-filter.tsx index 8055639c1f..ec7ec21fa1 100644 --- a/components/molecules/ComponentDateFilter/component-date-filter.tsx +++ b/components/molecules/ComponentDateFilter/component-date-filter.tsx @@ -32,9 +32,7 @@ const ComponentDateFilter = ({ setRangeFilter, defaultRange }: ComponentDateFilt `} direction="top" > - - {rangeFormatter(range)} {rangeFormatter(range)}${range === 7 ? "from today" : "from the last commit"} - + {rangeFormatter(range)} {rangeFormatter(range)}${range === 7 ? "from today" : "from the last commit"}