Create step cards, add to project page

Attempt to fix loading/empty state on explore page
Relates #11

Co-authored-by: CampbellDocherty <campbellsofitsidocherty@gmail.com>

wip-app/src/components/ProjectCard/ProjectCard.js

@@ -20,7 +20,7 @@ const ProjectCard = ({
       <h3>{project_name}</h3>
       <p>{username}</p>
       {/* {project_status ? <p>Work in progress</p> : <p>Finished</p>} */}
-      <ProjectCardImage src={step_link} alt="catch em" />
+      <ProjectCardImage src={step_link} alt="" />
     </ProjectCardArticle>
   );
 };

wip-app/src/components/ProjectFeed/ProjectFeed.js

@@ -32,11 +32,7 @@ const ProjectFeed = ({ projects }) => {
     );
   };
 
-  return (
-    <>
-      <ProjectGrid>{renderProjects(projects)}</ProjectGrid>
-    </>
-  );
+  return <ProjectGrid>{renderProjects(projects)}</ProjectGrid>;
 };
 
 export default ProjectFeed;

wip-app/src/components/StepCard/StepCard.js

@@ -0,0 +1,14 @@
+import React from "react";
+import { StepCardArticle, StepCardImage } from "./StepCard.style";
+
+const StepCard = ({ step_name, step_description, step_link }) => {
+  return (
+    <StepCardArticle>
+      <h3>{step_name}</h3>
+      <p>{step_description}</p>
+      <StepCardImage src={step_link} alt="" />
+    </StepCardArticle>
+  );
+};
+
+export default StepCard;

wip-app/src/components/StepCard/StepCard.style.js

@@ -0,0 +1,15 @@
+import styled from "styled-components";
+
+const StepCardArticle = styled.article`
+  margin: 2rem;
+  padding: 2rem;
+  border-radius: 2px;
+  box-shadow: 0px 0px 10px grey;
+  text-align: center;
+`;
+
+const StepCardImage = styled.img`
+  width: 100%;
+`;
+
+export { StepCardArticle, StepCardImage };

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

@@ -4,21 +4,33 @@ import { explorePage } from "../../utils/get-fetch";
 
 const ExplorePage = (props) => {
   const [projects, setProjects] = React.useState([]);
+  const [isEmpty, setIsEmpty] = React.useState(false);
 
   useEffect(() => {
     explorePage().then(setProjects);
   }, []);
 
-  return (
-    <>
-      <h1>Explore Page</h1>
-      {projects === [] ? (
-        <h2>Loading...</h2>
-      ) : (
+  // useEffect(() => {
+  //   if (projects.length === 0) {
+  //     setIsEmpty(true)
+  //   }
+  // }, [projects])
+
+  const isLoading = projects.length === 0;
+
+  if (isLoading) {
+    return <h2>Loading...</h2>;
+  } else if (isEmpty) {
+    return <h2>No new projects - you're following them all!</h2>;
+    // need to find a way to render this when projects is fetched and still empty
+  } else {
+    return (
+      <>
+        <h1>Find new projects to follow</h1>
         <ProjectFeed projects={projects}></ProjectFeed>
-      )}
-    </>
-  );
+      </>
+    );
+  }
 };
 
 export default ExplorePage;

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

@@ -1,47 +1,53 @@
 import React from "react";
-import { getProjectPage } from "../../utils/get-fetch";
+import { getProjectPage, getSteps } from "../../utils/get-fetch";
+import StepCard from "../../components/StepCard/StepCard";
 
 const ProjectPage = () => {
   const [projectData, setProjectData] = React.useState([]);
-  const [stepId, setStepId] = React.useState(null);
-  const [feedbackObject, setFeedbackObject] = React.useState([]);
+  const [stepsObject, setStepsObject] = React.useState([]);
+  // const [feedbackObject, setFeedbackObject] = React.useState([]);
 
-  const projectId = 3;
+  const projectId = window.location.pathname.replace("/project/", "");
 
   React.useEffect(() => {
-    getProjectPage(projectId).then((projectData) => {
-      setProjectData(projectData);
-      console.log(projectData);
-      setStepId(projectData.id);
-    });
-  }, []);
+    getProjectPage(projectId).then(setProjectData);
+  }, [projectId]);
 
-  // React.useEffect(() => {
-  //   getFeedback().then(setFeedbackObject)
-  // }, [stepId])
+  React.useEffect(() => {
+    getSteps(projectId).then((steps) => {
+      setStepsObject(steps);
+    });
+  }, [projectId]);
 
   const {
-    id,
     username,
-    step_link,
-    step_name,
     project_name,
     project_description,
     project_status,
   } = projectData;
 
+  const makeStepCards = (stepsObject) => {
+    return stepsObject
+      .map((step) => {
+        return <StepCard key={step.id} {...step} />;
+      })
+      .reverse();
+  };
+
   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>
+    <>
+      <section>
+        <h2>{project_name}</h2>
+        <h3>By {username}</h3>
+        <p>Project status: {project_status ? "Finished" : "In Progress"}</p>
+        <p>{project_description}</p>
+      </section>
+      <section>
+        <h2>Project Steps</h2>
+        <a href="">Add a new step</a>
+        {makeStepCards(stepsObject)}
+      </section>
+    </>
   );
 };
 

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

@@ -63,4 +63,19 @@ function getProjectPage(projectid) {
   return getFetch(options);
 }
 
-export { feedPage, getUser, explorePage, getUserPageProjects, getProjectPage };
+function getSteps(projectid) {
+  const options = {
+    endpoint: `steps/${projectid}`,
+    errorMessage: "Project steps error",
+  };
+  return getFetch(options);
+}
+
+export {
+  feedPage,
+  getUser,
+  explorePage,
+  getUserPageProjects,
+  getProjectPage,
+  getSteps,
+};