update useForm hook to handle checkboxes

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;

src/pages/AddEducation.tsx

@@ -1,10 +1,45 @@
-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 = () => (
+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"
@@ -18,8 +53,11 @@ const AddEducation: FC = () => (
           <input
             type="text"
             placeholder="* School or Bootcamp"
-          name="school"
+            name="schools"
+            value={formData.school}
+            onChange={handleChange}
             required
+            autoFocus
           />
         </div>
         <div className="form-group">
@@ -27,6 +65,8 @@ const AddEducation: FC = () => (
             type="text"
             placeholder="* Degree or Certificate"
             name="degree"
+            value={formData.degree}
+            onChange={handleChange}
             required
           />
         </div>
@@ -35,15 +75,31 @@ const AddEducation: FC = () => (
         </div>
         <div className="form-group">
           <h4>From Date</h4>
-        <input type="date" name="from" />
+          <input
+            type="date"
+            name="from"
+            value={formData.from}
+            onChange={handleChange}
+          />
         </div>
         <div className="form-group">
           <h4>To Date</h4>
-        <input type="date" name="to" />
+          <input
+            type="date"
+            name="to"
+            value={formData.to}
+            onChange={handleChange}
+          />
         </div>
         <div className="form-group">
           <p>
-          <input type="checkbox" name="current" value="" /> Current School
+            <input
+              type="checkbox"
+              name="current"
+              checked={formData.current}
+              onChange={handleCheckboxesChange}
+            />
+            Current School
           </p>
         </div>
         <div className="form-group">
@@ -52,14 +108,23 @@ const AddEducation: FC = () => (
             cols={30}
             rows={5}
             placeholder="Program Description"
+            value={formData.description}
+            onChange={handleChange}
           ></textarea>
         </div>
-      <input type="submit" className="btn btn-primary my-1" value="Submit" />
+        {alert.show && <Alert text={alert.text} color={alert.color} />}
-      <a className="btn btn-light my-1" href="dashboard.html">
+        <input
+          type="submit"
+          className="btn btn-primary my-1"
+          value="Submit"
+          disabled={isDisabled}
+        />
+        <Link className="btn btn-light my-1" to={Routes.DASHBOARD}>
           Go Back
-      </a>
+        </Link>
       </form>
     </section>
   );
+};
 
-export default AddEducation;
+export default withFirebase(AddEducation);