If hanke area names do not exist when changing form page, set them

src/domain/hanke/edit/HankeFormAlueet.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { Tab, TabList, TabPanel, Tabs } from 'hds-react';
@@ -16,6 +16,8 @@ import useSelectableTabs from '../../../common/hooks/useSelectableTabs';
 import useHighlightArea from '../../map/hooks/useHighlightArea';
 import useAddressCoordinate from '../../map/hooks/useAddressCoordinate';
 import useFieldArrayWithStateUpdate from '../../../common/hooks/useFieldArrayWithStateUpdate';
+import { HankeAlue } from '../../types/hanke';
+import { getAreaDefaultName } from './utils';
 
 function getEmptyArea(feature: Feature): Omit<HankeAlueFormState, 'id' | 'geometriat'> {
   return {
@@ -32,7 +34,7 @@ function getEmptyArea(feature: Feature): Omit<HankeAlueFormState, 'id' | 'geomet
 
 const HankeFormAlueet: React.FC<FormProps> = ({ formData }) => {
   const { t } = useTranslation();
-  const { setValue, trigger, watch } = useFormContext();
+  const { setValue, trigger, watch, getValues } = useFormContext();
   const {
     fields: hankeAlueet,
     append,
@@ -48,6 +50,18 @@ const HankeFormAlueet: React.FC<FormProps> = ({ formData }) => {
 
   const higlightArea = useHighlightArea();
 
+  useEffect(() => {
+    // If there are hanke areas with no name on unmount, set default names for them
+    return function cleanup() {
+      const areas = getValues(FORMFIELD.HANKEALUEET) as HankeAlue[];
+      areas.forEach((area, i) => {
+        if (!area.nimi) {
+          setValue(`${FORMFIELD.HANKEALUEET}.${i}.nimi`, getAreaDefaultName(areas));
+        }
+      });
+    };
+  }, [getValues, setValue]);
+
   const handleAddFeature = useCallback(
     (feature: Feature<Geometry>) => {
       const geom = feature.getGeometry();

src/domain/hanke/edit/utils.test.ts

@@ -39,4 +39,13 @@ test('Should get correct default area name based on other areas', () => {
   ]);
 
   expect(secondAreaName).toBe('Hankealue 31');
+
+  const thirdAreaName = getAreaDefaultName([
+    getArea('Hankealue 1'),
+    getArea('Hankealue 3'),
+    getArea('Hankealue 7'),
+    getArea('Oma alue 9'),
+  ]);
+
+  expect(thirdAreaName).toBe('Hankealue 8');
 });

src/domain/hanke/edit/utils.ts

@@ -8,7 +8,6 @@ import { formatFeaturesToHankeGeoJSON, getFeatureFromHankeGeometry } from '../..
 import { getSurfaceArea } from '../../../common/components/map/utils';
 import { Application } from '../../application/types/application';
 import { isApplicationPending } from '../../application/utils';
-import { maxBy } from 'lodash';
 
 export function getAreasMinStartDate(areas: HankeAlue[] | undefined) {
   const areaStartDates = areas?.map((alue) => {