@beinformed/ui 1.27.6 → 1.28.0

package/src/models/attributes/__tests__/DatetimeAttributeModel.spec.js

@@ -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/src/models/attributes/__tests__/TimestampModel.spec.js

@@ -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/src/react-client/Init.js

@@ -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/src/react-client/client.js

@@ -1,12 +1,5 @@
 // @flow
-/* polyfills needed for ie11 */
-import elementClosest from "element-closest";
-elementClosest(window);
-
-/* polyfill for focus-visible */
-import "focus-visible";
-
-import { hydrate, render as reactRender } from "react-dom";
+import { hydrate, render } from "react-dom";
 
 import { has } from "../utils/helpers/objects";
 import setImmediate from "setimmediate";
@@ -36,12 +29,17 @@ import Init from "./Init";
 
 import { handleBeforeRenderHooks } from "../redux/store/beforeRenderHooks";
 
-import type { ComponentType } from "react";
+import type {
+  ComponentType,
+  Element as ReactElement,
+  ElementType,
+} from "react";
 import type { Theme } from "../react-theme/types";
 import type { CustomReducers, ReduxStore } from "../redux/types";
 import type { RouterHistory } from "react-router";
 import type { BeforeRenderHook } from "../redux/store/beforeRenderHooks";
 import type { Props as FallbackProps } from "../react/ErrorBoundaryFallback";
+
 export type Props = {
   customReducers?: CustomReducers,
   theme?: Theme | Array<Theme>,
@@ -53,8 +51,6 @@ export type Props = {
 /*
  * deserialize serialized data from the server to provide a smooth dehydration.
  */
-/**
- */
 const parseDataToJSON = (data: string) => {
   try {
     return JSON.parse(data);
@@ -63,24 +59,48 @@ const parseDataToJSON = (data: string) => {
   }
 };
 
-/**
- * Mount the webapplication to the DOM, used client side when JavaScript is enabled.
- */
-const client = (props: Props) => {
-  if (typeof window.contextPath === "undefined") {
-    throw new Error("Missing contextPath on window object");
-  }
-
+const getDataFromServer = () => {
   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 (dataElement.textContent.trim() === "") {
-    return;
+    return {};
   }
 
-  const data = parseDataToJSON(dataElement.textContent);
+  return parseDataToJSON(dataElement.textContent);
+};
+
+/**
+ */
+export const setUnhandledRejectionEvent = (store: ReduxStore) => {
+  window.onunhandledrejection = (event) => {
+    if (event.detail) {
+      return setImmediate(() => {
+        const errorMessage = event.detail.reason.message.toString();
+
+        store.dispatch(showXHRErrorNotification(errorMessage));
+        throw event.detail.reason;
+      });
+    }
+
+    return event;
+  };
+};
+
+/**
+ */
+export const setupClient = (
+  customReducers: CustomReducers = {},
+  beforeRenderHooks: ?Array<BeforeRenderHook>
+): { store: ReduxStore, routerHistory: RouterHistory } => {
+  if (typeof window.contextPath === "undefined") {
+    throw new Error("Missing contextPath on window object");
+  }
+
+  const data = getDataFromServer();
 
   // remove all resources from cache
   Cache.clear("^res:");
@@ -89,9 +109,9 @@ const client = (props: Props) => {
   const browserHistory: RouterHistory = createBrowserHistory({
     basename: getBasePath(),
   });
-  const { history, store } = configureStore(
+  const { routerHistory, store } = configureStore(
     browserHistory,
-    props.customReducers ?? {},
+    customReducers,
     rehydrate(data)
   );
 
@@ -106,7 +126,7 @@ const client = (props: Props) => {
   });
 
   if (has(data, "error.name")) {
-    const error = new FetchException(data.error.response);
+    const error = new FetchException(data?.error?.response);
     store.dispatch(handleError(error));
   }
 
@@ -115,74 +135,93 @@ const client = (props: Props) => {
   }
 
   // listen to history change and update the redux router store
-  history.listen((location, action) => {
+  routerHistory.listen((location, action) => {
     store.dispatch(locationChange(location, action));
   });
 
-  /**
-   */
-  window.onunhandledrejection = (event) => {
-    if (event.detail) {
-      return setImmediate(() => {
-        const errorMessage = event.detail.reason.message.toString();
-
-        store.dispatch(showXHRErrorNotification(errorMessage));
-        throw event.detail.reason;
-      });
-    }
-
-    return event;
-  };
+  setUnhandledRejectionEvent(store);
 
   if (document.body) {
     document.body.className = "js";
   }
 
-  if (props.beforeRenderHooks) {
-    handleBeforeRenderHooks(props.beforeRenderHooks, { store });
+  if (beforeRenderHooks) {
+    handleBeforeRenderHooks(beforeRenderHooks, { store });
   }
 
-  addContentLoadedEvent(
-    store,
-    history,
-    props.theme,
-    props.render,
-    props.ErrorFallbackComponent
-  );
+  return { store, routerHistory };
 };
 
 /**
  */
-const addContentLoadedEvent = (
+export const addContentLoadedEvent = (
   store: ReduxStore,
-  history: RouterHistory,
+  routerHistory: RouterHistory,
   theme?: Theme | Array<Theme>,
   render: Function,
-  ErrorFallbackComponent?: ComponentType<FallbackProps>
+  ErrorFallbackComponent?: ComponentType<FallbackProps>,
+  mount: Function
 ) => {
   window.addEventListener("DOMContentLoaded", () => {
     const applicationNode = document.querySelector("#application");
-    if (applicationNode) {
-      const isSSR = applicationNode.querySelector(".application");
-      const mount = isSSR ? hydrate : reactRender;
-      mount(
-        <Init
-          store={store}
-          history={history}
-          contextPath={window.contextPath}
-          theme={theme}
-          ErrorFallbackComponent={ErrorFallbackComponent}
-        >
-          {render()}
-        </Init>,
-        applicationNode
-      );
-    } else {
+    if (!applicationNode) {
       throw new Error(
         "No DOM element with id application found to attach client to"
       );
     }
+
+    mount(
+      applicationNode,
+      <Init
+        store={store}
+        routerHistory={routerHistory}
+        contextPath={window.contextPath}
+        theme={theme}
+        ErrorFallbackComponent={ErrorFallbackComponent}
+      >
+        {render()}
+      </Init>
+    );
   });
 };
 
+/**
+ */
+const mountClient = (
+  applicationNode: Element,
+  initComponent: ReactElement<ElementType>
+) => {
+  const isSSR = applicationNode.querySelector(".application");
+  if (isSSR) {
+    hydrate(initComponent, applicationNode);
+  } else {
+    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 = ({
+  customReducers,
+  theme,
+  render,
+  beforeRenderHooks,
+  ErrorFallbackComponent,
+}: Props) => {
+  const { store, routerHistory } = setupClient(
+    customReducers,
+    beforeRenderHooks
+  );
+
+  addContentLoadedEvent(
+    store,
+    routerHistory,
+    theme,
+    render,
+    ErrorFallbackComponent,
+    mountClient
+  );
+};
+
 export default client;