@beinformed/ui 1.56.2 → 1.56.5

package/src/hooks/useModularUI.js

@@ -1,6 +1,7 @@
 // @flow
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useMemo } from "react";
 import { useDispatch, useSelector } from "react-redux";
+import { useLocation } from "react-router";
 
 import { HTTP_METHODS } from "../constants";
 import {
@@ -12,14 +13,17 @@ import useDeepCompareEffect from "./useDeepCompareEffect";
 
 import { useLocale } from "./useI18n";
 
-import type Href from "../models/href/Href";
+import Href from "../models/href/Href";
 import type { RequestModularUIOptions } from "../utils";
 
 /**
  */
 const useKeyForHook = (modelKey: string, url: string) => {
   const locale = useLocale();
-  return `${modelKey}(${url.split("?")[0]})(${locale})`;
+  return useMemo(
+    () => `${modelKey}(${url.split("?")[0]})(${locale})`,
+    [modelKey, url, locale],
+  );
 };
 
 /**
@@ -34,11 +38,17 @@ export const useModularUI = (
   },
 ): any => {
   const dispatch = useDispatch();
-  const href = url?.toString() || "";
+  const href = useMemo(() => url?.toString() || "", [url]);
   const key = useKeyForHook(modelKey, href);
 
+  const location = useLocation();
+  const redirectLocation = location.state?.redirectLocation;
+  const forceReload =
+    redirectLocation instanceof Href ? redirectLocation?.equals(href) : false;
+
   const prevOptions = useRef(options);
   const prevHref = useRef(href);
+  const prevForceReload = useRef(forceReload);
 
   // dispatch loadModularUI
   useDeepCompareEffect(() => {
@@ -48,25 +58,25 @@ export const useModularUI = (
       prevOptions.current.isReload &&
       !options.isReload;
 
-    if (href !== "" && !isOldReload) {
+    const doForceReload = forceReload && !prevForceReload.current;
+
+    if (href !== "" && (doForceReload || !isOldReload)) {
       dispatch(loadModularUI(key, href, options));
     }
 
     prevOptions.current = options;
     prevHref.current = href;
-  }, [key, href, options]);
+    prevForceReload.current = forceReload;
+  }, [key, href, options, forceReload]);
 
-  const { removeOnUnmount = false } = options;
   useEffect(() => {
-    return () => {
-      if (removeOnUnmount) {
+    if (options.removeOnUnmount) {
+      return () => {
         dispatch(removeModelByKey(key));
-      }
-    };
-  }, [dispatch, key, removeOnUnmount]);
+      };
+    }
+  }, [dispatch, key, options.removeOnUnmount]);
 
-  // retrieve current model from modularui reducer
-  return useSelector((state) => {
-    return state.modularui[key];
-  });
+  const selector = useMemo(() => (state) => state.modularui[key], [key]);
+  return useSelector(selector);
 };

package/src/hooks/useModularUIBasic.js

@@ -1,4 +1,6 @@
 // @flow
+import { useMemo } from "react";
+
 import { useModularUI } from "./useModularUI";
 
 import { useLocation } from "./useRouter";
@@ -26,6 +28,7 @@ export const useModularUIBasic = <T: ModularUIModel>(
   },
 ): T | null => {
   const location = useLocation();
+  const memoizedHref = useMemo(() => href.toString(), [href]);
 
   const useModularUIOptions = {
     targetModel: undefined,
@@ -48,25 +51,29 @@ export const useModularUIBasic = <T: ModularUIModel>(
   }
 
   // $FlowFixMe[incompatible-call]
-  const modularUI = useModularUI(key, href, useModularUIOptions);
+  const modularUI = useModularUI(key, memoizedHref, useModularUIOptions);
 
-  if (modularUI?.model) {
-    const { model } = modularUI;
+  const expectedModels = useMemo(
+    () => options.expectedModels ?? [],
+    [options.expectedModels],
+  );
 
-    const expectedModels = options.expectedModels ?? [];
-    if (expectedModels.length > 0) {
-      const isCorrectModel = expectedModels.some((expectedModel) => {
-        return model.type === expectedModel;
-      });
+  return useMemo((): T | null => {
+    if (modularUI?.model) {
+      const { model } = modularUI;
 
-      if (!isCorrectModel) {
-        console.error(modularUI, "is not of instance", expectedModels);
-        throw new IllegalStateException("Resolved model has incorrect type");
+      if (expectedModels.length > 0) {
+        const isCorrectModel = expectedModels.some(
+          (expectedModel) => model.type === expectedModel,
+        );
+        if (!isCorrectModel) {
+          console.error(modularUI, "is not of instance", expectedModels);
+          throw new IllegalStateException("Resolved model has incorrect type");
+        }
       }
-    }
 
-    return model;
-  }
-
-  return null;
+      return model;
+    }
+    return null;
+  }, [expectedModels, modularUI]);
 };

package/src/models/concepts/ConceptTypeDetailModel.js

@@ -11,8 +11,8 @@ class ConceptTypeDetailModel extends ResourceModel {
    * The name of the concept type consists of the functional id of the kmt and the functional id of the concept type separated by a #.<br>
    * For example BEI_CaseManagement#Case
    */
-  get name(): string {
-    return this.getData("name", "");
+  get kmtId(): string {
+    return this.getData("kmtId", "");
   }
 
   /**

package/src/redux/_modularui/ModularUIActions.js

@@ -109,6 +109,7 @@ export const loadModel = (
 ): ModularUIAction => ({
   type: "MODULARUI/FETCH",
   payload: {
+    key,
     href: href instanceof Href ? href : new Href(href),
     method: options?.method ?? HTTP_METHODS.GET,
     data: options?.data,
@@ -146,20 +147,24 @@ export const loadModularUI =
     href: Href | string,
     options?: RequestModularUIOptions,
   ): ThunkAction =>
-  (dispatch: Dispatch) => {
-    dispatch(updateStatus(key, MODULARUI_STATUS.LOADING));
+  (dispatch: Dispatch, getState) => {
+    const modularuiStore = getState()?.modularui;
+    if (
+      modularuiStore &&
+      modularuiStore[key]?.status === MODULARUI_STATUS.LOADING
+    ) {
+      // don't create duplicate requests during loading
+      return dispatch({
+        type: "NO_ACTION",
+      });
+    }
+
     dispatch(startProgress());
 
     const loadModelPromise = dispatch(loadModel(key, href, options));
 
     return Promise.resolve(loadModelPromise)
-      .then((response) => {
-        if (response?.type === "FINISH_PROGRESS") {
-          dispatch(updateStatus(key, MODULARUI_STATUS.FINISHED));
-        }
-
-        return dispatch(finishProgress());
-      })
+      .then(() => dispatch(finishProgress()))
       .catch((error) => dispatch(handleError(error)));
   };
 

package/src/redux/_modularui/ModularUIMiddleware.js

@@ -1,11 +1,12 @@
 // @flow
 import ModularUIRequest from "../../modularui/ModularUIRequest";
-import { HTTP_METHODS } from "../../constants/Constants";
+import { HTTP_METHODS, MODULARUI_STATUS } from "../../constants/Constants";
 
 import { startProgress, finishProgress } from "../actions/ProgressIndicator";
-
 import { handleError } from "../actions/Error";
 
+import { updateStatus } from "./ModularUIActions";
+
 import type { Middleware, MiddlewareAPI } from "redux";
 import type {
   ReduxAction,
@@ -117,11 +118,13 @@ const handleFetch = (
 ) => {
   dispatch(startProgress());
 
-  const { successAction, errorAction, ...requestOptions } = action.payload;
+  const { key, successAction, errorAction, ...requestOptions } = action.payload;
   requestOptions.locale = locale;
 
   const modularuiRequest = createRequest(requestOptions);
 
+  dispatch(updateStatus(key, MODULARUI_STATUS.LOADING));
+
   return modularuiRequest
     .fetch()
     .then((model) => responseHandler(next, dispatch, successAction, model))

package/src/redux/_modularui/ModularUIReducer.js

@@ -46,6 +46,7 @@ const setModel = (
         ...state[key],
         model,
         lastModification: Date.now(),
+        status: MODULARUI_STATUS.FINISHED,
       },
     };
   }

package/src/redux/_modularui/__tests__/actions.spec.js

@@ -134,16 +134,13 @@ describe("modularui actions", () => {
     await store.dispatch(loadModularUI("application", "/", {}));
 
     expect(store.getActions()).toStrictEqual([
-      {
-        type: "MODULARUI/STATUS",
-        payload: { key: "application", status: MODULARUI_STATUS.LOADING },
-      },
       {
         type: "START_PROGRESS",
       },
       {
         type: "MODULARUI/FETCH",
         payload: expect.objectContaining({
+          key: "application",
           href: new Href("/"),
           method: HTTP_METHODS.GET,
           data: undefined,

package/src/redux/_modularui/types.js

@@ -65,6 +65,7 @@ export type ErrorAction = (
 export type ModularUIAction = {
   type: "MODULARUI/FETCH",
   payload: {
+    key: string,
     href: Href,
     method?: $Keys<HTTP_METHODS>,
     data?: any,

package/src/redux/actions/__tests__/Application.spec.js

@@ -16,14 +16,11 @@ describe("application actions", () => {
     await store.dispatch(reloadApplication());
 
     expect(store.getActions()).toStrictEqual([
-      {
-        type: "MODULARUI/STATUS",
-        payload: { key: "application(/)(en)", status: "LOADING" },
-      },
       { type: "START_PROGRESS" },
       expect.objectContaining({
         type: "MODULARUI/FETCH",
         payload: expect.objectContaining({
+          key: "application(/)(en)",
           href: new Href("/", "Application"),
         }),
       }),
@@ -43,10 +40,6 @@ describe("application actions", () => {
         type: "MODULARUI/REMOVE_KEY",
         payload: "/",
       },
-      {
-        type: "MODULARUI/STATUS",
-        payload: { key: "application(/)(en)", status: "LOADING" },
-      },
       { type: "START_PROGRESS" },
       expect.objectContaining({
         type: "MODULARUI/FETCH",

package/src/redux/actions/__tests__/Authorization.spec.js

@@ -43,10 +43,6 @@ describe("authorization actions", () => {
         type: "MODULARUI/REMOVE_KEY",
         payload: "/",
       },
-      {
-        type: "MODULARUI/STATUS",
-        payload: { key: "application(/)(en)", status: "LOADING" },
-      },
       {
         type: "START_PROGRESS",
       },