add phase links

learn-co-students · Sep 12, 2022 · b9b5c8e · b9b5c8e
1 parent 432b97b
commit b9b5c8e
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 6 deletions.
diff --git a/07_client_side_routing/project_showcase/src/components/ProjectList.js b/07_client_side_routing/project_showcase/src/components/ProjectList.js
@@ -1,5 +1,6 @@
 import ProjectListItem from "./ProjectListItem";
 import { useState, useEffect } from "react";
+import { NavLink, useParams } from "react-router-dom";
 
 const ProjectList = ({
   projects,
@@ -9,6 +10,8 @@ const ProjectList = ({
 }) => {
   const [searchInputText, setSearchInputText] = useState("");
 
+  const { phase } = useParams();
+
   const projectItems = projects.map((project) => {
     return (
       <ProjectListItem
@@ -31,17 +34,25 @@ const ProjectList = ({
     }
   }, [setSearchQuery, searchInputText])
 
+  useEffect(() => {
+    if (phase) {
+      setSelectedPhase(phase);
+    } else {
+      setSelectedPhase("");
+    }
+  }, [phase, setSelectedPhase])
+
   return (
     <section>
       <h2>Projects</h2>
 
       <div className="filter">
-        <button onClick={() => setSelectedPhase("")}>All</button>
-        <button onClick={() => setSelectedPhase("5")}>Phase 5</button>
-        <button onClick={() => setSelectedPhase("4")}>Phase 4</button>
-        <button onClick={() => setSelectedPhase("3")}>Phase 3</button>
-        <button onClick={() => setSelectedPhase("2")}>Phase 2</button>
-        <button onClick={() => setSelectedPhase("1")}>Phase 1</button>
+        <NavLink className="button" exact to="/projects">All</NavLink>
+        <NavLink className="button" to="/projects/phase/5">Phase 5</NavLink>
+        <NavLink className="button" to="/projects/phase/4">Phase 4</NavLink>
+        <NavLink className="button" to="/projects/phase/3">Phase 3</NavLink>
+        <NavLink className="button" to="/projects/phase/2">Phase 2</NavLink>
+        <NavLink className="button" to="/projects/phase/1">Phase 1</NavLink>
       </div>
       <input type="text" placeholder="Search..." onChange={handleOnChange} />
 

diff --git a/07_client_side_routing/project_showcase/src/components/ProjectsContainer.js b/07_client_side_routing/project_showcase/src/components/ProjectsContainer.js
@@ -66,6 +66,16 @@ const ProjectsContainer = () => {
           setSearchQuery={setSearchQuery}
         />
       </Route>
+      <Route exact path="/projects/phase/:phase">
+        <ProjectList
+          projects={projects}
+          onUpdateProject={onUpdateProject}
+          onDeleteProject={onDeleteProject}
+          onSelectedPhaseChange={onSelectedPhaseChange}
+          setSelectedPhase={setSelectedPhase}
+          setSearchQuery={setSearchQuery}
+        />
+      </Route>
       <Route path="/projects/new">
         <ProjectForm onAddProject={onAddProject} />
       </Route>