feat: add remove all feature

kudos-ink · Jan 5, 2024 · f9b716e · f9b716e
1 parent 40487c6
commit f9b716e
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 36 deletions.
diff --git a/app/page.tsx b/app/page.tsx
@@ -2,9 +2,12 @@ import ContributionsTable from "@/components/contributions-table/table";
 import Filter from "@/components/filter";
 import { title, subtitle } from "@/components/primitives";
 import Search from "@/components/search";
-import { SEARCH_OPTIONS, LANGUAGES_OPTIONS, INTERESTS_OPTIONS, } from "@/data/filters";
-import { REPOSITORIES_BY_INTERESTS } from "@/data/interests";
-import { queryDatabase, getIssuesByProject } from "@/lib/notion";
+import {
+  SEARCH_OPTIONS,
+  LANGUAGES_OPTIONS,
+  INTERESTS_OPTIONS,
+} from "@/data/filters";
+import { queryDatabase } from "@/lib/notion";
 import { transformNotionDataToContributions } from "@/utils/contribution";
 import RemoveFilters from "@/components/removeFilters";
 
@@ -13,33 +16,39 @@ export default async function Home({
 }: {
   searchParams?: { [key: string]: string | string[] | undefined };
 }) {
-
   const params = searchParams as { [key: string]: string };
-  const languagesFilterIsSelected = params && params.languages;
-  const interestsFilterIsSelected = params && params.interests;
-  const hasSearch = params && params.search;
+  const languagesFilterIsSelected = !!params && !!params.languages;
+  const interestsFilterIsSelected = !!params && !!params.interests;
+  const hasSearch = !!params && !!params.search;
+  const showRemoveAllFilters =
+    [languagesFilterIsSelected, interestsFilterIsSelected, hasSearch].filter(
+      Boolean,
+    ).length >= 2;
+
   let filter =
     params && params.languages
       ? {
-        property: "Repo Language",
-        rollup: {
-          any: {
-            multi_select: {
-              contains: params.languages,
-            },
-          },
-        },
-      }
-      : params && params.languages ? {
-        property: "Project Name",
-        rollup: {
-          any: {
-            rich_text: {
-              contains: params.search
+          property: "Repo Language",
+          rollup: {
+            any: {
+              multi_select: {
+                contains: params.languages,
+              },
             },
           },
         }
-      } : undefined;
+      : params && params.languages
+        ? {
+            property: "Project Name",
+            rollup: {
+              any: {
+                rich_text: {
+                  contains: params.search,
+                },
+              },
+            },
+          }
+        : undefined;
 
   const data = await queryDatabase({
     page_size: 10,
@@ -60,9 +69,12 @@ export default async function Home({
       </section>
       <div className="flex flex-col items-center gap-4 py-8 md:py-10">
         <div className="inline-block max-w-lg text-center justify-center">
-          <Search placeholder="Search" emoji="🔍"
+          <Search
+            placeholder="Search"
+            emoji="🔍"
             items={SEARCH_OPTIONS}
-            selectedValue={params.search} />
+            selectedValue={params.search}
+          />
           {/* TODO: 
           1. make it controlled
           2. set the selected value in the params
@@ -91,9 +103,9 @@ export default async function Home({
           {interestsFilterIsSelected && (
             <RemoveFilters value={params.interests} param="Interests" />
           )}
-          {hasSearch && (
-            <RemoveFilters value={params.search} param="Search" />
-          )}
+          {hasSearch && <RemoveFilters value={params.search} param="Search" />}
+
+          {showRemoveAllFilters && <RemoveFilters value={"All filters"} />}
         </div>
         <div className="flex justify-end">
           <div>
@@ -110,6 +122,6 @@ export default async function Home({
           />
         </div>
       </div>
-    </div >
+    </div>
   );
 }
diff --git a/components/removeFilters.tsx b/components/removeFilters.tsx
@@ -6,7 +6,7 @@ import { Chip } from "@nextui-org/chip";
 import { createUrl } from "@/utils/url";
 
 interface IRemoveFilters {
-  param: string;
+  param?: string;
   value: string;
 }
 
@@ -15,15 +15,19 @@ export const RemoveFilters = ({ param, value }: IRemoveFilters) => {
   const pathname = usePathname();
   const searchParams = useSearchParams();
   const removeSearchParams = () => {
-    const optionNameLowerCase = param.toLowerCase();
-    const optionSearchParams = new URLSearchParams(searchParams.toString());
-    optionSearchParams.delete(optionNameLowerCase);
-    const optionUrl = createUrl(pathname, optionSearchParams);
-    router.replace(optionUrl);
+    if (!!param) {
+      const optionNameLowerCase = param.toLowerCase();
+      const optionSearchParams = new URLSearchParams(searchParams.toString());
+      optionSearchParams.delete(optionNameLowerCase);
+      const optionUrl = createUrl(pathname, optionSearchParams);
+      router.replace(optionUrl);
+    } else {
+      router.replace(pathname);
+    }
   };
   return (
     <div className="flex gap-4">
-      <Chip color="secondary" onClose={removeSearchParams}>
+      <Chip variant="solid" onClose={removeSearchParams}>
         {value}
       </Chip>
     </div>