Merge pull request #205 from SAMAHAN-Systems-Development/162-qa-projects-page-sorting-filter-not-working

fix: project page filter to work on z to a sort

Author: remagII

src/components/sections/ProjectsDisplaySection.tsx

@@ -1,20 +1,24 @@
-'use client'
+"use client";
 
-import React, { useEffect, useState } from 'react'
-import ProjectsFilter from '../ui/ProjectsFilter'
-import SortDropdown from '../ui/SortDropdown'
-import { Project } from '@/lib/features/projects/types/projects';
-import ProjectCard from '../ui/ProjectCard';
-import ProjectsModal from '../ui/ProjectsModal';
-import { GetProjects } from '@/lib/features/projects/service/GetProjects.api';
-import ServiceProjectsIdeaInMind from '../ui/ServiceProjectsIdeaInMind';
+import React, { useEffect, useState } from "react";
+import ProjectsFilter from "../ui/ProjectsFilter";
+import SortDropdown from "../ui/SortDropdown";
+import { Project } from "@/lib/features/projects/types/projects";
+import ProjectCard from "../ui/ProjectCard";
+import ProjectsModal from "../ui/ProjectsModal";
+import { GetProjects } from "@/lib/features/projects/service/GetProjects.api";
+import ServiceProjectsIdeaInMind from "../ui/ServiceProjectsIdeaInMind";
 
 function ProjectsDisplaySection() {
   const [openedProjectId, setOpenedProjectId] = useState<number | null>(null);
-  const [selectedFilter, setSelectedFilter] = useState<'SAMAHAN' | 'Other'>('SAMAHAN');
+  const [selectedFilter, setSelectedFilter] = useState<"SAMAHAN" | "Other">(
+    "SAMAHAN"
+  );
   // Separate states for sorting
-  const [sortByName, setSortByName] = useState<'asc' | 'desc' | null>(null);
-  const [sortByYear, setSortByYear] = useState<'yearDesc' | 'yearAsc' | null>(null);
+  const [sortByName, setSortByName] = useState<"asc" | "desc" | null>(null);
+  const [sortByYear, setSortByYear] = useState<"yearDesc" | "yearAsc" | null>(
+    null
+  );
 
   const [projectsData, setProjectsData] = useState<Project[]>([]);
 
@@ -25,9 +29,29 @@ function ProjectsDisplaySection() {
       if (sortByYear) {
         res = await GetProjects(undefined, undefined, sortByYear);
       } else if (sortByName) {
-        // Map asc/desc to asc/desc for API
-        const apiSort = sortByName === 'asc' ? 'asc' : 'desc';
-        res = await GetProjects(undefined, apiSort, undefined);
+        // For name sorting, fetch without sorting and sort on frontend
+        console.log("Sorting by name:", sortByName);
+        res = await GetProjects(undefined, undefined, undefined);
+
+        if (Array.isArray(res)) {
+          const flattenedData = res.flat();
+          // Sort on the frontend
+          const sorted = [...flattenedData].sort((a, b) => {
+            const titleA = a.title.toLowerCase();
+            const titleB = b.title.toLowerCase();
+            if (sortByName === "asc") {
+              return titleA.localeCompare(titleB);
+            } else {
+              return titleB.localeCompare(titleA);
+            }
+          });
+          setProjectsData(sorted);
+          console.log(
+            "Projects after frontend sorting:",
+            sorted.map((p) => p.title)
+          );
+          return;
+        }
       } else {
         res = await GetProjects();
       }
@@ -41,23 +65,26 @@ function ProjectsDisplaySection() {
   // Disable body scroll when modal is open
   useEffect(() => {
     if (openedProjectId) {
-      document.body.style.overflow = 'hidden';
+      document.body.style.overflow = "hidden";
     } else {
-      document.body.style.overflow = '';
+      document.body.style.overflow = "";
     }
     return () => {
-      document.body.style.overflow = '';
+      document.body.style.overflow = "";
     };
   }, [openedProjectId]);
 
   return (
-    <div className='w-full flex flex-col items-center py-16'>
-      <div className='w-full max-w-4xl px-6 sm:px-10 lg:px-8'>
+    <div className="w-full flex flex-col items-center py-16">
+      <div className="w-full max-w-4xl px-6 sm:px-10 lg:px-8">
         <div className="mb-2">
-          <ProjectsFilter selectedFilter={selectedFilter} setSelectedFilter={setSelectedFilter} />
+          <ProjectsFilter
+            selectedFilter={selectedFilter}
+            setSelectedFilter={setSelectedFilter}
+          />
         </div>
         <div className="mb:3">
-          <SortDropdown 
+          <SortDropdown
             sortByName={sortByName}
             setSortByName={setSortByName}
             sortByYear={sortByYear}
@@ -66,9 +93,11 @@ function ProjectsDisplaySection() {
         </div>
         <div className="grid grid-cols-1 md:grid-cols-2 gap-x-5 gap-y-5">
           {(projectsData as Project[])
-            .filter(project =>
-              ((selectedFilter === 'SAMAHAN' && (project.type == "internal")) ||
-                (selectedFilter === 'Other' && (project.type == "external" || project.type == "cross_orgs")))
+            .filter(
+              (project) =>
+                (selectedFilter === "SAMAHAN" && project.type == "internal") ||
+                (selectedFilter === "Other" &&
+                  (project.type == "external" || project.type == "cross_orgs"))
             )
             .map((project, idx) => (
               <ProjectCard
@@ -79,15 +108,15 @@ function ProjectsDisplaySection() {
             ))}
         </div>
       </div>
-      <ServiceProjectsIdeaInMind/>
+      <ServiceProjectsIdeaInMind />
       {openedProjectId && (
         <ProjectsModal
           openedProjectId={openedProjectId}
           setOpenedProjectId={setOpenedProjectId}
         />
       )}
     </div>
-  )
+  );
 }
 
-export default ProjectsDisplaySection
+export default ProjectsDisplaySection;

src/lib/features/projects/service/GetProjects.api.ts

@@ -3,23 +3,30 @@ import { Project } from "../types/projects";
 import { AxiosError } from "axios";
 
 export const GetProjects = async (
-  status: 'active' | 'not_active' | 'upcoming' | 'ongoing' | undefined = undefined,
-  sortByName: 'desc' | 'asc' = 'desc',
-  sortByYear: 'yearDesc' | 'yearAsc' = 'yearDesc',
-  type: 'internal' | 'external' | 'cross_orgs' | undefined = undefined,
+  status:
+    | "active"
+    | "not_active"
+    | "upcoming"
+    | "ongoing"
+    | undefined = undefined,
+  sortByName: "desc" | "asc" | undefined = undefined,
+  sortByYear: "yearDesc" | "yearAsc" | undefined = undefined,
+  type: "internal" | "external" | "cross_orgs" | undefined = undefined,
   page: number = 1,
-  limit: number = 100,
+  limit: number = 100
 ) => {
   try {
-    const url = `/api/projects?page=${page}&limit=${limit}` +
-      (sortByName ? `&sortByName=${sortByName}` : '') +
-      (sortByYear ? `&sortByYear=${sortByYear}` : '') +
-      (type ? `&type=${type}` : '') +
-      (status ? `&status=${status}` : '');
-    const res = await request<ApiArrayRequest<Project[]>>('GET', url);
-    //console.log(res);
+    const url =
+      `/api/projects?page=${page}&limit=${limit}` +
+      (sortByName ? `&sortByName=${sortByName}` : "") +
+      (sortByYear ? `&sortByYear=${sortByYear}` : "") +
+      (type ? `&type=${type}` : "") +
+      (status ? `&status=${status}` : "");
+    console.log("API URL:", url);
+    const res = await request<ApiArrayRequest<Project[]>>("GET", url);
+    console.log("API Response:", res.data);
     return res.data;
-  } catch(e) {
+  } catch (e) {
     if (e instanceof Error) {
       //console.error(e.toString());
     } else if (e instanceof AxiosError) {
@@ -30,5 +37,4 @@ export const GetProjects = async (
     //console.log(e);
     return undefined;
   }
-}
-
+};