diff --git a/editor.planx.uk/src/@planx/components/MapAndLabel/Public/Context.tsx b/editor.planx.uk/src/@planx/components/MapAndLabel/Public/Context.tsx index 1064667ff4..b70be2a8f3 100644 --- a/editor.planx.uk/src/@planx/components/MapAndLabel/Public/Context.tsx +++ b/editor.planx.uk/src/@planx/components/MapAndLabel/Public/Context.tsx @@ -26,6 +26,7 @@ interface MapAndLabelContextValue { cancelEditItem: () => void; formik: FormikProps; validateAndSubmitForm: () => void; + addFeature: () => void; mapAndLabelProps: PresentationalProps; errors: { unsavedItem: boolean; @@ -44,13 +45,15 @@ export const MapAndLabelProvider: React.FC = ( props, ) => { const { schema, children, handleSubmit } = props; - const { formikConfig, initialValues: _initialValues } = useSchema({ + const { formikConfig, initialValues } = useSchema({ schema, previousValues: getPreviouslySubmittedData(props), }); const formik = useFormik({ ...formikConfig, + // The user interactions are map driven - start with no values added + initialValues: { schemaData: [] }, onSubmit: (values) => { const defaultPassportData = makeData(props, values.schemaData)?.["data"]; @@ -80,6 +83,7 @@ export const MapAndLabelProvider: React.FC = ( setUnsavedItemError(false); }; + // TODO: Not required? const saveItem = async () => { resetErrors(); @@ -95,9 +99,9 @@ export const MapAndLabelProvider: React.FC = ( // if (activeIndex !== -1) return setUnsavedItemError(true); // Manually validate minimum number of items - // if (formik.values.schemaData.length < schema.min) { - // return setMinError(true); - // } + if (formik.values.schemaData.length < schema.min) { + return setMinError(true); + } // const errors = await formik.validateForm(); // console.log({errors}) @@ -123,6 +127,12 @@ export const MapAndLabelProvider: React.FC = ( const resetItemToPreviousState = () => formik.setFieldValue(`schemaData[${activeIndex}]`, activeItemInitialState); + const addFeature = () => { + const currentFeatures = formik.values.schemaData; + const updatedFeatures = [...currentFeatures, initialValues]; + formik.setFieldValue("schemaData", updatedFeatures); + }; + return ( = ( cancelEditItem, formik, validateAndSubmitForm, + addFeature, errors: { unsavedItem: unsavedItemError, min: minError, diff --git a/editor.planx.uk/src/@planx/components/MapAndLabel/Public/index.tsx b/editor.planx.uk/src/@planx/components/MapAndLabel/Public/index.tsx index a61aa8b5e9..2728797075 100644 --- a/editor.planx.uk/src/@planx/components/MapAndLabel/Public/index.tsx +++ b/editor.planx.uk/src/@planx/components/MapAndLabel/Public/index.tsx @@ -125,11 +125,13 @@ const Root = () => { } = mapAndLabelProps; const [features, setFeatures] = useState(undefined); + const { addFeature } = useMapAndLabelContext(); useEffect(() => { const geojsonChangeHandler = ({ detail: geojson }: any) => { if (geojson["EPSG:3857"]?.features) { setFeatures(geojson["EPSG:3857"].features); + addFeature(); } else { // if the user clicks 'reset' on the map, geojson will be empty object, so set features to undefined setFeatures(undefined); @@ -143,7 +145,7 @@ const Root = () => { return function cleanup() { map?.removeEventListener("geojsonChange", geojsonChangeHandler); }; - }, [setFeatures]); + }, [setFeatures, addFeature]); return (