From 5c380a5ec7646d876a2c5f198abf90e66e740641 Mon Sep 17 00:00:00 2001
From: Jiku Godwill Nsanwi <jikugodwill@yahoo.com>
Date: Wed, 27 Nov 2024 10:42:27 +0100
Subject: [PATCH] code cleanup

---
 .../project/components/ProjectDiscovery.tsx   | 92 ++++++++----------
 .../project/hooks/useProjectsFilters.ts       | 95 -------------------
 2 files changed, 40 insertions(+), 147 deletions(-)
 delete mode 100644 src/modules/project/hooks/useProjectsFilters.ts

diff --git a/src/modules/project/components/ProjectDiscovery.tsx b/src/modules/project/components/ProjectDiscovery.tsx
index 134ff8f6..c552d767 100644
--- a/src/modules/project/components/ProjectDiscovery.tsx
+++ b/src/modules/project/components/ProjectDiscovery.tsx
@@ -4,13 +4,11 @@ import Image from "next/image";
 
 import { ListRegistration } from "@/common/api/indexer";
 import { CHRONOLOGICAL_SORT_OPTIONS } from "@/common/constants";
-import { toChronologicalOrder } from "@/common/lib";
 import { ChronologicalSortOrderVariant } from "@/common/types";
 import {
   Filter,
   Group,
   GroupType,
-  InfiniteScroll,
   Pagination,
   PaginationContent,
   PaginationEllipsis,
@@ -30,18 +28,13 @@ import { useProjectLookup } from "../hooks/lookup";
 import { ProjectCategory, ProjectListingStatusVariant } from "../types";
 
 export const ProjectDiscovery = () => {
-  const [index, setIndex] = useState(1);
-  const [search, setSearch] = useState("");
-  const [sort, setSort] = useState<ChronologicalSortOrderVariant>("recent");
   const {
     projectCategoryFilter,
     setProjectCategoryFilter,
-    projectLookupError,
     projectLookupPageNumber,
     setProjectLookupPageNumber,
     projectSearchTerm,
     setProjectSearchTerm,
-    projectSortingOrder,
     setProjectSortingOrder,
     projectStatusFilter,
     setProjectStatusFilter,
@@ -52,48 +45,43 @@ export const ProjectDiscovery = () => {
 
   console.log(projects.map((project) => project.registrant.id));
 
-  const tagList: (Group<GroupType.multiple> | Group<GroupType.single>)[] = [
-    {
-      label: "Category",
-      options: categories,
-      type: GroupType.multiple,
-      props: {
-        value: projectCategoryFilter,
-        onValueChange: (value: ProjectCategory[]) => {
-          setProjectCategoryFilter(value);
-          console.log({ projectCategoryFilter });
+  const tagList = useMemo(
+    () => [
+      {
+        label: "Category",
+        options: categories,
+        type: GroupType.multiple,
+        props: {
+          value: projectCategoryFilter,
+          onValueChange: (value: ProjectCategory[]) => {
+            setProjectCategoryFilter(value);
+            console.log({ projectCategoryFilter });
+          },
         },
-      },
-    },
-    {
-      label: "Status",
-      options: statuses,
-      type: GroupType.single,
-      props: {
-        value: projectStatusFilter,
-        onValueChange: (value: ProjectListingStatusVariant) => {
-          if (value === "all") {
-            setProjectStatusFilter("Approved");
-          } else {
-            setProjectStatusFilter(value);
-          }
+      } as Group<GroupType.multiple>,
+      {
+        label: "Status",
+        options: statuses,
+        type: GroupType.single,
+        props: {
+          value: projectStatusFilter,
+          onValueChange: (value: ProjectListingStatusVariant) => {
+            if (value === "all") {
+              setProjectStatusFilter("Approved");
+            } else {
+              setProjectStatusFilter(value);
+            }
+          },
         },
-      },
-    },
-  ];
-
-  const handleSort = (sortType: string) => {
-    switch (sortType) {
-      case "recent":
-        return projects.toReversed();
-        break;
-      case "older":
-        return projects;
-        break;
-      default:
-        break;
-    }
-  };
+      } as Group<GroupType.single>,
+    ],
+    [
+      projectCategoryFilter,
+      projectStatusFilter,
+      setProjectCategoryFilter,
+      setProjectStatusFilter,
+    ],
+  );
   return (
     <div className="md:px-10 md:py-12 flex w-full flex-col px-2 py-10">
       <div className="flex w-full flex-col gap-5">
@@ -109,20 +97,20 @@ export const ProjectDiscovery = () => {
         <div className="flex w-full items-center gap-4">
           <SearchBar
             placeholder="Search projects"
-            onChange={(e) => setSearch(e.target.value.toLowerCase())}
+            defaultValue={projectSearchTerm}
+            onChange={(e) => setProjectSearchTerm(e.target.value.toLowerCase())}
           />
 
           <Filter groups={tagList} />
 
           <SortSelect
             options={CHRONOLOGICAL_SORT_OPTIONS}
-            onValueChange={handleSort}
+            onValueChange={(value) => {
+              setProjectSortingOrder(value as ChronologicalSortOrderVariant);
+            }}
           />
         </div>
       </div>
-
-      {/* TODO: Use regular pagination from `@/common/ui/components` */}
-      {/* Guide: https://ui.shadcn.com/docs/components/pagination */}
       {loading ? (
         Array.from({ length: 6 }, (_, index) => (
           <ListCardSkeleton key={index} />
diff --git a/src/modules/project/hooks/useProjectsFilters.ts b/src/modules/project/hooks/useProjectsFilters.ts
deleted file mode 100644
index ae3cfce1..00000000
--- a/src/modules/project/hooks/useProjectsFilters.ts
+++ /dev/null
@@ -1,95 +0,0 @@
-import { useCallback, useEffect, useState } from "react";
-
-import { ListRegistration, indexer } from "@/common/api/indexer";
-import { Group, GroupType } from "@/common/ui/components";
-
-import { categories, statuses } from "../constants";
-
-export const useProjectsFilters = (
-  setFilteredProjects: (type: any) => void,
-) => {
-  const [registrations, setRegistrations] = useState<ListRegistration[]>([]);
-  const [loading, setLoading] = useState<boolean>(false);
-  const [categoryFilter, setCategoryFilter] = useState<string[]>([]);
-  const [statusFilter, setStatusFilter] = useState<any>(undefined);
-
-  const { data, isLoading } = indexer.useListRegistrations({ listId: 1 });
-  const { data: filteredRegistrations } = indexer.useListRegistrations({
-    listId: 1,
-    category: categoryFilter.join(","),
-    status: statusFilter,
-  });
-
-  const fetchAllRegistrations = useCallback(async () => {
-    setLoading(true);
-    try {
-      if (data) {
-        setRegistrations(data.results);
-        setFilteredProjects(filteredRegistrations);
-      }
-    } catch (error) {
-      console.log("Error fetching all registrations", error);
-    } finally {
-      setLoading(false);
-    }
-  }, [data, filteredRegistrations, setFilteredProjects]);
-
-  useEffect(() => {
-    if (!isLoading) {
-      fetchAllRegistrations();
-    }
-  }, [isLoading, fetchAllRegistrations, registrations]);
-
-  // fetchfiltered
-  const fetchFilteredRegistrations = useCallback(async () => {
-    try {
-      if (filteredRegistrations) {
-        setLoading(true);
-      }
-    } catch (error) {
-      console.log("Error fetching filtered registrations", error);
-    } finally {
-      setLoading(false);
-    }
-  }, [setLoading, filteredRegistrations]);
-
-  // fetchByStatus
-
-  const tagList: (Group<GroupType.multiple> | Group<GroupType.single>)[] = [
-    {
-      label: "Category",
-      options: categories,
-      type: GroupType.multiple,
-      props: {
-        value: categoryFilter,
-        onValueChange: (value: string[]) => {
-          setCategoryFilter(value);
-          console.log({ categoryFilter });
-        },
-      },
-    },
-    {
-      label: "Status",
-      options: statuses,
-      type: GroupType.single,
-      props: {
-        value: statusFilter,
-        onValueChange: (value: string) => {
-          if (value === "all") {
-            setStatusFilter(undefined);
-          } else {
-            setStatusFilter(value);
-          }
-        },
-      },
-    },
-  ];
-
-  return {
-    registrations,
-    tagList,
-    loading,
-    fetchAllRegistrations,
-    fetchFilteredRegistrations,
-  };
-};