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 b0086728d1..2f023e69a2 100644 --- a/editor.planx.uk/src/@planx/components/MapAndLabel/Public/Context.tsx +++ b/editor.planx.uk/src/@planx/components/MapAndLabel/Public/Context.tsx @@ -99,11 +99,14 @@ export const MapAndLabelProvider: React.FC = ( }); const [activeIndex, setActiveIndex] = useState( - previousFormData?.length > 1 ? previousFormData?.length - 1 : 0, + previousFormData ? previousFormData?.length - 1 : 0, ); const [minError, setMinError] = useState(false); const [maxError, setMaxError] = useState(false); + const [loadPreviousValues, setLoadPreviousValues] = useState( + Boolean(previouslySubmittedData), + ); const handleGeoJSONChange = (event: GeoJSONChangeEvent) => { // If the user clicks 'reset' on the map, geojson will be empty object @@ -147,7 +150,9 @@ export const MapAndLabelProvider: React.FC = ( formik.setErrors({}); }; - const removeAllFeaturesFromMap = () => setFeatures(undefined); + const removeAllFeaturesFromMap = () => { + setFeatures(undefined); + }; const removeAllFeaturesFromForm = () => { formik.setFieldValue("schemaData", []); @@ -180,8 +185,9 @@ export const MapAndLabelProvider: React.FC = ( }; const addInitialFeaturesToMap = (initialFeatures: Feature[]) => { - if (!features?.length) { + if (loadPreviousValues) { setFeatures(initialFeatures); + setLoadPreviousValues(false); } }; @@ -200,7 +206,10 @@ export const MapAndLabelProvider: React.FC = ( const copyFeature = (sourceIndex: number, destinationIndex: number) => { const sourceFeature = formik.values.schemaData[sourceIndex]; - formik.setFieldValue(`schemaData[${destinationIndex}]`, sourceFeature); + formik.setFieldValue(`schemaData[${destinationIndex}]`, { + ...sourceFeature, + label: `${destinationIndex + 1}`, + }); }; const removeFeatureFromForm = (index: number) => { @@ -238,7 +247,6 @@ export const MapAndLabelProvider: React.FC = ( // Set active index as highest tab after removal, so that when you "add" a new feature the tabs increment correctly setActiveIndex((features && features.length - 2) || 0); }; - return ( { const passport = useStore((state) => state.computePassport().data); // If coming "back" or "changing", load initial features & tabs onto the map - // Pre-populating form fields within tabs is handled via formik.initialValues in Context.tsx + // Pre-populating form fields within tabs is handled via formik.initialValues in Context.tsx if (previouslySubmittedData?.data?.[fn]?.features?.length > 0) { addInitialFeaturesToMap(previouslySubmittedData?.data?.[fn]?.features); } diff --git a/editor.planx.uk/src/@planx/components/MapAndLabel/Public/index.bugTest.test.tsx b/editor.planx.uk/src/@planx/components/MapAndLabel/test/public.backNavigation.test.tsx similarity index 75% rename from editor.planx.uk/src/@planx/components/MapAndLabel/Public/index.bugTest.test.tsx rename to editor.planx.uk/src/@planx/components/MapAndLabel/test/public.backNavigation.test.tsx index 133a86acd6..5e7b52db90 100644 --- a/editor.planx.uk/src/@planx/components/MapAndLabel/Public/index.bugTest.test.tsx +++ b/editor.planx.uk/src/@planx/components/MapAndLabel/test/public.backNavigation.test.tsx @@ -3,13 +3,13 @@ import React from "react"; import { setup } from "testUtils"; import { it, vi } from "vitest"; -import { point1, point2, point3 } from "../test/mocks/geojson"; +import { Presentational as MapAndLabel } from "../Public"; +import { point1, point2, point3 } from "./mocks/geojson"; import { previousDoubleDataProps, previousSingleDataProps, -} from "../test/mocks/Trees"; -import { addFeaturesToMap, addMultipleFeatures } from "../test/utils"; -import { Presentational as MapAndLabel } from "."; +} from "./mocks/Trees"; +import { addMultipleFeatures } from "./utils"; beforeAll(() => { if (!window.customElements.get("my-map")) { @@ -27,7 +27,7 @@ beforeAll(() => { describe("navigating back after adding single feature", () => { it("shows previously submitted features", async () => { - const { getByTestId, queryByRole, user } = setup( + const { getByTestId, queryByRole } = setup( , ); const map = getByTestId("map-and-label-map"); @@ -35,25 +35,22 @@ describe("navigating back after adding single feature", () => { expect(map).toBeInTheDocument(); const firstTab = queryByRole("tab", { name: /Tree 1/ }); - expect(firstTab).toBeInTheDocument(); expect(firstTab).toBeVisible(); const firstTabPanel = getByTestId("vertical-tabpanel-0"); - expect(firstTabPanel).toBeInTheDocument(); expect(firstTabPanel).toBeVisible(); // point1 here needs to be reflected in the props you pass in at the start so labels match addMultipleFeatures([point1, point2]); const secondTab = queryByRole("tab", { name: /Tree 2/ }); - expect(secondTab).toBeInTheDocument(); expect(secondTab).toBeVisible(); }); }); describe("navigating back after adding two features", () => { it("shows previously submitted features", async () => { - const { getByTestId, queryByRole, user } = setup( + const { getByTestId, queryByRole } = setup( , ); const map = getByTestId("map-and-label-map"); @@ -65,16 +62,12 @@ describe("navigating back after adding two features", () => { expect(firstTab).toBeInTheDocument(); expect(secondTab).toBeInTheDocument(); - const firstTabPanel = getByTestId("vertical-tabpanel-0"); const secondTabPanel = getByTestId("vertical-tabpanel-1"); - expect(firstTabPanel).toBeInTheDocument(); - expect(secondTabPanel).toBeInTheDocument(); expect(secondTabPanel).toBeVisible(); addMultipleFeatures([point1, point2, point3]); const thirdTab = queryByRole("tab", { name: /Tree 3/ }); - expect(thirdTab).toBeInTheDocument(); expect(thirdTab).toBeVisible(); }); }); diff --git a/editor.planx.uk/src/@planx/components/MapAndLabel/Public/index.test.tsx b/editor.planx.uk/src/@planx/components/MapAndLabel/test/public.test.tsx similarity index 98% rename from editor.planx.uk/src/@planx/components/MapAndLabel/Public/index.test.tsx rename to editor.planx.uk/src/@planx/components/MapAndLabel/test/public.test.tsx index 8b363f01b1..afd7ad8603 100644 --- a/editor.planx.uk/src/@planx/components/MapAndLabel/Public/index.test.tsx +++ b/editor.planx.uk/src/@planx/components/MapAndLabel/test/public.test.tsx @@ -6,14 +6,9 @@ import { setup } from "testUtils"; import { vi } from "vitest"; import { axe } from "vitest-axe"; -import { mockTreeData } from "../test/mocks/GenericValues"; -import { - mockFeaturePointObj, - point1, - point2, - point3, -} from "../test/mocks/geojson"; -import { props } from "../test/mocks/Trees"; +import { mockTreeData } from "./mocks/GenericValues"; +import { mockFeaturePointObj, point1, point2, point3 } from "./mocks/geojson"; +import { props } from "./mocks/Trees"; import { addFeaturesToMap, addMultipleFeatures, @@ -23,7 +18,7 @@ import { fillOutFirstHalfOfForm, fillOutForm, fillOutSecondHalfOfForm, -} from "../test/utils"; +} from "./utils"; beforeAll(() => { if (!window.customElements.get("my-map")) {