@beinformed/ui 1.27.5 → 1.28.0

package/lib/models/attributes/__tests__/DatetimeAttributeModel.spec.js.flow

@@ -1,226 +1,168 @@
 import DatetimeAttributeModel from "../DatetimeAttributeModel";
-import { setSettings } from "../../../constants/Settings";
 import { ATTRIBUTE_WIDTH } from "../../../constants";
 
 describe("datetimeAttributeModel", () => {
-  describe("with date readonly format in product default format", () => {
-    beforeAll(() => {
-      // using product default format
-      setSettings({ DATE_READONLY_FORMAT: "dd-MM-yyyy" });
-      setSettings({ DATE_INPUT_FORMAT: "dd-MM-yyyy" });
-    });
-
-    it("should be able to create an empty DatetimeAttribute object", () => {
-      const attribute = new DatetimeAttributeModel({}, { type: "datetime" });
-
-      expect(attribute).toBeInstanceOf(DatetimeAttributeModel);
-
-      expect(attribute.type).toBe("datetime");
-      expect(attribute.format).toBe("yyyy-MM-dd'T'HH:mm:ss");
-      expect(attribute.getInputValue()).toBe("");
-      expect(attribute.inputvalue).toBe("");
-      expect(attribute.readonlyvalue).toBe("");
-
-      attribute.addConstraints();
-      expect(attribute.constraintCollection).toHaveLength(1);
-    });
-
-    it("should be able to update", () => {
-      const attribute = new DatetimeAttributeModel(
-        {},
-        {
-          type: "datetime",
-          format: "dd-MM-yyyy HH:mm",
-        }
-      );
-
-      attribute.update("18-08-2016 13:45");
-      expect(attribute.getInputValue()).toBe("18-08-2016 13:45");
-      expect(attribute.getInitialInputValue("2016-08-18T13:45:23")).toBe(
-        "18-08-2016 13:45"
-      );
-
-      expect(attribute.readonlyvalue).toBe("18-08-2016 13:45");
-
-      attribute.update(null);
-      expect(attribute.getInputValue()).toBe("");
-
-      attribute.update("");
-      expect(attribute.value).toBeNull();
-
-      attribute.update("aaaa");
-      expect(attribute.value).toBe("Invalid Date");
-    });
-
-    it("should be able to handle min and max date in only date format and renders in format", () => {
-      const attribute = new DatetimeAttributeModel(
-        {},
-        {
-          type: "datetime",
-          format: "dd-MM-yyyy HH:mm",
-          mindate: "2010-10-01T00:00:00",
-          maxdate: "2010-10-31T23:59:59",
-        }
-      );
-
-      attribute.update("18-08-2016 13:45");
-
-      expect(attribute.isValid).toBe(false);
-      expect(attribute.formatValue(attribute.mindate)).toBe("01-10-2010 00:00");
-      expect(attribute.formatValue(attribute.maxdate)).toBe("31-10-2010 23:59");
-    });
+  it("should be able to create an empty DatetimeAttribute object", () => {
+    const attribute = new DatetimeAttributeModel({}, { type: "datetime" });
+
+    expect(attribute).toBeInstanceOf(DatetimeAttributeModel);
+
+    expect(attribute.type).toBe("datetime");
+    expect(attribute.format).toBe("yyyy-MM-dd'T'HH:mm:ss");
+    expect(attribute.getInputValue()).toBe("");
+    expect(attribute.inputvalue).toBe("");
+    expect(attribute.readonlyvalue).toBe("");
+
+    attribute.addConstraints();
+    expect(attribute.constraintCollection).toHaveLength(1);
   });
 
-  describe("with customized readonly format for dates", () => {
-    beforeAll(() => {
-      // readonly format in non product default format
-      setSettings({ DATE_READONLY_FORMAT: "MM-dd-yyyy" });
-    });
-
-    it("should show datetime readonly value in custom date format", () => {
-      const attribute = new DatetimeAttributeModel(
-        {},
-        {
-          type: "datetime",
-          format: "dd-MM-yyyy HH:mm",
-        }
-      );
-
-      attribute.update("18-08-2016 13:45");
-      expect(attribute.readonlyvalue).toBe("08-18-2016 13:45");
-    });
-
-    it("should show date only value according in custom date format", () => {
-      const attribute = new DatetimeAttributeModel(
-        { value: "2017-07-29" },
-        {
-          type: "date",
-          format: "dd-MM-yyyy",
-        }
-      );
-
-      expect(attribute.readonlyvalue).toBe("07-29-2017");
-    });
-
-    it("should show custom format with am/pm in custom date format", () => {
-      const attribute = new DatetimeAttributeModel(
-        { value: "2031-12-21T17:41:21" },
-        { type: "datetime", format: "dd-MM-yyyy hh:mm:ss a" }
-      );
-
-      expect(attribute.readonlyvalue).toBe("12-21-2031 05:41:21 PM");
-    });
-
-    it("should return AttributeWidth for dates", () => {
-      const attribute = new DatetimeAttributeModel(
-        {},
-        {
-          type: "date",
-        }
-      );
-      expect(attribute.readonlyWidth).toBe(ATTRIBUTE_WIDTH.SMALL);
-    });
-
-    it("should return AttributeWidth for times", () => {
-      const attribute = new DatetimeAttributeModel(
-        {},
-        {
-          type: "time",
-        }
-      );
-      expect(attribute.readonlyWidth).toBe(ATTRIBUTE_WIDTH.SMALL);
-    });
-
-    it("should return AttributeWidth for datetime", () => {
-      const attribute = new DatetimeAttributeModel(
-        {},
-        {
-          type: "datetime",
-        }
-      );
-      expect(attribute.readonlyWidth).toBe(ATTRIBUTE_WIDTH.MEDIUM);
-    });
-
-    it("can validate datetime with datetime format", () => {
-      const datetimeFormat = new DatetimeAttributeModel(
-        {},
-        {
-          type: "datetime",
-          format: "dd-MM-yyyy HH:mm",
-        }
-      );
-
-      expect(datetimeFormat.validate("19-10-2010 1:45")).toBe(true);
-      expect(datetimeFormat.validate("19-10-2010 13:45")).toBe(true);
-
-      expect(datetimeFormat.validate("19-10-2010")).toBe(false);
-      expect(datetimeFormat.validate("13:45")).toBe(false);
-      expect(datetimeFormat.validate("19-10-2010 1:45 am")).toBe(false);
-    });
-
-    it("can validate datetime with only date format", () => {
-      const dateFormat = new DatetimeAttributeModel(
-        {},
-        {
-          type: "datetime",
-          format: "dd-MM-yyyy",
-        }
-      );
-
-      expect(dateFormat.validate("19-10-2010")).toBe(true);
-
-      expect(dateFormat.validate("19-10-2010 1:45")).toBe(false);
-      expect(dateFormat.validate("13:45")).toBe(false);
-      expect(dateFormat.validate("19-10-2010 1:45 am")).toBe(false);
-    });
-
-    it("can validate datetime with datetime am/pm format", () => {
-      const datetimeAmPmFormat = new DatetimeAttributeModel(
-        {},
-        {
-          type: "datetime",
-          format: "dd-MM-yyyy hh:mm a",
-        }
-      );
-
-      expect(datetimeAmPmFormat.validate("19-10-2010 1:45 am")).toBe(true);
-      expect(datetimeAmPmFormat.validate("19-10-2010 1:45 pm")).toBe(true);
-
-      expect(datetimeAmPmFormat.validate("19-10-2010 1:45")).toBe(false);
-      expect(datetimeAmPmFormat.validate("19-10-2010 13:45")).toBe(false);
-    });
-
-    it("can handle old datetime format with ms", () => {
-      const attribute = new DatetimeAttributeModel(
-        { value: "2031-12-21T17:41:21.000" },
-        {
-          type: "datetime",
-          format: "dd-MM-yyyy HH:mm",
-        }
-      );
-
-      expect(attribute.readonlyvalue).toBe("12-21-2031 17:41");
-    });
+  it("should be able to update", () => {
+    const attribute = new DatetimeAttributeModel(
+      {},
+      {
+        type: "datetime",
+        format: "dd-MM-yyyy HH:mm",
+      }
+    );
+
+    attribute.update("18-08-2016 13:45");
+    expect(attribute.getInputValue()).toBe("18-08-2016 13:45");
+    expect(attribute.getInitialInputValue("2016-08-18T13:45:23")).toBe(
+      "18-08-2016 13:45"
+    );
+
+    expect(attribute.readonlyvalue).toBe("18-08-2016 13:45");
+
+    attribute.update(null);
+    expect(attribute.getInputValue()).toBe("");
+
+    attribute.update("");
+    expect(attribute.value).toBeNull();
+
+    attribute.update("aaaa");
+    expect(attribute.value).toBe("Invalid Date");
+  });
+
+  it("should be able to handle min and max date in only date format and renders in format", () => {
+    const attribute = new DatetimeAttributeModel(
+      {},
+      {
+        type: "datetime",
+        format: "dd-MM-yyyy HH:mm",
+        mindate: "2010-10-01T00:00:00",
+        maxdate: "2010-10-31T23:59:59",
+      }
+    );
+
+    attribute.update("18-08-2016 13:45");
+
+    expect(attribute.isValid).toBe(false);
+    expect(attribute.formatValue(attribute.mindate)).toBe("01-10-2010 00:00");
+    expect(attribute.formatValue(attribute.maxdate)).toBe("31-10-2010 23:59");
+  });
+
+  it("should return AttributeWidth for dates", () => {
+    const attribute = new DatetimeAttributeModel(
+      {},
+      {
+        type: "date",
+      }
+    );
+    expect(attribute.readonlyWidth).toBe(ATTRIBUTE_WIDTH.SMALL);
+  });
+
+  it("should return AttributeWidth for times", () => {
+    const attribute = new DatetimeAttributeModel(
+      {},
+      {
+        type: "time",
+      }
+    );
+    expect(attribute.readonlyWidth).toBe(ATTRIBUTE_WIDTH.SMALL);
+  });
+
+  it("should return AttributeWidth for datetime", () => {
+    const attribute = new DatetimeAttributeModel(
+      {},
+      {
+        type: "datetime",
+      }
+    );
+    expect(attribute.readonlyWidth).toBe(ATTRIBUTE_WIDTH.MEDIUM);
+  });
+
+  it("can validate datetime with datetime format", () => {
+    const datetimeFormat = new DatetimeAttributeModel(
+      {},
+      {
+        type: "datetime",
+        format: "dd-MM-yyyy HH:mm",
+      }
+    );
+
+    expect(datetimeFormat.validate("19-10-2010 1:45")).toBe(true);
+    expect(datetimeFormat.validate("19-10-2010 13:45")).toBe(true);
+
+    expect(datetimeFormat.validate("19-10-2010")).toBe(false);
+    expect(datetimeFormat.validate("13:45")).toBe(false);
+    expect(datetimeFormat.validate("19-10-2010 1:45 am")).toBe(false);
+  });
+
+  it("can validate datetime with only date format", () => {
+    const dateFormat = new DatetimeAttributeModel(
+      {},
+      {
+        type: "datetime",
+        format: "dd-MM-yyyy",
+      }
+    );
+
+    expect(dateFormat.validate("19-10-2010")).toBe(true);
+
+    expect(dateFormat.validate("19-10-2010 1:45")).toBe(false);
+    expect(dateFormat.validate("13:45")).toBe(false);
+    expect(dateFormat.validate("19-10-2010 1:45 am")).toBe(false);
+  });
+
+  it("can validate datetime with datetime am/pm format", () => {
+    const datetimeAmPmFormat = new DatetimeAttributeModel(
+      {},
+      {
+        type: "datetime",
+        format: "dd-MM-yyyy hh:mm a",
+      }
+    );
+
+    expect(datetimeAmPmFormat.validate("19-10-2010 1:45 am")).toBe(true);
+    expect(datetimeAmPmFormat.validate("19-10-2010 1:45 pm")).toBe(true);
+
+    expect(datetimeAmPmFormat.validate("19-10-2010 1:45")).toBe(false);
+    expect(datetimeAmPmFormat.validate("19-10-2010 13:45")).toBe(false);
+  });
+
+  it("can handle old datetime format with ms", () => {
+    const attribute = new DatetimeAttributeModel(
+      { value: "2031-12-21T17:41:21.000" },
+      {
+        type: "datetime",
+        format: "dd-MM-yyyy HH:mm",
+      }
+    );
+
+    expect(attribute.readonlyvalue).toBe("21-12-2031 17:41");
   });
 
-  describe("without date input and date readonly settings defined", () => {
-    beforeAll(() => {
-      // explicitly clear setting
-      setSettings({ DATE_INPUT_FORMAT: "" });
-      setSettings({ DATE_READONLY_FORMAT: "" });
-    });
-
-    it("returns date part of formatlabel as placeholder if attribute has date and time", () => {
-      const attribute = new DatetimeAttributeModel(
-        {},
-        {
-          type: "datetime",
-          format: "dd-MM-yyyy HH:mm",
-          formatlabel: "dd-MM-yyyy HH:mm",
-        }
-      );
-
-      expect(attribute.placeholder).toBe("dd-MM-yyyy");
-    });
+  it("returns date part of formatlabel as placeholder if attribute has date and time", () => {
+    const attribute = new DatetimeAttributeModel(
+      {},
+      {
+        type: "datetime",
+        format: "dd-MM-yyyy HH:mm",
+        formatlabel: "dd-MM-yyyy HH:mm",
+      }
+    );
+
+    expect(attribute.placeholder).toBe("dd-MM-yyyy");
   });
 });

package/lib/models/attributes/__tests__/TimestampModel.spec.js.flow

@@ -1,10 +1,5 @@
 import DatetimeAttributeModel from "../DatetimeAttributeModel";
-import { setSettings } from "../../../constants/Settings";
-
 describe("timestampAttributeModel", () => {
-  beforeAll(() => {
-    setSettings({ DATE_INPUT_FORMAT: "dd-MM-yyyy" });
-  });
   it("should be able to create an empty TimestampAttribute object", () => {
     const attribute = new DatetimeAttributeModel({}, { type: "timestamp" });
 

package/lib/react-client/Init.js

@@ -16,7 +16,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 const Init = _ref => {
   let {
     store,
-    history,
+    routerHistory,
     contextPath,
     theme,
     children,
@@ -30,7 +30,7 @@ const Init = _ref => {
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ErrorBoundary.default, {
           FallbackComponent: ErrorFallbackComponent,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRouter.Router, {
-            history: history,
+            history: routerHistory,
             basename: contextPath,
             children: children
           })

package/lib/react-client/Init.js.flow

@@ -14,7 +14,7 @@ import type { Props as FallbackProps } from "../react/ErrorBoundaryFallback";
 
 export type Props = {
   +store: ReduxStore,
-  +history: RouterHistory,
+  +routerHistory: RouterHistory,
   +contextPath: string,
   +theme?: Theme | Array<Theme>,
   +children: ?Node,
@@ -25,7 +25,7 @@ export type Props = {
  */
 const Init = ({
   store,
-  history,
+  routerHistory,
   contextPath,
   theme,
   children,
@@ -35,7 +35,7 @@ const Init = ({
     <ThemeProvider theme={theme}>
       <HelmetProvider>
         <ErrorBoundary FallbackComponent={ErrorFallbackComponent}>
-          <Router history={history} basename={contextPath}>
+          <Router history={routerHistory} basename={contextPath}>
             {children}
           </Router>
         </ErrorBoundary>

package/lib/react-client/Init.js.map

@@ -1 +1 @@
-{"version":3,"file":"Init.js","names":["Init","store","history","contextPath","theme","children","ErrorFallbackComponent","displayName"],"sources":["../../src/react-client/Init.js"],"sourcesContent":["// @flow\nimport { Provider } from \"react-redux\";\nimport { HelmetProvider } from \"react-helmet-async\";\nimport { Router } from \"react-router\";\n\nimport ThemeProvider from \"../react-theme/ThemeProvider\";\nimport ErrorBoundary from \"../react/ErrorBoundary\";\n\nimport type { ComponentType, Node } from \"react\";\nimport type { RouterHistory } from \"react-router\";\nimport type { Theme } from \"../react-theme/types\";\nimport type { ReduxStore } from \"../redux/types\";\nimport type { Props as FallbackProps } from \"../react/ErrorBoundaryFallback\";\n\nexport type Props = {\n  +store: ReduxStore,\n  +history: RouterHistory,\n  +contextPath: string,\n  +theme?: Theme | Array<Theme>,\n  +children: ?Node,\n  +ErrorFallbackComponent?: ComponentType<FallbackProps>,\n};\n\n/**\n */\nconst Init = ({\n  store,\n  history,\n  contextPath,\n  theme,\n  children,\n  ErrorFallbackComponent,\n}: Props): Node => (\n  <Provider store={store}>\n    <ThemeProvider theme={theme}>\n      <HelmetProvider>\n        <ErrorBoundary FallbackComponent={ErrorFallbackComponent}>\n          <Router history={history} basename={contextPath}>\n            {children}\n          </Router>\n        </ErrorBoundary>\n      </HelmetProvider>\n    </ThemeProvider>\n  </Provider>\n);\n\nInit.displayName = \"BI.Init\";\n\nexport default Init;\n"],"mappings":";;;;;;;AACA;AACA;AACA;AAEA;AACA;AAAmD;AAiBnD;AACA;AACA,MAAMA,IAAI,GAAG;EAAA,IAAC;IACZC,KAAK;IACLC,OAAO;IACPC,WAAW;IACXC,KAAK;IACLC,QAAQ;IACRC;EACK,CAAC;EAAA,oBACN,qBAAC,oBAAQ;IAAC,KAAK,EAAEL,KAAM;IAAA,uBACrB,qBAAC,sBAAa;MAAC,KAAK,EAAEG,KAAM;MAAA,uBAC1B,qBAAC,gCAAc;QAAA,uBACb,qBAAC,sBAAa;UAAC,iBAAiB,EAAEE,sBAAuB;UAAA,uBACvD,qBAAC,mBAAM;YAAC,OAAO,EAAEJ,OAAQ;YAAC,QAAQ,EAAEC,WAAY;YAAA,UAC7CE;UAAQ;QACF;MACK;IACD;EACH,EACP;AAAA,CACZ;AAEDL,IAAI,CAACO,WAAW,GAAG,SAAS;AAAC,eAEdP,IAAI;AAAA"}
+{"version":3,"file":"Init.js","names":["Init","store","routerHistory","contextPath","theme","children","ErrorFallbackComponent","displayName"],"sources":["../../src/react-client/Init.js"],"sourcesContent":["// @flow\nimport { Provider } from \"react-redux\";\nimport { HelmetProvider } from \"react-helmet-async\";\nimport { Router } from \"react-router\";\n\nimport ThemeProvider from \"../react-theme/ThemeProvider\";\nimport ErrorBoundary from \"../react/ErrorBoundary\";\n\nimport type { ComponentType, Node } from \"react\";\nimport type { RouterHistory } from \"react-router\";\nimport type { Theme } from \"../react-theme/types\";\nimport type { ReduxStore } from \"../redux/types\";\nimport type { Props as FallbackProps } from \"../react/ErrorBoundaryFallback\";\n\nexport type Props = {\n  +store: ReduxStore,\n  +routerHistory: RouterHistory,\n  +contextPath: string,\n  +theme?: Theme | Array<Theme>,\n  +children: ?Node,\n  +ErrorFallbackComponent?: ComponentType<FallbackProps>,\n};\n\n/**\n */\nconst Init = ({\n  store,\n  routerHistory,\n  contextPath,\n  theme,\n  children,\n  ErrorFallbackComponent,\n}: Props): Node => (\n  <Provider store={store}>\n    <ThemeProvider theme={theme}>\n      <HelmetProvider>\n        <ErrorBoundary FallbackComponent={ErrorFallbackComponent}>\n          <Router history={routerHistory} basename={contextPath}>\n            {children}\n          </Router>\n        </ErrorBoundary>\n      </HelmetProvider>\n    </ThemeProvider>\n  </Provider>\n);\n\nInit.displayName = \"BI.Init\";\n\nexport default Init;\n"],"mappings":";;;;;;;AACA;AACA;AACA;AAEA;AACA;AAAmD;AAiBnD;AACA;AACA,MAAMA,IAAI,GAAG;EAAA,IAAC;IACZC,KAAK;IACLC,aAAa;IACbC,WAAW;IACXC,KAAK;IACLC,QAAQ;IACRC;EACK,CAAC;EAAA,oBACN,qBAAC,oBAAQ;IAAC,KAAK,EAAEL,KAAM;IAAA,uBACrB,qBAAC,sBAAa;MAAC,KAAK,EAAEG,KAAM;MAAA,uBAC1B,qBAAC,gCAAc;QAAA,uBACb,qBAAC,sBAAa;UAAC,iBAAiB,EAAEE,sBAAuB;UAAA,uBACvD,qBAAC,mBAAM;YAAC,OAAO,EAAEJ,aAAc;YAAC,QAAQ,EAAEC,WAAY;YAAA,UACnDE;UAAQ;QACF;MACK;IACD;EACH,EACP;AAAA,CACZ;AAEDL,IAAI,CAACO,WAAW,GAAG,SAAS;AAAC,eAEdP,IAAI;AAAA"}

package/lib/react-client/client.js

@@ -4,10 +4,8 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.setupClient = exports.setUnhandledRejectionEvent = exports.default = exports.addContentLoadedEvent = void 0;
 var _trim = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/trim"));
-var _elementClosest = _interopRequireDefault(require("element-closest"));
-require("focus-visible");
 var _reactDom = require("react-dom");
 var _objects = require("../utils/helpers/objects");
 var _setimmediate = _interopRequireDefault(require("setimmediate"));
@@ -25,16 +23,9 @@ var _exceptions = require("../exceptions");
 var _Init = _interopRequireDefault(require("./Init"));
 var _beforeRenderHooks = require("../redux/store/beforeRenderHooks");
 var _jsxRuntime = require("react/jsx-runtime");
-/* polyfills needed for ie11 */
-(0, _elementClosest.default)(window);
-
-/* polyfill for focus-visible */
-
 /*
  * deserialize serialized data from the server to provide a smooth dehydration.
  */
-/**
- */
 const parseDataToJSON = data => {
   try {
     return JSON.parse(data);
@@ -42,22 +33,42 @@ const parseDataToJSON = data => {
     throw new _exceptions.JsonParseException(`Error parsing content ${data}`);
   }
 };
-
-/**
- * Mount the webapplication to the DOM, used client side when JavaScript is enabled.
- */
-const client = props => {
+const getDataFromServer = () => {
   var _context;
-  if (typeof window.contextPath === "undefined") {
-    throw new Error("Missing contextPath on window object");
-  }
   const dataElement = document.querySelector('script[type="application/json"][data-app-state="app-json"]');
   if (!dataElement) {
     throw new Error("Error loading state, json not found");
   } else if ((0, _trim.default)(_context = dataElement.textContent).call(_context) === "") {
-    return;
+    return {};
   }
-  const data = parseDataToJSON(dataElement.textContent);
+  return parseDataToJSON(dataElement.textContent);
+};
+
+/**
+ */
+const setUnhandledRejectionEvent = store => {
+  window.onunhandledrejection = event => {
+    if (event.detail) {
+      return (0, _setimmediate.default)(() => {
+        const errorMessage = event.detail.reason.message.toString();
+        store.dispatch((0, _Notification.showXHRErrorNotification)(errorMessage));
+        throw event.detail.reason;
+      });
+    }
+    return event;
+  };
+};
+
+/**
+ */
+exports.setUnhandledRejectionEvent = setUnhandledRejectionEvent;
+const setupClient = function () {
+  let customReducers = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  let beforeRenderHooks = arguments.length > 1 ? arguments[1] : undefined;
+  if (typeof window.contextPath === "undefined") {
+    throw new Error("Missing contextPath on window object");
+  }
+  const data = getDataFromServer();
 
   // remove all resources from cache
   _Cache.default.clear("^res:");
@@ -67,9 +78,9 @@ const client = props => {
     basename: (0, _Settings.getBasePath)()
   });
   const {
-    history,
+    routerHistory,
     store
-  } = (0, _configureStore.default)(browserHistory, props.customReducers ?? {}, (0, _rehydrate.default)(data));
+  } = (0, _configureStore.default)(browserHistory, customReducers, (0, _rehydrate.default)(data));
   (0, _Preferences.setAllContentInDataSetting)(store.getState());
   (0, _Preferences.setLoginPreferences)(store.getState());
 
@@ -80,7 +91,7 @@ const client = props => {
     }
   });
   if ((0, _objects.has)(data, "error.name")) {
-    const error = new _exceptions.FetchException(data.error.response);
+    const error = new _exceptions.FetchException(data?.error?.response);
     store.dispatch((0, _Error.handleError)(error));
   }
   if (_Cache.default.getItem("auth")) {
@@ -88,54 +99,73 @@ const client = props => {
   }
 
   // listen to history change and update the redux router store
-  history.listen((location, action) => {
+  routerHistory.listen((location, action) => {
     store.dispatch((0, _RouterActions.locationChange)(location, action));
   });
-
-  /**
-   */
-  window.onunhandledrejection = event => {
-    if (event.detail) {
-      return (0, _setimmediate.default)(() => {
-        const errorMessage = event.detail.reason.message.toString();
-        store.dispatch((0, _Notification.showXHRErrorNotification)(errorMessage));
-        throw event.detail.reason;
-      });
-    }
-    return event;
-  };
+  setUnhandledRejectionEvent(store);
   if (document.body) {
     document.body.className = "js";
   }
-  if (props.beforeRenderHooks) {
-    (0, _beforeRenderHooks.handleBeforeRenderHooks)(props.beforeRenderHooks, {
+  if (beforeRenderHooks) {
+    (0, _beforeRenderHooks.handleBeforeRenderHooks)(beforeRenderHooks, {
       store
     });
   }
-  addContentLoadedEvent(store, history, props.theme, props.render, props.ErrorFallbackComponent);
+  return {
+    store,
+    routerHistory
+  };
 };
 
 /**
  */
-const addContentLoadedEvent = (store, history, theme, render, ErrorFallbackComponent) => {
+exports.setupClient = setupClient;
+const addContentLoadedEvent = (store, routerHistory, theme, render, ErrorFallbackComponent, mount) => {
   window.addEventListener("DOMContentLoaded", () => {
     const applicationNode = document.querySelector("#application");
-    if (applicationNode) {
-      const isSSR = applicationNode.querySelector(".application");
-      const mount = isSSR ? _reactDom.hydrate : _reactDom.render;
-      mount( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Init.default, {
-        store: store,
-        history: history,
-        contextPath: window.contextPath,
-        theme: theme,
-        ErrorFallbackComponent: ErrorFallbackComponent,
-        children: render()
-      }), applicationNode);
-    } else {
+    if (!applicationNode) {
       throw new Error("No DOM element with id application found to attach client to");
     }
+    mount(applicationNode, /*#__PURE__*/(0, _jsxRuntime.jsx)(_Init.default, {
+      store: store,
+      routerHistory: routerHistory,
+      contextPath: window.contextPath,
+      theme: theme,
+      ErrorFallbackComponent: ErrorFallbackComponent,
+      children: render()
+    }));
   });
 };
+
+/**
+ */
+exports.addContentLoadedEvent = addContentLoadedEvent;
+const mountClient = (applicationNode, initComponent) => {
+  const isSSR = applicationNode.querySelector(".application");
+  if (isSSR) {
+    (0, _reactDom.hydrate)(initComponent, applicationNode);
+  } else {
+    (0, _reactDom.render)(initComponent, applicationNode);
+  }
+};
+
+/**
+ * Mount the webapplication to the DOM, setup redux store and caches, add unhandledRejectionEvent, used client side when JavaScript is enabled.
+ */
+const client = _ref => {
+  let {
+    customReducers,
+    theme,
+    render,
+    beforeRenderHooks,
+    ErrorFallbackComponent
+  } = _ref;
+  const {
+    store,
+    routerHistory
+  } = setupClient(customReducers, beforeRenderHooks);
+  addContentLoadedEvent(store, routerHistory, theme, render, ErrorFallbackComponent, mountClient);
+};
 var _default = client;
 exports.default = _default;
 //# sourceMappingURL=client.js.map