@digihmis/esm-patient-registration-app 1.0.0

package/src/search-bar/search-bar.component.tsx

@@ -0,0 +1,285 @@
+import React, { useState, useCallback, useRef, useEffect, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { UserFollow } from '@carbon/react/icons';
+import { Button, Column, Search, Tile } from '@carbon/react';
+import { navigate } from '@openmrs/esm-framework';
+import VisitSummaryTile from '../visit-summary/visit-summary.component';
+import { EmptySvg } from '../empty-svg/empty-svg.component';
+import { baseSpaPath } from '../constants';
+import styles from './search-bar.scss';
+import { useInfinitePatientSearch, useRecentlyViewedPatients, useRestPatients } from './search-bar.resource';
+import Loader from '../components/custom-card/custom-loader.component';
+import CompactPatientBanner from '../components/custom-card/compact-patient-banner.component';
+import { PatientSearchContextProvider } from '../components/custom-card/patient-search-context';
+import ActiveVisitsTable from '../active-visit-table/active-visit-table.component';
+
+const SearchBar: React.FC = () => {
+  const { t } = useTranslation();
+  const [searchTerm, setSearchTerm] = useState('');
+  const [debouncedSearchTerm, setDebouncedSearchTerm] = useState('');
+  const [showResults, setShowResults] = useState(false);
+  const [isInputFocused, setIsInputFocused] = useState(false);
+  const resultsRef = useRef<HTMLDivElement>(null);
+  const searchInputRef = useRef<HTMLInputElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedSearchTerm(searchTerm);
+    }, 300);
+
+    return () => clearTimeout(timer);
+  }, [searchTerm]);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
+        setIsInputFocused(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  const isSearchActive = debouncedSearchTerm.trim().length > 0;
+
+  const {
+    data: searchResults,
+    isLoading: isSearchLoading,
+    fetchError: searchError,
+    hasMore,
+    isValidating,
+    setPage,
+    currentPage,
+    totalResults,
+  } = useInfinitePatientSearch(debouncedSearchTerm, false, isSearchActive, 10);
+
+  const {
+    recentlyViewedPatientUuids,
+    updateRecentlyViewedPatients,
+    isLoadingPatients: isLoadingRecent,
+  } = useRecentlyViewedPatients(true);
+
+  const { data: recentPatients, isLoading: isLoadingRecentDetails } = useRestPatients(
+    recentlyViewedPatientUuids,
+    recentlyViewedPatientUuids.length > 0,
+    10,
+  );
+
+  // Filter out deceased patients from recently viewed
+  const filteredRecentPatients = useMemo(() => {
+    if (!recentPatients) {
+      return null;
+    }
+    return recentPatients.filter((patient) => !patient?.person?.dead);
+  }, [recentPatients]);
+
+  const handleSearchChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+    setSearchTerm(value);
+    setShowResults(value.trim().length > 0);
+  }, []);
+
+  const handleSearch = useCallback(() => {
+    if (searchTerm.trim()) {
+      setShowResults(true);
+      setIsInputFocused(true);
+    }
+  }, [searchTerm]);
+
+  const handleClearSearch = useCallback(() => {
+    setSearchTerm('');
+    setDebouncedSearchTerm('');
+    setShowResults(false);
+  }, []);
+
+  const handleNavigateToRegisterPatient = useCallback(() => {
+    navigate({ to: `${baseSpaPath}/patient-registration` });
+  }, []);
+
+  const handleLoadMore = useCallback(() => {
+    if (hasMore && !isValidating) {
+      setPage(currentPage + 1);
+    }
+  }, [hasMore, isValidating, setPage, currentPage]);
+
+  const handleInputFocus = useCallback(() => {
+    setIsInputFocused(true);
+  }, []);
+
+  useEffect(() => {
+    const resultsContainer = resultsRef.current;
+    if (!resultsContainer) {
+      return;
+    }
+
+    const handleScroll = () => {
+      const { scrollTop, scrollHeight, clientHeight } = resultsContainer;
+      if (scrollHeight - scrollTop <= clientHeight * 1.5) {
+        handleLoadMore();
+      }
+    };
+
+    resultsContainer.addEventListener('scroll', handleScroll);
+    return () => resultsContainer.removeEventListener('scroll', handleScroll);
+  }, [handleLoadMore]);
+
+  const handleKeyPress = useCallback(
+    (e: React.KeyboardEvent<HTMLInputElement>) => {
+      if (e.key === 'Enter') {
+        handleSearch();
+      }
+      if (e.key === 'Escape') {
+        setIsInputFocused(false);
+      }
+    },
+    [handleSearch],
+  );
+
+  // Updated to use filteredRecentPatients
+  const showEmptyState = !isInputFocused && !searchTerm.trim();
+  const showRecentlyViewed =
+    isInputFocused && !searchTerm.trim() && filteredRecentPatients && filteredRecentPatients.length > 0;
+  const showRecentLoading = isInputFocused && !searchTerm.trim() && (isLoadingRecent || isLoadingRecentDetails);
+  const showSearchLoading = isSearchLoading && isSearchActive && isInputFocused;
+  const showNoResults =
+    isInputFocused &&
+    showResults &&
+    !isSearchLoading &&
+    (!searchResults || searchResults.length === 0) &&
+    debouncedSearchTerm.trim();
+  const showSearchResults = isInputFocused && showResults && searchResults && searchResults.length > 0;
+
+  const patientSearchContextValue = {
+    patientClickSideEffect: (patientUuid: string) => {
+      updateRecentlyViewedPatients(patientUuid);
+      setIsInputFocused(false);
+    },
+  };
+
+  return (
+    <PatientSearchContextProvider value={patientSearchContextValue}>
+      <div ref={containerRef}>
+        <Tile className={styles.patientSearchTile}>
+          <VisitSummaryTile />
+
+          <div className={styles.searchForm}>
+            <div className={styles.searchRow}>
+              <Column className={styles.identifierNumberColumn}>
+                <div className={styles.searchInputContainer}>
+                  <Search
+                    ref={searchInputRef}
+                    labelText={t('enterIdentifierNumber', 'Enter identifier number')}
+                    className={styles.formSearch}
+                    placeholder={t('enterIdentifierNumber', 'Enter identifier number')}
+                    id="formSearchHealthWorkers"
+                    size="lg"
+                    value={searchTerm}
+                    onChange={handleSearchChange}
+                    onKeyPress={handleKeyPress}
+                    onClear={handleClearSearch}
+                    onFocus={handleInputFocus}
+                  />
+                  <Button
+                    kind="secondary"
+                    size="lg"
+                    className={styles.attachedSearchButton}
+                    onClick={handleSearch}
+                    disabled={!searchTerm.trim()}>
+                    {t('search', 'Search')}
+                  </Button>
+                  <div className={styles.registrationButton} />
+                  <Button kind="primary" size="lg" renderIcon={UserFollow} onClick={handleNavigateToRegisterPatient}>
+                    {t('registerAPatient', 'Register a patient')}
+                  </Button>
+                </div>
+              </Column>
+            </div>
+          </div>
+
+          {showEmptyState && (
+            <div className={styles.emptyStateContainer}>
+              <EmptySvg />
+              <div className={styles.title}>{t('searchForPatient', 'Search for a patient')}</div>
+              <div className={styles.subTitle}>
+                {t('enterIdOrScanCard', 'Enter an ID number or scan the patient card')}
+              </div>
+            </div>
+          )}
+
+          {(showRecentLoading || showRecentlyViewed || showSearchLoading || showSearchResults || showNoResults) && (
+            <div className={styles.dropdownContainer}>
+              {showRecentLoading && (
+                <div className={styles.loadingContainer}>
+                  {[...Array(10)].map((_, index) => (
+                    <Loader key={`skeleton-recent-${index}`} />
+                  ))}
+                </div>
+              )}
+
+              {showRecentlyViewed && (
+                <div className={styles.dropdownSection}>
+                  <div className={styles.dropdownHeader}>
+                    <span className={styles.dropdownTitle}>{t('recentlyViewed', 'Recently viewed patients')}</span>
+                    <span className={styles.dropdownCount}>{filteredRecentPatients.length}</span>
+                  </div>
+                  <div className={styles.dropdownResults}>
+                    <CompactPatientBanner patients={filteredRecentPatients} />
+                  </div>
+                </div>
+              )}
+
+              {showSearchLoading && (
+                <div className={styles.loadingContainer}>
+                  {[...Array(3)].map((_, index) => (
+                    <Loader key={`skeleton-search-${index}`} />
+                  ))}
+                </div>
+              )}
+
+              {showNoResults && (
+                <div className={styles.dropdownEmptyState}>
+                  <EmptySvg />
+                  <div className={styles.title}>{t('noPatientFound', 'No patient found')}</div>
+                  <div className={styles.subTitle}>
+                    {t('tryDifferentSearch', 'Try searching with a different identifier or name')}
+                  </div>
+                </div>
+              )}
+
+              {showSearchResults && (
+                <div className={styles.dropdownSection}>
+                  <div className={styles.dropdownHeader}>
+                    <span className={styles.dropdownTitle}>
+                      {t('searchResultsCount', '{{count}} result(s) found', { count: totalResults })}
+                    </span>
+                  </div>
+                  <div className={styles.dropdownResults} ref={resultsRef}>
+                    <CompactPatientBanner patients={searchResults} />
+                    {isValidating && (
+                      <div className={styles.loadingMore}>
+                        <Loader />
+                      </div>
+                    )}
+                  </div>
+                </div>
+              )}
+            </div>
+          )}
+
+          {searchError && isInputFocused && (
+            <div className={styles.errorContainer}>
+              <div className={styles.errorTitle}>{t('errorSearching', 'Error searching for patients')}</div>
+              <div className={styles.errorMessage}>{searchError.message}</div>
+            </div>
+          )}
+
+          <ActiveVisitsTable />
+        </Tile>
+      </div>
+    </PatientSearchContextProvider>
+  );
+};
+
+export default SearchBar;

package/src/search-bar/search-bar.resource.ts

@@ -0,0 +1,274 @@
+import { useCallback, useMemo } from 'react';
+import useSWR from 'swr';
+import useSWRInfinite from 'swr/infinite';
+import { openmrsFetch, useSession, type FetchResponse, restBaseUrl } from '@openmrs/esm-framework';
+import { PatientSearchResponse, SearchedPatient, User } from '../type';
+
+type InfinitePatientSearchResponse = FetchResponse<{
+  results: Array<SearchedPatient>;
+  links: Array<{ rel: 'prev' | 'next' }>;
+  totalCount: number;
+}>;
+
+const patientProperties = [
+  'patientId',
+  'uuid',
+  'identifiers',
+  'display',
+  'patientIdentifier:(uuid,identifier)',
+  'person:(gender,age,birthdate,birthdateEstimated,personName,addresses,display,dead,deathDate)',
+  'attributes:(value,attributeType:(uuid,display))',
+];
+
+const patientSearchCustomRepresentation = `custom:(${patientProperties.join(',')})`;
+
+/**
+ * A custom React hook for implementing infinite scrolling patient search.
+ *
+ * @param searchQuery - The string to search for in patient records.
+ * @param includeDead - Whether to include deceased patients in the search results.
+ * @param isSearching - Whether the search should be active. Defaults to true.
+ * @param resultsToFetch - The number of results to fetch per page. Defaults to 10.
+ * @param customRepresentation - Custom representation string for the patient data. Defaults to patientSearchCustomRepresentation.
+ *
+ * @returns An object containing:
+ *   - data: Array of patient search results
+ *   - isLoading: Boolean indicating if the initial data is loading
+ *   - fetchError: Any error that occurred during fetching
+ *   - hasMore: Boolean indicating if there are more results to load
+ *   - isValidating: Boolean indicating if new data is being loaded
+ *   - setPage: Function to load the next page of results
+ *   - currentPage: The current page number
+ *   - totalResults: The total number of results for the search query
+ */
+export function useInfinitePatientSearch(
+  searchQuery: string,
+  includeDead: boolean,
+  isSearching: boolean = true,
+  resultsToFetch: number = 10,
+  customRepresentation: string = patientSearchCustomRepresentation,
+): PatientSearchResponse {
+  const getUrl = useCallback(
+    (
+      page: number,
+      prevPageData: FetchResponse<{ results: Array<SearchedPatient>; links: Array<{ rel: 'prev' | 'next' }> }>,
+    ) => {
+      // If we have previous page data and it has no 'next' link, we've reached the end
+      if (prevPageData && prevPageData?.data && !prevPageData?.data?.links?.some((link) => link.rel === 'next')) {
+        return null;
+      }
+
+      // Ensure searchQuery is not empty
+      const trimmedQuery = searchQuery?.trim();
+      if (!trimmedQuery) {
+        return null;
+      }
+
+      const baseUrl = `${restBaseUrl}/patient`;
+      const params = new URLSearchParams({
+        q: trimmedQuery,
+        v: customRepresentation,
+        includeDead: String(includeDead),
+        limit: String(resultsToFetch),
+        totalCount: 'true',
+        startIndex: String(page * resultsToFetch),
+      });
+
+      return `${baseUrl}?${params.toString()}`;
+    },
+    [searchQuery, customRepresentation, includeDead, resultsToFetch],
+  );
+
+  // Only fetch if searching is enabled and we have a valid search query
+  const shouldFetch = isSearching && searchQuery?.trim().length > 0;
+
+  const { data, isLoading, isValidating, setSize, error, size } = useSWRInfinite<InfinitePatientSearchResponse, Error>(
+    shouldFetch ? getUrl : null,
+    openmrsFetch,
+    {
+      revalidateFirstPage: false,
+      revalidateOnFocus: false,
+      keepPreviousData: true,
+    },
+  );
+
+  const mappedData = useMemo(() => {
+    if (!data || data.length === 0) {
+      return null;
+    }
+    return data.flatMap((res) => res?.data?.results ?? []);
+  }, [data]);
+
+  return useMemo(
+    () => ({
+      data: mappedData,
+      isLoading,
+      fetchError: error,
+      hasMore: data?.at(-1)?.data?.links?.some((link) => link.rel === 'next') ?? false,
+      isValidating,
+      setPage: setSize,
+      currentPage: size,
+      totalResults: data?.[0]?.data?.totalCount ?? 0,
+    }),
+    [mappedData, isLoading, error, data, isValidating, setSize, size],
+  );
+}
+
+/**
+ * A custom React hook for managing and retrieving the list of recently viewed patients.
+ *
+ * @param showRecentlySearchedPatients - A boolean flag to enable/disable the feature. Defaults to false.
+ * @returns An object containing:
+ *   - error: Any error that occurred during fetching
+ *   - isLoadingPatients: Boolean indicating if the data is being loaded
+ *   - recentlyViewedPatientUuids: Array of UUIDs of recently viewed patients
+ *   - updateRecentlyViewedPatients: Function to update the list with a new patient UUID
+ *   - mutateUserProperties: Function to trigger a re-fetch of user properties
+ */
+export function useRecentlyViewedPatients(showRecentlySearchedPatients: boolean = false) {
+  const { user } = useSession();
+  const userUuid = user?.uuid;
+  const shouldFetchRecentlyViewedPatients = showRecentlySearchedPatients && userUuid;
+  const url = `${restBaseUrl}/user/${userUuid}`;
+
+  // This request will be loaded from the SWR cache as a preload request happens ahead when the user hovers over the search icon.
+  const { data, error, isLoading, mutate } = useSWR<FetchResponse<User>, Error>(
+    shouldFetchRecentlyViewedPatients ? url : null,
+    openmrsFetch,
+    {
+      revalidateOnFocus: false,
+      revalidateOnReconnect: false,
+    },
+  );
+
+  const userProperties = data?.data?.userProperties;
+
+  const patientsVisited = useMemo(() => {
+    if (!userProperties?.patientsVisited) {
+      return [];
+    }
+    return userProperties.patientsVisited.split(',').filter(Boolean);
+  }, [userProperties]);
+
+  const updateRecentlyViewedPatients = useCallback(
+    async (patientUuid: string) => {
+      if (!patientUuid || !userUuid) {
+        console.error('Invalid patientUuid or userUuid');
+        return;
+      }
+
+      try {
+        const uniquePatients = Array.from(new Set([patientUuid, ...patientsVisited]));
+        const mostRecentPatients = uniquePatients.slice(0, 10);
+        const newUserProperties = {
+          ...userProperties,
+          patientsVisited: mostRecentPatients.join(','),
+        };
+
+        const response = await openmrsFetch(url, {
+          method: 'POST',
+          headers: {
+            'content-type': 'application/json',
+          },
+          body: {
+            userProperties: newUserProperties,
+          },
+        });
+
+        // Trigger revalidation of user data
+        mutate();
+
+        return response;
+      } catch (error) {
+        console.error('Error updating recently viewed patients:', error);
+        throw error;
+      }
+    },
+    [patientsVisited, url, userProperties, userUuid, mutate],
+  );
+
+  return useMemo(
+    () => ({
+      error,
+      isLoadingPatients: isLoading,
+      recentlyViewedPatientUuids: patientsVisited,
+      updateRecentlyViewedPatients,
+      mutateUserProperties: mutate,
+    }),
+    [error, isLoading, mutate, patientsVisited, updateRecentlyViewedPatients],
+  );
+}
+
+/**
+ * A custom React hook for fetching patient data from a REST API based on a list of patient UUIDs.
+ *
+ * @param patientUuids - An array of patient UUIDs to fetch data for. If null, no data will be fetched.
+ * @param isSearching - A boolean flag to determine if the search should be performed. Defaults to true.
+ * @param resultsToFetch - The number of results to fetch at a time. Defaults to 10.
+ * @param customRepresentation - A string representing the custom representation of patient data to fetch. Defaults to a predefined value 'v'.
+ *
+ * @returns An object containing:
+ *   - data: An array of fetched patient data
+ *   - isLoading: A boolean indicating if the initial data is being loaded
+ *   - fetchError: Any error that occurred during fetching
+ *   - hasMore: A boolean indicating if there are more patients to load
+ *   - isValidating: A boolean indicating if new data is being loaded
+ *   - setPage: A function to load more data
+ *   - currentPage: The current page of results
+ *   - totalResults: The total number of patients to be fetched
+ */
+export function useRestPatients(
+  patientUuids: string[] | null,
+  isSearching: boolean = true,
+  resultsToFetch: number = 10,
+  customRepresentation: string = patientSearchCustomRepresentation,
+) {
+  const getPatientUrl = useCallback(
+    (index: number) => {
+      if (!patientUuids || index >= patientUuids.length) {
+        return null;
+      }
+
+      const patientUuid = patientUuids[index];
+      if (!patientUuid) {
+        return null;
+      }
+
+      return `${restBaseUrl}/patient/${patientUuid}?v=${customRepresentation}`;
+    },
+    [patientUuids, customRepresentation],
+  );
+
+  const shouldFetch = isSearching && patientUuids !== null && patientUuids.length > 0;
+
+  const { data, isLoading, isValidating, setSize, error, size } = useSWRInfinite<FetchResponse<SearchedPatient>, Error>(
+    shouldFetch ? getPatientUrl : null,
+    openmrsFetch,
+    {
+      keepPreviousData: true,
+      revalidateFirstPage: false,
+      initialSize: patientUuids ? Math.min(resultsToFetch, patientUuids.length) : 0,
+    },
+  );
+
+  const mappedData = useMemo(() => {
+    if (!data || data.length === 0) {
+      return null;
+    }
+    return data.flatMap((res) => res?.data).filter(Boolean);
+  }, [data]);
+
+  return useMemo(
+    () => ({
+      data: mappedData,
+      isLoading,
+      fetchError: error,
+      hasMore: patientUuids ? size < patientUuids.length : false,
+      isValidating,
+      setPage: setSize,
+      currentPage: size,
+      totalResults: patientUuids?.length ?? 0,
+    }),
+    [mappedData, isLoading, error, patientUuids, size, isValidating, setSize],
+  );
+}