/** * Edit Page Elements 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 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 { SwitchField } from '../../components/SwitchField'; import { update, fetch } from '../../stores/page_elements/page_elementsSlice'; import { useAppDispatch, useAppSelector } from '../../stores/hooks'; import { useRouter } from 'next/router'; import type { PageElement } from '../../types/entities'; interface FormValues { page: unknown; element_type: string; name: string; sort_order: string; is_visible: boolean; x_percent: string; y_percent: string; width_percent: string; height_percent: string; rotation_deg: string; style_json: string; content_json: string; } const initVals: FormValues = { page: null, element_type: '', name: '', sort_order: '', is_visible: false, x_percent: '', y_percent: '', width_percent: '', height_percent: '', rotation_deg: '', style_json: '', content_json: '', }; const EditPage_elementsPage = () => { const router = useRouter(); const dispatch = useAppDispatch(); const [initialValues, setInitialValues] = useState(initVals); const pageElementsState = useAppSelector((state) => state.page_elements); const page_elements = pageElementsState.page_elements as | PageElement | PageElement[] | undefined; const pageElement = Array.isArray(page_elements) ? page_elements[0] : page_elements; const { id } = router.query; const idStr = Array.isArray(id) ? id[0] : id; // Fetch entity data useEffect(() => { if (idStr) { dispatch(fetch({ id: idStr })); } }, [idStr, dispatch]); // Sync form values with fetched data (consolidated from redundant useEffects) useEffect(() => { if (pageElement && typeof pageElement === 'object') { const newInitialVal = { ...initVals }; const pageElementRecord = pageElement as unknown as Record< string, unknown >; (Object.keys(initVals) as Array).forEach((key) => { if (key in pageElementRecord) { (newInitialVal as Record)[key] = pageElementRecord[key]; } }); setInitialValues(newInitialVal); } }, [pageElement]); const handleSubmit = async (data: FormValues) => { if (idStr) { await dispatch( update({ id: idStr, data: data as unknown as Partial }), ); await router.push('/page_elements/page_elements-list'); } }; return ( <> {getPageTitle('Edit page_elements')} {''} handleSubmit(values)} >
router.push('/page_elements/page_elements-list') } />
); }; EditPage_elementsPage.getLayout = function getLayout(page: ReactElement) { return ( {page} ); }; export default EditPage_elementsPage;