Refactor: Filter using searchParams and search only in Filtered Proje…

…cts #868 (#1020) * Refactor to change the Router * Fix Theme change bug * Show Splash Screen * refactor: filter using search params
priyankarpal · May 31, 2023 · 2cec529 · 2cec529 · vercel · May 31, 2023
1 parent e98ef3b
commit 2cec529
Show file tree

Hide file tree

Showing 3 changed files with 96 additions and 67 deletions.
diff --git a/src/DB/projects.json b/src/DB/projects.json
@@ -1442,12 +1442,12 @@
         "description": "A fully working Facila expression recognition model made using Python, OpenCV, Keras and Tensorflow. User can see the facial expression of the person in the app directly.",
         "tech": ["Python", "OpenCV", "Keras", "Tensorflow"]
       },
-       {
+      {
         "link": "https://github.com/Deepanshu0703/google-keeper-clone",
         "title": "Google Keeper Clone",
         "description": "This is a clone of google keeper app. It is a note taking app where you can add, delete and edit notes.",
         "tech": ["ReactJs", "CSS"]
-      } 
+      }
     ]
   },
   {
@@ -2047,58 +2047,57 @@
         "tech": ["Node.js", "Express js", "MongoDB", "HTML", "CSS3", "EJS"]
       }
     ]
-},
-{
-  "github_username": "SJ-Kumar",
-  "Social_media": {
-    "gitHub": "https://github.com/SJ-Kumar",
-    "LinkedIn": "https://www.linkedin.com/in/jayanth-kumar-91947b220/",
-    "Instagram": "",
-    "YouTube": "",
-    "Twitter": "https://twitter.com/Jayanth_2003"
-  },
-  "Projects": [
-    {
-      "link": "https://profile-git-main-sj-kumar.vercel.app/",
-      "title": "Chat Based Portfolio Page",
-      "description": "Developed a chat based portfolio page that displays education, skills, projects, and resume (pdf) version from repository based on the word user types in a dynamic chat window.",
-      "tech": ["HTML", "CSS", "Javascript"]
-    } 
-  ]
-},
+  },
+  {
+    "github_username": "SJ-Kumar",
+    "Social_media": {
+      "gitHub": "https://github.com/SJ-Kumar",
+      "LinkedIn": "https://www.linkedin.com/in/jayanth-kumar-91947b220/",
+      "Instagram": "",
+      "YouTube": "",
+      "Twitter": "https://twitter.com/Jayanth_2003"
+    },
+    "Projects": [
+      {
+        "link": "https://profile-git-main-sj-kumar.vercel.app/",
+        "title": "Chat Based Portfolio Page",
+        "description": "Developed a chat based portfolio page that displays education, skills, projects, and resume (pdf) version from repository based on the word user types in a dynamic chat window.",
+        "tech": ["HTML", "CSS", "Javascript"]
+      }
+    ]
+  },
 
   {
-  "github_username": "rajputsingh808",
-  "Social_media": {
-    "gitHub": "https://github.com/rajputsingh808",
-    "LinkedIn": "https://www.linkedin.com/in/sonam-singh-30b689231/"
+    "github_username": "rajputsingh808",
+    "Social_media": {
+      "gitHub": "https://github.com/rajputsingh808",
+      "LinkedIn": "https://www.linkedin.com/in/sonam-singh-30b689231/"
+    },
+    "Projects": [
+      {
+        "link": "https://github.com/rajputsingh808/Tech_intern2k23",
+        "title": "Bookstore",
+        "description": "My bookstore website can issue different books and has multiple features.",
+        "tech": ["HTML", "CSS", "Javascript"]
+      }
+    ]
   },
-    "Projects":[
-     {
-      "link": "https://github.com/rajputsingh808/Tech_intern2k23",
-      "title": "Bookstore",
-      "description": "My bookstore website can issue different books and has multiple features.",
-      "tech": ["HTML", "CSS","Javascript"]
-    }
+  {
+    "github_username": "KhushiVaiskyar",
+    "Social_media": {
+      "gitHub": "https://github.com/KhushiVaiskyar",
+      "LinkedIn": "https://www.linkedin.com/in/khushi-vaiskyar-953190235/",
+      "Instagram": "",
+      "YouTube": "",
+      "Twitter": ""
+    },
+    "Projects": [
+      {
+        "link": "https://github.com/KhushiVaiskyar/Usabilityhub",
+        "title": "Usability Hub",
+        "description": "UsabilityHub is a remote user research platform that takes the guesswork out of design decisions by validating them with real users.",
+        "tech": ["HTML", "CSS"]
+      }
     ]
-
-},
-  {
-  "github_username": "KhushiVaiskyar",
-  "Social_media": {
-    "gitHub": "https://github.com/KhushiVaiskyar",
-    "LinkedIn": "https://www.linkedin.com/in/khushi-vaiskyar-953190235/",
-    "Instagram": "",
-    "YouTube": "",
-    "Twitter": ""
-  },
-  "Projects": [
-  {
-      "link": "https://github.com/KhushiVaiskyar/Usabilityhub",
-      "title": "Usability Hub",
-      "description": "UsabilityHub is a remote user research platform that takes the guesswork out of design decisions by validating them with real users.",
-      "tech": ["HTML", "CSS"]
-    }
-  ]
   }
 ]
diff --git a/src/pages/ProjectsPage.jsx b/src/pages/ProjectsPage.jsx
@@ -6,6 +6,7 @@ import { paginate } from '../utils/paginate';
 import { Link } from 'react-router-dom';
 import { searchProject } from '@/utils/searchProject';
 import { Button } from '@mui/material';
+import { useSearchParams } from 'react-router-dom';
 
 const paginatedArr = paginate(projects);
 
@@ -16,12 +17,15 @@ const ProjectsPage = () => {
   const [selectedButton, setSelectedButton] = useState(null);
   const [searchInput, setSearchInput] = useState('');
   const [disablePagination, setDisablePagination] = useState(false);
+  const [searchParams, setSearchParams] = useSearchParams();
+  const currentFilter = searchParams.get('filter');
 
   function handleChange(e) {
     setSearchInput(e.target.value);
     if (e.target.value != '') {
+      console.log(e.target.value);
       setDisablePagination(true);
-      setItems(searchProject(projects, e.target.value));
+      setItems(searchProject(currentFilter ? getFilteredProjects(currentFilter) : projects, e.target.value));
     } else {
       setDisablePagination(false);
       loadItems();
@@ -58,35 +62,57 @@ const ProjectsPage = () => {
 
   // function to set item for pagination
   const loadItems = () => {
-    const data = paginatedArr[page.pageNo];
-    setItems(data);
+    if (!currentFilter) {
+      const data = paginatedArr[page.pageNo];
+      setItems(data);
+    } else {
+      filterProjects(currentFilter);
+    }
   };
 
   // this useEffect is for when user clear the filter (double click) then render only that page projects
 
   useEffect(() => {
-    if (selectedButton === null) {
+    if (!currentFilter) {
       setItems(paginatedArr[page.pageNo]);
       return;
+    } else {
+      filterProjects(currentFilter);
     }
-  }, [selectedButton]);
+  }, [currentFilter]);
 
   // this function will filter project based on selected technology and set the state of items
 
-  const handleQuery = (index) => {
-    setSelectedButton((prev) => (prev === index ? null : index));
-    const regexPattern = new RegExp(techStack[index], 'i');
-    let currProjects = [];
+  const handleFilterChange = (filter) => {
+    setSearchInput('');
+    filter = filter.toLowerCase();
+    setSearchParams((prevParams) => {
+      if (prevParams.get('filter') == filter) {
+        delete prevParams.delete('filter');
+      } else {
+        prevParams.set('filter', filter);
+        filterProjects(filter);
+      }
+      return prevParams;
+    });
+  };
+
+  const getFilteredProjects = (filter) => {
+    const curProjects = [];
     projects?.map((obj) => {
       let arr = obj['Projects'][0].tech;
       for (let i = 0; i < arr.length; i++) {
-        if (regexPattern.test(arr[i])) {
-          currProjects.push(obj);
+        if (arr[i].trim().toLowerCase().includes(filter)) {
+          curProjects.push(obj);
           break;
         }
       }
     });
-    setItems(currProjects);
+    return curProjects;
+  };
+
+  const filterProjects = (filter) => {
+    setItems(getFilteredProjects(filter));
   };
 
   const prevPage = () => {
@@ -142,11 +168,14 @@ const ProjectsPage = () => {
         {techStack.map((tech, index) => (
           <Button
             key={index}
-            onClick={() => handleQuery(index)}
-            variant={selectedButton === index ? 'contained' : 'outlined'}
+            onClick={() => handleFilterChange(tech)}
+            variant={currentFilter == tech.toLowerCase() ? 'contained' : 'outlined'}
             className="bg-primary hover:bg-slate-200"
           >
-            <span className={selectedButton == index ? 'text-white' : 'text-primary'}> {tech.toLowerCase()}</span>
+            <span className={currentFilter == tech.toLowerCase() ? 'text-white' : 'text-primary'}>
+              {' '}
+              {tech.toLowerCase()}
+            </span>
           </Button>
         ))}
       </div>
@@ -168,7 +197,7 @@ const ProjectsPage = () => {
       </section>
 
       {/* when user apply filter then show specific projects and hide prev and next page */}
-      {selectedButton === null && !disablePagination && (
+      {selectedButton === null && !disablePagination && !currentFilter && (
         <div className=" py-5 flex gap-2 flex-wrap justify-center text-black ">
           <button
             type="button"

diff --git a/src/utils/searchProject.js b/src/utils/searchProject.js
@@ -5,6 +5,7 @@ export const searchProject = (projects, name) => {
       for (const item of project.Projects) {
         if (item.title.toLowerCase().includes(name.toLowerCase())) {
           resultArr.push(project);
+          break;
         }
       }
     }