fix: make shelter numbering strict-mode safe

Shelter numbers could jump in Strict Mode because numbering was done in a component effect.

Move number assignment to add/copy actions in the shelters form utilities.
Now each new shelter gets its number only when the user adds or copies, so numbering stays predictable.

Author: patricvincit

ui/src/components/stop-registry/stops/stop-details/shelters/ShelterFormFields.tsx

@@ -1,5 +1,5 @@
 import { t } from 'i18next';
-import { FC, useEffect } from 'react';
+import { FC } from 'react';
 import { useFormContext } from 'react-hook-form';
 import {
   StopRegistryShelterCondition,
@@ -50,23 +50,8 @@ export const ShelterFormFields: FC<ShelterFormFieldsProps> = ({
   onRemove,
   onCopy,
 }) => {
-  const { register, watch, setValue } = useFormContext<SheltersFormState>();
+  const { register, watch } = useFormContext<SheltersFormState>();
   const toBeDeleted = watch(`shelters.${index}.toBeDeleted`);
-  const allShelters = watch('shelters');
-  const currentShelterNumber = watch(`shelters.${index}.shelterNumber`);
-
-  // Suggest a shelter number based on previous numbers
-  useEffect(() => {
-    if (currentShelterNumber === null) {
-      const nextNumber =
-        Math.max(
-          0,
-          ...allShelters.map((shelter) => Number(shelter.shelterNumber)),
-        ) + 1;
-
-      setValue(`shelters.${index}.shelterNumber`, nextNumber);
-    }
-  }, [allShelters, index, currentShelterNumber, setValue]);
 
   return (
     <Column className="gap-4">

ui/src/components/stop-registry/stops/stop-details/shelters/SheltersForm.spec.tsx

@@ -76,7 +76,12 @@ describe('useSheltersFormUtils', () => {
       result.current.addNewShelter();
     });
 
-    expect(appendMock).toHaveBeenCalledWith(mapShelterDataToFormState({}));
+    expect(appendMock).toHaveBeenCalledWith(
+      expect.objectContaining({
+        ...mapShelterDataToFormState({}),
+        shelterNumber: 2,
+      }),
+    );
     expect(mockOnShelterCountChanged).toHaveBeenCalledWith(1);
   });
 
@@ -103,6 +108,7 @@ describe('useSheltersFormUtils', () => {
         mapShelterDataToFormState({
           ...testShelter,
           id: null,
+          shelterNumber: 2,
         }),
       ),
     );

ui/src/components/stop-registry/stops/stop-details/shelters/useSheltersForm.tsx

@@ -8,6 +8,16 @@ type UtilProps = {
   readonly onShelterCountChanged: (newShelterCount: number) => void;
 };
 
+const getNextShelterNumber = (
+  shelters: SheltersFormState['shelters'],
+): number => {
+  const usedNumbers = shelters
+    .map((shelter) => shelter.shelterNumber)
+    .filter((num): num is number => num !== null && !Number.isNaN(num));
+
+  return Math.max(0, ...usedNumbers) + 1;
+};
+
 export const useSheltersFormUtils = (props: UtilProps) => {
   const { methods, onShelterCountChanged } = props;
   const { control, setValue, getValues, handleSubmit } = methods;
@@ -29,15 +39,27 @@ export const useSheltersFormUtils = (props: UtilProps) => {
   }, [getValues, onShelterCountChanged]);
 
   const addNewShelter = useCallback(() => {
-    append(mapShelterDataToFormState({}));
+    const currentShelters = getValues('shelters');
+    const nextShelterNumber = getNextShelterNumber(currentShelters);
+
+    append({
+      ...mapShelterDataToFormState({}),
+      shelterNumber: nextShelterNumber,
+    });
     updateShelterCount();
-  }, [append, updateShelterCount]);
+  }, [append, getValues, updateShelterCount]);
 
   const copyToNewShelter = useCallback(
     (shelterIndex: number) => {
       const currentShelters = getValues('shelters'); // Get the latest state
       const shelterToCopy = currentShelters?.at(shelterIndex);
-      const newShelter = shelterToCopy ? { ...shelterToCopy, id: null } : null;
+      const newShelter = shelterToCopy
+        ? {
+            ...shelterToCopy,
+            id: null,
+            shelterNumber: getNextShelterNumber(currentShelters),
+          }
+        : null;
 
       if (newShelter) {
         append(