From 3540881ec2f9bc81d6866f713677a58a33574c8b Mon Sep 17 00:00:00 2001
From: Ruidy Nemausat <ruidy.nemausat@gmail.com>
Date: Thu, 14 May 2020 18:28:49 +0200
Subject: [PATCH] add statuses enum and enable EditProfile Form

---
 src/constants/statuses.ts |  12 +++
 src/hooks/index.ts        |   6 +-
 src/pages/EditProfile.tsx | 161 ++++++++++++++++++++++++++++++++------
 3 files changed, 154 insertions(+), 25 deletions(-)
 create mode 100644 src/constants/statuses.ts

diff --git a/src/constants/statuses.ts b/src/constants/statuses.ts
new file mode 100644
index 0000000..0e57d3a
--- /dev/null
+++ b/src/constants/statuses.ts
@@ -0,0 +1,12 @@
+const Statuses: string[] = [
+  'Developer',
+  'Junior Developer',
+  'Senior Developer',
+  'Manager',
+  'Student or Learning',
+  'Instructor or Teacher',
+  'Intern',
+  'Other',
+];
+
+export default Statuses;
diff --git a/src/hooks/index.ts b/src/hooks/index.ts
index 84809c3..9651bd0 100644
--- a/src/hooks/index.ts
+++ b/src/hooks/index.ts
@@ -9,11 +9,13 @@ import {useState, ChangeEvent} from 'react';
  * @returns handleChange function to pass to input tag
  * @returns resetForm function to revert to initFormData
  * */
-const useForm = <T,>(initFormData: T) => {
+const useForm = <T>(initFormData: T) => {
   const [formData, setFormData] = useState<T>(initFormData);
 
   /** update each input state value onChange */
-  const handleChange = (e: ChangeEvent<HTMLInputElement>): void =>
+  const handleChange = (
+    e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>,
+  ): void =>
     setFormData({
       ...formData,
       [e.target.name]: e.target.value,
diff --git a/src/pages/EditProfile.tsx b/src/pages/EditProfile.tsx
index a130933..e7a3dba 100644
--- a/src/pages/EditProfile.tsx
+++ b/src/pages/EditProfile.tsx
@@ -1,4 +1,6 @@
 import React, {FC} from 'react';
+import {Link} from 'react-router-dom';
+import Routes from '../constants/routes';
 // Style
 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
 import {
@@ -9,11 +11,65 @@ import {
   faInstagram,
 } from '@fortawesome/free-brands-svg-icons';
 import FormHeader from '../components/FormHeader';
+import Statuses from '../constants/statuses';
+// Form
+import useForm from '../hooks';
 
+interface InitFormData {
+  status: string;
+  company: string;
+  website: string;
+  location: string;
+  skills: string;
+  github: string;
+  bio: string;
+  facebook: string;
+  linkedin: string;
+  instagram: string;
+  twitter: string;
+  youtube: string;
+}
 /**
  * Form to update dev's personal information.
  */
 const EditProfile: FC = () => {
+  const initFormData = {
+    status: '',
+    company: '',
+    website: '',
+    location: '',
+    skills: '',
+    github: '',
+    bio: '',
+    facebook: '',
+    linkedin: '',
+    instagram: '',
+    twitter: '',
+    youtube: '',
+  };
+  const {formData, handleChange, resetForm} = useForm<InitFormData>(
+    initFormData,
+  );
+
+  const {
+    status,
+    company,
+    website,
+    location,
+    skills,
+    github,
+    bio,
+    facebook,
+    linkedin,
+    instagram,
+    twitter,
+    youtube,
+  } = formData;
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>): void => {
+    e.preventDefault();
+    console.log('Submitted');
+  };
   return (
     <section className="container">
       <FormHeader
@@ -21,43 +77,65 @@ const EditProfile: FC = () => {
         lead="Let's get some information to make your profile stand out"
       />
 
-      <form className="form">
+      <form className="form" onSubmit={handleSubmit}>
         <div className="form-group">
-          <select name="status" required>
+          <select name="status" required autoFocus onChange={handleChange}>
             <option value="0">* Select Professional Status</option>
-            <option value="Developer">Developer</option>
-            <option value="Junior Developer">Junior Developer</option>
-            <option value="Senior Developer">Senior Developer</option>
-            <option value="Manager">Manager</option>
-            <option value="Student or Learning">Student or Learning</option>
-            <option value="Instructor">Instructor or Teacher</option>
-            <option value="Intern">Intern</option>
-            <option value="Other">Other</option>
+            {Statuses.map((s: string, i: number) => (
+              <option value={s} key={i}>
+                {s}
+              </option>
+            ))}
           </select>
           <small className="form-text">
             Give us an idea of where you are at in your career
           </small>
         </div>
         <div className="form-group">
-          <input type="text" placeholder="Company" name="company" />
+          <input
+            type="text"
+            placeholder="Company"
+            name="company"
+            value={company}
+            onChange={handleChange}
+          />
           <small className="form-text">
             Could be your own company or one you work for
           </small>
         </div>
         <div className="form-group">
-          <input type="text" placeholder="Website" name="website" />
+          <input
+            type="text"
+            placeholder="Website"
+            name="website"
+            value={website}
+            onChange={handleChange}
+          />
           <small className="form-text">
             Could be your own or a company website
           </small>
         </div>
         <div className="form-group">
-          <input type="text" placeholder="Location" name="location" />
+          <input
+            type="text"
+            placeholder="Location"
+            name="location"
+            value={location}
+            onChange={handleChange}
+          />
           <small className="form-text">
             City & state suggested (eg. Boston, MA)
           </small>
         </div>
         <div className="form-group">
-          <input type="text" placeholder="* Skills" name="skills" required />
+          <input
+            type="text"
+            placeholder="* Skills"
+            name="skills"
+            required
+            value={skills}
+            onChange={handleChange}
+          />
           <small className="form-text">
             Please use comma separated values (eg. HTML,CSS,JavaScript,PHP)
           </small>
@@ -66,7 +144,9 @@ const EditProfile: FC = () => {
           <input
             type="text"
             placeholder="Github Username"
-            name="githubusername"
+            name="github"
+            value={github}
+            onChange={handleChange}
           />
           <small className="form-text">
             If you want your latest repos and a Github link, include your
@@ -74,7 +154,12 @@ const EditProfile: FC = () => {
           </small>
         </div>
         <div className="form-group">
-          <textarea placeholder="A short bio of yourself" name="bio"></textarea>
+          <textarea
+            placeholder="A short bio of yourself"
+            name="bio"
+            value={bio}
+            onChange={handleChange}
+          ></textarea>
           <small className="form-text">Tell us a little about yourself</small>
         </div>
 
@@ -87,33 +172,63 @@ const EditProfile: FC = () => {
 
         <div className="form-group social-input">
           <FontAwesomeIcon icon={faFacebook} size="2x" />
-          <input type="text" placeholder="Facebook URL" name="facebook" />
+          <input
+            type="text"
+            placeholder="Facebook URL"
+            name="facebook"
+            value={facebook}
+            onChange={handleChange}
+          />
         </div>
 
         <div className="form-group social-input">
           <FontAwesomeIcon icon={faInstagram} size="2x" />
-          <input type="text" placeholder="Instagram URL" name="instagram" />
+          <input
+            type="text"
+            placeholder="Instagram URL"
+            name="instagram"
+            value={instagram}
+            onChange={handleChange}
+          />
         </div>
 
         <div className="form-group social-input">
           <FontAwesomeIcon icon={faLinkedin} size="2x" />
-          <input type="text" placeholder="Linkedin URL" name="linkedin" />
+          <input
+            type="text"
+            placeholder="Linkedin URL"
+            name="linkedin"
+            value={linkedin}
+            onChange={handleChange}
+          />
         </div>
 
         <div className="form-group social-input">
           <FontAwesomeIcon icon={faTwitter} size="2x" />
-          <input type="text" placeholder="Twitter URL" name="twitter" />
+          <input
+            type="text"
+            placeholder="Twitter URL"
+            name="twitter"
+            value={twitter}
+            onChange={handleChange}
+          />
         </div>
 
         <div className="form-group social-input">
           <FontAwesomeIcon icon={faYoutube} size="2x" />
-          <input type="text" placeholder="YouTube URL" name="youtube" />
+          <input
+            type="text"
+            placeholder="YouTube URL"
+            name="youtube"
+            value={youtube}
+            onChange={handleChange}
+          />
         </div>
 
         <input type="submit" className="btn btn-primary my-1" value="Submit" />
-        <a className="btn btn-light my-1" href="dashboard.html">
+        <Link to={Routes.DASHBOARD} className="btn btn-light my-1">
           Go Back
-        </a>
+        </Link>
       </form>
     </section>
   );