fix: search and filter in deals page

src/app/(investment)/deals/ShowFilter.tsx

@@ -0,0 +1,53 @@
+import { Button } from "@/components/ui/button";
+import { FilterParams } from "@/lib/data/projectQuery";
+
+export const ShowFilter = ({ filterParams, clearAll }: { filterParams: FilterParams; clearAll: () => void }) => {
+  const { searchTerm, tagFilter, projectStatusFilter, businessTypeFilter } = filterParams;
+
+  if (!searchTerm && !tagFilter && !projectStatusFilter && !businessTypeFilter) {
+    return <div></div>;
+  }
+
+  if (projectStatusFilter === "all" && businessTypeFilter === "all" && tagFilter === "all") {
+    return <div></div>;
+  }
+
+  return (
+    <div className="flex flex-wrap gap-2">
+      {searchTerm && (
+        <Button key={searchTerm} variant="secondary">
+          {searchTerm}
+        </Button>
+      )}
+
+      {tagFilter && tagFilter !== "all" && (
+        <Button key={tagFilter} variant="secondary">
+          {tagFilter}
+        </Button>
+      )}
+
+      {projectStatusFilter && projectStatusFilter !== "all" && (
+        <Button key={projectStatusFilter} variant="secondary">
+          {projectStatusFilter}
+        </Button>
+      )}
+
+      {businessTypeFilter && businessTypeFilter !== "all" && (
+        <Button key={businessTypeFilter} variant="secondary">
+          {businessTypeFilter}
+        </Button>
+      )}
+
+      {/* {sortByTimeFilter && sortByTimeFilter !== "all" && (
+        <Button key={sortByTimeFilter} variant="secondary">
+          {sortByTimeFilter}
+        </Button>
+      )} */}
+
+      {/* Clear All button */}
+      <Button variant="destructive" onClick={clearAll}>
+        Clear All
+      </Button>
+    </div>
+  );
+};

src/app/(investment)/deals/page.tsx

@@ -4,186 +4,84 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@
 import { useEffect, useState } from "react";
 import { Clock3Icon, UserIcon, UsersIcon } from "lucide-react";
 import { Separator } from "@/components/ui/separator";
-import { ProjectCard } from "@/components/projectCard";
-import { getALlFundedStatusQuery, getAllBusinessTypeQuery } from "@/lib/data/dropdownQuery";
+import { getAllBusinessTypeQuery, getAllTagsQuery, getAllProjectStatusQuery } from "@/lib/data/dropdownQuery";
 import { createSupabaseClient } from "@/lib/supabase/clientComponentClient";
 import { useQuery } from "@supabase-cache-helpers/postgrest-react-query";
 import { searchProjectsQuery, FilterParams, FilterProjectQueryParams } from "@/lib/data/projectQuery";
 import { Input } from "@/components/ui/input";
+import { ProjectSection } from "@/components/ProjectSection";
+import { ShowFilter } from "./ShowFilter";
 import { Button } from "@/components/ui/button";
-import Link from "next/link";
-
-interface Project {
-  project_id: string;
-  project_name: string;
-  published_time: string;
-  project_short_description: string;
-  card_image_url: string;
-  project_status: {
-    value: string;
-  };
-  min_investment: number;
-  total_investment: number;
-  target_investment: number;
-  investment_deadline: string;
-  tags: {
-    tag_name: string;
-  }[];
-  business_type: {
-    value: string;
-  };
-  business_location: string;
-}
-
-const ProjectSection = ({ filteredProjects }: { filteredProjects: Project[] }) => {
-  interface Tags {
-    tag_name: string;
-  }
-
-  if (!filteredProjects) {
-    return <div>No projects found!</div>;
-  }
-
-  return (
-    <div>
-      <div className="mt-10">
-        <h2 className="text-2xl">Deals</h2>
-        <p className="mt-3">The deals attracting the most interest right now</p>
-      </div>
-
-      {/* Block for all the deals */}
-      <div className="mt-10 grid grid-cols-3 gap-4">
-        {filteredProjects.map((item, index) => (
-          <Link key={index} href={`/deals/${item.project_id}`}>
-            <ProjectCard
-              key={index}
-              name={item.project_name}
-              description={item.project_short_description}
-              joinDate={item.published_time}
-              imageUri={item.card_image_url}
-              location={item.business_location}
-              minInvestment={item.min_investment}
-              totalInvestor={item.total_investment}
-              totalRaised={item.target_investment}
-              tags={item.tags.map((tag: Tags) => tag.tag_name)}
-            />
-          </Link>
-        ))}
-      </div>
-    </div>
-  );
-};
-
-const ShowFilter = ({ filterParams, clearAll }: { filterParams: FilterParams; clearAll: () => void }) => {
-  const { searchTerm, tagsFilter, projectStatusFilter, businessTypeFilter, sortByTimeFilter } = filterParams;
-
-  if (!searchTerm && !tagsFilter && !projectStatusFilter && !businessTypeFilter && !sortByTimeFilter) {
-    return <div></div>;
-  }
-
-  if (
-    projectStatusFilter === "all" &&
-    businessTypeFilter === "all" &&
-    sortByTimeFilter === "all" &&
-    (!tagsFilter || tagsFilter.length === 0)
-  ) {
-    return <div></div>;
-  }
-
-  return (
-    <div className="flex flex-wrap gap-2">
-      {searchTerm && (
-        <Button key={searchTerm} variant="secondary">
-          {searchTerm}
-        </Button>
-      )}
-
-      {tagsFilter &&
-        tagsFilter.map((tag: string) => (
-          <Button key={tag} variant="secondary">
-            {tag}
-          </Button>
-        ))}
-
-      {projectStatusFilter && projectStatusFilter !== "all" && (
-        <Button key={projectStatusFilter} variant="secondary">
-          {projectStatusFilter}
-        </Button>
-      )}
-
-      {businessTypeFilter && businessTypeFilter !== "all" && (
-        <Button key={businessTypeFilter} variant="secondary">
-          {businessTypeFilter}
-        </Button>
-      )}
-
-      {sortByTimeFilter && sortByTimeFilter !== "all" && (
-        <Button key={sortByTimeFilter} variant="secondary">
-          {sortByTimeFilter}
-        </Button>
-      )}
-
-      {/* Clear All button */}
-      <Button variant="destructive" onClick={clearAll}>
-        Clear All
-      </Button>
-    </div>
-  );
-};
 
 export default function Deals() {
   const supabase = createSupabaseClient();
 
   const [searchTerm, setSearchTerm] = useState("");
-  const [searchTermVisual, setSearchTermVisual] = useState("");
-  const [sortByTimeFilter, setSortByTimeFilter] = useState("all");
+  const [searchTermVisual, setSearchTermVisual] = useState(""); // For the input field
+  // const [sortByTimeFilter, setSortByTimeFilter] = useState("all");
   const [businessTypeFilter, setBusinessTypeFilter] = useState("all");
-  const [tagFilter, setTagFilter] = useState([]);
+  const [tagFilter, setTagFilter] = useState("all");
   const [projectStatusFilter, setProjectStatusFilter] = useState("all");
   const [page, setPage] = useState(1);
   const [pageSize, setPageSize] = useState(4);
 
   const filterParams: FilterParams = {
     searchTerm,
-    tagsFilter: tagFilter,
+    tagFilter,
     projectStatusFilter,
     businessTypeFilter,
-    sortByTimeFilter,
+    // sortByTimeFilter,
   };
 
-  const filterProjectQueryParams: FilterProjectQueryParams = {
-    searchTerm: "",
-    tagsFilter: [],
-    projectStatusFilter: "all",
-    businessTypeFilter: "all",
-    sortByTimeFilter: "all",
+  let filterProjectQueryParams: FilterProjectQueryParams = {
+    searchTerm,
+    tagFilter,
+    projectStatusFilter,
+    businessTypeFilter,
+    // sortByTimeFilter,
     page,
     pageSize,
   };
 
+  const { data: tagData, isLoading: isLoadingTag, error: isTagError } = useQuery(getAllTagsQuery(supabase));
   const {
-    data: projectStatus,
-    isLoading: isLoadingFunded,
-    error: fundedLoadingError,
-  } = useQuery(getALlFundedStatusQuery(supabase));
+    data: projectStatusData,
+    isLoading: isLoadingprojectStatus,
+    error: isprojectStatusError,
+  } = useQuery(getAllProjectStatusQuery(supabase));
   const {
     data: businessType,
     isLoading: isLoadingBusinessType,
     error: businessTypeLoadingError,
   } = useQuery(getAllBusinessTypeQuery(supabase));
-
   const {
     data: projects,
     isLoading: isLoadingProjects,
     error: projectsLoadingError,
+    refetch,
   } = useQuery(searchProjectsQuery(supabase, filterProjectQueryParams));
 
+  const formattedProjects =
+    projects?.map((project) => ({
+      id: project.project_id,
+      project_name: project.project_name,
+      short_description: project.project_short_description,
+      image_url: project.card_image_url,
+      join_date: new Date(project.published_time).toLocaleDateString(),
+      location: project.business_location,
+      tags: project.tags.map((tag) => tag.tag_name),
+      min_investment: project.min_investment || 0,
+      total_investor: project.total_investment || 0,
+      total_raise: project.total_investment || 0,
+    })) || [];
+
   const clearAll = () => {
     setSearchTerm("");
-    setTagFilter([]);
+    setSearchTermVisual("");
+    setTagFilter("all");
     setProjectStatusFilter("all");
     setBusinessTypeFilter("all");
-    setSortByTimeFilter("all");
+    // setSortByTimeFilter("all");
   };
 
   const handlePageSizeChange = (value: number) => {
@@ -191,9 +89,10 @@ export default function Deals() {
     setPage(1);
   };
 
-  useEffect(() => {
+  const handleSearchClick = () => {
     setSearchTerm(searchTermVisual);
-  }, [searchTermVisual]);
+    refetch();
+  };
 
   return (
     <div className="container max-w-screen-xl mx-auto px-4">
@@ -214,13 +113,17 @@ export default function Deals() {
             onChange={(e) => setSearchTermVisual(e.target.value)}
             onKeyDown={(e) => {
               if (e.key === "Enter") {
-                setSearchTerm(e.currentTarget.value);
+                handleSearchClick();
               }
             }}
           />
 
+          <Button variant="outline" onClick={handleSearchClick}>
+            Search
+          </Button>
+
           {/* Posted At Filter */}
-          <Select onValueChange={(value) => setSortByTimeFilter(value)}>
+          {/* <Select value={sortByTimeFilter} onValueChange={(value) => setSortByTimeFilter(value)}>
             <SelectTrigger className="w-full sm:w-[180px]">
               <Clock3Icon className="ml-2" />
               <SelectValue placeholder="Posted at" />
@@ -231,10 +134,10 @@ export default function Deals() {
               <SelectItem value="This Week">This Week</SelectItem>
               <SelectItem value="This Month">This Month</SelectItem>
             </SelectContent>
-          </Select>
+          </Select> */}
 
           {/* Business Type Filter */}
-          <Select onValueChange={(value) => setBusinessTypeFilter(value)}>
+          <Select value={businessTypeFilter} onValueChange={(value) => setBusinessTypeFilter(value)}>
             <SelectTrigger className="w-full sm:w-[180px]">
               <UsersIcon className="ml-2" />
               <SelectValue placeholder="Business Type" />
@@ -263,25 +166,25 @@ export default function Deals() {
           </Select>
 
           {/* Project Status Filter */}
-          <Select onValueChange={(key) => setProjectStatusFilter(key)}>
+          <Select value={projectStatusFilter} onValueChange={(value) => setProjectStatusFilter(value)}>
             <SelectTrigger className="w-full sm:w-[180px]">
               <UserIcon className="ml-2" />
               <SelectValue placeholder="Project Status" />
             </SelectTrigger>
             <SelectContent>
-              {isLoadingFunded ? (
+              {isLoadingprojectStatus ? (
                 <SelectItem disabled value="_">
                   Loading...
                 </SelectItem>
-              ) : fundedLoadingError ? (
+              ) : isprojectStatusError ? (
                 <SelectItem disabled value="_">
                   No data available
                 </SelectItem>
               ) : (
                 <>
                   <SelectItem value="all">All Statuses</SelectItem>
-                  {projectStatus &&
-                    projectStatus.map((status) => (
+                  {projectStatusData &&
+                    projectStatusData.map((status) => (
                       <SelectItem key={status.id} value={status.value}>
                         {status.value}
                       </SelectItem>
@@ -290,21 +193,51 @@ export default function Deals() {
               )}
             </SelectContent>
           </Select>
+
+          {/* Tags Filter */}
+          <Select value={tagFilter} onValueChange={(value) => setTagFilter(value)}>
+            <SelectTrigger className="w-full sm:w-[180px]">
+              <UserIcon className="ml-2" />
+              <SelectValue placeholder="Tags" />
+            </SelectTrigger>
+            <SelectContent>
+              {isLoadingTag ? (
+                <SelectItem disabled value="_">
+                  Loading...
+                </SelectItem>
+              ) : isTagError ? (
+                <SelectItem disabled value="_">
+                  No data available
+                </SelectItem>
+              ) : (
+                <>
+                  <SelectItem value="all">All Tags</SelectItem>
+                  {tagData &&
+                    tagData.map((tag) => (
+                      <SelectItem key={tag.id} value={tag.value}>
+                        {tag.value}
+                      </SelectItem>
+                    ))}
+                </>
+              )}
+            </SelectContent>
+          </Select>
         </div>
 
         {/* Active Filters */}
+        <Separator className="mt-4 bg-background" />
         <ShowFilter filterParams={filterParams} clearAll={clearAll} />
-        <Separator className="mt-10" />
+        <Separator className="my-3" />
 
         {/* Project Cards Section */}
         {isLoadingProjects ? (
           <div>Loading...</div>
         ) : projectsLoadingError ? (
-          <div>Error loading projects.</div>
-        ) : projects ? (
-          <ProjectSection filteredProjects={projects} />
+          <div>Error loading projects</div>
         ) : (
-          <div>No projects found!</div>
+          <div>
+            <ProjectSection projectsData={formattedProjects} />
+          </div>
         )}
         {/* Pagination Controls */}
         <div className="mt-6 flex items-center justify-between">

src/lib/data/dropdownQuery.ts

@@ -12,4 +12,8 @@ function getAllBusinessTypeQuery(client: SupabaseClient) {
   return client.from("business_type").select("id, value, description");
 }
 
-export { getAllBusinessTypeQuery, getALlFundedStatusQuery, getAllTagsQuery };
+function getAllProjectStatusQuery(client: SupabaseClient) {
+  return client.from("project_status").select("id, value, description");
+}
+
+export { getAllBusinessTypeQuery, getALlFundedStatusQuery, getAllTagsQuery, getAllProjectStatusQuery };

src/lib/data/projectQuery.ts

@@ -96,7 +96,7 @@ async function getProjectData(client: SupabaseClient, projectId: number) {
 
 export interface FilterParams {
   searchTerm?: string;
-  tagsFilter?: string[];
+  tagFilter?: string;
   projectStatus?: string;
   projectStatusFilter?: string;
   businessTypeFilter?: string;
@@ -112,8 +112,8 @@ function searchProjectsQuery(
   client: SupabaseClient,
   {
     searchTerm,
-    tagsFilter,
-    projectStatus,
+    tagFilter,
+    projectStatusFilter,
     businessTypeFilter,
     sortByTimeFilter,
     page = 1,
@@ -121,7 +121,7 @@ function searchProjectsQuery(
   }: FilterProjectQueryParams
 ) {
   const start = (page - 1) * pageSize;
-  const end = start + pageSize;
+  const end = start + pageSize - 1;
 
   let query = client
     .from("project")
@@ -132,8 +132,8 @@ function searchProjectsQuery(
     published_time,
     project_short_description,
     card_image_url,
-    ...project_status!inner (
-      project_status:value
+    project_status!inner (
+      value
     ),
     ...project_investment_detail!inner (
       min_investment,
@@ -154,42 +154,29 @@ function searchProjectsQuery(
     )
     `
     )
-    .order("published_time", { ascending: false })
     .range(start, end);
 
-  if (sortByTimeFilter === "all") {
-    sortByTimeFilter = undefined;
+  // if (sortByTimeFilter && sortByTimeFilter !== "all") {
+  //   query = query.eq("published_time", sortByTimeFilter);
+  // }
+
+  if (projectStatusFilter && projectStatusFilter !== "all") {
+    query = query.eq("project_status.value", projectStatusFilter);
   }
 
-  if (projectStatus === "all") {
-    projectStatus = undefined;
+  if (businessTypeFilter && businessTypeFilter !== "all") {
+    query = query.eq("business.business_type.value", businessTypeFilter);
   }
 
-  if (businessTypeFilter === "all") {
-    businessTypeFilter = undefined;
-  }
-
-  if (tagsFilter?.length === 0) {
-    tagsFilter = undefined;
+  if (tagFilter && tagFilter !== "all") {
+    query = query.in("tags.tag_name", [tagFilter]);
   }
 
   if (searchTerm) {
     query = query.ilike("project_name", `%${searchTerm}%`);
   }
 
-  if (tagsFilter) {
-    query = query.in("project_tag.tag.value", tagsFilter);
-  }
-
-  if (projectStatus) {
-    query = query.eq("project_status.value", projectStatus);
-  }
-
-  if (businessTypeFilter) {
-    query = query.eq("business.business_type.value", businessTypeFilter);
-  }
-
-  return query;
+  return query.order("published_time", { ascending: false });
 }
 
 const getProjectByBusinessId = (client: SupabaseClient, businessIds: string[]) => {