Restructure form fetch code

Relates #3, #6, #4 Co-authored-by: Alexreid95 <[email protected]>
fac19 · May 25, 2020 · 14c6204 · 14c6204
1 parent e6ae78e
commit 14c6204
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 32 deletions.
diff --git a/wip-app/src/components/LogInForm/LogInForm.js b/wip-app/src/components/LogInForm/LogInForm.js
@@ -3,7 +3,7 @@ import { Link } from "react-router-dom";
 import { Container, Button, TextField } from "@material-ui/core";
 import { makeStyles } from "@material-ui/core/styles";
 import { useHistory } from "react-router-dom";
-import logInGet from "../../utils/fetch";
+import { logInGet } from "../../utils/fetch";
 
 const useStyles = makeStyles({
   form: {
@@ -44,7 +44,12 @@ const LogInForm = (props) => {
   return (
     <Container className={classes.formContainer} component="main" maxWidth="xs">
       <h1>Log In</h1>
-      <form className={classes.form} noValidate autoComplete="off">
+      <form
+        className={classes.form}
+        noValidate
+        autoComplete="off"
+        onSubmit={handleSubmit}
+      >
         <TextField
           className={classes.formElement}
           variant="outlined"
@@ -69,16 +74,16 @@ const LogInForm = (props) => {
           type="password"
           autoComplete="password"
         />
-        <Link to="/feed">
-          <Button
-            className={classes.formElement}
-            variant="contained"
-            color="primary"
-            onClick={handleSubmit}
-          >
-            Log In
-          </Button>
-        </Link>
+        {/* <Link to="/feed"> */}
+        <Button
+          className={classes.formElement}
+          variant="contained"
+          color="primary"
+          // onClick={handleSubmit}
+        >
+          Log In
+        </Button>
+        {/* </Link> */}
       </form>
     </Container>
   );

diff --git a/wip-app/src/components/SignUpForm/SignUpForm.js b/wip-app/src/components/SignUpForm/SignUpForm.js
@@ -3,7 +3,7 @@ import { Link } from "react-router-dom";
 import { Container, Button, TextField } from "@material-ui/core";
 import { makeStyles } from "@material-ui/core/styles";
 import { useHistory } from "react-router-dom";
-import signUpPost from "../../utils/fetch";
+import { signUpPost } from "../../utils/fetch";
 
 const useStyles = makeStyles({
   form: {
@@ -34,9 +34,9 @@ const SignUpForm = (props) => {
     const formData = new FormData(form);
 
     signUpPost({
-      username: formData.username,
-      email: formData.email,
-      password: formData.password,
+      username: formData.get("username"),
+      email: formData.get("email"),
+      password: formData.get("password"),
     }).then(() => history.push("/feed"));
   };
 
@@ -79,16 +79,16 @@ const SignUpForm = (props) => {
           type="password"
           autoComplete="password"
         />
-        <Link to="/feed">
-          <Button
-            className={classes.formElement}
-            variant="contained"
-            color="primary"
-            onClick={submitHandler}
-          >
-            Sign Up
-          </Button>
-        </Link>
+        {/* <Link to="/feed"> */}
+        <Button
+          className={classes.formElement}
+          variant="contained"
+          color="primary"
+          onClick={submitHandler}
+        >
+          Sign Up
+        </Button>
+        {/* </Link> */}
       </form>
     </Container>
   );

diff --git a/wip-app/src/utils/fetch.js b/wip-app/src/utils/fetch.js
@@ -1,4 +1,4 @@
-function postFetch({ endpoint, body, error }) {
+async function postFetch({ endpoint, body, error }) {
   // const headers = {
   //     'content-type': 'application/JSON'
   // };
@@ -14,7 +14,8 @@ function postFetch({ endpoint, body, error }) {
 
   const fetchURL = `https://wip-rest-api.herokuapp.com/${endpoint}`;
 
-  fetch(fetchURL, fetchObject).then((res) => {
+  return await fetch(fetchURL, fetchObject).then((res) => {
+    console.log(res);
     if (!res.ok) {
       throw new Error(`${error}, status: ${res.status}`);
     }
@@ -27,14 +28,14 @@ function signUpPost(signUpFormData) {
   const options = {
     endpoint: "signUp",
     body: {
-      name: signUpFormData.name,
+      username: signUpFormData.username,
       email: signUpFormData.email,
       password: signUpFormData.password,
     },
     error: "Sorry, there was a problem signing you up",
   };
-  console.log(options);
   return postFetch(options).then((res) => {
+    console.log("postFetch-> res", res);
     localStorage.setItem("auth", JSON.stringify(res));
   });
 }
@@ -53,4 +54,4 @@ function logInGet(logInFormData) {
   });
 }
 
-export default { signUpPost, logInGet };
+export { signUpPost, logInGet };
diff --git a/wip-rest-api/src/server.js b/wip-rest-api/src/server.js
@@ -25,7 +25,7 @@ server.put("/user", checkAuth, users.put);
 // server.delete("/user/:username", checkAuth, users.delete);
 
 //Routes for projects
-server.get("/feed/:userId", checkAuth, project.get);
+// server.get("/feed/:userId", checkAuth, project.get);
 // server.get("/project/:projectId", checkAuth, project.get);
 // server.post('project', auth, project.post)
 // server.put('/project/:projectId', auth, project.put)