end of lecture

07_client_side_routing/project_showcase/db.json

@@ -100,4 +100,4 @@
       "claps": 0
     }
   ]
-}
+}

07_client_side_routing/project_showcase/src/App.js

@@ -1,4 +1,5 @@
 import { useState } from "react";
+import { Switch, Route } from "react-router-dom";
 
 import Header from "./components/Header";
 import Home from "./components/Home";
@@ -15,9 +16,17 @@ const App = () => {
   return (
     <div className={isDarkMode ? "App" : "App light"}>
       <Header isDarkMode={isDarkMode} onToggleDarkMode={onToggleDarkMode} />
-      <Home />
-      <About />
-      <ProjectsContainer />
+      <Switch>
+        <Route exact path="/">
+          <Home />
+        </Route>
+        <Route path="/about">
+          <About />
+        </Route>
+        <Route path="/projects">
+          <ProjectsContainer />
+        </Route>
+      </Switch>
     </div>
   );
 };

07_client_side_routing/project_showcase/src/components/Header.js

@@ -1,26 +1,27 @@
 import React from "react";
+import { NavLink, Link } from "react-router-dom";
 
 const Header = ({ isDarkMode, onToggleDarkMode }) => {
   const buttonTextContent = isDarkMode ? "Light Mode" : "Dark Mode";
 
   return (
     <header>
       <h1 className="branding">
-        <a href="/"><span className="logo">{"//"}</span>
+        <Link to="/"><span className="logo">{"//"}</span>
           Project Showcase
-        </a>
+        </Link>
       </h1>
       <nav>
         <div className="navigation">
-          <a className="button" href="/projects">
+          <NavLink className="button" exact to="/projects">
             All Projects
-          </a>
-          <a className="button" href="/projects/new">
+          </NavLink>
+          <NavLink className="button" to="/projects/new">
             Add Project
-          </a>
-          <a className="button" href="/about">
+          </NavLink>
+          <NavLink className="button" to="/about">
             About
-          </a>
+          </NavLink>
           <button onClick={onToggleDarkMode}>{buttonTextContent}</button>
         </div>
       </nav>

07_client_side_routing/project_showcase/src/components/Home.js

@@ -1,4 +1,5 @@
 import { useEffect, useState } from "react";
+import { Link } from "react-router-dom";
 
 const Home = () => {
   const [recentProjects, setRecentProjects] = useState([]);
@@ -24,9 +25,9 @@ const Home = () => {
         <p key={project.id}>{project.name}</p>
       ))}
       <div style={{ margin: "1rem 0" }}>
-        <a className="button" href="/projects">
+        <Link className="button" to="/projects">
           View All Projects
-        </a>
+        </Link>
       </div>
     </section>
   );

07_client_side_routing/project_showcase/src/components/ProjectDetail.js

@@ -1,10 +1,11 @@
 import React, { useEffect, useState } from "react";
+import { useParams } from "react-router-dom";
 
 const ProjectDetail = () => {
   const [claps, setClaps] = useState(0);
   const [project, setProject] = useState(null);
 
-  const id = 1;
+  const { id } = useParams();
 
   useEffect(() => {
     fetch(`http://localhost:4000/projects/${id}`)

07_client_side_routing/project_showcase/src/components/ProjectEditForm.js

@@ -1,19 +1,26 @@
 import React, { useState, useEffect } from "react";
+import { useParams, useHistory } from "react-router-dom";
 
-const ProjectEditForm = ({ projectToEdit, onUpdateProject }) => {
-  const [formData, setFormData] = useState(projectToEdit);
+const ProjectEditForm = ({ onUpdateProject }) => {
+  const [formData, setFormData] = useState({
+    name: "",
+    about: "",
+    phase: "",
+    link: "",
+    image: "",
+  });
 
   const { name, about, phase, link, image } = formData;
 
-  // const { id } = useParams()
+  const { id } = useParams();
 
-  // const history = useHistory()
+  const history = useHistory()
 
   useEffect(() => {
-    fetch(`http://localhost:4000/projects/${projectToEdit.id}`)
+    fetch(`http://localhost:4000/projects/${id}`)
       .then((res) => res.json())
       .then((project) => setFormData(project));
-  }, [projectToEdit.id]);
+  }, [id]);
 
   const handleChange = (e) => {
     const { name, value } = e.target;
@@ -30,10 +37,11 @@ const ProjectEditForm = ({ projectToEdit, onUpdateProject }) => {
       body: JSON.stringify(formData),
     };
 
-    fetch(`http://localhost:4000/projects/${projectToEdit.id}`, configObj)
+    fetch(`http://localhost:4000/projects/${id}`, configObj)
       .then((resp) => resp.json())
       .then((updatedProj) => {
         onUpdateProject(updatedProj);
+        history.push("/projects")
       });
   };
 

07_client_side_routing/project_showcase/src/components/ProjectList.js

@@ -3,7 +3,6 @@ import { useState, useEffect } from "react";
 
 const ProjectList = ({
   projects,
-  onEditProject,
   onDeleteProject,
   setSelectedPhase,
   setSearchQuery
@@ -15,7 +14,6 @@ const ProjectList = ({
       <ProjectListItem
         key={project.id}
         project={project}
-        onEditProject={onEditProject}
         onDeleteProject={onDeleteProject}
       />
     );

07_client_side_routing/project_showcase/src/components/ProjectListItem.js

@@ -1,19 +1,20 @@
 import { useState } from "react";
 import { FaPencilAlt, FaTrash } from "react-icons/fa";
+import { useHistory } from "react-router-dom";
 
 const ProjectListItem = ({
   project,
-  onEditProject,
   onDeleteProject,
 }) => {
   const { id, image, about, name, link, phase } = project;
 
   const [clapCount, setClapCount] = useState(0);
+  const history = useHistory();
 
   const handleClap = (clapCount) => setClapCount(clapCount + 1);
 
   const handleEditClick = () => {
-    onEditProject(project);
+    history.push(`/projects/${id}/edit`)
   };
 
   const handleDeleteClick = () => {

07_client_side_routing/project_showcase/src/components/ProjectsContainer.js

@@ -1,11 +1,12 @@
-import { useState, useEffect } from 'react';
-import ProjectList from './ProjectList';
-import ProjectEditForm from './ProjectEditForm';
-import ProjectForm from './ProjectForm';
+import { useState, useEffect } from "react";
+import { Switch, Route } from "react-router-dom";
+import ProjectList from "./ProjectList";
+import ProjectEditForm from "./ProjectEditForm";
+import ProjectForm from "./ProjectForm";
+import ProjectDetail from "./ProjectDetail";
 
 const ProjectsContainer = () => {
   const [projects, setProjects] = useState([]);
-  const [projectToEdit, setProjectToEdit] = useState(null);
   const [selectedPhase, setSelectedPhase] = useState("");
   const [searchQuery, setSearchQuery] = useState("");
 
@@ -41,7 +42,6 @@ const ProjectsContainer = () => {
         return originalProject;
       }
     }))
-    setProjectToEdit(null);
   };
 
   const onDeleteProject = (deletedProjectId) => {
@@ -51,38 +51,33 @@ const ProjectsContainer = () => {
       return project.id !== deletedProjectId
     }))
   }
-
-  const onEditProject = (projectToEdit) => {
-    setProjectToEdit(projectToEdit);
-  };
-
-  const renderForm = () => {
-    if (projectToEdit) {
-      return (
-        <ProjectEditForm
-          projectToEdit={projectToEdit}
-          onUpdateProject={onUpdateProject}
-        />
-      );
-    } else {
-      return <ProjectForm onAddProject={onAddProject} />;
-    }
-  };
+
 
 
   return (
-    <>
-      {renderForm()}
-      <ProjectList
-        projects={projects}
-        onEditProject={onEditProject}
-        onUpdateProject={onUpdateProject}
-        onDeleteProject={onDeleteProject}
-        onSelectedPhaseChange={onSelectedPhaseChange}
-        setSelectedPhase={setSelectedPhase}
-        setSearchQuery={setSearchQuery}
-      />
-    </>
+    <Switch>
+      <Route exact path="/projects">
+        <ProjectList
+          projects={projects}
+          onUpdateProject={onUpdateProject}
+          onDeleteProject={onDeleteProject}
+          onSelectedPhaseChange={onSelectedPhaseChange}
+          setSelectedPhase={setSelectedPhase}
+          setSearchQuery={setSearchQuery}
+        />
+      </Route>
+      <Route path="/projects/new">
+        <ProjectForm onAddProject={onAddProject} />
+      </Route>
+      <Route path="/projects/:id/edit">
+        <ProjectEditForm
+          onUpdateProject={onUpdateProject}
+        />
+      </Route>
+      <Route path="/projects/:id">
+        <ProjectDetail />
+      </Route>
+    </Switch>
   )
 }