From 0c77457d68e436103d09c14b6e01c67d0a3d3491 Mon Sep 17 00:00:00 2001
From: dalmano <dalmano@outlook.com>
Date: Thu, 13 Jun 2019 17:26:33 +0100
Subject: [PATCH] Create Client Sign Up Form Relates #65

---
 package.json                                  |   2 +-
 .../StudentSignupForm/StudentSignupForm.js    | 286 ++++++++++++------
 .../clientSignupForm/ClientSignupForm.css     |  31 ++
 .../clientSignupForm/ClientSignupForm.js      | 147 +++++++++
 src/routes/ClientSignup.js                    |   3 +-
 yarn.lock                                     |   2 +-
 6 files changed, 372 insertions(+), 99 deletions(-)
 create mode 100644 src/components/clientSignupForm/ClientSignupForm.css
 create mode 100644 src/components/clientSignupForm/ClientSignupForm.js

diff --git a/package.json b/package.json
index c9174c0..b5d2c79 100644
--- 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
index 5d8e1ef..63dc640 100644
--- 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
new file mode 100644
index 0000000..7c0cd69
--- /dev/null
+++ 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;
+}
diff --git a/src/components/clientSignupForm/ClientSignupForm.js b/src/components/clientSignupForm/ClientSignupForm.js
new file mode 100644
index 0000000..6820d8a
--- /dev/null
+++ b/src/components/clientSignupForm/ClientSignupForm.js
@@ -0,0 +1,147 @@
+import React, { useState } from "react";
+import "./ClientSignupForm.css";
+import axios from "axios";
+
+const ClientSignupForm = () => {
+  const [data, setData] = useState("");
+
+  const handleChange = event => {
+    setData({
+      ...data,
+      [event.target.name]: event.target.value
+    });
+  };
+
+  const handleSubmit = event => {
+    event.preventDefault();
+
+    const addClient = async () => {
+      console.log(`Fake shit: ${data}`);
+      try {
+        return await axios.post("/api/client/sign-up", data);
+      } catch (error) {
+        console.log(error);
+      }
+    };
+    addClient();
+    setData("");
+  };
+  return (
+    <div>
+      <form className="SignupForm" onSubmit={handleSubmit}>
+        <fieldset className="Signup--Fieldset">
+          <legend>Client Signup</legend>
+
+          <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"
+                  type="text"
+                  name="lastName"
+                  id="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="password">
+                Password:
+                <input
+                  className="Signup--input"
+                  id="password"
+                  type="text"
+                  name="password"
+                  value={data.password}
+                  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="jobTitle">
+                Job Title:
+                <input
+                  className="Signup--input"
+                  id="jobTitle"
+                  type="text"
+                  name="jobTitle"
+                  value={data.jobTitle}
+                  onChange={handleChange}
+                />
+              </label>
+            </div>
+            <div className="Signup--row">
+              <label className="Signup--label" htmlFor="companyName">
+                Company Name:
+                <input
+                  className="Signup--input"
+                  id="companyName"
+                  type="text"
+                  name="companyName"
+                  value={data.companyName}
+                  onChange={handleChange}
+                />
+              </label>
+            </div>
+            <div className="Signup--row">
+              <label className="Signup--label" htmlFor="companyUrl">
+                Company URL:
+                <input
+                  className="Signup--input"
+                  id="companyUrl"
+                  type="text"
+                  name="companyUrl"
+                  value={data.companyUrl}
+                  onChange={handleChange}
+                />
+              </label>
+            </div>
+          </div>
+        </fieldset>
+      </form>
+    </div>
+  );
+};
+
+export default ClientSignupForm;
diff --git a/src/routes/ClientSignup.js b/src/routes/ClientSignup.js
index 7ab10bb..3605f18 100644
--- a/src/routes/ClientSignup.js
+++ b/src/routes/ClientSignup.js
@@ -1,9 +1,10 @@
 import React, { Component } from "react";
+import ClientSignupForm from "../components/clientSignupForm/ClientSignupForm";
 
 const ClientSignup = () => {
   return (
     <div>
-      <h1>ClientSignup Page</h1>
+      <ClientSignupForm />
     </div>
   );
 };
diff --git a/yarn.lock b/yarn.lock
index 37fcaa0..b2c4849 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1063,7 +1063,7 @@ atob@^2.1.1:
   resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9"
   integrity sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==
 
-axios@0.19.0:
+axios@^0.19.0:
   version "0.19.0"
   resolved "https://registry.yarnpkg.com/axios/-/axios-0.19.0.tgz#8e09bff3d9122e133f7b8101c8fbdd00ed3d2ab8"
   integrity sha512-1uvKqKQta3KBxIz14F2v06AEHZ/dIoeKfbTRkK1E5oqjDnuEerLmYTgJB5AiQZHJcljpg1TuRzdjDR06qNk0DQ==