refactor the subscription logic

Author: joshdimanteto

src/admin/units/units.component.tsx

@@ -25,14 +25,14 @@ import {
   COLUMN_FILTER_MODE_OPTIONS,
   COLUMN_FILTER_VARIANTS,
   TableBodyCellOverFlowTip,
-  TableHeaderOverflowTip,
   TableCellOverFlowTipProps,
+  TableHeaderOverflowTip,
+  customFilterFunctions,
   displayTableRowCountText,
   formatDateTimeStrings,
   getInitialColumnFilterFnState,
   getPageHeightCalc,
   mrtTheme,
-  customFilterFunctions,
 } from '../../utils';
 import DeleteUnitDialog from './deleteUnitsDialog.component.tsx';
 import UnitsDialog from './unitsDialog.component.tsx';

src/catalogue/category/catalogueCategoryDialog.component.tsx

@@ -21,8 +21,8 @@ import { AxiosError } from 'axios';
 import React from 'react';
 import { Controller, FormProvider, useForm } from 'react-hook-form';
 import {
-  APIError,
   AllowedValues,
+  APIError,
   CatalogueCategory,
   CatalogueCategoryPost,
   CatalogueCategoryPostProperty,
@@ -40,6 +40,7 @@ import {
 } from '../../app.types';
 import { CatalogueCategorySchema, RequestType } from '../../form.schemas';
 import handleIMS_APIError from '../../handleIMS_APIError';
+import { createFormControlWithRootErrorClearing } from '../../utils';
 import CatalogueItemsPropertiesTable from './property/catalogueItemPropertiesTable.component';
 
 // Function to convert a list of strings to a list of numbers
@@ -139,6 +140,38 @@ function transformPostPropertyToAddProperty(
   return modifiedCatalogueItemProperty;
 }
 
+// Using `any` instead of `FieldPath` to avoid circular dependencies
+function getProperty<T extends Record<string, unknown>>(
+  obj: T,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  key: any
+) {
+  if (key === undefined) return undefined;
+
+  const keys = key.toString().split('.');
+  let current: unknown = obj;
+
+  for (const part of keys) {
+    if (current && typeof current === 'object' && part in current) {
+      current = (current as Record<string, unknown>)[part];
+    } else {
+      return undefined;
+    }
+  }
+
+  return current;
+}
+
+const formControl =
+  createFormControlWithRootErrorClearing<AddCatalogueCategoryWithPlacementIds>({
+    // @ts-expect-error: The callback is missing name, when the type exist
+    customCallback: ({ name, errors }) => {
+      if (errors && !!getProperty(errors, name)) {
+        formControl.clearErrors(name);
+      }
+    },
+  });
+
 export interface CatalogueCategoryDialogProps {
   open: boolean;
   onClose: () => void;
@@ -187,6 +220,7 @@ const CatalogueCategoryDialog = (props: CatalogueCategoryDialogProps) => {
     }, [requestType, duplicate, selectedCatalogueCategory]);
 
   const formMethods = useForm<AddCatalogueCategoryWithPlacementIds>({
+    formControl,
     resolver: zodResolver(CatalogueCategorySchema),
     defaultValues: initialCatalogueCategory,
   });
@@ -285,9 +319,7 @@ const CatalogueCategoryDialog = (props: CatalogueCategoryDialogProps) => {
     if (requestType === 'patch') {
       handleEditCatalogueCategory(transformedData);
     } else {
-      handleAddCatalogueCategory({
-        ...transformedData,
-      });
+      handleAddCatalogueCategory({ ...transformedData });
     }
   };
 

src/catalogue/category/property/propertyDialog.component.tsx

@@ -49,28 +49,6 @@ import {
 import { transformAllowedValues } from '../catalogueCategoryDialog.component';
 import AllowedValuesListTextFields from './allowedValuesListTextFields.component';
 
-// Using `any` instead of `FieldPath` to avoid circular dependencies
-function getProperty<T extends Record<string, unknown>>(
-  obj: T,
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  key: any
-) {
-  if (key === undefined) return undefined;
-
-  const keys = key.toString().split('.');
-  let current: unknown = obj;
-
-  for (const part of keys) {
-    if (current && typeof current === 'object' && part in current) {
-      current = (current as Record<string, unknown>)[part];
-    } else {
-      return undefined;
-    }
-  }
-
-  return current;
-}
-
 interface MigrationWarningMessageProps {
   isChecked: boolean;
   setIsChecked: (isChecked: boolean) => void;
@@ -155,21 +133,10 @@ const PropertyDialog = (props: PropertyDialogProps) => {
     setValue: setValueAdd,
     resetField: resetFieldAdd,
     trigger: triggerAdd,
-    clearErrors: clearErrorsAdd,
   } = formMethodsAdd;
 
   const propertyAdd = watchAdd();
 
-  // Clears form errors when a value has been changed
-  React.useEffect(() => {
-    const subscription = watchAdd((_, type) => {
-      if (type.name && !!getProperty(errorsAdd, type.name)) {
-        clearErrorsAdd(type.name);
-      }
-    });
-    return () => subscription.unsubscribe();
-  }, [clearErrorsAdd, errorsAdd, watchAdd]);
-
   const allowedValuesTypeAdd =
     propertyAdd.properties &&
     propertyAdd?.properties[index]?.allowed_values?.type;

src/catalogue/items/catalogueItemsDialog.component.test.tsx

@@ -1082,6 +1082,20 @@ describe('Catalogue Items Dialog', () => {
           )
         ).toBeInTheDocument();
       });
+
+      await user.click(screen.getByRole('button', { name: 'Back' }));
+
+      await modifyValues({
+        name: 'test',
+      });
+
+      await waitFor(() =>
+        expect(
+          screen.queryByText(
+            "There have been no changes made. Please change a field's value or press Cancel to exit."
+          )
+        ).not.toBeInTheDocument()
+      );
     });
 
     it('displays error message when editing manufacturer_id if catalogue item has child elements', async () => {
@@ -1109,8 +1123,8 @@ describe('Catalogue Items Dialog', () => {
       await waitFor(() => {
         expect(
           screen.getByText(
-            'Unable to update catalogue item properties and manufacturer '
-              + '(Manufacturer A), as the catalogue item has associated items.'
+            'Unable to update catalogue item properties and manufacturer ' +
+              '(Manufacturer A), as the catalogue item has associated items.'
           )
         ).toBeInTheDocument();
       });
@@ -1152,8 +1166,8 @@ describe('Catalogue Items Dialog', () => {
       await waitFor(() => {
         expect(
           screen.getByText(
-            'Unable to update catalogue item properties and manufacturer '
-              + '(Manufacturer A), as the catalogue item has associated items.'
+            'Unable to update catalogue item properties and manufacturer ' +
+              '(Manufacturer A), as the catalogue item has associated items.'
           )
         ).toBeInTheDocument();
       });

src/catalogue/items/catalogueItemsDialog.component.tsx

@@ -52,7 +52,10 @@ import {
 } from '../../form.schemas';
 import handleIMS_APIError from '../../handleIMS_APIError';
 import ManufacturerDialog from '../../manufacturer/manufacturerDialog.component';
-import { sortDataList } from '../../utils';
+import {
+  createFormControlWithRootErrorClearing,
+  sortDataList,
+} from '../../utils';
 
 const RECENT_MANUFACTURER_CUTOFF_TIME = 10 * 60 * 1000;
 
@@ -157,6 +160,15 @@ function convertToCatalogueItemDetailsStepPost(
   };
 }
 
+const formControlPropertiesStep =
+  createFormControlWithRootErrorClearing<PropertiesStep>();
+
+const formControlDetailsStep =
+  createFormControlWithRootErrorClearing<CatalogueItemDetailsStep>({
+    customCallback: () =>
+      formControlPropertiesStep.clearErrors('root.formError'),
+  });
+
 export interface CatalogueItemsDialogProps {
   open: boolean;
   onClose: () => void;
@@ -181,8 +193,9 @@ function CatalogueItemsDialog(props: CatalogueItemsDialogProps) {
     [parentInfo]
   );
 
-  const CatalogueItemDetailsStepFormMethods = useForm<CatalogueItemDetailsStep>(
+  const catalogueItemDetailsStepFormMethods = useForm<CatalogueItemDetailsStep>(
     {
+      formControl: formControlDetailsStep,
       resolver: zodResolver(CatalogueItemDetailsStepSchema(requestType)),
       defaultValues: toCatalogueItemDetailsStep(selectedCatalogueItem),
     }
@@ -195,10 +208,10 @@ function CatalogueItemsDialog(props: CatalogueItemsDialogProps) {
     control: controlDetailsStep,
     clearErrors: clearErrorsDetailsStep,
     reset: resetDetailsStep,
-    watch: watchDetailsStep,
-  } = CatalogueItemDetailsStepFormMethods;
+  } = catalogueItemDetailsStepFormMethods;
 
   const catalogueItemPropertiesStepFormMethods = useForm<PropertiesStep>({
+    formControl: formControlPropertiesStep,
     resolver: zodResolver(PropertiesStepSchema),
     defaultValues: {
       properties: convertToPropertyValueList(
@@ -215,7 +228,6 @@ function CatalogueItemsDialog(props: CatalogueItemsDialogProps) {
     control: controlPropertiesStep,
     clearErrors: clearErrorsPropertiesStep,
     reset: resetPropertiesStep,
-    watch: watchPropertiesStep,
     setError: setErrorPropertiesStep,
   } = catalogueItemPropertiesStepFormMethods;
 
@@ -251,21 +263,6 @@ function CatalogueItemsDialog(props: CatalogueItemsDialogProps) {
     selectedCatalogueItem?.properties,
   ]);
 
-  // Clears form errors when a value has been changed
-  React.useEffect(() => {
-    const subscription1 = watchDetailsStep(() =>
-      clearErrorsPropertiesStep('root.formError')
-    );
-    return () => subscription1.unsubscribe();
-  }, [clearErrorsPropertiesStep, watchDetailsStep]);
-
-  React.useEffect(() => {
-    const subscription = watchPropertiesStep(() =>
-      clearErrorsPropertiesStep('root.formError')
-    );
-    return () => subscription.unsubscribe();
-  }, [clearErrorsPropertiesStep, watchPropertiesStep]);
-
   const { mutateAsync: postCatalogueItem, isPending: isAddPending } =
     usePostCatalogueItem();
   const { mutateAsync: patchCatalogueItem, isPending: isEditPending } =
@@ -387,12 +384,17 @@ function CatalogueItemsDialog(props: CatalogueItemsDialogProps) {
               if (response && error.response?.status === 409) {
                 if (response.detail.includes('child elements')) {
                   // find the name of the manufacturer, so it can be used in the error message
-                  const manufacturerName = manufacturerList?.find(
-                    (manufacturer) => manufacturer.id === selectedCatalogueItem?.manufacturer_id
-                  ) || null;
+                  const manufacturerName =
+                    manufacturerList?.find(
+                      (manufacturer) =>
+                        manufacturer.id ===
+                        selectedCatalogueItem?.manufacturer_id
+                    ) || null;
                   // add the manufacturer name into the error message
-                  const childElementsMessage = "Unable to update catalogue item properties and manufacturer ("
-                    + manufacturerName?.name + "), as the catalogue item has associated items.";
+                  const childElementsMessage =
+                    'Unable to update catalogue item properties and manufacturer (' +
+                    manufacturerName?.name +
+                    '), as the catalogue item has associated items.';
                   setErrorPropertiesStep('root.formError', {
                     message: childElementsMessage,
                   });
@@ -504,10 +506,7 @@ function CatalogueItemsDialog(props: CatalogueItemsDialogProps) {
   const options = (): Array<Manufacturer & { isRecent: string }> => {
     const classifiedManufacturers = manufacturerList
       ? manufacturerList.map((option) => {
-          return {
-            ...option,
-            isRecent: 'A-Z',
-          };
+          return { ...option, isRecent: 'A-Z' };
         })
       : [];
 
@@ -521,10 +520,7 @@ function CatalogueItemsDialog(props: CatalogueItemsDialogProps) {
         return isRecent;
       })
       .map((option) => {
-        return {
-          ...option,
-          isRecent: 'Recently Added',
-        };
+        return { ...option, isRecent: 'Recently Added' };
       });
 
     /*returns them in reverse alphabetical order, since they will be sorted by "isRecent",
@@ -940,10 +936,8 @@ function CatalogueItemsDialog(props: CatalogueItemsDialogProps) {
           sx={{ marginTop: 2 }}
         >
           {STEPS.map((label, index) => {
-            const labelProps: {
-              optional?: React.ReactNode;
-              error?: boolean;
-            } = {};
+            const labelProps: { optional?: React.ReactNode; error?: boolean } =
+              {};
 
             if (isStepFailed(index)) {
               labelProps.optional = (
@@ -1002,11 +996,7 @@ function CatalogueItemsDialog(props: CatalogueItemsDialogProps) {
         )}
       </DialogActions>
       <Box
-        sx={{
-          width: '100%',
-          justifyContent: 'center',
-          alignItems: 'center',
-        }}
+        sx={{ width: '100%', justifyContent: 'center', alignItems: 'center' }}
       >
         {errorsPropertiesStep.root?.formError && (
           <FormHelperText sx={{ marginBottom: 2, textAlign: 'center' }} error>

src/common/editFileDialog.component.test.tsx

@@ -16,7 +16,7 @@ vi.mock('../handleIMS_APIError');
 
 describe('Edit file dialog', () => {
   const onClose = vi.fn();
-  let axiosPatchSpy : MockInstance;
+  let axiosPatchSpy: MockInstance;
   let props: FileDialogProps;
   let user: UserEvent;
   const createView = () => {
@@ -121,6 +121,18 @@ describe('Edit file dialog', () => {
           "There have been no changes made. Please change a field's value or press Cancel to exit."
         )
       ).toBeInTheDocument();
+
+      modifyFileValues({
+        file_name: 'test_file_name.jpeg',
+      });
+
+      await waitFor(() =>
+        expect(
+          screen.queryByText(
+            "There have been no changes made. Please change a field's value or press Cancel to exit."
+          )
+        ).not.toBeInTheDocument()
+      );
     });
 
     it('shows error message if required fields are whitespace or their current value was removed', async () => {