From edcf383b3d5e059f977bee234e9e9a07c317f19b Mon Sep 17 00:00:00 2001
From: Vineet Sharma <sharmava05@gmail.com>
Date: Thu, 14 Dec 2023 19:47:27 +0530
Subject: [PATCH] Fixed the search term and loading flows

---
 .../location-picker.component.tsx             | 19 +++++++++----
 .../location-picker.resource.ts               | 10 ++++---
 .../location-picker/location-picker.test.tsx  | 27 ++++++++++---------
 3 files changed, 34 insertions(+), 22 deletions(-)

diff --git a/packages/apps/esm-login-app/src/location-picker/location-picker.component.tsx b/packages/apps/esm-login-app/src/location-picker/location-picker.component.tsx
index f9f505335..4dda2d1c1 100644
--- a/packages/apps/esm-login-app/src/location-picker/location-picker.component.tsx
+++ b/packages/apps/esm-login-app/src/location-picker/location-picker.component.tsx
@@ -35,8 +35,14 @@ const LocationPicker: React.FC<LocationPickerProps> = () => {
   const [searchParams] = useSearchParams();
 
   const isUpdateFlow = useMemo(() => searchParams.get('update') === 'true', [searchParams]);
-  const { userDefaultLocationUuid, updateDefaultLocation, savePreference, setSavePreference, defaultLocationFhir } =
-    useDefaultLocation(isUpdateFlow, debouncedSearchQuery);
+  const {
+    isLoadingValidation,
+    userDefaultLocationUuid,
+    updateDefaultLocation,
+    savePreference,
+    setSavePreference,
+    defaultLocationFhir,
+  } = useDefaultLocation(isUpdateFlow, debouncedSearchQuery);
 
   const { user, sessionLocation } = useSession();
   const { currentUser } = useMemo(
@@ -56,6 +62,8 @@ const LocationPicker: React.FC<LocationPickerProps> = () => {
     setPage,
   } = useLoginLocations(chooseLocation.useLoginLocationTag, chooseLocation.locationsPerRequest, debouncedSearchQuery);
 
+  const isLoadingLocations = isLoading || isLoadingValidation;
+
   const locations = useMemo(() => {
     if (!defaultLocationFhir?.length || !fetchedLocations) {
       return fetchedLocations;
@@ -105,7 +113,7 @@ const LocationPicker: React.FC<LocationPickerProps> = () => {
 
   // Handle cases where the location picker is disabled, there is only one location, or there are no locations.
   useEffect(() => {
-    if (!isLoading && !searchTerm) {
+    if (!isLoadingLocations && !debouncedSearchQuery) {
       if (!config.chooseLocation.enabled || locations?.length === 1) {
         changeLocation(locations[0]?.resource.id, false);
       }
@@ -113,13 +121,14 @@ const LocationPicker: React.FC<LocationPickerProps> = () => {
         changeLocation();
       }
     }
-  }, [changeLocation, config.chooseLocation.enabled, isLoading, locations, searchTerm]);
+  }, [changeLocation, config.chooseLocation.enabled, isLoadingLocations, locations, debouncedSearchQuery]);
 
   // Handle cases where the login location is present in the userProperties.
   useEffect(() => {
     if (isUpdateFlow) {
       return;
     }
+
     if (userDefaultLocationUuid && !isSubmitting) {
       setActiveLocation(userDefaultLocationUuid);
       changeLocation(userDefaultLocationUuid, true);
@@ -178,7 +187,7 @@ const LocationPicker: React.FC<LocationPickerProps> = () => {
             value={searchTerm}
           />
           <div className={styles.searchResults}>
-            {isLoading ? (
+            {isLoadingLocations ? (
               <div className={styles.loadingContainer}>
                 <RadioButtonSkeleton className={styles.radioButtonSkeleton} role="progressbar" />
                 <RadioButtonSkeleton className={styles.radioButtonSkeleton} role="progressbar" />
diff --git a/packages/apps/esm-login-app/src/location-picker/location-picker.resource.ts b/packages/apps/esm-login-app/src/location-picker/location-picker.resource.ts
index 770de7694..594ee3856 100644
--- a/packages/apps/esm-login-app/src/location-picker/location-picker.resource.ts
+++ b/packages/apps/esm-login-app/src/location-picker/location-picker.resource.ts
@@ -158,10 +158,11 @@ export function useDefaultLocation(isUpdateFlow: boolean, searchTerm: string) {
 
   const userDefaultLocationUuid = useMemo(() => userProperties?.defaultLocation, [userProperties?.defaultLocation]);
 
-  const { isLocationValid, location: defaultLocationFhir } = useValidateLocationUuid(
-    userDefaultLocationUuid,
-    searchTerm,
-  );
+  const {
+    isLoading: isLoadingValidation,
+    isLocationValid,
+    location: defaultLocationFhir,
+  } = useValidateLocationUuid(userDefaultLocationUuid, searchTerm);
 
   useEffect(() => {
     if (userDefaultLocationUuid) {
@@ -218,6 +219,7 @@ export function useDefaultLocation(isUpdateFlow: boolean, searchTerm: string) {
   );
 
   return {
+    isLoadingValidation,
     defaultLocationFhir,
     userDefaultLocationUuid: isLocationValid ? userDefaultLocationUuid : null,
     updateDefaultLocation,
diff --git a/packages/apps/esm-login-app/src/location-picker/location-picker.test.tsx b/packages/apps/esm-login-app/src/location-picker/location-picker.test.tsx
index 52a6a7395..397fd8d8e 100644
--- a/packages/apps/esm-login-app/src/location-picker/location-picker.test.tsx
+++ b/packages/apps/esm-login-app/src/location-picker/location-picker.test.tsx
@@ -351,21 +351,22 @@ describe('LocationPicker', () => {
 
     const radios = screen.getAllByRole('radio');
     expect(radios[0].getAttribute('id')).toBe('Community Outreach');
-    expect(radios[0]).toHaveAttribute('checked');
+    // @ts-ignore
+    expect(radios[0].checked).toBe(true);
   });
 
-  // it("should not show default location if the searched term doesn't matches the default location", async () => {
-  //   const user = userEvent.setup();
-  //   await act(() => {
-  //     renderWithRouter(LocationPicker, {});
-  //   });
+  it("should not show default location if the searched term doesn't matches the default location", async () => {
+    const user = userEvent.setup();
+    await act(() => {
+      renderWithRouter(LocationPicker, {});
+    });
 
-  //   const searchBox = screen.getByRole('searchbox', {
-  //     name: /search for a location/i,
-  //   });
-  //   await user.type(searchBox, 'site');
-  //   expect(searchBox.getAttribute('value')).toBe('site');
+    const searchBox = screen.getByRole('searchbox', {
+      name: /search for a location/i,
+    });
+    await user.type(searchBox, 'site');
+    expect(searchBox.getAttribute('value')).toBe('site');
 
-  //   expect(screen.queryByRole('radio', { name: new RegExp(/community outreach/, 'i') })).not.toBeInTheDocument();
-  // });
+    expect(screen.queryByRole('radio', { name: new RegExp(/community outreach/, 'i') })).not.toBeInTheDocument();
+  });
 });