From c66d410ea0ed3cc0a7e8016ca19810cf8dc11394 Mon Sep 17 00:00:00 2001
From: CampbellDocherty <campbellsofitsidocherty@gmail.com>
Date: Thu, 28 May 2020 13:20:18 +0100
Subject: [PATCH] Add dynamic routing for project page and refactor code
 courtesy of Izaak Relates #11

Co-authored-by: Hannah Gooding <hannah.gooding@yahoo.com>
---
 README.md                                     |  5 --
 wip-app/src/App.js                            | 80 +++++++------------
 .../src/components/ProjectCard/ProjectCard.js | 32 +++++---
 .../src/components/ProjectFeed/ProjectFeed.js |  5 +-
 wip-app/src/index.js                          |  1 +
 wip-app/src/pages/ProjectPage/ProjectPage.js  | 29 ++++---
 wip-app/src/pages/UserPage/UserPage.js        | 76 +++++++++---------
 wip-app/src/utils/get-fetch.js                |  2 +-
 8 files changed, 109 insertions(+), 121 deletions(-)

diff --git a/README.md b/README.md
index a6155aa..475d72a 100644
--- a/README.md
+++ b/README.md
@@ -147,13 +147,8 @@ Request body example:
 
 ##### GET /project/:projectid
 
-<<<<<<< HEAD
-Get a project by its id
-=======
 Get a project by project id
 
-> > > > > > > master
-
 ##### GET /followedprojects
 
 Get your watched (followed) projects
diff --git a/wip-app/src/App.js b/wip-app/src/App.js
index 797b03c..d182e73 100644
--- a/wip-app/src/App.js
+++ b/wip-app/src/App.js
@@ -1,6 +1,7 @@
 import React from "react";
-import "./App.css";
 import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
+
+import "./App.css";
 import TopNavbar from "./components/TopNavbar/TopNavbar";
 import BottomNavbar from "./components/BottomNavbar/BottomNavbar";
 import AddProjectPage from "./pages/AddProjectPage/AddProjectPage";
@@ -10,77 +11,58 @@ import SignUpForm from "./components/SignUpForm/SignUpForm";
 import FeedPage from "./pages/FeedPage/FeedPage";
 import UserPage from "./pages/UserPage/UserPage";
 import ExplorePage from "./pages/ExplorePage/ExplorePage";
+import ProjectPage from "./pages/ProjectPage/ProjectPage";
 import NotificationPage from "./pages/NotificationPage/NotificationPage";
 import { MainWrapper } from "./pages/page.style";
 
 const App = () => {
-  // const [loggedIn, setLoggedIn] = React.useState(false);
-
   return (
-    <Router>
-      {/* {loggedIn && (
-        <>
-          <TopNavbar setLoggedIn={setLoggedIn} />
-          <BottomNavbar />
-        </>
-      )}
-
-      {!loggedIn && <LandingPage setLoggedIn={setLoggedIn} />} */}
-
-      <Switch>
-        <Route path="/sign-up">
-          <MainWrapper>
+    <MainWrapper>
+      <Router>
+        <Switch>
+          <Route path="/sign-up">
             <SignUpForm />
-          </MainWrapper>
-        </Route>
-        <Route path="/log-in">
-          <MainWrapper>
+          </Route>
+          <Route path="/log-in">
             <LogInForm />
-          </MainWrapper>
-        </Route>
-        <Route path="/new-project">
-          <MainWrapper>
+          </Route>
+          <Route path="/new-project">
             <TopNavbar />
             <AddProjectPage />
             <BottomNavbar />
-          </MainWrapper>
-        </Route>
-        <Route path="/sign-out"></Route>
-        <Route path="/feed">
-          <MainWrapper>
+          </Route>
+          <Route path="/sign-out"></Route>
+          <Route path="/feed">
             <TopNavbar />
             <FeedPage />
             <BottomNavbar />
-          </MainWrapper>
-        </Route>
-        <Route path="/profile">
-          <MainWrapper>
+          </Route>
+          <Route path="/profile">
             <TopNavbar />
             <UserPage />
             <BottomNavbar />
-          </MainWrapper>
-        </Route>
-        <Route path="/notifications">
-          <MainWrapper>
+          </Route>
+          <Route path="/notifications">
             <TopNavbar />
             <NotificationPage />
             <BottomNavbar />
-          </MainWrapper>
-        </Route>
-        <Route path="/explore">
-          <MainWrapper>
+          </Route>
+          <Route path="/explore">
             <TopNavbar />
             <ExplorePage />
             <BottomNavbar />
-          </MainWrapper>
-        </Route>
-        <Route path="/">
-          <MainWrapper>
+          </Route>
+          <Route path="/project">
+            <TopNavbar />
+            <ProjectPage />
+            <BottomNavbar />
+          </Route>
+          <Route path="/">
             <LandingPage />
-          </MainWrapper>
-        </Route>
-      </Switch>
-    </Router>
+          </Route>
+        </Switch>
+      </Router>
+    </MainWrapper>
   );
 };
 
diff --git a/wip-app/src/components/ProjectCard/ProjectCard.js b/wip-app/src/components/ProjectCard/ProjectCard.js
index 9b23de2..4000030 100644
--- a/wip-app/src/components/ProjectCard/ProjectCard.js
+++ b/wip-app/src/components/ProjectCard/ProjectCard.js
@@ -1,19 +1,27 @@
 import React from "react";
 import { ProjectCardArticle, ProjectCardImage } from "./ProjectCard.style";
-import { Link } from "react-router-dom";
+import { useHistory } from "react-router-dom";
+
+const ProjectCard = ({
+  project_name,
+  username,
+  date,
+  step_link,
+  project_id,
+}) => {
+  const history = useHistory();
+
+  function handleProjectClick(event) {
+    history.push(`/project/${project_id}`);
+  }
 
-const ProjectCard = ({ project_name, username, date, step_link }) => {
-  const project_url = "/profile";
   return (
-    <>
-      <ProjectCardArticle>
-        <h3>{project_name}</h3>
-        <Link to={project_url}>Feed</Link>
-        <p>{username}</p>
-        {/* {project_status ? <p>Work in progress</p> : <p>Finished</p>} */}
-        <ProjectCardImage src={step_link} alt="catch em" />
-      </ProjectCardArticle>
-    </>
+    <ProjectCardArticle onClick={handleProjectClick}>
+      <h3>{project_name}</h3>
+      <p>{username}</p>
+      {/* {project_status ? <p>Work in progress</p> : <p>Finished</p>} */}
+      <ProjectCardImage src={step_link} alt="catch em" />
+    </ProjectCardArticle>
   );
 };
 
diff --git a/wip-app/src/components/ProjectFeed/ProjectFeed.js b/wip-app/src/components/ProjectFeed/ProjectFeed.js
index 1a0ae56..36ad9aa 100644
--- a/wip-app/src/components/ProjectFeed/ProjectFeed.js
+++ b/wip-app/src/components/ProjectFeed/ProjectFeed.js
@@ -7,7 +7,9 @@ const ProjectFeed = ({ projects }) => {
 
   for (let i = 1; i < projects.length; i++) {
     for (let j = 0; j < uniqueProjects.length; j++) {
-      if (uniqueProjects.every((uniqueObj) => uniqueObj.id != projects[i].id)) {
+      if (
+        uniqueProjects.every((uniqueObj) => uniqueObj.id !== projects[i].id)
+      ) {
         uniqueProjects.push(projects[i]);
       }
     }
@@ -22,6 +24,7 @@ const ProjectFeed = ({ projects }) => {
             username={username}
             date={date}
             step_link={step_link}
+            project_id={id}
             key={id}
           />
         );
diff --git a/wip-app/src/index.js b/wip-app/src/index.js
index 846ed2c..68ca022 100644
--- a/wip-app/src/index.js
+++ b/wip-app/src/index.js
@@ -1,5 +1,6 @@
 import React from "react";
 import ReactDOM from "react-dom";
+
 import "./index.css";
 import App from "./App";
 
diff --git a/wip-app/src/pages/ProjectPage/ProjectPage.js b/wip-app/src/pages/ProjectPage/ProjectPage.js
index 6733585..572f75f 100644
--- a/wip-app/src/pages/ProjectPage/ProjectPage.js
+++ b/wip-app/src/pages/ProjectPage/ProjectPage.js
@@ -1,23 +1,22 @@
 import React from "react";
-import { projectPage } from "../../utils/get-fetch";
+// import { projectPage } from "../../utils/get-fetch";
 
 const ProjectPage = () => {
-  const [projectData, setProjectData] = React.useState([]);
+  // const [projectData, setProjectData] = React.useState([]);
 
-  React.useEffect(() => {
-    projectPage().then(setProjectData);
-  }, []);
+  // React.useEffect(() => {
+  //   projectPage().then(setProjectData);
+  // }, []);
 
-  const {
-    id,
-    user_id,
-    project_name,
-    project_description,
-    project_status,
-  } = projectData;
-  // SELECT (SELECT username FROM users WHERE projects.user_id=users.id), project_name, project_description, project_status, steps.step_name, steps.step_link, steps.date, feedback_text, feedback_tag, feedback.date
-  // FROM projects JOIN users ON projects.user_id=users.id JOIN steps ON projects.id=steps.project_id JOIN feedback ON steps.id=feedback.step_id
-  // WHERE projects.id = 1;
+  //   const {
+  //     id,
+  //     user_id,
+  //     project_name,
+  //     project_description,
+  //     project_status,
+  //   } = projectData;
+
+  return <h1>Project Page</h1>;
 };
 
 export default ProjectPage;
diff --git a/wip-app/src/pages/UserPage/UserPage.js b/wip-app/src/pages/UserPage/UserPage.js
index 6828fb0..7f53160 100644
--- a/wip-app/src/pages/UserPage/UserPage.js
+++ b/wip-app/src/pages/UserPage/UserPage.js
@@ -29,44 +29,44 @@ const UserPage = (props) => {
     user_link_3,
   } = userInfo;
 
-  return (
-    <>
-      {userInfo.length === 0 || userProjects.length === 0 ? (
-        <h1>Loading your profile...</h1>
-      ) : (
-        <>
-          <ProfileCard>
-            <h1>{username}'s Profile</h1>
-            <p>{email}</p>
-            <a
-              href={"https://" + user_link_1}
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              Link 1
-            </a>
-            <a
-              href={"https://" + user_link_2}
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              Link 2
-            </a>
-            <a
-              href={"https://" + user_link_3}
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              Link 3
-            </a>
-            <p>{user_bio}</p>
-            <p>{user_vocation}</p>
-          </ProfileCard>
-          <ProjectFeed projects={userProjects} />
-        </>
-      )}
-    </>
-  );
+  const isLoading = userInfo.length === 0 || userProjects.length === 0;
+
+  if (isLoading) {
+    return <h1>Loading your profile...</h1>;
+  } else {
+    return (
+      <>
+        <ProfileCard>
+          <h1>{username}'s Profile</h1>
+          <p>{email}</p>
+          <a
+            href={"https://" + user_link_1}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Link 1
+          </a>
+          <a
+            href={"https://" + user_link_2}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Link 2
+          </a>
+          <a
+            href={"https://" + user_link_3}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Link 3
+          </a>
+          <p>{user_bio}</p>
+          <p>{user_vocation}</p>
+        </ProfileCard>
+        <ProjectFeed projects={userProjects} />
+      </>
+    );
+  }
 };
 
 export default UserPage;
diff --git a/wip-app/src/utils/get-fetch.js b/wip-app/src/utils/get-fetch.js
index dac4f3c..c71c44b 100644
--- a/wip-app/src/utils/get-fetch.js
+++ b/wip-app/src/utils/get-fetch.js
@@ -56,7 +56,7 @@ function getUserPageProjects() {
 }
 
 function projectPage(projectid) {
-  const projectid = 1;
+  projectid = 1;
   const options = {
     endpoint: `project/${projectid}`,
     errorMessage: "Project page error",