O3-953: Location picker does not show all locations

packages/apps/esm-login-app/src/choose-location/choose-location.component.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useCallback, useEffect } from "react";
+import React, { useCallback, useEffect } from "react";
 import LoadingIcon from "../loading/loading.component";
 import LocationPicker from "../location-picker/location-picker.component";
 import { RouteComponentProps } from "react-router-dom";
@@ -7,9 +7,8 @@ import {
   useConfig,
   setSessionLocation,
 } from "@openmrs/esm-framework";
-import { queryLocations } from "./choose-location.resource";
+import { useLoginLocations } from "./choose-location.resource";
 import { useCurrentUser } from "../CurrentUserContext";
-import { LocationEntry } from "../types";
 import type { StaticContext } from "react-router";
 
 export interface LoginReferrer {
@@ -29,9 +28,9 @@ export const ChooseLocation: React.FC<ChooseLocationProps> = ({
   const referrer = location?.state?.referrer;
   const config = useConfig();
   const user = useCurrentUser();
-  const [loginLocations, setLoginLocations] =
-    useState<Array<LocationEntry>>(null);
-  const [isLoading, setIsLoading] = useState(true);
+  const { locationData, isLoading } = useLoginLocations(
+    config.chooseLocation.useLoginLocationTag
+  );
 
   const changeLocation = useCallback(
     (locationUuid?: string) => {
@@ -54,32 +53,28 @@ export const ChooseLocation: React.FC<ChooseLocationProps> = ({
   );
 
   useEffect(() => {
-    if (isLoginEnabled) {
-      const ac = new AbortController();
-      queryLocations("", ac, config.chooseLocation.useLoginLocationTag).then(
-        (locations) => setLoginLocations(locations)
-      );
-      return () => ac.abort();
-    }
-  }, [isLoginEnabled]);
-
-  useEffect(() => {
-    if (loginLocations) {
-      if (!config.chooseLocation.enabled || loginLocations.length < 2) {
-        changeLocation(loginLocations[0]?.resource.id);
-      } else {
-        setIsLoading(false);
+    if (!isLoading) {
+      if (!config.chooseLocation.enabled || locationData.length === 1) {
+        changeLocation(locationData[0]?.resource.id);
+      }
+      if (!isLoading && !locationData.length) {
+        changeLocation();
       }
     }
-  }, [loginLocations, user, changeLocation, config.chooseLocation.enabled]);
+  }, [
+    locationData,
+    user,
+    changeLocation,
+    config.chooseLocation.enabled,
+    isLoading,
+  ]);
 
   if (!isLoading || !isLoginEnabled) {
     return (
       <LocationPicker
         currentUser={user.display}
-        loginLocations={loginLocations ?? []}
+        loginLocations={locationData ?? []}
         onChangeLocation={changeLocation}
-        searchLocations={queryLocations}
         isLoginEnabled={isLoginEnabled}
       />
     );

packages/apps/esm-login-app/src/choose-location/choose-location.resource.ts

@@ -1,40 +1,85 @@
+import { useEffect, useMemo } from "react";
 import {
   openmrsFetch,
-  openmrsObservableFetch,
   fhirBaseUrl,
+  FetchResponse,
+  showNotification,
 } from "@openmrs/esm-framework";
-import { map } from "rxjs/operators";
-import { LocationResponse } from "../types";
+import { LocationEntry, LocationResponse } from "../types";
+import useSwrInfinite from "swr/infinite";
 
-export function getLoginLocations(): Observable<Object[]> {
-  return openmrsObservableFetch(
-    `/ws/rest/v1/location?tag=Login%20Location&v=custom:(uuid,display)`
-  ).pipe(map(({ data }) => data["results"]));
-}
+const fhirLocationUrl = `${fhirBaseUrl}/Location?_summary=data`;
 
-export function searchLocationsFhir(
-  location: string,
-  abortController: AbortController,
-  useLoginLocationTag: boolean
-) {
-  const baseUrl = `${fhirBaseUrl}/Location?name=${location}`;
-  const url = useLoginLocationTag
-    ? baseUrl.concat("&_tag=login location")
-    : baseUrl;
-  return openmrsFetch<LocationResponse>(url, {
-    method: "GET",
-    signal: abortController.signal,
-  });
-}
+export function useLoginLocations(
+  useLoginLocationTag: boolean,
+  count: number = 0,
+  searchQuery: string = ""
+): {
+  locationData: Array<LocationEntry>;
+  isLoading: boolean;
+  totalResults: number;
+  hasMore: boolean;
+  loadingNewData: boolean;
+  setPage: (
+    size: number | ((_size: number) => number)
+  ) => Promise<FetchResponse<LocationResponse>[]>;
+} {
+  const getUrl = (page, prevPageData: FetchResponse<LocationResponse>) => {
+    if (
+      prevPageData &&
+      !prevPageData?.data?.link?.some((link) => link.relation === "next")
+    )
+      return null;
+    let url = fhirLocationUrl;
+    if (count) {
+      url += `&_count=${count}`;
+    }
+    if (page) {
+      url += `&_getpagesoffset=${page * count}`;
+    }
+    if (useLoginLocationTag) {
+      url += "&_tag=login location";
+    }
+    if (typeof searchQuery === "string" && searchQuery != "") {
+      url += `&name=${searchQuery}`;
+    }
+    return url;
+  };
+
+  const { data, isValidating, size, setSize, error } = useSwrInfinite<
+    FetchResponse<LocationResponse>,
+    Error
+  >(getUrl, openmrsFetch);
+
+  if (error) {
+    console.error(error.message);
+    showNotification({
+      title: error.name,
+      description: error.message,
+      kind: "error",
+    });
+  }
+
+  useEffect(() => {
+    setSize(1);
+  }, [searchQuery, setSize]);
+
+  const returnValue = useMemo(() => {
+    return {
+      locationData: data
+        ? [].concat(...data?.map((resp) => resp?.data?.entry))
+        : null,
+      isLoading: !data,
+      totalResults: data?.[0]?.data?.total ?? null,
+      hasMore: data?.length
+        ? data?.[data.length - 1]?.data?.link.some(
+            (link) => link.relation === "next"
+          )
+        : false,
+      loadingNewData: isValidating,
+      setPage: setSize,
+    };
+  }, [data, isValidating, setSize]);
 
-export function queryLocations(
-  location: string,
-  abortController = new AbortController(),
-  useLoginLocationTag: boolean
-) {
-  return searchLocationsFhir(
-    location,
-    abortController,
-    useLoginLocationTag
-  ).then((locs) => locs.data.entry);
+  return returnValue;
 }

packages/apps/esm-login-app/src/config-schema.ts

@@ -36,6 +36,12 @@ export const configSchema = {
       _default: 8,
       _description: "The number of locations displayed on location picker",
     },
+    locationsPerRequest: {
+      _type: Type.Number,
+      _default: 50,
+      _description:
+        "The number of results to be fetched in each cycle of the infinite scroll",
+    },
     useLoginLocationTag: {
       _type: Type.Boolean,
       _default: true,