feat: move range filter to global header (#2047)

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<number>(defaultRange || 30);
+  const [activeFilter, setActiveFilter] = useState<number>(defaultRange ?? 30);
   const dates = [7, 30, 90];
 
   const rangeFormatter = (value: number) => {
@@ -22,15 +24,24 @@ const ComponentDateFilter = ({ setRangeFilter, defaultRange }: ComponentDateFilt
   return (
     <div className="flex items-center text-sm bg-white rounded-lg shrink-0 w-max">
       {dates.map((range, index) => (
-        <button
-          onClick={() => 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"
-          }`}
+        <Tooltip
           key={index}
+          content={`
+          ${rangeFormatter(range)}
+          ${range === 7 ? "from today" : "from the last commit"}
+        `}
+          direction="top"
         >
-          {rangeFormatter(range)}
-        </button>
+          <button
+            onClick={() => 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)}
+          </button>
+        </Tooltip>
       ))}
     </div>
   );

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

@@ -1,20 +1,19 @@
 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";
 
 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 (
     <div className="mt-4">
       {/* Mobile */}

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[]) {

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),

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
           </div>
         </div>
       </div>
-      <div className="absolute right-0 flex flex-col gap-3 py-2 md:items-center md:flex-row md:static">
-        <Button onClick={() => handleCopyToClipboard(insightPageLink)} className="px-6 py-2 bg-white " variant="text">
+      <div className="absolute right-0 bottom-0 top-0 flex flex-col items-end gap-3 py-2 md:items-center md:flex-row md:static">
+        <Button
+          onClick={() => handleCopyToClipboard(insightPageLink)}
+          className="px-6 py-2 bg-white w-max"
+          variant="text"
+        >
           <FiCopy className="mt-1 mr-2" /> Share
         </Button>
         {isOwner && (
           <Link href={`/hub/insights/${insightId}/edit`}>
-            <Button variant="primary">
+            <Button className="text-xs w-max" variant="primary">
               <FaEdit className="mr-2" /> Edit Page
             </Button>
           </Link>
         )}
+        <div className=" md:hidden mt-auto">
+          <ComponentDateFilter
+            setRangeFilter={(selectedRange) => {
+              setQueryParams({ range: `${selectedRange}` });
+            }}
+            defaultRange={Number(range)}
+          />
+        </div>
       </div>
     </div>
   );

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 = ({

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<string>("");
   const [suggestions, setSuggestions] = React.useState<string[]>([]);
-  const [selected, setSelected] = React.useState<null | number>(null);
   const { providerToken } = useSupabaseAuth();
 
   const updateSuggestionsDebounced = useDebounce(async () => {
@@ -96,7 +83,6 @@ const TableHeader = ({
         />
       </div>
       <div className="flex flex-col-reverse items-start gap-3 md:flex-row md:items-end ">
-        {setRangeFilter && range ? <ComponentDateFilter setRangeFilter={setRangeFilter} defaultRange={range} /> : null}
         {layout ? (
           <div className="hidden md:inline-flex">
             <LayoutToggle value={layout} onChange={onLayoutToggle} />

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) => {

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 || "");

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<ToggleValue>("list");
   const [selectedContributors, setSelectedContributors] = useState<DbPRContributor[]>([]);
   const [selectedListIds, setSelectedListIds] = useState<string[]>([]);
   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}
             />
           ))}
         </div>
       ) : (
         <div className="lg:min-w-[1150px]">
-          <ContributorListTableHeaders handleOnSelectAllContributor={onSelectAllContributors} range={range} />
+          <ContributorListTableHeaders handleOnSelectAllContributor={onSelectAllContributors} />
           {selectedContributors.length > 0 && (
             <div className="border px-4 py-2 flex justify-between items-center ">
               <div className="text-slate-600">{selectedContributors.length} Contributors selected</div>

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}
       />
       <ClientOnly>
         {layout !== "grid" ? (
           <>
-            <ContributorListTableHeaders range={range} />
+            <ContributorListTableHeaders />
             <ContributorTable loading={isLoading} topic={"*"} contributors={contributors} range={range} />
           </>
         ) : (

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 (
     <div className="flex flex-col overflow-hidden border rounded-md">

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,16 +26,15 @@ 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,
     isError: repoListIsError,
     isLoading: repoListIsLoading,
     setPage,
     setLimit,
-  } = useRepositories(repositories, range);
+  } = useRepositories(repositories);
   const filteredRepoNotIndexed = selectedFilter && !repoListIsLoading && !repoListIsError && repoListData.length === 0;
   const [selectedRepos, setSelectedRepos] = useState<DbRepo[]>([]);
 
@@ -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"
       />
       <div className="flex flex-col w-full overflow-x-auto border rounded-lg">

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<NavItemProps> = ({ username, filterName, tool, selectedFilter, selectedTool }) => {
   const [total, setTotal] = useState<number>();
+  const router = useRouter();
+  const { range } = router.query;
 
   useEffect(() => {
     setTotal(tool.numOf);
@@ -21,7 +24,11 @@ const NavItem: React.FC<NavItemProps> = ({ username, filterName, tool, selectedF
   return (
     <Link
       href={`/${username ? `pages/${username}/` : ""}${filterName}/${tool.name.toLowerCase()}${
-        selectedFilter ? `/filter/${Array.isArray(selectedFilter) ? selectedFilter.join("/") : selectedFilter}` : ""
+        selectedFilter
+          ? `/filter/${Array.isArray(selectedFilter) ? selectedFilter.join("/") : selectedFilter}?range=${
+              range ?? "30"
+            }`
+          : `?range=${range ?? "30"}`
       }`}
     >
       {/* Button component was here and needed to be removed to resolve issue #187. Button component had styling that will eventually need to be replaced. */}