/** * Edit Access Logs Page * Cleaned up version with consolidated useEffect hooks */ import { mdiChartTimelineVariant } 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 { SelectField } from '../../components/SelectField'; import { update, fetch } from '../../stores/access_logs/access_logsSlice'; import { useAppDispatch, useAppSelector } from '../../stores/hooks'; import { useRouter } from 'next/router'; import type { AccessLog } from '../../types/entities'; const initVals = { project: null as unknown, environment: '' as '' | 'admin' | 'stage' | 'production', user: null as unknown, path: '', ip_address: '', user_agent: '', accessed_at: new Date(), }; const EditAccess_logsPage = () => { const router = useRouter(); const dispatch = useAppDispatch(); const [initialValues, setInitialValues] = useState(initVals); const { access_logs } = useAppSelector((state) => state.access_logs); const { id } = router.query; // Fetch entity data useEffect(() => { if (id) { dispatch(fetch({ id: id as string })); } }, [id, dispatch]); // Sync form values with fetched data (consolidated from redundant useEffects) useEffect(() => { if (typeof access_logs === 'object' && access_logs !== null) { const newInitialVal = { ...initVals }; Object.keys(initVals).forEach((key) => { if (key in access_logs) { newInitialVal[key] = access_logs[key]; } }); setInitialValues(newInitialVal); } }, [access_logs]); const handleSubmit = async (data: typeof initVals) => { await dispatch( update({ id: id as string, data: data as unknown as Partial }), ); await router.push('/access_logs/access_logs-list'); }; return ( <> {getPageTitle('Edit access_logs')} {''} handleSubmit(values)} >
setInitialValues({ ...initialValues, accessed_at: date || new Date(), }) } /> router.push('/access_logs/access_logs-list')} />
); }; EditAccess_logsPage.getLayout = function getLayout(page: ReactElement) { return ( {page} ); }; export default EditAccess_logsPage;