@openmrs/esm-react-utils 3.2.0 → 3.2.1-pre.1015

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openmrs/esm-react-utils",
-  "version": "3.2.0",
+  "version": "3.2.1-pre.1015",
   "license": "MPL-2.0",
   "description": "React utilities for OpenMRS.",
   "browser": "dist/openmrs-esm-react-utils.js",
@@ -39,7 +39,8 @@
   },
   "dependencies": {
     "lodash-es": "^4.17.21",
-    "single-spa-react": "^4.1.1"
+    "single-spa-react": "^4.1.1",
+    "swr": "^1.2.2"
   },
   "peerDependencies": {
     "@openmrs/esm-api": "3.x",
@@ -53,11 +54,11 @@
     "react-i18next": "11.x"
   },
   "devDependencies": {
-    "@openmrs/esm-api": "^3.2.0",
-    "@openmrs/esm-config": "^3.2.0",
-    "@openmrs/esm-error-handling": "^3.2.0",
-    "@openmrs/esm-extensions": "^3.2.0",
-    "@openmrs/esm-globals": "^3.2.0",
+    "@openmrs/esm-api": "^3.2.1-pre.1015",
+    "@openmrs/esm-config": "^3.2.1-pre.1015",
+    "@openmrs/esm-error-handling": "^3.2.1-pre.1015",
+    "@openmrs/esm-extensions": "^3.2.1-pre.1015",
+    "@openmrs/esm-globals": "^3.2.1-pre.1015",
     "i18next": "^19.6.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
@@ -65,5 +66,5 @@
     "rxjs": "^6.5.3",
     "unistore": "^3.5.2"
   },
-  "gitHead": "9c4a04089e29ff99321d6fef72294f402deb0f7b"
+  "gitHead": "2a10b8956cd63006bd913b18a2a482fa9a0134ec"
 }

package/src/Extension.tsx

@@ -1,6 +1,7 @@
-import React from "react";
+import { renderExtension } from "@openmrs/esm-extensions";
+import React, { useCallback, useContext, useEffect, useState } from "react";
+import { ComponentContext } from ".";
 import { ExtensionData } from "./ComponentContext";
-import { useExtension } from "./useExtension";
 
 export interface ExtensionProps {
   state?: Record<string, any>;
@@ -20,7 +21,31 @@ export interface ExtensionProps {
  * and *must* only be used once within that `<ExtensionSlot>`.
  */
 export const Extension: React.FC<ExtensionProps> = ({ state, wrap }) => {
-  const [ref, extension] = useExtension<HTMLDivElement>(state);
+  const [domElement, setDomElement] = useState<HTMLDivElement>();
+  const { extension } = useContext(ComponentContext);
+
+  const ref = useCallback((node) => {
+    setDomElement(node);
+  }, []);
+
+  useEffect(() => {
+    if (domElement != null && extension) {
+      return renderExtension(
+        domElement,
+        extension.extensionSlotName,
+        extension.extensionSlotModuleName,
+        extension.extensionId,
+        undefined,
+        state
+      );
+    }
+  }, [
+    extension?.extensionSlotName,
+    extension?.extensionId,
+    extension?.extensionSlotModuleName,
+    state,
+    domElement,
+  ]);
 
   // The extension is rendered into the `<slot>`. It is surrounded by a
   // `<div>` with relative positioning in order to allow the UI Editor

package/src/ExtensionSlot.tsx

@@ -1,5 +1,5 @@
 import React, { useRef, useMemo } from "react";
-import { ConnectedExtension } from "./useConnectedExtensions";
+import { ConnectedExtension } from "@openmrs/esm-extensions";
 import { ComponentContext } from "./ComponentContext";
 import { Extension } from "./Extension";
 import { useExtensionSlot } from "./useExtensionSlot";
@@ -76,7 +76,7 @@ export const ExtensionSlot: React.FC<ExtensionSlotProps> = ({
         <ComponentContext.Provider
           key={extension.id}
           value={{
-            moduleName: extension.moduleName,
+            moduleName: extensionSlotModuleName, // moduleName is not used by the receiving Extension
             extension: {
               extensionId: extension.id,
               extensionSlotName,
@@ -87,7 +87,7 @@ export const ExtensionSlot: React.FC<ExtensionSlotProps> = ({
           {children ?? <Extension state={stateRef.current} />}
         </ComponentContext.Provider>
       )),
-    [select, extensions, extensionSlotName]
+    [select, extensions, extensionSlotName, stateRef.current]
   );
 
   return (

package/src/index.ts

@@ -5,15 +5,15 @@ export * from "./Extension";
 export * from "./ExtensionSlot";
 export * from "./getLifecycle";
 export * from "./openmrsComponentDecorator";
+export * from "./useAssignedExtensions";
 export * from "./useAssignedExtensionIds";
-export * from "./useAttachedExtensionIds";
 export * from "./useBodyScrollLock";
 export * from "./useConfig";
 export * from "./useConnectedExtensions";
 export * from "./useConnectivity";
 export * from "./usePatient";
 export * from "./useCurrentPatient";
-export * from "./useExtension";
+export * from "./useExtensionInternalStore";
 export * from "./useExtensionSlotConfig";
 export * from "./useExtensionSlot";
 export * from "./useExtensionSlotMeta";

package/src/useAssignedExtensionIds.ts

@@ -1,29 +1,26 @@
 import { useEffect, useState } from "react";
-import { getAssignedIds } from "@openmrs/esm-extensions";
-import { useExtensionSlotConfig } from "./useExtensionSlotConfig";
-import { useAttachedExtensionIds } from "./useAttachedExtensionIds";
+import { getExtensionStore } from "@openmrs/esm-extensions";
+import { isEqual } from "lodash";
 
 /**
  * Gets the assigned extension ids for a given extension slot name.
  * Does not consider if offline or online.
- * @param extensionSlotName The name of the slot to get the assigned IDs for.
+ * @param slotName The name of the slot to get the assigned IDs for.
+ *
+ * @deprecated Use `useAssignedExtensions`
  */
-export function useAssignedExtensionIds(extensionSlotName: string) {
-  const config = useExtensionSlotConfig(extensionSlotName);
-  const attachedIds = useAttachedExtensionIds(extensionSlotName);
-  const [assignedIds, setAssignedIds] = useState<Array<string>>([]);
+export function useAssignedExtensionIds(slotName: string) {
+  const [ids, setIds] = useState<Array<string>>([]);
 
   useEffect(() => {
-    const newAssignedIds = getAssignedIds(
-      extensionSlotName,
-      config,
-      attachedIds
-    );
+    return getExtensionStore().subscribe((state) => {
+      const newIds =
+        state.slots[slotName]?.assignedExtensions.map((e) => e.id) ?? [];
+      if (!isEqual(newIds, ids)) {
+        setIds(newIds);
+      }
+    });
+  }, []);
 
-    if (newAssignedIds.join(",") !== assignedIds.join(",")) {
-      setAssignedIds(newAssignedIds);
-    }
-  }, [attachedIds, config]);
-
-  return assignedIds;
+  return ids;
 }

package/src/useAssignedExtensions.ts

@@ -0,0 +1,29 @@
+import { useEffect, useState } from "react";
+import {
+  AssignedExtension,
+  ExtensionStore,
+  getExtensionStore,
+} from "@openmrs/esm-extensions";
+import { isEqual } from "lodash";
+
+/**
+ * Gets the assigned extensions for a given extension slot name.
+ * Does not consider if offline or online.
+ * @param slotName The name of the slot to get the assigned extensions for.
+ */
+export function useAssignedExtensions(slotName: string) {
+  const [extensions, setExtensions] = useState<Array<AssignedExtension>>([]);
+
+  useEffect(() => {
+    function update(state: ExtensionStore) {
+      const newExtensions = state.slots[slotName]?.assignedExtensions ?? [];
+      if (!isEqual(newExtensions, extensions)) {
+        setExtensions(newExtensions);
+      }
+    }
+    update(getExtensionStore().getState());
+    return getExtensionStore().subscribe(update);
+  }, [slotName]);
+
+  return extensions;
+}

package/src/useConfig.ts

@@ -120,8 +120,5 @@ export function useConfig() {
     [normalConfig, extensionConfig]
   );
 
-  const configNameForDebugMessage = extension
-    ? `${extension?.extensionSlotModuleName}-${extension?.extensionSlotName}-${extension?.extensionId}`
-    : moduleName;
   return config;
 }

package/src/useConnectedExtensions.ts

@@ -1,51 +1,25 @@
 import { useMemo } from "react";
 import {
-  checkStatusFor,
-  ExtensionMeta,
-  ExtensionRegistration,
-  extensionStore,
-  getExtensionRegistrationFrom,
+  ConnectedExtension,
+  getConnectedExtensions,
 } from "@openmrs/esm-extensions";
-import { useAssignedExtensionIds } from "./useAssignedExtensionIds";
 import { useConnectivity } from "./useConnectivity";
-
-function isValidExtension(
-  extension: ConnectedExtension | { id: string }
-): extension is ConnectedExtension {
-  return extension.hasOwnProperty("name");
-}
-
-/**
- * We have the following extension modes:
- *
- * - attached (set via code in form of: attach, detach, ...)
- * - configured (set via configuration in form of: added, removed, ...)
- * - assigned (computed from attached and configured)
- * - connected (computed from assigned using connectivity and online / offline)
- */
-
-export interface ConnectedExtension extends ExtensionRegistration {
-  id: string;
-}
+import { useAssignedExtensions } from "./useAssignedExtensions";
 
 /**
  * Gets the assigned extension for a given extension slot name.
  * Considers if offline or online.
- * @param extensionSlotName The name of the slot to get the assigned extensions for.
+ * @param slotName The name of the slot to get the assigned extensions for.
  */
 export function useConnectedExtensions(
-  extensionSlotName: string
+  slotName: string
 ): Array<ConnectedExtension> {
   const online = useConnectivity();
-  const extensionIdsToRender = useAssignedExtensionIds(extensionSlotName);
+  const assignedExtensions = useAssignedExtensions(slotName);
 
-  const extensions = useMemo(() => {
-    const state = extensionStore.getState();
-    return extensionIdsToRender
-      .map((id) => ({ id, ...getExtensionRegistrationFrom(state, id) }))
-      .filter(isValidExtension)
-      .filter((m) => checkStatusFor(online, m.online, m.offline));
-  }, [extensionIdsToRender, online]);
+  const connectedExtensions = useMemo(() => {
+    return getConnectedExtensions(assignedExtensions, online);
+  }, [assignedExtensions, online]);
 
-  return extensions;
+  return connectedExtensions;
 }

package/src/useExtensionInternalStore.ts

@@ -0,0 +1,10 @@
+import {
+  ExtensionInternalStore,
+  getExtensionInternalStore,
+} from "@openmrs/esm-extensions";
+import { createUseStore } from "./createUseStore";
+
+/** @internal */
+export const useExtensionInternalStore = createUseStore<ExtensionInternalStore>(
+  getExtensionInternalStore()
+);

package/src/useExtensionSlot.ts

@@ -1,12 +1,10 @@
 import { useContext, useEffect } from "react";
-import {
-  registerExtensionSlot,
-  unregisterExtensionSlot,
-} from "@openmrs/esm-extensions";
+import { registerExtensionSlot } from "@openmrs/esm-extensions";
 import { ComponentContext } from "./ComponentContext";
 import { useConnectedExtensions } from "./useConnectedExtensions";
 
-export function useExtensionSlot(extensionSlotName: string) {
+/** @internal */
+export function useExtensionSlot(slotName: string) {
   const { moduleName } = useContext(ComponentContext);
 
   if (!moduleName) {
@@ -16,15 +14,14 @@ export function useExtensionSlot(extensionSlotName: string) {
   }
 
   useEffect(() => {
-    registerExtensionSlot(moduleName, extensionSlotName);
-    return () => unregisterExtensionSlot(moduleName, extensionSlotName);
+    registerExtensionSlot(moduleName, slotName);
   }, []);
 
-  const extensions = useConnectedExtensions(extensionSlotName);
+  const extensions = useConnectedExtensions(slotName);
 
   return {
     extensions,
-    extensionSlotName,
+    extensionSlotName: slotName,
     extensionSlotModuleName: moduleName,
   };
 }

package/src/useExtensionSlotConfig.ts

@@ -1,10 +1,9 @@
-import { useContext, useCallback } from "react";
+import { useCallback } from "react";
 import {
   ExtensionSlotConfigObject,
-  ExtensionSlotConfigsStore,
-  getExtensionSlotsConfigStore,
+  ExtensionSlotConfigStore,
+  getExtensionSlotConfigStore,
 } from "@openmrs/esm-config";
-import { ComponentContext } from "./ComponentContext";
 import { useStoreState } from "./useStoreState";
 
 const defaultConfig: ExtensionSlotConfigObject = {
@@ -13,12 +12,12 @@ const defaultConfig: ExtensionSlotConfigObject = {
   remove: [],
 };
 
-export function useExtensionSlotConfig(extensionSlotName: string) {
-  const { moduleName } = useContext(ComponentContext);
-  const store = getExtensionSlotsConfigStore(moduleName);
+/** @internal */
+export function useExtensionSlotConfig(slotName: string) {
+  const store = getExtensionSlotConfigStore(slotName);
   const select = useCallback(
-    (s: ExtensionSlotConfigsStore) => s.extensionSlotConfigs[extensionSlotName],
-    [extensionSlotName]
+    (s: ExtensionSlotConfigStore) => s.config,
+    [slotName]
   );
   const config = useStoreState(store, select);
   return config || defaultConfig;

package/src/useExtensionStore.ts

@@ -1,4 +1,6 @@
-import { ExtensionStore, extensionStore } from "@openmrs/esm-extensions";
+import { ExtensionStore, getExtensionStore } from "@openmrs/esm-extensions";
 import { createUseStore } from "./createUseStore";
 
-export const useExtensionStore = createUseStore<ExtensionStore>(extensionStore);
+export const useExtensionStore = createUseStore<ExtensionStore>(
+  getExtensionStore()
+);

package/src/usePatient.ts

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useReducer } from "react";
+import { useEffect, useReducer } from "react";
 import { fetchCurrentPatient, PatientUuid } from "@openmrs/esm-api";
 
 type NullablePatient = fhir.Patient | null;
@@ -6,6 +6,7 @@ type NullablePatient = fhir.Patient | null;
 interface CurrentPatientState {
   patientUuid: string | null;
   patient: NullablePatient;
+  isPendingUuid: boolean;
   isLoadingPatient: boolean;
   err: Error | null;
 }
@@ -36,7 +37,8 @@ enum ActionTypes {
 const initialState: CurrentPatientState = {
   patientUuid: null,
   patient: null,
-  isLoadingPatient: true,
+  isPendingUuid: true,
+  isLoadingPatient: false,
   err: null,
 };
 
@@ -55,6 +57,7 @@ function reducer(
         ...state,
         patientUuid: action.patientUuid,
         patient: null,
+        isPendingUuid: false,
         isLoadingPatient: true,
         err: null,
       };
@@ -62,6 +65,7 @@ function reducer(
       return {
         ...state,
         patient: action.patient,
+        isPendingUuid: false,
         isLoadingPatient: false,
         err: null,
       };
@@ -69,6 +73,7 @@ function reducer(
       return {
         ...state,
         patient: null,
+        isPendingUuid: false,
         isLoadingPatient: false,
         err: action.err,
       };
@@ -87,15 +92,12 @@ export function usePatient(patientUuid?: string) {
   const [state, dispatch] = useReducer(reducer, {
     ...initialState,
     patientUuid: patientUuid ?? null,
+    isPendingUuid: !patientUuid,
+    isLoadingPatient: !!patientUuid,
   });
 
   useEffect(() => {
-    if (state.patientUuid) {
-      dispatch({
-        type: ActionTypes.loadPatient,
-        patientUuid: state.patientUuid,
-      });
-    } else {
+    if (state.isPendingUuid) {
       const patientUuidFromUrl = getPatientUuidFromUrl();
       if (patientUuidFromUrl) {
         dispatch({
@@ -106,9 +108,7 @@ export function usePatient(patientUuid?: string) {
         dispatch({ type: ActionTypes.newPatient, patient: null });
       }
     }
-  }, [state.patientUuid]);
 
-  useEffect(() => {
     let active = true;
     if (state.isLoadingPatient && state.patientUuid) {
       fetchCurrentPatient(state.patientUuid).then(
@@ -129,7 +129,7 @@ export function usePatient(patientUuid?: string) {
     return () => {
       active = false;
     };
-  }, [state.isLoadingPatient, state.patientUuid]);
+  }, [state.isPendingUuid, state.isLoadingPatient, state.patientUuid]);
 
   useEffect(() => {
     const handleRouteUpdate = (evt) => {
@@ -144,10 +144,10 @@ export function usePatient(patientUuid?: string) {
     window.addEventListener("single-spa:routing-event", handleRouteUpdate);
     return () =>
       window.removeEventListener("single-spa:routing-event", handleRouteUpdate);
-  }, []);
+  }, [state.patientUuid]);
 
   return {
-    isLoading: state.isLoadingPatient,
+    isLoading: state.isPendingUuid || state.isLoadingPatient,
     patient: state.patient,
     patientUuid: patientUuid ?? state.patientUuid,
     error: state.err,

package/src/useVisit.ts

@@ -1,49 +1,34 @@
-import { useState, useEffect } from "react";
-import dayjs from "dayjs";
 import {
-  getVisitsForPatient,
-  getStartedVisit,
-  VisitMode,
-  VisitStatus,
+  defaultVisitCustomRepresentation,
+  openmrsFetch,
   Visit,
 } from "@openmrs/esm-api";
+import useSWR from "swr";
 
-export function useVisit(patientUuid: string) {
-  const [currentVisit, setCurrentVisit] = useState<Visit | null>(null);
-  const [error, setError] = useState(null);
-
-  useEffect(() => {
-    const sub = getStartedVisit.subscribe((visit) => {
-      if (visit) {
-        setCurrentVisit(visit?.visitData ?? null);
-      } else {
-        setCurrentVisit(null);
-      }
-    });
-
-    return () => sub.unsubscribe();
-  }, [patientUuid]);
+interface VisitReturnType {
+  error: Error;
+  mutate: () => void;
+  isValidating: boolean;
+  currentVisit: Visit | null;
+}
 
-  useEffect(() => {
-    const abortController = new AbortController();
-    const sub = getVisitsForPatient(patientUuid, abortController).subscribe(
-      ({ data }) => {
-        const currentVisit = data.results.find(
-          (visit) => visit.stopDatetime === null
-        );
+/**
+ * This React hook returns a visit object. If the `patientUuid` is provided
+ * as a parameter, then the currentVisit, error and mutate function
+ * for that patient visit is returned.
+ * @param patientUuid Unique patient identifier `string`
+ * @returns Object {`error` `isValidating`, `currentVisit`, `mutate`}
+ */
+export function useVisit(patientUuid: string): VisitReturnType {
+  const { data, error, mutate, isValidating } = useSWR<{
+    data: { results: Array<Visit> };
+  }>(
+    `/ws/rest/v1/visit?patient=${patientUuid}&v=${defaultVisitCustomRepresentation}&includeInactive=false`,
+    openmrsFetch
+  );
 
-        if (currentVisit) {
-          getStartedVisit.next({
-            mode: VisitMode.LOADING,
-            visitData: currentVisit,
-            status: VisitStatus.ONGOING,
-          });
-        }
-      },
-      setError
-    );
-    return () => sub && sub.unsubscribe();
-  }, [patientUuid]);
+  const currentVisit =
+    data?.data.results.find((visit) => visit.stopDatetime === null) ?? null;
 
-  return { currentVisit, error };
+  return { error, mutate, isValidating, currentVisit };
 }

package/src/useAttachedExtensionIds.ts

@@ -1,18 +0,0 @@
-import { useCallback } from "react";
-import { extensionStore, ExtensionStore } from "@openmrs/esm-extensions";
-import { useStoreState } from "./useStoreState";
-
-const defaultArray: Array<string> = [];
-
-/**
- * Gets the assigned extension ids for the given slot.
- * @param extensionSlotName
- */
-export function useAttachedExtensionIds(extensionSlotName: string) {
-  const select = useCallback(
-    (s: ExtensionStore) => s.slots[extensionSlotName]?.attachedIds,
-    [extensionSlotName]
-  );
-  const extensions = useStoreState(extensionStore, select);
-  return extensions || defaultArray;
-}

package/src/useExtension.ts

@@ -1,31 +0,0 @@
-import { RefObject, useContext, useRef, useEffect } from "react";
-import { renderExtension } from "@openmrs/esm-extensions";
-import { ComponentContext, ExtensionData } from "./ComponentContext";
-
-export function useExtension<TRef extends HTMLElement>(
-  state?: Record<string, any>
-): [RefObject<TRef>, ExtensionData | undefined] {
-  const ref = useRef<TRef>(null);
-  const { extension } = useContext(ComponentContext);
-
-  useEffect(() => {
-    if (ref.current && extension) {
-      return renderExtension(
-        ref.current,
-        extension.extensionSlotName,
-        extension.extensionSlotModuleName,
-        extension.extensionId,
-        undefined,
-        state
-      );
-    }
-  }, [
-    extension?.extensionSlotName,
-    extension?.extensionId,
-    extension?.extensionSlotModuleName,
-    ref.current,
-    state,
-  ]);
-
-  return [ref, extension];
-}