Add project page, fix user page steps order

Relates #11 #13

Co-authored-by: CampbellDocherty <[email protected]>

wip-app/src/pages/ProjectPage/ProjectPage.js

@@ -1,22 +1,48 @@
 import React from "react";
-// import { projectPage } from "../../utils/get-fetch";
+import { getProjectPage } from "../../utils/get-fetch";
 
 const ProjectPage = () => {
-  // const [projectData, setProjectData] = React.useState([]);
+  const [projectData, setProjectData] = React.useState([]);
+  const [stepId, setStepId] = React.useState(null);
+  const [feedbackObject, setFeedbackObject] = React.useState([]);
+
+  const projectId = 3;
+
+  React.useEffect(() => {
+    getProjectPage(projectId).then((projectData) => {
+      setProjectData(projectData);
+      console.log(projectData);
+      setStepId(projectData.id);
+    });
+  }, []);
 
   // React.useEffect(() => {
-  //   projectPage().then(setProjectData);
-  // }, []);
+  //   getFeedback().then(setFeedbackObject)
+  // }, [stepId])
 
-  //   const {
-  //     id,
-  //     user_id,
-  //     project_name,
-  //     project_description,
-  //     project_status,
-  //   } = projectData;
+  const {
+    id,
+    username,
+    step_link,
+    step_name,
+    project_name,
+    project_description,
+    project_status,
+  } = projectData;
 
-  return <h1>Project Page</h1>;
+  return (
+    <section>
+      <h2>{project_name}</h2>
+      <h3>By {username}</h3>
+      <p>Project status: {project_status ? "Finished" : "In Progress"}</p>
+      <p>{project_description}</p>
+      <h2>Project Steps</h2>
+      <article>
+        <h3>{step_name}</h3>
+        <img src={step_link} alt="" />
+      </article>
+    </section>
+  );
 };
 
 export default ProjectPage;

wip-app/src/pages/UserPage/UserPage.js

@@ -15,7 +15,7 @@ const UserPage = (props) => {
 
   React.useEffect(() => {
     getUserPageProjects().then((userProjects) => {
-      setUserProjects(userProjects);
+      setUserProjects(userProjects.reverse());
     });
   }, []);
 

wip-app/src/utils/get-fetch.js

@@ -55,13 +55,12 @@ function getUserPageProjects() {
   return getFetch(options);
 }
 
-function projectPage(projectid) {
-  projectid = 1;
+function getProjectPage(projectid) {
   const options = {
     endpoint: `project/${projectid}`,
     errorMessage: "Project page error",
   };
   return getFetch(options);
 }
 
-export { feedPage, getUser, explorePage, getUserPageProjects, projectPage };
+export { feedPage, getUser, explorePage, getUserPageProjects, getProjectPage };