Search and filter funcitonality

Author: realstoman

src/components/projects/ProjectsFilter.js

@@ -2,12 +2,15 @@ const selectOptions = [
 	'Web Application',
 	'Mobile Application',
 	'UI/UX Design',
-	'Branding',
+	'Branding & Graphics',
 ];
 
-const ProjectsFilter = () => {
+const ProjectsFilter = ({ setSelectProject }) => {
 	return (
 		<select
+			onChange={(e) => {
+				setSelectProject(e.target.value);
+			}}
 			className="
                 px-4
                 sm:px-6
@@ -24,7 +27,7 @@ const ProjectsFilter = () => {
                 dark:text-ternary-light
             "
 		>
-			<option value className="text-sm sm:text-md">
+			<option value={setSelectProject} className="text-sm sm:text-md">
 				All Projects
 			</option>
 

src/components/projects/ProjectsGrid.js

@@ -5,33 +5,37 @@ import { ProjectsContext } from '../../context/ProjectsContext';
 import ProjectsFilter from './ProjectsFilter';
 
 const ProjectsGrid = () => {
-	const { setSearchProject, searchProjectsByTitle } =
-		useContext(ProjectsContext);
+	const {
+		projects,
+		searchProject,
+		setSearchProject,
+		searchProjectsByTitle,
+		selectProject,
+		setSelectProject,
+		selectProjectsByCategory,
+	} = useContext(ProjectsContext);
 
-	// const selectedProject = '';
-	// const searchProject = '';
-
-	// const filteredProjects = () => {
-	// 	if (selectedProject) {
-	// 		return filterProjectsByCategory();
-	// 	} else if (searchProject) {
-	// 		return filterProjectsBySearch();
-	// 	}
-	// 	return ProjectsData;
-	// };
-
-	// const filterProjectsByCategory = () => {
-	// 	return ProjectsData.filter((item) => {
-	// 		let category =
-	// 			item.category.charAt(0).toUpperCase() + item.category.slice(1);
-	// 		return category.includes(selectedProject);
-	// 	});
-	// };
-
-	// const filterProjectsBySearch = () => {
-	// 	let project = new RegExp(searchProject, 'i');
-	// 	return ProjectsData.filter((el) => el.title.match(project));
-	// };
+	const projectsResult = () => {
+		if (setSearchProject) {
+			return searchProjectsByTitle.map((project) => (
+				<ProjectSingle
+					title={project.title}
+					category={project.category}
+					image={project.img}
+					key={project.id}
+				/>
+			));
+		} else if (setSelectProject) {
+			return selectProjectsByCategory.map((project) => (
+				<ProjectSingle
+					title={project.title}
+					category={project.category}
+					image={project.img}
+					key={project.id}
+				/>
+			));
+		}
+	};
 
 	return (
 		<section className="py-5 sm:py-10 mt-5 sm:mt-10">
@@ -116,22 +120,40 @@ const ProjectsGrid = () => {
 					</div>
 					{/* <ProjectsFilter @change="selectedProject = $event" /> */}
 
-					<ProjectsFilter />
+					<ProjectsFilter setSelectProject={setSelectProject} />
 					{/* <p>Filter projects</p> */}
 				</div>
 			</div>
 			{/* Filter and search projects end */}
 
 			{/* Projects grid start */}
 			<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 mt-6 sm:gap-10">
-				{searchProjectsByTitle.map((project) => (
-					<ProjectSingle
-						title={project.title}
-						category={project.category}
-						image={project.img}
-						key={project.id}
-					/>
-				))}
+				{selectProject
+					? selectProjectsByCategory.map((project) => (
+							<ProjectSingle
+								title={project.title}
+								category={project.category}
+								image={project.img}
+								key={project.id}
+							/>
+					  ))
+					: searchProject
+					? searchProjectsByTitle.map((project) => (
+							<ProjectSingle
+								title={project.title}
+								category={project.category}
+								image={project.img}
+								key={project.id}
+							/>
+					  ))
+					: projects.map((project) => (
+							<ProjectSingle
+								title={project.title}
+								category={project.category}
+								image={project.img}
+								key={project.id}
+							/>
+					  ))}
 			</div>
 			{/* Projects grid end */}
 		</section>

src/context/ProjectsContext.js

@@ -8,21 +8,33 @@ export const ProjectsContext = createContext();
 export const ProjectsProvider = (props) => {
 	const [projects, setProjects] = useState(projectsData);
 	const [searchProject, setSearchProject] = useState('');
+	const [selectProject, setSelectProject] = useState('');
 
-	// Search projects
+	// Search projects by project title
 	const searchProjectsByTitle = projects.filter((item) => {
 		if (item.title.toLowerCase().includes(searchProject.toLowerCase()))
 			return item;
 		else if (searchProject === '') return item;
 	});
 
+	// Select projects by project category
+	const selectProjectsByCategory = projects.filter((item) => {
+		let category =
+			item.category.charAt(0).toUpperCase() + item.category.slice(1);
+		return category.includes(selectProject);
+	});
+
 	return (
 		<ProjectsContext.Provider
 			value={{
 				projects,
 				setProjects,
+				searchProject,
 				setSearchProject,
 				searchProjectsByTitle,
+				selectProject,
+				setSelectProject,
+				selectProjectsByCategory,
 			}}
 		>
 			{props.children}