From d8c0ca5737e6aaea1fb8b3e5f068c34f3d564bdc Mon Sep 17 00:00:00 2001
From: Ruidy Nemausat <ruidy.nemausat@gmail.com>
Date: Fri, 15 May 2020 10:10:24 +0200
Subject: [PATCH] update useForm hook to handle checkboxes

---
 src/hooks/index.ts         |   6 +-
 src/pages/AddEducation.tsx | 175 +++++++++++++++++++++++++------------
 2 files changed, 125 insertions(+), 56 deletions(-)

diff --git a/src/hooks/index.ts b/src/hooks/index.ts
index 9651bd0..392cfd5 100644
--- a/src/hooks/index.ts
+++ b/src/hooks/index.ts
@@ -24,7 +24,11 @@ const useForm = <T>(initFormData: T) => {
   /** clean form after successful submition */
   const resetForm = () => setFormData(initFormData);
 
-  return {formData, handleChange, resetForm};
+  // /** update checkboxes */
+  const handleCheckboxesChange = (e: ChangeEvent<HTMLInputElement>): void =>
+    setFormData({...formData, [e.target.name]: e.target.checked});
+
+  return {formData, handleChange, handleCheckboxesChange, resetForm};
 };
 
 export default useForm;
diff --git a/src/pages/AddEducation.tsx b/src/pages/AddEducation.tsx
index 0ad839b..b85895e 100644
--- a/src/pages/AddEducation.tsx
+++ b/src/pages/AddEducation.tsx
@@ -1,65 +1,130 @@
-import React, {FC} from 'react';
+import React, {FC, useState} from 'react';
 import FormHeader from '../components/FormHeader';
+import {enhance} from '../store/firebase';
+import Routes from '../constants/routes';
+import {Link} from 'react-router-dom';
+import Dev from '../models/Dev';
+import {WithFirebaseProps, withFirebase} from 'react-redux-firebase';
+import User from '../models/User';
+import IAlert, {formAlert} from '../types/Alert';
+import Alert from '../components/Alert';
+import useForm from '../hooks';
+
+interface FormData {
+  school: string;
+  degree: string;
+  from?: string;
+  to?: string;
+  current?: boolean;
+  description?: string;
+}
 
 /**
  * Form to add an Education step to Profile
  */
-const AddEducation: FC = () => (
-  <section className="container">
-    <FormHeader
-      title="Add Your Education"
-      lead="Add any school, bootcamp, etc that
+const AddEducation: FC<WithFirebaseProps<User>> = ({firebase}) => {
+  const [alert, setAlert] = useState<IAlert>(formAlert);
+
+  const initFormData: FormData = {
+    school: '',
+    degree: '',
+    from: '',
+    to: '',
+    current: false,
+    description: '',
+  };
+  const {formData, handleChange, handleCheckboxesChange, resetForm} = useForm<
+    FormData
+  >(initFormData);
+
+  const isDisabled: boolean = formData.school === '' || formData.degree === '';
+
+  return (
+    <section className="container">
+      <FormHeader
+        title="Add Your Education"
+        lead="Add any school, bootcamp, etc that
         you have attended"
-      icon="graduation-cap"
-    />
+        icon="graduation-cap"
+      />
 
-    <form className="form">
-      <div className="form-group">
+      <form className="form">
+        <div className="form-group">
+          <input
+            type="text"
+            placeholder="* School or Bootcamp"
+            name="schools"
+            value={formData.school}
+            onChange={handleChange}
+            required
+            autoFocus
+          />
+        </div>
+        <div className="form-group">
+          <input
+            type="text"
+            placeholder="* Degree or Certificate"
+            name="degree"
+            value={formData.degree}
+            onChange={handleChange}
+            required
+          />
+        </div>
+        <div className="form-group">
+          <input type="text" placeholder="Field Of Study" name="fieldofstudy" />
+        </div>
+        <div className="form-group">
+          <h4>From Date</h4>
+          <input
+            type="date"
+            name="from"
+            value={formData.from}
+            onChange={handleChange}
+          />
+        </div>
+        <div className="form-group">
+          <h4>To Date</h4>
+          <input
+            type="date"
+            name="to"
+            value={formData.to}
+            onChange={handleChange}
+          />
+        </div>
+        <div className="form-group">
+          <p>
+            <input
+              type="checkbox"
+              name="current"
+              checked={formData.current}
+              onChange={handleCheckboxesChange}
+            />
+            Current School
+          </p>
+        </div>
+        <div className="form-group">
+          <textarea
+            name="description"
+            cols={30}
+            rows={5}
+            placeholder="Program Description"
+            value={formData.description}
+            onChange={handleChange}
+          ></textarea>
+        </div>
+        {alert.show && <Alert text={alert.text} color={alert.color} />}
         <input
-          type="text"
-          placeholder="* School or Bootcamp"
-          name="school"
-          required
+          type="submit"
+          className="btn btn-primary my-1"
+          value="Submit"
+          disabled={isDisabled}
         />
-      </div>
-      <div className="form-group">
-        <input
-          type="text"
-          placeholder="* Degree or Certificate"
-          name="degree"
-          required
-        />
-      </div>
-      <div className="form-group">
-        <input type="text" placeholder="Field Of Study" name="fieldofstudy" />
-      </div>
-      <div className="form-group">
-        <h4>From Date</h4>
-        <input type="date" name="from" />
-      </div>
-      <div className="form-group">
-        <h4>To Date</h4>
-        <input type="date" name="to" />
-      </div>
-      <div className="form-group">
-        <p>
-          <input type="checkbox" name="current" value="" /> Current School
-        </p>
-      </div>
-      <div className="form-group">
-        <textarea
-          name="description"
-          cols={30}
-          rows={5}
-          placeholder="Program Description"
-        ></textarea>
-      </div>
-      <input type="submit" className="btn btn-primary my-1" value="Submit" />
-      <a className="btn btn-light my-1" href="dashboard.html">
-        Go Back
-      </a>
-    </form>
-  </section>
-);
+        <Link className="btn btn-light my-1" to={Routes.DASHBOARD}>
+          Go Back
+        </Link>
+      </form>
+    </section>
+  );
+};
 
-export default AddEducation;
+export default withFirebase(AddEducation);