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/e_resources/e_resourcesSlice'; 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'; import { hasPermission } from '../../helpers/userPermissions'; const EditE_resourcesPage = () => { const router = useRouter(); const dispatch = useAppDispatch(); const initVals = { resource_name: '', resource_type: '', university: null, universities: null, }; const [initialValues, setInitialValues] = useState(initVals); const { e_resources } = useAppSelector((state) => state.e_resources); const { currentUser } = useAppSelector((state) => state.auth); const { id } = router.query; useEffect(() => { dispatch(fetch({ id: id })); }, [id]); useEffect(() => { if (typeof e_resources === 'object') { setInitialValues(e_resources); } }, [e_resources]); useEffect(() => { if (typeof e_resources === 'object') { const newInitialVal = { ...initVals }; Object.keys(initVals).forEach( (el) => (newInitialVal[el] = e_resources[el]), ); setInitialValues(newInitialVal); } }, [e_resources]); const handleSubmit = async (data) => { await dispatch(update({ id: id, data })); await router.push('/e_resources/e_resources-list'); }; return ( <>