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

@@ -19,10 +19,15 @@ import {
 } from '@mui/material';
 import { AxiosError } from 'axios';
 import React from 'react';
-import { Controller, FormProvider, useForm } from 'react-hook-form';
 import {
-  APIError,
+  Controller,
+  createFormControl,
+  FormProvider,
+  useForm,
+} from 'react-hook-form';
+import {
   AllowedValues,
+  APIError,
   CatalogueCategory,
   CatalogueCategoryPost,
   CatalogueCategoryPostProperty,
@@ -139,6 +144,39 @@ 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 } =
+  createFormControl<AddCatalogueCategoryWithPlacementIds>();
+
+formControl.subscribe({
+  // @ts-expect-error: The callback is missing name, when the type exist
+  callback: ({ name, errors }) => {
+    if (errors && !!getProperty(errors, name)) {
+      formControl.clearErrors(name);
+    }
+  },
+});
+
 export interface CatalogueCategoryDialogProps {
   open: boolean;
   onClose: () => void;
@@ -187,6 +225,7 @@ const CatalogueCategoryDialog = (props: CatalogueCategoryDialogProps) => {
     }, [requestType, duplicate, selectedCatalogueCategory]);
 
   const formMethods = useForm<AddCatalogueCategoryWithPlacementIds>({
+    formControl,
     resolver: zodResolver(CatalogueCategorySchema),
     defaultValues: initialCatalogueCategory,
   });
@@ -285,9 +324,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.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,12 @@ function convertToCatalogueItemDetailsStepPost(
   };
 }
 
+const formControlDetailsStep =
+  createFormControlWithRootErrorClearing<CatalogueItemDetailsStep>();
+
+const formControlPropertiesStep =
+  createFormControlWithRootErrorClearing<PropertiesStep>();
+
 export interface CatalogueItemsDialogProps {
   open: boolean;
   onClose: () => void;
@@ -181,8 +190,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 +205,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 +225,6 @@ function CatalogueItemsDialog(props: CatalogueItemsDialogProps) {
     control: controlPropertiesStep,
     clearErrors: clearErrorsPropertiesStep,
     reset: resetPropertiesStep,
-    watch: watchPropertiesStep,
     setError: setErrorPropertiesStep,
   } = catalogueItemPropertiesStepFormMethods;
 
@@ -251,21 +260,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 +381,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 +503,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 +517,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 +933,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 +993,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.tsx

@@ -27,8 +27,13 @@ import {
 } from '../api/api.types';
 import { FileSchemaPatch } from '../form.schemas';
 import handleIMS_APIError from '../handleIMS_APIError';
-import { getNameAndExtension } from '../utils';
+import {
+  createFormControlWithRootErrorClearing,
+  getNameAndExtension,
+} from '../utils';
 
+const formControl =
+  createFormControlWithRootErrorClearing<ObjectFilePatchBase>();
 export interface BaseFileDialogProps {
   open: boolean;
   onClose: () => void;
@@ -75,11 +80,11 @@ const EditFileDialog = (props: FileDialogProps) => {
     handleSubmit,
     register,
     formState: { errors },
-    watch,
     setError,
     clearErrors,
     reset,
   } = useForm<ObjectFilePatchBase>({
+    formControl,
     resolver: zodResolver(FileSchemaPatch),
     defaultValues: initialFile,
   });
@@ -89,14 +94,6 @@ const EditFileDialog = (props: FileDialogProps) => {
     reset(initialFile);
   }, [initialFile, reset]);
 
-  // Clears form errors when a value has been changed
-  React.useEffect(() => {
-    if (errors.root?.formError) {
-      const subscription = watch(() => clearErrors('root.formError'));
-      return () => subscription.unsubscribe();
-    }
-  }, [clearErrors, errors, selectedFile, watch]);
-
   const handleClose = React.useCallback(() => {
     reset();
     clearErrors();