Refactor: Retain filter #1024 (#1026)

* Refactor to change the Router * Fix Theme change bug * Show Splash Screen * refactor: retain filter * Update src/components/ProjectList.jsx Co-authored-by: Priyankar Pal <[email protected]> Signed-off-by: Kailash Choudhary <[email protected]> * Update ProjectList.jsx --------- Signed-off-by: Kailash Choudhary <[email protected]> Co-authored-by: Priyankar Pal <[email protected]>
priyankarpal · May 31, 2023 · 71f90f6 · 71f90f6 · vercel · May 31, 2023
1 parent 3e41f74
commit 71f90f6
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 4 deletions.
diff --git a/src/components/ProjectCard.jsx b/src/components/ProjectCard.jsx
@@ -3,7 +3,7 @@ import { useContext } from 'react';
 import { ThemeContext } from '../context/Theme';
 import { Link } from 'react-router-dom';
 
-const ProjectCard = ({ github_username, listOfProjects }) => {
+const ProjectCard = ({ github_username, listOfProjects, filter }) => {
   const { theme } = useContext(ThemeContext);
 
   return (
@@ -46,6 +46,7 @@ const ProjectCard = ({ github_username, listOfProjects }) => {
             <Link
               to={`/projects/${github_username.toLowerCase()}`}
               className="w-full px-4 items-center group flex gap-2 justify-center text-center text-white from-indigo-500 via-purple-500 to-pink-500 bg-gradient-to-r  xl:text-[1rem] md:text-[0.8rem]  rounded-md py-[0.35rem]"
+              state={{ filter: filter }}
             >
               More
               <span className="group-hover:translate-x-1 duration-300 block" aria-hidden="true">

diff --git a/src/components/ProjectList.jsx b/src/components/ProjectList.jsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { useContext } from 'react';
-import { useParams } from 'react-router-dom';
+import { useParams, useLocation } from 'react-router-dom';
 import { ThemeContext } from '../context/Theme';
 import projects from '../DB/projects.json';
 import { FaGithub, FaTwitter, FaLinkedinIn, FaInstagram, FaYoutube } from 'react-icons/fa';
@@ -10,6 +10,8 @@ import { Link } from 'react-router-dom';
 const ProjectList = () => {
   const { theme } = useContext(ThemeContext);
   const { username } = useParams();
+  const data = useLocation();
+  const filter = data.state.filter;
 
   const [userObj, setObject] = useState({});
 
@@ -40,8 +42,8 @@ const ProjectList = () => {
           {/* Beack to projects link */}
           <div className="m-4 hover:text-purple-500 transition-all duration-300 ease-in-out">
             <span>{'<'}</span>
-            <Link to="/projects" className="font-mono ml-2">
-              Back to Projects
+<Link to={`/projects${filter?`?filter=${filter}`:''}`} className="ml-2">{`Back to ${filter?filter.charAt(0).toUpperCase()+filter.slice(1):'All'} Projects`}
+
             </Link>
           </div>
 

diff --git a/src/pages/ProjectsPage.jsx b/src/pages/ProjectsPage.jsx
@@ -177,6 +177,7 @@ const ProjectsPage = () => {
               listOfProjects={item['Projects']}
               socaialMedia={item['Social_media']}
               key={i}
+              filter={currentFilter}
             />
           ))
         ) : (