@beinformed/ui 1.65.1 → 1.65.3

package/src/hooks/useModularUIBasic.js

@@ -1,12 +1,18 @@
 // @flow
-import type { ModularUIModel, Href } from "../models";
 import { useLocation } from "react-router";
+import { useSelector } from "react-redux";
 import { useMemo } from "react";
 import { useModularUI } from "./useModularUI";
 
+import { MODULARUI_STATUS } from "../constants";
+import { useModularUIKey } from "./useModularUIKey";
+
+import type { ModularUIModel, Href } from "../models";
 export type HookOptions = {
+  key?: string,
   origin?: string,
   contextPath?: string,
+  removeOnUnmount?: boolean,
 };
 
 export type UseModularUIBasicOptions<T: ModularUIModel> = {
@@ -16,13 +22,16 @@ export type UseModularUIBasicOptions<T: ModularUIModel> = {
   origin?: string,
   contextPath?: string,
   cache?: boolean,
+  key?: string,
+  isReload?: boolean,
+  removeOnUnmount?: boolean,
 };
 
 // Helper to create useModularUI options
 const createUseModularUIOptions = <T: ModularUIModel>(
   options: UseModularUIBasicOptions<T>,
   href: string,
-  location: any,
+  mustReload: boolean,
 ): Object => {
   const baseOptions = {
     targetModel: undefined,
@@ -31,6 +40,7 @@ const createUseModularUIOptions = <T: ModularUIModel>(
     origin: undefined,
     contextPath: undefined,
     cache: false,
+    removeOnUnmount: false,
   };
 
   // Handle targetModel and forceTargetModel
@@ -44,11 +54,14 @@ const createUseModularUIOptions = <T: ModularUIModel>(
     baseOptions.cache = options.cache;
   }
 
-  // Check for reload if location matches href
-  if (location.state?.reload && location.pathname.startsWith(href)) {
+  if (mustReload) {
     baseOptions.isReload = true;
   }
 
+  if (options.removeOnUnmount) {
+    baseOptions.removeOnUnmount = true;
+  }
+
   // Handle origin and contextPath options
   baseOptions.origin = options.origin ?? baseOptions.origin;
   baseOptions.contextPath = options.contextPath ?? baseOptions.contextPath;
@@ -72,7 +85,7 @@ const validateModel = (model: any, expectedModels: Array<string>) => {
  * useModularUIBasic Hook
  */
 export const useModularUIBasic = <T: ModularUIModel>(
-  key: string,
+  defaultKey: string,
   href: string | Href,
   options: UseModularUIBasicOptions<T> = {
     expectedModels: [],
@@ -80,16 +93,19 @@ export const useModularUIBasic = <T: ModularUIModel>(
     forceTargetModel: false,
     origin: undefined,
     contextPath: undefined,
+    key: undefined,
   },
 ): T | null => {
-  const location = useLocation();
   const memoizedHref = useMemo(() => href.toString(), [href]);
-  const useModularUIOptions = useMemo(
-    () => createUseModularUIOptions(options, memoizedHref, location),
-    [options, memoizedHref, location],
+  const key = options.key ?? defaultKey;
+
+  const mustReload = useReload(key, memoizedHref);
+  const modularUIOptions = useMemo(
+    () => createUseModularUIOptions(options, memoizedHref, mustReload),
+    [options, memoizedHref, mustReload],
   );
 
-  const modularUI = useModularUI(key, href, useModularUIOptions);
+  const modularUI = useModularUI(key, href, modularUIOptions);
   const expectedModels = useMemo(
     () => options.expectedModels ?? [],
     [options.expectedModels],
@@ -103,3 +119,24 @@ export const useModularUIBasic = <T: ModularUIModel>(
     return null;
   }, [expectedModels, modularUI]);
 };
+
+/**
+ * Check if the model corresponding to a modular ui service should be reloaded
+ */
+export const useReload = (modelKey: string, url: string): boolean => {
+  const location = useLocation();
+  const key = useModularUIKey(modelKey, url);
+  const modelEntry = useSelector((state) => state.modularui[key]);
+
+  if (modelEntry) {
+    const reload = location.state?.reload || 0;
+    if (reload > 0) {
+      const isFullyLoaded = modelEntry?.status === MODULARUI_STATUS.FINISHED;
+      const lastModification = modelEntry?.lastModification ?? 0;
+      if (isFullyLoaded && lastModification < reload) {
+        return true;
+      }
+    }
+  }
+  return false;
+};

package/src/hooks/useModularUIKey.js

@@ -0,0 +1,14 @@
+// @flow
+import { useLocale } from "./useI18n";
+import { useMemo } from "react";
+
+/**
+ * Generates the key that is used in the modular ui reducer of redux
+ */
+export const useModularUIKey = (modelKey: string, url: string): string => {
+  const locale = useLocale();
+  return useMemo(
+    () => `${modelKey}(${url.split("?")[0]})(${locale})`,
+    [modelKey, url, locale],
+  );
+};

package/src/hooks/usePanel.js

@@ -65,11 +65,12 @@ export const usePanel = (
   href?: string | Href,
   options?: HookOptions & { fromRoute?: boolean },
 ): ListModel | GroupingPanelModel | DetailModel | null => {
-  const url = useUrl(href, options?.fromRoute || false);
+  const { fromRoute, ...hookOptions } = options || { fromRoute: false };
+
+  const url = useUrl(href, fromRoute || false);
   const basicOptions = {
     expectedModels: ["List", "GroupingPanel", "Detail"],
-    origin: options?.origin,
-    contextPath: options?.contextPath,
+    ...(hookOptions: HookOptions),
   };
 
   return useModularUIBasic("panel", url, basicOptions);

package/src/models/href/Href.js

@@ -281,7 +281,7 @@ class Href {
    * Remove a parameter from the parameter collection
    */
   removeParameter(name: string, prefix: ?string, value: ?string): Href {
-    if (value !== undefined) {
+    if (value != undefined) {
       const valueToRemove = value;
 
       this._parameters = this._parameters.map((param) => {

package/src/models/list/ListModel.js

@@ -20,7 +20,7 @@ import {
   SHOW_ONE_RESULT_AS_DETAIL,
 } from "../../constants/LayoutHints";
 
-import type { ModularUIModel } from "../types";
+import type { ModularUIModel, FilterType } from "../types";
 import type LinkModel from "../links/LinkModel";
 
 /**
@@ -288,8 +288,12 @@ export default class ListModel extends ResourceModel {
   /**
    * Set filterCollection
    */
-  set filterCollection(filterCollection: FilterCollection) {
-    this._filterCollection = filterCollection;
+  set filterCollection(filterCollection: FilterCollection | Array<FilterType>) {
+    if (Array.isArray(filterCollection)) {
+      this._filterCollection.collection = filterCollection;
+    } else {
+      this._filterCollection = filterCollection;
+    }
   }
 
   /**

package/src/models/sorting/SortOptionModel.js

@@ -28,6 +28,13 @@ class SortOptionModel {
     }
   }
 
+  /**
+   */
+  reset() {
+    this.selected = false;
+    this.sortorder = "desc";
+  }
+
   /**
    */
   get selected(): boolean {

package/src/models/sorting/SortingModel.js

@@ -47,6 +47,13 @@ class SortingModel extends BaseCollection<SortOptionModel> {
       .join(",");
   }
 
+  /**
+   */
+  set value(value: string) {
+    this.reset();
+    this.setSelected(value);
+  }
+
   /**
    */
   get param(): string {
@@ -61,8 +68,13 @@ class SortingModel extends BaseCollection<SortOptionModel> {
 
   /**
    */
-  setSelected(currentSort: string = "") {
-    currentSort.split(",").forEach((sortItem) => {
+  reset() {
+    this.collection.forEach((option) => option.reset());
+  }
+  /**
+   */
+  setSelected(value: string = "") {
+    value.split(",").forEach((sortItem) => {
       const [key, direction] = sortItem.split(" ");
 
       this.collection.forEach((option) => {

package/src/redux/_modularui/ModularUIConnector.js

@@ -118,13 +118,15 @@ const modularUIConnector = (
       }, [dispatch, doReload, url, modelKey]);
 
       // Remove model when hoc unloads
-      useEffect(() => {
-        return () => {
+      useEffect(
+        // prettier-ignore
+        () => () => { //NOSONAR
           if (finalRemoveOnUnmount) {
             dispatch(removeModelByKey(modelKey));
           }
-        };
-      }, [dispatch, modelKey, finalRemoveOnUnmount]);
+        },
+        [dispatch, modelKey, finalRemoveOnUnmount],
+      );
 
       // Create new properties object to inject modularui properties to own props
       const locale = useLocale();

package/src/redux/actions/SignIn.js

@@ -3,7 +3,6 @@ import Cache from "../../utils/browser/Cache";
 import Authenticate from "../../modularui/Authenticate";
 import { getApplication } from "../_modularui/ModularUISelectors";
 
-import { handleError } from "./Error";
 import { reloadApplication } from "./Application";
 import { startProgress, finishProgress } from "./ProgressIndicator";
 
@@ -70,34 +69,34 @@ export const changePassword = (): ThunkAction => (dispatch, getState) => {
  */
 export const login =
   (username: string, password: string): ThunkAction =>
-  (dispatch, getState) => {
+  async (dispatch, getState) => {
     dispatch(startProgress());
 
-    return new Authenticate()
-      .login(username, password)
-      .then(() => dispatch(reloadApplication()))
-      .then(() => {
-        Cache.addItem("auth", true);
-        const application = getApplication(getState());
-        if (application?.userMustChangePassword) {
-          dispatch(changePassword());
-        } else {
-          dispatch(loginSuccess());
-        }
-        return dispatch(finishProgress());
-      })
-      .catch((error) => {
-        if (error.id === "Error.ChangePasswordRequired") {
-          const dispatchedReloadApplication = dispatch(reloadApplication());
+    try {
+      const response = await new Authenticate().login(username, password);
+
+      await dispatch(reloadApplication());
 
-          return Promise.resolve(dispatchedReloadApplication).then(() => {
-            Cache.addItem("auth", true);
-            dispatch(changePassword());
-            return dispatch(finishProgress());
-          });
-        }
+      Cache.addItem("auth", true);
+      const application = getApplication(getState());
 
+      if (application?.userMustChangePassword) {
+        dispatch(changePassword());
+      } else {
+        dispatch(loginSuccess());
+      }
+
+      dispatch(finishProgress());
+      return response;
+    } catch (error) {
+      if (error.id === "Error.ChangePasswordRequired") {
+        await dispatch(reloadApplication());
+        Cache.addItem("auth", true);
+        dispatch(changePassword());
+      } else {
         dispatch(loginFailed(error.id));
-        return dispatch(handleError(error));
-      });
+      }
+      dispatch(finishProgress());
+      return error;
+    }
   };