Merge pull request #158 from fac19/114-addnewstep

114 addnewstep

wip-app/src/App.js

@@ -24,6 +24,7 @@ import { MainWrapper } from "./pages/page.style";
 
 function RouteType({ path, component }) {
   const authorised = localStorage.getItem("auth");
+
   if (authorised) {
     if (path === "/" || path === "/log-in" || path === "/sign-up") {
       return <Redirect to="/feed" />;
@@ -57,8 +58,6 @@ const App = () => {
           <RouteType path="/step" component={<StepPage />} />
           <RouteType exact path="/" component={<LandingPage />} />
           <RouteType path="*" component={<MissingPage />} />
-          {/* <MissingPage />
-          </Route> */}
         </Switch>
       </Router>
     </MainWrapper>

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

@@ -1,37 +1,76 @@
 import React from "react";
 import { Button } from "@material-ui/core";
 import { NewStepSection, NewStepForm } from "./AddNewStepForm.style";
-// import Upload from "../Upload/Upload";
-// import { postStep } from "../../utils/post-fetch";
+import { postAddStep } from "../../utils/post-fetch";
+import { postImage } from "../../utils/ext-fetch";
 
-const AddNewStepForm = (props) => {
-  const [stepLink, setStepLink] = React.useState();
+const AddNewStepForm = ({ projectId }) => {
+  const [form, setForm] = React.useState({
+    step_name: "",
+    step_description: "",
+  });
+  const [file, uploadFile] = React.useState({});
+  const [isUploading, clickUpload] = React.useState("");
 
-  React.useEffect(() => {
-    console.log(stepLink);
-  }, []);
+  const handleChange = (event) => {
+    const { name, value } = event.target;
+    setForm({ ...form, [name]: value });
+  };
+
+  const handleUpload = (event) => {
+    uploadFile(event.target.files[0]);
+  };
+
+  const handleSubmit = async (event) => {
+    event.preventDefault();
+    clickUpload("file uploading...");
+    const reader = new FileReader();
+    reader.readAsDataURL(file);
+    reader.onloadend = () => {
+      postImage(reader.result)
+        .then((data) => data.eager[0].url)
+        .then((url) => {
+          clickUpload("done!");
+          postAddStep(projectId, form, url);
+        })
+        .then(() => window.location.reload(false))
+        .catch(console.error);
+    };
+  };
 
   return (
     <NewStepSection>
       <h2>Add Step to Project</h2>
-      <NewStepForm>
+      <NewStepForm onSubmit={handleSubmit}>
         <label htmlFor="step_name">Step Name</label>
-        <input type="text" id="step_name" name="step_name" required></input>
+        <input
+          type="text"
+          id="step_name"
+          name="step_name"
+          onChange={handleChange}
+          required
+        />
         <label htmlFor="step_description">Step Description</label>
         <input
           type="text"
           id="step_description"
           name="step_description"
+          onChange={handleChange}
           required
-        ></input>
+        />
         <label htmlFor="step_description">Step Link:</label>
-        <input type="file" id="step_link" name="step_link" required></input>
-
-        {/* <Upload setStepLink={setStepLink} /> */}
+        <input
+          type="file"
+          id="step_link"
+          name="step_link"
+          onChange={handleUpload}
+          required
+        />
+        <Button variant="contained" color="secondary" type="submit">
+          Save Step To Project
+        </Button>
+        <p>{isUploading}</p>
       </NewStepForm>
-      <Button variant="contained" color="primary" type="submit">
-        Save Step To Project
-      </Button>
     </NewStepSection>
   );
 };

wip-app/src/components/AddNewStepForm/__snapshots__/AddNewStepForm.test.js.snap

@@ -9,6 +9,7 @@ exports[`Snapshot test renders the correct ui 1`] = `
   </h2>
   <form
     className="sc-AxirZ dcYQlC"
+    onSubmit={[Function]}
   >
     <label
       htmlFor="step_name"
@@ -18,6 +19,7 @@ exports[`Snapshot test renders the correct ui 1`] = `
     <input
       id="step_name"
       name="step_name"
+      onChange={[Function]}
       required={true}
       type="text"
     />
@@ -29,6 +31,7 @@ exports[`Snapshot test renders the correct ui 1`] = `
     <input
       id="step_description"
       name="step_description"
+      onChange={[Function]}
       required={true}
       type="text"
     />
@@ -40,32 +43,36 @@ exports[`Snapshot test renders the correct ui 1`] = `
     <input
       id="step_link"
       name="step_link"
+      onChange={[Function]}
       required={true}
       type="file"
     />
-  </form>
-  <button
-    className="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary"
-    disabled={false}
-    onBlur={[Function]}
-    onDragLeave={[Function]}
-    onFocus={[Function]}
-    onKeyDown={[Function]}
-    onKeyUp={[Function]}
-    onMouseDown={[Function]}
-    onMouseLeave={[Function]}
-    onMouseUp={[Function]}
-    onTouchEnd={[Function]}
-    onTouchMove={[Function]}
-    onTouchStart={[Function]}
-    tabIndex={0}
-    type="submit"
-  >
-    <span
-      className="MuiButton-label"
+    <button
+      className="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSecondary"
+      disabled={false}
+      onBlur={[Function]}
+      onDragLeave={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      onMouseDown={[Function]}
+      onMouseLeave={[Function]}
+      onMouseUp={[Function]}
+      onTouchEnd={[Function]}
+      onTouchMove={[Function]}
+      onTouchStart={[Function]}
+      tabIndex={0}
+      type="submit"
     >
-      Save Step To Project
-    </span>
-  </button>
+      <span
+        className="MuiButton-label"
+      >
+        Save Step To Project
+      </span>
+    </button>
+    <p>
+      
+    </p>
+  </form>
 </section>
 `;

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

@@ -1,15 +1,32 @@
 import React from "react";
+import { Button } from "@material-ui/core";
+
 import { getProjectPage, getSteps } from "../../utils/get-fetch";
 import StepCard from "../../components/StepCard/StepCard";
 import { PageHeading } from "../page.style";
+import AddNewStepForm from "../../components/AddNewStepForm/AddNewStepForm";
 
 const ProjectPage = () => {
   const [projectData, setProjectData] = React.useState([]);
   const [stepsObject, setStepsObject] = React.useState([]);
-  // const [feedbackObject, setFeedbackObject] = React.useState([]);
+  const [addingStep, setAddingStep] = React.useState(false);
 
   const projectId = window.location.pathname.replace("/project/", "");
 
+  const authToken = localStorage.getItem("auth");
+  const parseJwt = (token) => {
+    try {
+      return JSON.parse(atob(token.split(".")[1]));
+    } catch (_) {
+      return null;
+    }
+  };
+  const jwtUserId = authToken ? parseJwt(authToken).user : null;
+
+  const handleClick = () => {
+    setAddingStep(true);
+  };
+
   React.useEffect(() => {
     getProjectPage(projectId).then(setProjectData);
   }, [projectId]);
@@ -21,6 +38,7 @@ const ProjectPage = () => {
   }, [projectId]);
 
   const {
+    user_id,
     username,
     project_name,
     project_description,
@@ -35,21 +53,44 @@ const ProjectPage = () => {
       .reverse();
   };
 
-  return (
-    <>
-      <section>
-        <PageHeading>{project_name}</PageHeading>
-        <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>
-    </>
-  );
+  const isLoading = projectData.length === 0;
+  const isYourProject = user_id === jwtUserId;
+
+  if (isLoading) {
+    return <PageHeading>Loading project...</PageHeading>;
+  } else if (!addingStep) {
+    return (
+      <>
+        <section>
+          <PageHeading>{project_name}</PageHeading>
+          <h3>By {username}</h3>
+          <p>Project status: {project_status ? "Finished" : "In Progress"}</p>
+          <p>{project_description}</p>
+        </section>
+        <section>
+          <h2>Project Steps</h2>
+          {isYourProject ? (
+            <Button variant="outlined" color="secondary" onClick={handleClick}>
+              Add New Step
+            </Button>
+          ) : null}
+          {makeStepCards(stepsObject)}
+        </section>
+      </>
+    );
+  } else {
+    return (
+      <>
+        <section>
+          <PageHeading>{project_name}</PageHeading>
+          <h3>By {username}</h3>
+          <p>Project status: {project_status ? "Finished" : "In Progress"}</p>
+          <p>{project_description}</p>
+        </section>
+        <AddNewStepForm projectId={projectId} />
+      </>
+    );
+  }
 };
 
 export default ProjectPage;

wip-app/src/pages/ProjectPage/__snapshots__/ProjectPage.test.js.snap

@@ -1,24 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Snapshot test renders the correct ui 1`] = `
-Array [
-  <section>
-    <h1
-      className="sc-AxhCb fSlxVM"
-    />
-    <h3>
-      By 
-    </h3>
-    <p>
-      Project status: 
-      In Progress
-    </p>
-    <p />
-  </section>,
-  <section>
-    <h2>
-      Project Steps
-    </h2>
-  </section>,
-]
+<h1
+  className="sc-AxhCb fSlxVM"
+>
+  Loading project...
+</h1>
 `;

wip-app/src/utils/b64.js

@@ -1,57 +1,10 @@
-// return string depending on file type
-function addTypeString(type) {
-  switch (type) {
-    case "jpeg":
-      return "data:image/jpeg;base64,";
-      break;
-
-    case "png":
-      return "data:image/png;base64,";
-      break;
-
-    case "mp3":
-      return "data:audio/mpeg;base64,";
-      break;
-
-    case "mpeg":
-      return "data:video/mpeg;base64,";
-      break;
-
-    case "gif":
-      return "data:image/gif;base64,";
-      break;
-
-    case "svg":
-      return "data:image/svg+xml;base64,";
-      break;
-
-    case "webp":
-      return "data:image/webp;base64,";
-      break;
-
-    default:
-      break;
-  }
-}
-
-// Gets type of file
-function getType(filePath) {
-  const fileArry = filePath.split(".");
-  const returnType = fileArry[fileArry.length - 1];
-  return returnType;
-}
-
 const getB64 = function (file) {
   const reader = new FileReader();
 
-  const type = getType(file.name);
-
   reader.onloadend = function () {
     // Since it contains the Data URI, we should remove the prefix and keep only Base64 string
     const b64 = reader.result.replace(/^data:.+;base64,/, "");
-    const b64WithType = addTypeString(type) + b64;
-    console.log("reader.onloadend -> b64WithType", b64WithType);
-    return b64WithType;
+    return "data:" + file.type + ";base64," + b64;
   };
 
   reader.readAsDataURL(file);