diff --git a/apps/website/src/components/ProjectsList.tsx b/apps/website/src/components/ProjectsList.tsx index a97e7497b..0cb26b9b5 100644 --- a/apps/website/src/components/ProjectsList.tsx +++ b/apps/website/src/components/ProjectsList.tsx @@ -1,7 +1,7 @@ "use client" import { Button, Grid, GridItem, HStack, IconButton, Text, VStack } from "@chakra-ui/react" -import { useCallback, useEffect, useState } from "react" +import { useState } from "react" import ProjectCard from "../components/ProjectCard" import allProjects from "../data/projects.json" import IconChevronLeft from "../icons/IconChevronLeft" @@ -12,32 +12,18 @@ import { chunkArray } from "../utils/chunkArray" import { getProjectCategories } from "../utils/getProjectCategories" export default function ProjectsList(props: any) { - const [projects, setProjects] = useState<(typeof allProjects)[]>(chunkArray(allProjects)) + const [projects] = useState<(typeof allProjects)[]>(chunkArray(allProjects)) const [index, setIndex] = useState(0) - const [selectedCategory, setSelectedCategory] = useState(null) const [onlyPSE, setOnlyPSE] = useState(null) + const [selectedCategories, setSelectedCategories] = useState>([]) - const filterProjects = useCallback(() => { - let filteredProjects = allProjects - - if (selectedCategory) { - filteredProjects = filteredProjects.filter((project) => project.categories.includes(selectedCategory)) - } - - if (onlyPSE === true) { - filteredProjects = filteredProjects.filter((project) => project.pse) - } else if (onlyPSE === false) { - filteredProjects = filteredProjects.filter((project) => !project.pse) + const toggleCategory = (category: any) => { + if (selectedCategories.includes(category)) { + setSelectedCategories(selectedCategories.filter((c) => c !== category)) + } else { + setSelectedCategories([...selectedCategories, category]) } - - filteredProjects = filteredProjects.sort((a, b) => a.name.localeCompare(b.name)) - - setProjects(chunkArray(filteredProjects)) - }, [selectedCategory, onlyPSE]) - - useEffect(() => { - filterProjects() - }, [selectedCategory, onlyPSE]) + } return ( @@ -74,9 +60,9 @@ export default function ProjectsList(props: any) { @@ -85,16 +71,20 @@ export default function ProjectsList(props: any) { - {projects[index].map((project) => ( - - - - ))} + {projects[index] + .filter((project) => { + return selectedCategories.every((category) => project.categories.includes(category)) + }) + .map((project) => ( + + + + ))} {projects.length > 1 && (