@beinformed/ui 1.20.0 → 1.20.1

package/src/hooks/useI18n.js

@@ -3,18 +3,13 @@ import { useSelector } from "react-redux";
 import { createSelector } from "reselect";
 import memoize from "lodash/memoize";
 
-const getLocaleCode = (state) => state.i18n.locale || "en";
-const getLocales = (state) => state.i18n.locales;
+import { getLocales, getLocale } from "../redux/selectors/i18n";
 
 const getMessage = createSelector(
-  [getLocales, getLocaleCode],
+  [getLocales, getLocale],
   (locales, localeCode) =>
     memoize(
-      (
-        id?: string | null,
-        defaultMessage?: string | null,
-        placeholders?: Object
-      ) =>
+      (id: string, defaultMessage?: string, placeholders?: Object) =>
         locales
           .getLocale(localeCode)
           .getMessage(id, defaultMessage, placeholders),
@@ -25,8 +20,8 @@ const getMessage = createSelector(
 /**
  */
 const useMessage = (
-  id?: string | null,
-  defaultMessage?: string | null,
+  id: string,
+  defaultMessage?: string,
   placeholders?: Object | null
 ): any => useSelector(getMessage)(id, defaultMessage, placeholders);
 
@@ -34,4 +29,8 @@ const useMessage = (
  */
 const useTranslate = (): ((...any) => any) => useSelector(getMessage);
 
-export { useTranslate, useMessage };
+/**
+ */
+const useLocale = (): string => useSelector(getLocale);
+
+export { useTranslate, useMessage, useLocale };

package/src/hooks/useModularUI.js

@@ -7,14 +7,15 @@ import { loadModularUI, removeModelByKey } from "../redux/_modularui/actions";
 
 import useDeepCompareEffect from "./useDeepCompareEffect";
 
+import { useLocale } from "./useI18n";
+
 import type Href from "../models/href/Href";
 import type { RequestBaseOptions } from "../utils";
 
 /**
  */
 const useKeyForHook = (modelKey: string, url: string) => {
-  const locale = useSelector((state) => state.i18n.locale);
-
+  const locale = useLocale();
   return `${modelKey}(${url.split("?")[0]})(${locale})`;
 };
 

package/src/hooks/useModularUIRequest.js

@@ -3,20 +3,18 @@ import { createSelector } from "reselect";
 import { useSelector } from "react-redux";
 
 import ModularUIRequest from "../modularui/ModularUIRequest";
+import { getLocale } from "../redux/selectors/i18n";
 
 import type { RequestBaseOptions } from "../utils";
 import type Href from "../models/href/Href";
 
-const getModularUIRequest = createSelector(
-  [(state) => state.i18n.locale ?? "en"],
-  (localeCode) => {
-    return (href: Href, options?: $Shape<RequestBaseOptions>) => {
-      const request = new ModularUIRequest(href, options);
-      request.locale = localeCode;
-      return request;
-    };
-  }
-);
+const getModularUIRequest = createSelector([getLocale], (localeCode) => {
+  return (href: Href, options?: $Shape<RequestBaseOptions>) => {
+    const request = new ModularUIRequest(href, options);
+    request.locale = localeCode;
+    return request;
+  };
+});
 
 /**
  * Creates a ModularUIRequest with the locale as available in the redux store

package/src/i18n/Message.js

@@ -6,7 +6,7 @@ import { useMessage } from "../hooks/useI18n";
 
 type MessageProps = {
   +className?: string,
-  +id?: string | null,
+  +id: string,
   +defaultMessage?: string | null,
   +children?: string,
   +data?: Object | null,

package/src/i18n/withMessage.js

@@ -4,6 +4,8 @@ import { connect } from "react-redux";
 import { createSelector } from "reselect";
 import memoize from "lodash/memoize";
 
+import { getLocales, getLocale } from "../redux/selectors/i18n";
+
 import type { ReduxState } from "../redux/types";
 import type { ComponentType } from "react";
 
@@ -20,11 +22,8 @@ type Props = {
   ...
 };
 
-const getLocaleCode = (state) => state.i18n.locale || "en";
-const getLocales = (state) => state.i18n.locales;
-
 const getMessage = createSelector(
-  [getLocales, getLocaleCode],
+  [getLocales, getLocale],
   (locales, localeCode) =>
     memoize(
       (id: string, defaultMessage?: string, placeholders?: Object) =>

package/src/redux/_modularui/connector.js

@@ -1,6 +1,6 @@
 // @flow
 import { useEffect } from "react";
-import { useDispatch, useSelector } from "react-redux";
+import { useDispatch } from "react-redux";
 import { useLocation } from "react-router";
 
 import { loadModularUI, reloadModel, removeModelByKey } from "./actions";
@@ -10,6 +10,7 @@ import { getDisplayName } from "../../react/utils";
 
 import { useUrl, useReload } from "./modularuiUtils";
 import { useModularUI } from "../../hooks/useModularUI";
+import { useLocale } from "../../hooks/useI18n";
 
 import type { ComponentType, Node } from "react";
 import type { Location } from "react-router";
@@ -88,7 +89,7 @@ const connector = (
       }, [dispatch, modelKey]);
 
       // Create new properties object to inject modularui properties to own props
-      const locale = useSelector((state) => state.i18n.locale);
+      const locale = useLocale();
       const newProps: InjectedProps = {
         modelKey,
         [propName]: modelEntry ? modelEntry.model : null,

package/src/redux/_modularui/selectors.js

@@ -150,7 +150,6 @@ export const keyByHref = (state: ReduxState, href: Href | string): ?string => {
 
     return Object.keys(state.modularui).find((key) => {
       const { model } = state.modularui[key];
-
       return model && model.selfhref && model.selfhref.equals(findHref);
     });
   }
@@ -158,6 +157,25 @@ export const keyByHref = (state: ReduxState, href: Href | string): ?string => {
   return null;
 };
 
+/**
+ * Returns all model keys found in the store, restrict on href
+ */
+export const allKeysByHref = (
+  state: ReduxState,
+  href: Href | string
+): Array<string> => {
+  if (state && state.modularui) {
+    const findHref = href instanceof Href ? href : new Href(href);
+
+    return Object.keys(state.modularui).filter((key) => {
+      const { model } = state.modularui[key];
+      return model && model.selfhref && model.selfhref.equals(findHref);
+    });
+  }
+
+  return [];
+};
+
 /**
  */
 const getLocation = (state): string => state?.router?.location.pathname;

package/src/redux/_modularui/withModularUI.js

@@ -9,6 +9,8 @@ import { startProgress, finishProgress } from "../actions/ProgressIndicator";
 
 import { handleError } from "../actions/Error";
 
+import { getLocale } from "../selectors/i18n";
+
 import { reloadModel } from "./actions";
 
 import type {
@@ -43,12 +45,8 @@ type Props = {
   ...DispatchProps,
 };
 
-/**
- */
-const getLocaleCode = (state) => state.i18n.locale ?? "en";
-
 const modularui = createSelector(
-  [getLocaleCode],
+  [getLocale],
   (localeCode) =>
     (href, options = {}) => {
       const modularuiRequest = new ModularUIRequest(href, options);

package/src/redux/actions/Application.js

@@ -1,7 +1,8 @@
 // @flow
 import { loadModularUI, removeModelByKey } from "../_modularui/actions";
-import { keyByHref } from "../_modularui/selectors";
+import { allKeysByHref } from "../_modularui/selectors";
 import { ApplicationModel, Href } from "../../models";
+import { getLocale } from "../selectors/i18n";
 
 import type { Dispatch, GetState, ThunkAction } from "../types";
 
@@ -9,15 +10,12 @@ import type { Dispatch, GetState, ThunkAction } from "../types";
  */
 export const reloadApplication =
   (): ThunkAction => (dispatch: Dispatch, getState: GetState) => {
-    let modelKey = keyByHref(getState(), "/");
-
-    if (!modelKey) {
-      const locale = getState().i18n?.locale;
-      modelKey = `application(/)(${locale})`;
+    const allKeys = allKeysByHref(getState(), "/");
+    for (const key of allKeys) {
+      dispatch(removeModelByKey(key));
     }
 
-    dispatch(removeModelByKey(modelKey));
-
+    const modelKey = `application(/)(${getLocale(getState())})`;
     return dispatch(
       loadModularUI(modelKey, new Href("/", "Application"), {
         targetModel: ApplicationModel,

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

@@ -16,10 +16,6 @@ describe("application actions", () => {
     await store.dispatch(reloadApplication());
 
     expect(store.getActions()).toStrictEqual([
-      {
-        type: "MODULARUI/REMOVE_KEY",
-        payload: "application(/)(en)",
-      },
       {
         type: "MODULARUI/STATUS",
         payload: { key: "application(/)(en)", status: "LOADING" },
@@ -49,7 +45,7 @@ describe("application actions", () => {
       },
       {
         type: "MODULARUI/STATUS",
-        payload: { key: "/", status: "LOADING" },
+        payload: { key: "application(/)(en)", status: "LOADING" },
       },
       { type: "START_PROGRESS" },
       expect.objectContaining({

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

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

package/src/redux/selectors/i18n.js

@@ -0,0 +1,15 @@
+// @flow
+import type Locales from "../../i18n/Locales";
+import type { ReduxState } from "../types";
+
+/**
+ * Retrieve the locale from state
+ */
+export const getLocale = (state: ReduxState): string => {
+  return state.i18n?.locale ?? "en";
+};
+
+/**
+ * Retrieve all available locales in the store
+ */
+export const getLocales = (state: ReduxState): Locales => state.i18n.locales;

package/src/utils/datetime/DateTimeUtil.js

@@ -63,7 +63,7 @@ class BaseDateTimeUtil {
   /**
    */
   getLocale(): typeof nl | typeof enGB {
-    const locale = getCookie("locale") || "en";
+    const locale = getCookie("locale") ?? "en";
 
     if (locale === "nl") {
       return nl;