diff --git a/src/hooks/index.ts b/src/hooks/index.ts index 392cfd5..f7cd256 100644 --- a/src/hooks/index.ts +++ b/src/hooks/index.ts @@ -24,7 +24,7 @@ const useForm = (initFormData: T) => { /** clean form after successful submition */ const resetForm = () => setFormData(initFormData); - // /** update checkboxes */ + // /** update checkboxes TODO: do it better ...*/ const handleCheckboxesChange = (e: ChangeEvent): void => setFormData({...formData, [e.target.name]: e.target.checked}); diff --git a/src/pages/AddEducation.tsx b/src/pages/AddEducation.tsx index b85895e..2320086 100644 --- a/src/pages/AddEducation.tsx +++ b/src/pages/AddEducation.tsx @@ -1,33 +1,43 @@ -import React, {FC, useState} from 'react'; -import FormHeader from '../components/FormHeader'; -import {enhance} from '../store/firebase'; -import Routes from '../constants/routes'; +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 {WithFirebaseProps, withFirebase} from 'react-redux-firebase'; import User from '../models/User'; import IAlert, {formAlert} from '../types/Alert'; -import Alert from '../components/Alert'; +import Education from '../types/Education'; +import {parseDate} from '../types/TimePeriod'; +// Form import useForm from '../hooks'; interface FormData { school: string; degree: string; - from?: string; - to?: string; - current?: boolean; - description?: string; + field: string; + from: string; + to: string; + current: boolean; + description: string; } +interface IProps extends Dev, WithFirebaseProps {} /** * Form to add an Education step to Profile */ -const AddEducation: FC> = ({firebase}) => { +const AddEducation: FC = ({firebase, educations}) => { const [alert, setAlert] = useState(formAlert); const initFormData: FormData = { school: '', degree: '', + field: '', from: '', to: '', current: false, @@ -39,6 +49,48 @@ const AddEducation: FC> = ({firebase}) => { const isDisabled: boolean = formData.school === '' || formData.degree === ''; + const handleSubmit = (e: FormEvent): void => { + e.preventDefault(); + const makeEducation = ({ + school, + degree, + from, + field, + to, + current, + description, + }: FormData): Education => { + if (current) to = 'Current'; + const newEdu: Education = { + school, + degree, + field, + from: parseDate(from), + to: parseDate(to), + description, + }; + return newEdu; + }; + const newEdu = makeEducation(formData); + console.log(JSON.stringify(newEdu, null, 4)); + + try { + firebase.updateProfile( + {educations: [...educations, newEdu]}, + {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 (
> = ({firebase}) => { icon="graduation-cap" /> -
+
> = ({firebase}) => { />
- +

From Date

@@ -127,4 +185,4 @@ const AddEducation: FC> = ({firebase}) => { ); }; -export default withFirebase(AddEducation); +export default enhance(AddEducation); diff --git a/src/pages/Dashboard.tsx b/src/pages/Dashboard.tsx index 10ffcb6..3b24af1 100644 --- a/src/pages/Dashboard.tsx +++ b/src/pages/Dashboard.tsx @@ -85,7 +85,7 @@ const Dashboard: FC = ({ {educations?.map((edu: Education, i: number) => ( {edu.school} - {edu.field} + {edu.degree} {getTimePeriod(edu.from, edu.to)} diff --git a/src/types/Education.ts b/src/types/Education.ts index fcd6d3c..4d454ec 100644 --- a/src/types/Education.ts +++ b/src/types/Education.ts @@ -2,9 +2,9 @@ import TimePeriod from '../types/TimePeriod'; interface Education { school: string; + degree: string; from: TimePeriod; to: TimePeriod; - degree: string; field: string; description: string; } diff --git a/src/types/TimePeriod.ts b/src/types/TimePeriod.ts index f78ce40..4007fdc 100644 --- a/src/types/TimePeriod.ts +++ b/src/types/TimePeriod.ts @@ -1,9 +1,9 @@ import moment from 'moment'; -type TimePeriod = Date | 'Current'; +type TimePeriod = string | Date | 'Current'; /** format exp date to be used */ -const parseDate = (date: TimePeriod): string => { +export const parseDate = (date: TimePeriod): string => { if (date === 'Current') { return date; }