(fix) Fix more react hooks exhaustive deps warnings

I don't know why these didn't show up in #1380, but they're fixed now.
openmrs · Nov 26, 2024 · 0644261 · 0644261
1 parent 4d7f15d
commit 0644261
Show file tree

Hide file tree

Showing 19 changed files with 173 additions and 145 deletions.
diff --git a/...rc/patient-registration/field/date-and-time-of-death/date-and-time-of-death.component.tsx b/...rc/patient-registration/field/date-and-time-of-death/date-and-time-of-death.component.tsx
@@ -35,7 +35,7 @@ function DeathDateField() {
         selectedDate ? dayjs(selectedDate).hour(0).minute(0).second(0).millisecond(0).toDate() : undefined,
       );
     },
-    [deathDate],
+    [setFieldValue],
   );
 
   return (

diff --git a/packages/esm-patient-registration-app/src/patient-registration/field/dob/dob.component.tsx b/packages/esm-patient-registration-app/src/patient-registration/field/dob/dob.component.tsx
@@ -41,7 +41,7 @@ export const DobField: React.FC = () => {
       setFieldValue('monthsEstimated', '');
       setFieldTouched('birthdateEstimated', true, false);
     },
-    [setFieldValue],
+    [setFieldTouched, setFieldValue],
   );
 
   const onDateChange = useCallback(

diff --git a/...esm-patient-registration-app/src/patient-registration/field/name/name-field.component.tsx b/...esm-patient-registration-app/src/patient-registration/field/name/name-field.component.tsx
@@ -3,9 +3,9 @@ import { useTranslation } from 'react-i18next';
 import { ContentSwitcher, Switch } from '@carbon/react';
 import { useField } from 'formik';
 import { ExtensionSlot, useConfig } from '@openmrs/esm-framework';
+import { type RegistrationConfig } from '../../../config-schema';
 import { Input } from '../../input/basic-input/input/input.component';
 import { PatientRegistrationContext } from '../../patient-registration-context';
-import { type RegistrationConfig } from '../../../config-schema';
 import styles from '../field.scss';
 
 export const unidentifiedPatientAttributeTypeUuid = '8b56eac7-5c76-4b9c-8c6f-1deab8d3fc47';
@@ -51,7 +51,7 @@ export const NameField = () => {
         setFieldTouched('photo', true, false);
       }
     },
-    [setCapturePhotoProps],
+    [setCapturePhotoProps, setFieldTouched],
   );
 
   const toggleNameKnown = (e) => {

diff --git a/...c/patient-registration/field/person-attributes/coded-person-attribute-field.component.tsx b/...c/patient-registration/field/person-attributes/coded-person-attribute-field.component.tsx
@@ -3,10 +3,10 @@ import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
 import { Field } from 'formik';
 import { Layer, Select, SelectItem } from '@carbon/react';
+import { reportError } from '@openmrs/esm-framework';
 import { type PersonAttributeTypeResponse } from '../../patient-registration.types';
 import { useConceptAnswers } from '../field.resource';
 import styles from './../field.scss';
-import { reportError } from '@openmrs/esm-framework';
 
 export interface CodedPersonAttributeFieldProps {
   id: string;
@@ -44,7 +44,7 @@ export function CodedPersonAttributeField({
       );
       setError(true);
     }
-  }, [answerConceptSetUuid, customConceptAnswers]);
+  }, [answerConceptSetUuid, customConceptAnswers, id, t]);
 
   useEffect(() => {
     if (!isLoadingConceptAnswers && !customConceptAnswers.length) {
@@ -72,7 +72,7 @@ export function CodedPersonAttributeField({
         setError(true);
       }
     }
-  }, [isLoadingConceptAnswers, conceptAnswers, customConceptAnswers]);
+  }, [isLoadingConceptAnswers, conceptAnswers, customConceptAnswers, t, id, answerConceptSetUuid]);
 
   const answers = useMemo(() => {
     if (customConceptAnswers.length) {

diff --git a/packages/esm-patient-registration-app/src/patient-registration/patient-registration-hooks.ts b/packages/esm-patient-registration-app/src/patient-registration/patient-registration-hooks.ts
@@ -1,14 +1,15 @@
+import { type Dispatch, useEffect, useMemo, useState } from 'react';
 import {
   type FetchResponse,
+  type OpenmrsResource,
   getSynchronizationItems,
   openmrsFetch,
-  type OpenmrsResource,
   restBaseUrl,
   useConfig,
   usePatient,
 } from '@openmrs/esm-framework';
 import camelCase from 'lodash-es/camelCase';
-import { type Dispatch, useEffect, useMemo, useState } from 'react';
+import dayjs from 'dayjs';
 import useSWR from 'swr';
 import { v4 } from 'uuid';
 import { type RegistrationConfig } from '../config-schema';
@@ -29,7 +30,15 @@ import {
   latestFirstEncounter,
 } from './patient-registration-utils';
 import { useInitialPatientRelationships } from './section/patient-relationships/relationships.resource';
-import dayjs from 'dayjs';
+
+interface DeathInfoResults {
+  uuid: string;
+  display: string;
+  causeOfDeath: OpenmrsResource | null;
+  dead: boolean;
+  deathDate: string;
+  causeOfDeathNonCoded: string | null;
+}
 
 export function useInitialFormValues(patientUuid: string): [FormValues, Dispatch<FormValues>] {
   const { freeTextFieldConceptUuid } = useConfig<RegistrationConfig>();
@@ -99,7 +108,7 @@ export function useInitialFormValues(patientUuid: string): [FormValues, Dispatch
         setInitialFormValues(registration._patientRegistrationData.formValues);
       }
     })();
-  }, [isLoadingPatientToEdit, patientToEdit, patientUuid]);
+  }, [initialFormValues, isLoadingPatientToEdit, patientToEdit, patientUuid]);
 
   // Set initial patient death info
   useEffect(() => {
@@ -118,7 +127,7 @@ export function useInitialFormValues(patientUuid: string): [FormValues, Dispatch
         nonCodedCauseOfDeath: deathInfo.causeOfDeathNonCoded,
       }));
     }
-  }, [isLoadingDeathInfo, deathInfo, setInitialFormValues]);
+  }, [isLoadingDeathInfo, deathInfo, setInitialFormValues, freeTextFieldConceptUuid]);
 
   // Set initial patient relationships
   useEffect(() => {
@@ -187,7 +196,7 @@ export function useInitialAddressFieldValues(patientUuid: string, fallback = {})
         setInitialAddressFieldValues(registration?._patientRegistrationData.initialAddressFieldValues ?? fallback);
       }
     })();
-  }, [isLoading, patient, patientUuid]);
+  }, [fallback, initialAddressFieldValues, isLoading, patient, patientUuid]);
 
   return [initialAddressFieldValues, setInitialAddressFieldValues];
 }
@@ -208,7 +217,7 @@ export function usePatientUuidMap(
         setPatientUuidMap(registration?._patientRegistrationData.initialAddressFieldValues ?? fallback),
       );
     }
-  }, [isLoadingPatientToEdit, patientToEdit, patientUuid]);
+  }, [fallback, isLoadingPatientToEdit, patientToEdit, patientUuid, patientUuidMap]);
 
   useEffect(() => {
     if (attributes) {
@@ -263,7 +272,7 @@ export function useInitialPatientIdentifiers(patientUuid: string): {
       data: identifiers,
       isLoading,
     };
-  }, [data, error]);
+  }, [data?.data?.results, isLoading]);
 
   return result;
 }
@@ -299,19 +308,10 @@ function useInitialPersonAttributes(personUuid: string) {
       data: data?.data?.results,
       isLoading,
     };
-  }, [data, error]);
+  }, [data?.data?.results, isLoading]);
   return result;
 }
 
-interface DeathInfoResults {
-  uuid: string;
-  display: string;
-  causeOfDeath: OpenmrsResource | null;
-  dead: boolean;
-  deathDate: string;
-  causeOfDeathNonCoded: string | null;
-}
-
 function useInitialPersonDeathInfo(personUuid: string) {
   const { data, error, isLoading } = useSWR<FetchResponse<DeathInfoResults>, Error>(
     !!personUuid
@@ -325,7 +325,7 @@ function useInitialPersonDeathInfo(personUuid: string) {
       data: data?.data,
       isLoading,
     };
-  }, [data, error]);
+  }, [data?.data, isLoading]);
   return result;
 }
 

diff --git a/...tion-app/src/patient-registration/section/demographics/demographics-section.component.tsx b/...tion-app/src/patient-registration/section/demographics/demographics-section.component.tsx
@@ -1,8 +1,8 @@
 import React, { useContext, useEffect } from 'react';
-import styles from './../section.scss';
 import { useField } from 'formik';
-import { PatientRegistrationContext } from '../../patient-registration-context';
 import { Field } from '../../field/field.component';
+import { PatientRegistrationContext } from '../../patient-registration-context';
+import styles from './../section.scss';
 
 export interface DemographicsSectionProps {
   fields: Array<string>;
@@ -18,7 +18,7 @@ export const DemographicsSection: React.FC<DemographicsSectionProps> = ({ fields
       setFieldValue('additionalMiddleName', '');
       setFieldValue('additionalFamilyName', '');
     }
-  }, [field.value, meta.touched]);
+  }, [field.value, meta.touched, setFieldValue]);
 
   return (
     <section className={styles.formSection} aria-label="Demographics Section">

diff --git a/...ion-app/src/patient-registration/section/patient-relationships/relationships.resource.tsx b/...ion-app/src/patient-registration/section/patient-relationships/relationships.resource.tsx
@@ -4,6 +4,33 @@ import { type FetchResponse, openmrsFetch, restBaseUrl } from '@openmrs/esm-fram
 import { type RelationshipValue } from '../../patient-registration.types';
 import { personRelationshipRepresentation } from '../../../constants';
 
+export interface Relationship {
+  display: string;
+  uuid: string;
+  personA: {
+    age: number;
+    display: string;
+    birthdate: string;
+    uuid: string;
+  };
+  personB: {
+    age: number;
+    display: string;
+    birthdate: string;
+    uuid: string;
+  };
+  relationshipType: {
+    uuid: string;
+    display: string;
+    aIsToB: string;
+    bIsToA: string;
+  };
+}
+
+interface RelationshipsResponse {
+  results: Array<Relationship>;
+}
+
 export function useInitialPatientRelationships(patientUuid: string): {
   data: Array<RelationshipValue>;
   isLoading: boolean;
@@ -45,34 +72,7 @@ export function useInitialPatientRelationships(patientUuid: string): {
       error,
       isLoading,
     };
-  }, [patientUuid, data, error]);
+  }, [data?.data?.results, error, isLoading, patientUuid]);
 
   return result;
 }
-
-export interface Relationship {
-  display: string;
-  uuid: string;
-  personA: {
-    age: number;
-    display: string;
-    birthdate: string;
-    uuid: string;
-  };
-  personB: {
-    age: number;
-    display: string;
-    birthdate: string;
-    uuid: string;
-  };
-  relationshipType: {
-    uuid: string;
-    display: string;
-    aIsToB: string;
-    bIsToA: string;
-  };
-}
-
-interface RelationshipsResponse {
-  results: Array<Relationship>;
-}
diff --git a/...es/esm-patient-search-app/src/compact-patient-search/compact-patient-search.component.tsx b/...es/esm-patient-search-app/src/compact-patient-search/compact-patient-search.component.tsx
@@ -96,7 +96,7 @@ const CompactPatientSearchComponent: React.FC<CompactPatientSearchProps> = ({
         });
       }
     },
-    [config.search.patientChartUrl, user, currentLocation],
+    [addViewedPatientAndCloseSearchResults, config.search.patientChartUrl],
   );
   const focusedResult = useArrowNavigation(
     !recentPatients ? searchedPatients?.length ?? 0 : recentPatients?.length ?? 0,
@@ -134,7 +134,7 @@ const CompactPatientSearchComponent: React.FC<CompactPatientSearchProps> = ({
         subtitle: errorFetchingUserProperties?.message,
       });
     }
-  }, [fetchError, errorFetchingUserProperties]);
+  }, [fetchError, errorFetchingUserProperties, t]);
 
   const handleSubmit = useCallback(
     (debouncedSearchTerm) => {

diff --git a/...ages/esm-patient-search-app/src/patient-search-button/patient-search-button.component.tsx b/...ages/esm-patient-search-app/src/patient-search-button/patient-search-button.component.tsx
@@ -1,7 +1,7 @@
+import React, { useCallback, useEffect } from 'react';
 import { Button } from '@carbon/react';
 import { Search } from '@carbon/react/icons';
 import { launchWorkspace } from '@openmrs/esm-framework';
-import React, { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { type PatientSearchWorkspaceProps } from '../patient-search-workspace/patient-search.workspace';
 
@@ -37,7 +37,7 @@ const PatientSearchButton: React.FC<PatientSearchButtonProps> = ({
 }) => {
   const { t } = useTranslation();
 
-  const launchPatientSearchWorkspace = () => {
+  const launchPatientSearchWorkspace = useCallback(() => {
     const workspaceProps: PatientSearchWorkspaceProps = {
       handleSearchTermUpdated: searchQueryUpdatedAction,
       initialQuery: searchQuery,
@@ -47,13 +47,13 @@ const PatientSearchButton: React.FC<PatientSearchButtonProps> = ({
       ...workspaceProps,
       workspaceTitle: overlayHeader,
     });
-  };
+  }, [overlayHeader, searchQuery, searchQueryUpdatedAction, selectPatientAction]);
 
   useEffect(() => {
     if (isOpen) {
       launchPatientSearchWorkspace();
     }
-  }, [isOpen]);
+  }, [isOpen, launchPatientSearchWorkspace]);
 
   return (
     <Button

diff --git a/packages/esm-patient-search-app/src/patient-search-workspace/patient-search.workspace.tsx b/packages/esm-patient-search-app/src/patient-search-workspace/patient-search.workspace.tsx
@@ -1,8 +1,8 @@
-import { useConfig, useDebounce } from '@openmrs/esm-framework';
 import React, { useCallback, useState } from 'react';
+import { useConfig, useDebounce } from '@openmrs/esm-framework';
 import { type PatientSearchConfig } from '../config-schema';
-import PatientSearchBar from '../patient-search-bar/patient-search-bar.component';
 import { PatientSearchContext, type PatientSearchContextProps } from '../patient-search-context';
+import PatientSearchBar from '../patient-search-bar/patient-search-bar.component';
 import AdvancedPatientSearchComponent from '../patient-search-page/advanced-patient-search.component';
 
 export interface PatientSearchWorkspaceProps extends PatientSearchContextProps {
@@ -28,10 +28,13 @@ const PatientSearchWorkspace: React.FC<PatientSearchWorkspaceProps> = ({
 
   const handleClearSearchTerm = useCallback(() => setSearchTerm(''), [setSearchTerm]);
 
-  const onSearchTermChange = useCallback((value: string) => {
-    setSearchTerm(value);
-    handleSearchTermUpdated && handleSearchTermUpdated(value);
-  }, []);
+  const onSearchTermChange = useCallback(
+    (value: string) => {
+      setSearchTerm(value);
+      handleSearchTermUpdated && handleSearchTermUpdated(value);
+    },
+    [handleSearchTermUpdated],
+  );
 
   return (
     <PatientSearchContext.Provider value={{ nonNavigationSelectPatientAction, patientClickSideEffect }}>

diff --git a/packages/esm-patient-search-app/src/patient-search.resource.tsx b/packages/esm-patient-search-app/src/patient-search.resource.tsx
@@ -92,7 +92,7 @@ export function useInfinitePatientSearch(
       currentPage: size,
       totalResults: data?.[0]?.data?.totalCount ?? 0,
     }),
-    [data, isLoading, isValidating, error, setSize, size],
+    [mappedData, isLoading, error, data, isValidating, setSize, size],
   );
 }
 
@@ -120,7 +120,10 @@ export function useRecentlyViewedPatients(showRecentlySearchedPatients: boolean
   );
 
   const userProperties = data?.data?.userProperties;
-  const patientsVisited = userProperties?.patientsVisited?.split(',').filter(Boolean) ?? [];
+  const patientsVisited = useMemo(
+    () => userProperties?.patientsVisited?.split(',').filter(Boolean) ?? [],
+    [userProperties],
+  );
 
   const updateRecentlyViewedPatients = useCallback(
     (patientUuid: string) => {
@@ -138,7 +141,7 @@ export function useRecentlyViewedPatients(showRecentlySearchedPatients: boolean
         },
       });
     },
-    [patientsVisited, userProperties],
+    [patientsVisited, url, userProperties],
   );
 
   return useMemo(
@@ -149,7 +152,7 @@ export function useRecentlyViewedPatients(showRecentlySearchedPatients: boolean
       updateRecentlyViewedPatients,
       mutateUserProperties: mutate,
     }),
-    [data, error, mutate],
+    [error, isLoading, mutate, patientsVisited, updateRecentlyViewedPatients],
   );
 }
 
@@ -213,6 +216,6 @@ export function useRestPatients(
       currentPage: size,
       totalResults: patientUuids?.length ?? 0,
     }),
-    [data, isLoading, isValidating, error, setSize, size, patientUuids],
+    [mappedData, isLoading, error, patientUuids, size, isValidating, setSize],
   );
 }