Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
remagII merged 1 commit into from
Oct 13, 2025
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
85 changes: 57 additions & 28 deletions src/components/sections/ProjectsDisplaySection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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[]>([]);

Expand All @@ -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();
}
Expand All @@ -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}
Expand All @@ -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
Expand All @@ -79,15 +108,15 @@ function ProjectsDisplaySection() {
))}
</div>
</div>
<ServiceProjectsIdeaInMind/>
<ServiceProjectsIdeaInMind />
{openedProjectId && (
<ProjectsModal
openedProjectId={openedProjectId}
setOpenedProjectId={setOpenedProjectId}
/>
)}
</div>
)
);
}

export default ProjectsDisplaySection
export default ProjectsDisplaySection;
36 changes: 21 additions & 15 deletions src/lib/features/projects/service/GetProjects.api.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -30,5 +37,4 @@ export const GetProjects = async (
//console.log(e);
return undefined;
}
}

};