Projects context data

Author: realstoman

src/components/ProjectsGrid.js

@@ -1,33 +1,37 @@
+import { useContext } from 'react';
+import ProjectSingle from './ProjectSingle';
 import { FiSearch } from 'react-icons/fi';
-import { ProjectsData } from '../utils/ProjectsData';
+import { ProjectsContext } from '../store/ProjectsContext';
+// import { ProjectsData } from '../utils/ProjectsData';
 import ProjectsFilter from './ProjectsFilter';
-import ProjectSingle from './ProjectSingle';
 
 const ProjectsGrid = () => {
-	const selectedProject = '';
-	const searchProject = '';
+	const [projects, setProjects] = useContext(ProjectsContext);
+
+	// const selectedProject = '';
+	// const searchProject = '';
 
-	const filteredProjects = () => {
-		if (selectedProject) {
-			return filterProjectsByCategory();
-		} else if (searchProject) {
-			return filterProjectsBySearch();
-		}
-		return ProjectsData;
-	};
+	// 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 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 filterProjectsBySearch = () => {
+	// 	let project = new RegExp(searchProject, 'i');
+	// 	return ProjectsData.filter((el) => el.title.match(project));
+	// };
 
 	return (
 		<section className="py-5 sm:py-10 mt-5 sm:mt-10">
@@ -117,7 +121,7 @@ const ProjectsGrid = () => {
 
 			{/* Projects grid start */}
 			<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 mt-6 sm:gap-10">
-				{ProjectsData.map((project) => (
+				{projects.map((project) => (
 					<ProjectSingle
 						title={project.title}
 						category={project.category}

src/pages/Home.js

@@ -1,12 +1,17 @@
 import { Link } from 'react-router-dom';
 import AppBanner from '../components/AppBanner';
 import ProjectsGrid from '../components/ProjectsGrid';
+import { ProjectsProvider } from '../store/ProjectsContext';
 
 const Home = () => {
 	return (
 		<div className="container mx-auto">
 			<AppBanner></AppBanner>
-			<ProjectsGrid></ProjectsGrid>
+
+			<ProjectsProvider>
+				<ProjectsGrid></ProjectsGrid>
+			</ProjectsProvider>
+
 			<div class="mt-10 sm:mt-15 flex justify-center">
 				<Link
 					to="/projects"

src/pages/ProjectSingle.js

@@ -2,14 +2,17 @@ import ProjectGallery from '../components/ProjectGallery';
 import ProjectHeader from '../components/ProjectHeader';
 import ProjectInfo from '../components/ProjectInfo';
 import ProjectRelatedProjects from '../components/ProjectRelatedProjects';
+import { ProjectsProvider } from '../store/ProjectsContext';
 
 const ProjectSingle = () => {
 	return (
 		<div className="container mx-auto mt-5 sm:mt-10">
-			<ProjectHeader />
-			<ProjectGallery />
-			<ProjectInfo />
-			<ProjectRelatedProjects />
+			<ProjectsProvider>
+				<ProjectHeader />
+				<ProjectGallery />
+				<ProjectInfo />
+				<ProjectRelatedProjects />
+			</ProjectsProvider>
 		</div>
 	);
 };

src/pages/Projects.js

@@ -1,10 +1,13 @@
 import ProjectsGrid from '../components/ProjectsGrid';
+import { ProjectsProvider } from '../store/ProjectsContext';
 
 const Projects = () => {
 	return (
-		<div className="container mx-auto">
-			<ProjectsGrid />
-		</div>
+		<ProjectsProvider>
+			<div className="container mx-auto">
+				<ProjectsGrid />
+			</div>
+		</ProjectsProvider>
 	);
 };
 

src/store/ProjectsContext.js

@@ -1,12 +1,64 @@
 import { useState, createContext } from 'react';
 
+// Import images
+import WebImage1 from '../images/web-project-1.jpg';
+import WebImage2 from '../images/web-project-2.jpg';
+import MobileImage1 from '../images/mobile-project-1.jpg';
+import MobileImage2 from '../images/mobile-project-2.jpg';
+import UIImage1 from '../images/ui-project-1.jpg';
+import UIImage2 from '../images/ui-project-2.jpg';
+
+// Create projects context
 export const ProjectsContext = createContext();
 
+// Create the projects context provider
 export const ProjectsProvider = (props) => {
-	const [projects, setProjects] = useState();
+	const [projects, setProjects] = useState([
+		{
+			id: 1,
+			title: 'Google Health Platform',
+			category: 'Web Application',
+			img: WebImage2,
+			ProjectHeader: {
+				title: 'Project Management UI - From Context',
+				publishDate: 'Jul 26, 2021',
+				tags: 'UI / Frontend',
+			},
+		},
+		{
+			id: 2,
+			title: 'Phoenix Digital Agency',
+			category: 'Mobile Application',
+			img: MobileImage2,
+		},
+		{
+			id: 3,
+			title: 'Project Management UI',
+			category: 'UI/UX Design',
+			img: UIImage1,
+		},
+		{
+			id: 4,
+			title: 'Cloud Storage Platform',
+			category: 'UI/UX Design',
+			img: UIImage2,
+		},
+		{
+			id: 5,
+			title: 'React Social App',
+			category: 'Mobile Application',
+			img: MobileImage1,
+		},
+		{
+			id: 6,
+			title: 'Apple Design System',
+			category: 'Web Application',
+			img: WebImage1,
+		},
+	]);
 
 	return (
-		<ProjectsContext.Provider values={[projects, setProjects]}>
+		<ProjectsContext.Provider value={[projects, setProjects]}>
 			{props.children}
 		</ProjectsContext.Provider>
 	);

src/utils/SingleProjectData.js

@@ -5,7 +5,6 @@ import Image4 from '../images/mobile-project-1.jpg';
 import Image5 from '../images/web-project-1.jpg';
 import Image6 from '../images/ui-project-2.jpg';
 import {
-	FiDribbble,
 	FiFacebook,
 	FiInstagram,
 	FiLinkedin,