Merge pull request realstoman#8 from NangialaiStoman/router-and-scroll-top

Router and scroll top

Author: realstoman

src/App.js

@@ -7,11 +7,13 @@ import About from './pages/AboutMe';
 import Projects from './pages/Projects';
 import Contact from './pages/Contact';
 import ProjectSingle from './pages/ProjectSingle';
+import ScrollToTop from './components/ScrollToTop';
 
 function App() {
 	return (
 		<div className=" bg-secondary-light dark:bg-primary-dark transition duration-300">
 			<Router>
+				<ScrollToTop />
 				<AppHeader></AppHeader>
 				<Routes>
 					<Route path="/" element={<Home />} />

src/components/BackToTop.js

@@ -0,0 +1,13 @@
+import { useEffect } from 'react';
+
+const BackToTop = () => {
+	const userScrollPosition = 0;
+
+	useEffect(() => {
+		window.scrollTo(0, 0);
+	}, [userScrollPosition]);
+
+	return <div></div>;
+};
+
+export default BackToTop;

src/components/ProjectsGrid.js

@@ -4,6 +4,31 @@ import ProjectsFilter from './ProjectsFilter';
 import ProjectSingle from './ProjectSingle';
 
 const ProjectsGrid = () => {
+	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));
+	};
+
 	return (
 		<section className="py-5 sm:py-10 mt-5 sm:mt-10">
 			{/* Projects grid title start */}
@@ -92,11 +117,6 @@ const ProjectsGrid = () => {
 
 			{/* Projects grid start */}
 			<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 mt-6 sm:gap-10">
-				{/* <ProjectSingle
-				v-for="project in filteredProjects"
-				:key="project.id"
-				:project="project"
-			/> */}
 				{ProjectsData.map((project) => (
 					<ProjectSingle
 						title={project.title}

src/components/ScrollToTop.js

@@ -0,0 +1,13 @@
+import { useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+
+const ScrollToTop = () => {
+	const { pathname } = useLocation();
+
+	useEffect(() => {
+		window.scrollTo(0, 0);
+	}, [pathname]);
+	return null;
+};
+
+export default ScrollToTop;