import { mdiChartTimelineVariant, mdiUpload } from '@mdi/js'; import Head from 'next/head'; import React, { ReactElement, useEffect, useState } from 'react'; import DatePicker from 'react-datepicker'; import 'react-datepicker/dist/react-datepicker.css'; import dayjs from 'dayjs'; import CardBox from '../../components/CardBox'; import LayoutAuthenticated from '../../layouts/Authenticated'; import SectionMain from '../../components/SectionMain'; import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'; import { getPageTitle } from '../../config'; import { Field, Form, Formik } from 'formik'; import FormField from '../../components/FormField'; import BaseDivider from '../../components/BaseDivider'; import BaseButtons from '../../components/BaseButtons'; import BaseButton from '../../components/BaseButton'; import FormCheckRadio from '../../components/FormCheckRadio'; import FormCheckRadioGroup from '../../components/FormCheckRadioGroup'; import FormFilePicker from '../../components/FormFilePicker'; import FormImagePicker from '../../components/FormImagePicker'; import { SelectField } from '../../components/SelectField'; import { SelectFieldMany } from '../../components/SelectFieldMany'; import { SwitchField } from '../../components/SwitchField'; import { RichTextField } from '../../components/RichTextField'; import { update, fetch, } from '../../stores/job_descriptions/job_descriptionsSlice'; import { useAppDispatch, useAppSelector } from '../../stores/hooks'; import { useRouter } from 'next/router'; import { saveFile } from '../../helpers/fileSaver'; import dataFormatter from '../../helpers/dataFormatter'; import ImageField from '../../components/ImageField'; const EditJob_descriptions = () => { const router = useRouter(); const dispatch = useAppDispatch(); const initVals = { title: '', document: [], recruiter: null, posted_at: new Date(), }; const [initialValues, setInitialValues] = useState(initVals); const { job_descriptions } = useAppSelector( (state) => state.job_descriptions, ); const { job_descriptionsId } = router.query; useEffect(() => { dispatch(fetch({ id: job_descriptionsId })); }, [job_descriptionsId]); useEffect(() => { if (typeof job_descriptions === 'object') { setInitialValues(job_descriptions); } }, [job_descriptions]); useEffect(() => { if (typeof job_descriptions === 'object') { const newInitialVal = { ...initVals }; Object.keys(initVals).forEach( (el) => (newInitialVal[el] = job_descriptions[el]), ); setInitialValues(newInitialVal); } }, [job_descriptions]); const handleSubmit = async (data) => { await dispatch(update({ id: job_descriptionsId, data })); await router.push('/job_descriptions/job_descriptions-list'); }; return ( <>