enable add experience form

src/models/Dev.ts

@@ -60,11 +60,13 @@ export const dummyDev: Dev = {
       from: new Date(2011, 10),
       to: 'Current',
       position: 'Senior Developer',
+      location: 'USA',
       description:
         'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptas corrupti rem eius, accusantium ipsum vel eveniet magnam voluptatum? Minus, voluptatum!',
     },
     {
       company: 'Sun Microsystems',
+      location: 'USA',
       from: new Date(2004, 10),
       to: new Date(2010, 11),
       position: 'System Admin',

src/pages/AddEducation.tsx

@@ -72,7 +72,6 @@ const AddEducation: FC<IProps> = ({firebase, educations}) => {
       return newEdu;
     };
     const newEdu = makeEducation(formData);
-    console.log(JSON.stringify(newEdu, null, 4));
 
     try {
       firebase.updateProfile(
@@ -156,7 +155,7 @@ const AddEducation: FC<IProps> = ({firebase, educations}) => {
               name="current"
               checked={formData.current}
               onChange={handleCheckboxesChange}
-            />
+            />{' '}
             Current School
           </p>
         </div>

src/pages/AddExperience.tsx

@@ -1,10 +1,98 @@
-import React, {FC} from 'react';
+import React, {FC, useState, FormEvent} from 'react';
+// Routing
+import {Link} from 'react-router-dom';
+import Routes from '../constants/routes';
+// Redux
+import {WithFirebaseProps} from 'react-redux-firebase';
+import {enhance} from '../store/firebase';
+// Style
 import FormHeader from '../components/FormHeader';
+import Alert from '../components/Alert';
+// Typing
+import Dev from '../models/Dev';
+import User from '../models/User';
+import IAlert, {formAlert} from '../types/Alert';
+import Experience from '../types/Experience';
+import {parseDate} from '../types/TimePeriod';
+// Form
+import useForm from '../hooks';
+
+interface FormData {
+  position: string;
+  company: string;
+  location: string;
+  from: string;
+  to: string;
+  current: boolean;
+  description: string;
+}
+
+interface IProps extends Dev, WithFirebaseProps<User> {}
 
 /**
- * Form to add an Education step to Profile
+ * Form to add an Experience step to Profile
  */
-const AddExperience: FC = () => {
+const AddExperience: FC<IProps> = ({firebase, experiences}) => {
+  const [alert, setAlert] = useState<IAlert>(formAlert);
+
+  const initFormData: FormData = {
+    position: '',
+    company: '',
+    location: '',
+    from: '',
+    to: '',
+    current: false,
+    description: '',
+  };
+  const {formData, handleChange, handleCheckboxesChange, resetForm} = useForm<
+    FormData
+  >(initFormData);
+
+  const isDisabled: boolean =
+    formData.position === '' || formData.company === '';
+
+  const handleSubmit = (e: FormEvent<HTMLFormElement>): void => {
+    e.preventDefault();
+    const makeExperience = ({
+      position,
+      company,
+      from,
+      location,
+      to,
+      current,
+      description,
+    }: FormData): Experience => {
+      if (current) to = 'Current';
+      const newExp: Experience = {
+        position,
+        company,
+        location,
+        from: parseDate(from),
+        to: parseDate(to),
+        description,
+      };
+      return newExp;
+    };
+    const newExp = makeExperience(formData);
+    console.log(JSON.stringify(newExp, null, 4));
+
+    try {
+      firebase.updateProfile(
+        {experiences: [...experiences, newExp]},
+        {useSet: true, merge: true},
+      );
+      setAlert({
+        show: true,
+        color: 'success',
+        text:
+          'Profile successfully updated. You may continue or go back to your dashboard.',
+      });
+      resetForm();
+    } catch (err) {
+      setAlert({...alert, show: true});
+    }
+  };
+
   return (
     <section className="container">
       <FormHeader
@@ -14,27 +102,63 @@ const AddExperience: FC = () => {
         icon="code-branch"
       />
 
-      <form className="form">
+      <form className="form" onSubmit={handleSubmit}>
         <div className="form-group">
-          <input type="text" placeholder="* Job Title" name="title" required />
+          <input
+            type="text"
+            placeholder="* Job Title"
+            name="position"
+            required
+            value={formData.position}
+            onChange={handleChange}
+          />
         </div>
         <div className="form-group">
-          <input type="text" placeholder="* Company" name="company" required />
+          <input
+            type="text"
+            placeholder="* Company"
+            name="company"
+            required
+            value={formData.company}
+            onChange={handleChange}
+          />
         </div>
         <div className="form-group">
-          <input type="text" placeholder="Location" name="location" />
+          <input
+            type="text"
+            placeholder="Location"
+            name="location"
+            value={formData.location}
+            onChange={handleChange}
+          />
         </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 Job
+            <input
+              type="checkbox"
+              name="current"
+              checked={formData.current}
+              onChange={handleCheckboxesChange}
+            />{' '}
+            Current Job
           </p>
         </div>
         <div className="form-group">
@@ -43,15 +167,23 @@ const AddExperience: FC = () => {
             cols={30}
             rows={5}
             placeholder="Job 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 AddExperience;
+export default enhance(AddExperience);

src/types/Experience.ts

@@ -2,10 +2,11 @@ import TimePeriod from '../types/TimePeriod';
 
 interface Experience {
   company: string;
-  from: Date;
+  from: TimePeriod;
   to: TimePeriod;
   position: string;
   description: string;
+  location: string;
 }
 
 export default Experience;