@openmrs/esm-react-utils 3.2.1-pre.1039 → 3.2.1-pre.1048

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openmrs/esm-react-utils",
-  "version": "3.2.1-pre.1039",
+  "version": "3.2.1-pre.1048",
   "license": "MPL-2.0",
   "description": "React utilities for OpenMRS.",
   "browser": "dist/openmrs-esm-react-utils.js",
@@ -55,11 +55,11 @@
     "react-i18next": "11.x"
   },
   "devDependencies": {
-    "@openmrs/esm-api": "^3.2.1-pre.1039",
-    "@openmrs/esm-config": "^3.2.1-pre.1039",
-    "@openmrs/esm-error-handling": "^3.2.1-pre.1039",
-    "@openmrs/esm-extensions": "^3.2.1-pre.1039",
-    "@openmrs/esm-globals": "^3.2.1-pre.1039",
+    "@openmrs/esm-api": "^3.2.1-pre.1048",
+    "@openmrs/esm-config": "^3.2.1-pre.1048",
+    "@openmrs/esm-error-handling": "^3.2.1-pre.1048",
+    "@openmrs/esm-extensions": "^3.2.1-pre.1048",
+    "@openmrs/esm-globals": "^3.2.1-pre.1048",
     "dayjs": "^1.10.8",
     "i18next": "^19.6.0",
     "react": "^16.13.1",
@@ -68,5 +68,5 @@
     "rxjs": "^6.5.3",
     "unistore": "^3.5.2"
   },
-  "gitHead": "5988b37b8acd680071d33155427320d626ede999"
+  "gitHead": "bf4a66160d2e39fe676a9cc14f6005936ba0b7bc"
 }

package/src/useConfig.ts

@@ -1,31 +1,50 @@
 import { useContext, useEffect, useMemo, useState } from "react";
 import {
   getConfigStore,
-  getExtensionConfigStore,
+  getExtensionsConfigStore,
   ConfigStore,
+  ExtensionsConfigStore,
+  getExtensionConfigFromStore,
 } from "@openmrs/esm-config";
 import { ComponentContext, ExtensionData } from "./ComponentContext";
 import { ConfigObject } from "@openmrs/esm-config";
 import { Store } from "unistore";
+import isEqual from "lodash-es/isEqual";
 
 const promises: Record<string, Promise<ConfigObject>> = {};
 const errorMessage = `No ComponentContext has been provided. This should come from "openmrsComponentDecorator".
 Usually this is already applied when using "getAsyncLifecycle" or "getSyncLifecycle".`;
 
-function readInitialConfig(store: Store<ConfigStore> | undefined) {
-  if (!store) {
-    return undefined;
-  } else {
+function readInitialConfig(store: Store<ConfigStore>) {
+  return () => {
+    const state = store.getState();
+
+    if (state.loaded && state.config) {
+      return state.config;
+    }
+
+    return null;
+  };
+}
+
+function readInitialExtensionConfig(
+  store: Store<ExtensionsConfigStore>,
+  extension: ExtensionData | undefined
+) {
+  if (extension) {
     return () => {
       const state = store.getState();
-
-      if (state.loaded && state.config) {
-        return state.config;
+      const extConfig = getExtensionConfigFromStore(
+        state,
+        extension.extensionSlotName,
+        extension.extensionId
+      );
+      if (extConfig.loaded && extConfig.config) {
+        return extConfig.config;
       }
-
-      return undefined;
     };
   }
+  return null;
 }
 
 function createConfigPromise(store: Store<ConfigStore>) {
@@ -39,7 +58,26 @@ function createConfigPromise(store: Store<ConfigStore>) {
   });
 }
 
-function useConfigStore(store: Store<ConfigStore> | undefined) {
+function createExtensionConfigPromise(
+  store: Store<ExtensionsConfigStore>,
+  extension: ExtensionData
+) {
+  return new Promise<ConfigObject>((resolve) => {
+    const unsubscribe = store.subscribe((state) => {
+      const extConfig = getExtensionConfigFromStore(
+        state,
+        extension.extensionSlotName,
+        extension.extensionId
+      );
+      if (extConfig.loaded && extConfig.config) {
+        resolve(extConfig.config);
+        unsubscribe();
+      }
+    });
+  });
+}
+
+function useConfigStore(store: Store<ConfigStore>) {
   const [state, setState] = useState(readInitialConfig(store));
 
   useEffect(() => {
@@ -53,24 +91,45 @@ function useConfigStore(store: Store<ConfigStore> | undefined) {
   return state;
 }
 
-function useExtensionConfig(extension: ExtensionData | undefined) {
-  const store = useMemo(
-    () =>
-      extension &&
-      getExtensionConfigStore(
-        extension.extensionSlotModuleName,
-        extension.extensionSlotName,
-        extension.extensionId
-      ),
-    [extension]
+function useExtensionConfigStore(
+  store: Store<ExtensionsConfigStore>,
+  extension: ExtensionData | undefined
+) {
+  const [config, setConfig] = useState<ConfigObject | null>(
+    readInitialExtensionConfig(store, extension)
   );
-  const state = useConfigStore(store);
+
+  useEffect(() => {
+    if (extension) {
+      return store.subscribe((state) => {
+        const extConfig = getExtensionConfigFromStore(
+          state,
+          extension.extensionSlotName,
+          extension.extensionId
+        );
+        if (
+          extConfig.loaded &&
+          extConfig.config &&
+          !isEqual(extConfig.config, config)
+        ) {
+          setConfig(extConfig.config);
+        }
+      });
+    }
+  }, [store, extension, config]);
+
+  return config;
+}
+
+function useExtensionConfig(extension: ExtensionData | undefined) {
+  const store = useMemo(getExtensionsConfigStore, []);
+  const state = useExtensionConfigStore(store, extension);
 
   if (!state && extension) {
-    const cacheId = `${extension.extensionSlotModuleName}-${extension.extensionSlotName}-${extension.extensionId}`;
+    const cacheId = `${extension.extensionSlotName}-${extension.extensionId}`;
 
     if (!promises[cacheId] && store) {
-      promises[cacheId] = createConfigPromise(store);
+      promises[cacheId] = createExtensionConfigPromise(store, extension);
     }
 
     // React will prevent the client component from rendering until the promise resolves