feat: add contributor search to list contributors (#1862)

open-sauced · Oct 11, 2023 · 8e99a1d · 8e99a1d
1 parent 821a7b3
commit 8e99a1d
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 4 deletions.
diff --git a/components/molecules/HubContributorsHeader/hub-contributors-header.tsx b/components/molecules/HubContributorsHeader/hub-contributors-header.tsx
@@ -3,6 +3,7 @@ import { FaPlus } from "react-icons/fa";
 import clsx from "clsx";
 import { FiGlobe } from "react-icons/fi";
 
+import { useEffect, useState } from "react";
 import { useToast } from "lib/hooks/useToast";
 
 import ListNameHeader from "components/atoms/ListNameHeader/list-name-header";
@@ -11,6 +12,8 @@ import SingleSelect from "components/atoms/Select/single-select";
 import ToggleSwitch from "components/atoms/ToggleSwitch/toggle-switch";
 import Button from "components/atoms/Button/button";
 import Text from "components/atoms/Typography/text";
+import Search from "components/atoms/Search/search";
+import useDebounceTerm from "lib/hooks/useDebounceTerm";
 // import Search from "components/atoms/Search/search";
 
 interface ListHeaderProps {
@@ -25,6 +28,8 @@ interface ListHeaderProps {
   onAddToList?: () => void;
   onTitleChange?: (title: string) => void;
   loading?: boolean;
+  onSearch: (searchTerm: string | undefined) => void;
+  searchResults?: DbUser[];
 }
 
 const HubContributorsHeader = ({
@@ -39,9 +44,17 @@ const HubContributorsHeader = ({
   timezone,
   setTimezoneFilter,
   timezoneOptions,
+  onSearch,
 }: ListHeaderProps): JSX.Element => {
   const { toast } = useToast();
 
+  const [contributorSearch, setContributorSearch] = useState("");
+  const debouncedSearchTerm = useDebounceTerm(contributorSearch, 300);
+
+  useEffect(() => {
+    onSearch(contributorSearch);
+  }, [debouncedSearchTerm]);
+
   return (
     <div className="relative flex flex-col justify-between w-full gap-6 py-2">
       <div className="flex flex-col justify-between w-full md:flex-row">
@@ -86,7 +99,15 @@ const HubContributorsHeader = ({
           </Button>
         </div>
       </div>
-      <div className="flex flex-col justify-between w-full gap-2 md:flex-row">
+      <div className="flex flex-col w-full gap-2 md:flex-row">
+        <div className="flex w-full">
+          <Search
+            placeholder={`Search ${title}`}
+            className="!w-full text-sm py-1.5"
+            name={"contributors"}
+            onChange={(value) => setContributorSearch(value)}
+          />
+        </div>
         <div className="flex items-center gap-4 ">
           <SingleSelect
             options={timezoneOptions}

diff --git a/components/organisms/ContributorsTable/contributors-table.tsx b/components/organisms/ContributorsTable/contributors-table.tsx
@@ -35,8 +35,8 @@ const ContributorTable = ({
           />
         ))
       ) : (
-        <div className="grid w-full py-10 place-content-center text-light-slate-11">
-          No contributors found for the selected filters
+        <div className="grid w-full py-10 place-content-center text-orange-500">
+          Sorry! We couldn&apos;t find any contributors.
         </div>
       )}
     </div>

diff --git a/lib/hooks/useFetchAllContributors.ts b/lib/hooks/useFetchAllContributors.ts
@@ -15,6 +15,7 @@ type queryObj = {
   pr_velocity?: string;
   timezone?: string;
   initialLimit?: number;
+  contributor?: string;
 };
 
 const useFetchAllContributors = (query: queryObj, config?: SWRConfiguration) => {
@@ -37,6 +38,9 @@ const useFetchAllContributors = (query: queryObj, config?: SWRConfiguration) =>
   if (query.timezone) {
     urlQuery.set("timezone", `${query.timezone}`);
   }
+  if (query.contributor) {
+    urlQuery.set("contributor", `${query.contributor}`);
+  }
   if (limit) {
     urlQuery.set("limit", `${limit}`);
   }

diff --git a/pages/hub/lists/find.tsx b/pages/hub/lists/find.tsx
@@ -87,10 +87,12 @@ const NewListCreationPage = ({ initialData, timezoneOption }: NewListCreationPag
   const [title, setTitle] = useState("");
   const [selectedContributors, setSelectedContributors] = useState<DbPRContributor[]>([]);
   const [selectedTimezone, setSelectedTimezone] = useState<string | undefined>(undefined);
+  const [contributor, setContributor] = useState<string | undefined>(undefined);
   const [isPublic, setIsPublic] = useState<boolean>(false);
   const { data, meta, isLoading, setLimit, setPage } = useFetchAllContributors(
     {
       timezone: selectedTimezone,
+      contributor,
     },
     {
       fallbackData: initialData,
@@ -217,6 +219,12 @@ const NewListCreationPage = ({ initialData, timezoneOption }: NewListCreationPag
     setSelectedTimezone(selected);
   };
 
+  function onSearch(searchTerm: string | undefined) {
+    if (!searchTerm || searchTerm.length >= 3) {
+      setContributor(searchTerm);
+    }
+  }
+
   return (
     <HubContributorsPageLayout>
       <Dialog open={isOpen}>
@@ -234,10 +242,11 @@ const NewListCreationPage = ({ initialData, timezoneOption }: NewListCreationPag
               title={title}
               onAddToList={handleOnListCreate}
               onTitleChange={(title) => setTitle(title)}
+              onSearch={onSearch}
             />
           </Header>
         </div>
-        <div className="lg:min-w-[1150px] px-4 md:px-16 py-8">
+        <div className="lg:min-w-[1150px] px-4 md:px-16 pb-8">
           <ContributorListTableHeaders
             selected={selectedContributors.length > 0 && selectedContributors.length === meta.limit}
             handleOnSelectAllContributor={handleOnSelectAllChecked}