Create Client Sign Up Form

Relates #65
FAC-Sixteen · Jun 13, 2019 · 0c77457 · 0c77457
1 parent 04e0b50
commit 0c77457
Show file tree

Hide file tree

Showing 6 changed files with 372 additions and 99 deletions.
diff --git a/package.json b/package.json
@@ -8,7 +8,7 @@
     "build": "webpack --mode production"
   },
   "dependencies": {
-    "axios": "0.19.0",
+    "axios": "^0.19.0",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-router": "^5.0.1",

diff --git a/src/components/StudentSignupForm/StudentSignupForm.js b/src/components/StudentSignupForm/StudentSignupForm.js
@@ -1,113 +1,207 @@
-import React, { useState } from 'react';
-import './StudentSignupForm.css';
-import axios from 'axios';
+import React, { useState } from "react";
+import "./StudentSignupForm.css";
+import axios from "axios";
 
 function StudentSignupForm() {
-  const [data, setData] = useState({firstName:"", lastName: "", email: "",
-    phoneNumber: "", password: "", university: "", yearOfStudy: "",
-    courseStudied: "", aboutYou: "", LinkedinURL: ""});
+  const [data, setData] = useState({
+    firstName: "",
+    lastName: "",
+    email: "",
+    phoneNumber: "",
+    password: "",
+    university: "",
+    yearOfStudy: "",
+    courseStudied: "",
+    aboutYou: "",
+    LinkedinURL: ""
+  });
 
-  const handleChange = (event) => {
+  const handleChange = event => {
     setData({
-      ...data, [event.target.name]: event.target.value
-    })   //rest parameter adds to current state without replacing/deleting it
-  }     //second param line 12 matches key-value pairs in state object line 6
+      ...data,
+      [event.target.name]: event.target.value
+    }); //rest parameter adds to current state without replacing/deleting it
+  }; //second param line 12 matches key-value pairs in state object line 6
 
-  const handleSubmit = (event) => {
+  const handleSubmit = event => {
     event.preventDefault();
 
-  const addStudent = async () => {
-    console.log(`Fake submitting: ${data}`);
-    try {
-      return await
-      axios.post('/api/student/sign-up', data)
-    } catch(error) {
-      console.error(error)
-    }
-  }
-  addStudent();
-  setData({firstName:"", lastName: "", email: "",   //clear form on submit
-      phoneNumber: "", password: "", university: "", yearOfStudy: "",
-      courseStudied: "", aboutYou: "", LinkedinURL: ""});
-  }
+    const addStudent = async () => {
+      console.log(`Fake submitting: ${data}`);
+      try {
+        return await axios.post("/api/student/sign-up", data);
+      } catch (error) {
+        console.error(error);
+      }
+    };
+    addStudent();
+    setData({
+      firstName: "",
+      lastName: "",
+      email: "", //clear form on submit
+      phoneNumber: "",
+      password: "",
+      university: "",
+      yearOfStudy: "",
+      courseStudied: "",
+      aboutYou: "",
+      LinkedinURL: ""
+    });
+  };
 
   return (
     <div>
+      <form className="SignupForm" onSubmit={handleSubmit}>
+        <fieldset className="Signup--Fieldset">
+          <legend>Student Signup</legend>
 
-    <form className="SignupForm" onSubmit={handleSubmit}>
-      <fieldset className="Signup--Fieldset">
-        <legend>Student Signup</legend>
-
-    <div className="Signup--div-p1">
-    <div className="Signup--row">
-      <label className="Signup--label" for="firstName">First Name:
-      <input className="Signup--input" id="firstName" type="text"
-        name="firstName" value={data.firstName} onChange={handleChange} />
-      </label>
-    </div>
-    <div className="Signup--row">
-      <label className="Signup--label" for="lastName">Last Name:
-      <input className="Signup--input" id="lastName" type="text" name="lastName"
-        value={data.lastName} onChange={handleChange}  /></label>
-    </div>
-    <div className="Signup--row">
-      <label className="Signup--label" for="email">Email:
-      <input className="Signup--input" id="email" type="text" name="email"
-        value={data.email} onChange={handleChange} /></label>
-    </div>
-    <div className="Signup--row">
-      <label className="Signup--label" for="phoneNumber">Phone Number:
-      <input className="Signup--input" id="phoneNumber" type="text"
-        name="phoneNumber" value={data.phoneNumber} onChange={handleChange} />
-      </label>
-    </div>
-    <div className="Signup--row">
-      <label className="Signup--label" for="password">Password:
-      <input className="Signup--input" id="password" type="text" name="password"
-        value={data.password} onChange={handleChange} /></label>
-    </div>
-    </div>
-
-{/*Second half of form displayed separately on mobile */}
-    <div className="Signup--div-p2">
-    <div className="Signup--row">
-      <label className="Signup--label" for="university">University:
-      <input className="Signup--input" id="university" type="text"
-        name="university" value={data.university} onChange={handleChange}/>
-      </label>
-    </div>
-    <div className="Signup--row">
-      <label className="Signup--label" for="yearOfStudy">Year of Study:
-      <input className="Signup--input" id="yearOfStudy" type="text"
-        name="yearOfStudy" value={data.yearOfStudy} onChange={handleChange}/>
-      </label>
-    </div>
-    <div className="Signup--row">
-      <label className="Signup--label" for="courseStudied">Course of Study:
-      <input className="Signup--input" id="courseStudied" type="text"
-        name="courseStudied" value={data.courseStudied} onChange={handleChange}/>
-      </label>
-    </div>
-    <div className="Signup--row">
-      <label className="Signup--label" for="aboutYou">About Yourself:
-      <input className="Signup--input" id="aboutYou "type="text" name="aboutYou"
-        value={data.aboutYou} onChange={handleChange} /></label>
-    </div>
-    <div className="Signup--row">
-      <label className="Signup--label" for="LinkedinURL">LinkedinURL:
-      <input className="Signup--input" id="LinkedinURL "type="text"
-        name="LinkedinURL" value={data.LinkedinURL} onChange={handleChange} />
-      </label>
-    </div>
-    </div>
+          <div className="Signup--div-p1">
+            <div className="Signup--row">
+              <label className="Signup--label" htmlFor="firstName">
+                First Name:
+                <input
+                  className="Signup--input"
+                  id="firstName"
+                  type="text"
+                  name="firstName"
+                  value={data.firstName}
+                  onChange={handleChange}
+                />
+              </label>
+            </div>
+            <div className="Signup--row">
+              <label className="Signup--label" htmlFor="lastName">
+                Last Name:
+                <input
+                  className="Signup--input"
+                  id="lastName"
+                  type="text"
+                  name="lastName"
+                  value={data.lastName}
+                  onChange={handleChange}
+                />
+              </label>
+            </div>
+            <div className="Signup--row">
+              <label className="Signup--label" htmlFor="email">
+                Email:
+                <input
+                  className="Signup--input"
+                  id="email"
+                  type="text"
+                  name="email"
+                  value={data.email}
+                  onChange={handleChange}
+                />
+              </label>
+            </div>
+            <div className="Signup--row">
+              <label className="Signup--label" htmlFor="phoneNumber">
+                Phone Number:
+                <input
+                  className="Signup--input"
+                  id="phoneNumber"
+                  type="text"
+                  name="phoneNumber"
+                  value={data.phoneNumber}
+                  onChange={handleChange}
+                />
+              </label>
+            </div>
+            <div className="Signup--row">
+              <label className="Signup--label" htmlFor="password">
+                Password:
+                <input
+                  className="Signup--input"
+                  id="password"
+                  type="text"
+                  name="password"
+                  value={data.password}
+                  onChange={handleChange}
+                />
+              </label>
+            </div>
+          </div>
 
-    <input className="SignupForm--submit" type="submit" name="submit"
-      value="submit" />
+          {/*Second half of form displayed separately on mobile */}
+          <div className="Signup--div-p2">
+            <div className="Signup--row">
+              <label className="Signup--label" htmlFor="university">
+                University:
+                <input
+                  className="Signup--input"
+                  id="university"
+                  type="text"
+                  name="university"
+                  value={data.university}
+                  onChange={handleChange}
+                />
+              </label>
+            </div>
+            <div className="Signup--row">
+              <label className="Signup--label" htmlFor="yearOfStudy">
+                Year of Study:
+                <input
+                  className="Signup--input"
+                  id="yearOfStudy"
+                  type="text"
+                  name="yearOfStudy"
+                  value={data.yearOfStudy}
+                  onChange={handleChange}
+                />
+              </label>
+            </div>
+            <div className="Signup--row">
+              <label className="Signup--label" htmlFor="courseStudied">
+                Course of Study:
+                <input
+                  className="Signup--input"
+                  id="courseStudied"
+                  type="text"
+                  name="courseStudied"
+                  value={data.courseStudied}
+                  onChange={handleChange}
+                />
+              </label>
+            </div>
+            <div className="Signup--row">
+              <label className="Signup--label" htmlFor="aboutYou">
+                About Yourself:
+                <input
+                  className="Signup--input"
+                  id="aboutYou "
+                  type="text"
+                  name="aboutYou"
+                  value={data.aboutYou}
+                  onChange={handleChange}
+                />
+              </label>
+            </div>
+            <div className="Signup--row">
+              <label className="Signup--label" htmlFor="LinkedinURL">
+                LinkedinURL:
+                <input
+                  className="Signup--input"
+                  id="LinkedinURL "
+                  type="text"
+                  name="LinkedinURL"
+                  value={data.LinkedinURL}
+                  onChange={handleChange}
+                />
+              </label>
+            </div>
+          </div>
 
-      </fieldset>
-    </form>
+          <input
+            className="SignupForm--submit"
+            type="submit"
+            name="submit"
+            value="submit"
+          />
+        </fieldset>
+      </form>
     </div>
-  )
+  );
 }
 
 export default StudentSignupForm;
diff --git a/src/components/clientSignupForm/ClientSignupForm.css b/src/components/clientSignupForm/ClientSignupForm.css
@@ -0,0 +1,31 @@
+.SignupForm {
+}
+
+.Signup--Fieldset {
+  border: 1px solid black;
+  width: 80%;
+  margin: auto;
+  text-align: center;
+}
+
+.Signup--label {
+}
+
+.Signup--input {
+  float: right;
+  width: 50%;
+}
+
+.Signup--row {
+  margin: 0.5rem;
+  padding: 0.5rem;
+  text-align: left;
+}
+
+.Signup--div-p1 {
+}
+
+.SignupForm--submit {
+  display: block;
+  margin: auto;
+}