@beinformed/ui 1.60.5 → 1.60.6

package/src/hooks/useForm.js

@@ -10,7 +10,7 @@ import type {
   UpdateFormAction,
 } from "../redux/_modularui";
 import { loadModularUI, removeModelByKey } from "../redux/_modularui";
-import { createKeyForModularUIStore, useModularUI } from "./useModularUI";
+import { useModularUI } from "./useModularUI";
 
 import {
   addRepeatableAttributeSet,
@@ -47,8 +47,6 @@ type AttributeUpdateHook = (
   options: UpdateFormOptions,
 ) => void;
 
-const FORM_MODEL_KEY = "form";
-
 /**
  * Load a form by href
  */
@@ -59,7 +57,7 @@ export const useForm = (href: string | Href, data?: Object): ?FormModel => {
     formHref.addParameter("commit", "false");
   }
 
-  const form = useModularUI(FORM_MODEL_KEY, formHref, {
+  const form = useModularUI("form", formHref, {
     method: HTTP_METHODS.POST,
     targetModel: FormModel,
     removeOnUnmount: true,
@@ -83,15 +81,9 @@ export const useFormNavigation = (): FormNavigationHook => {
 
   const cancel = (form: FormModel) => dispatch(cancelForm(form));
 
-  const submit = (form: FormModel) => {
-    const connectKey = createKeyForModularUIStore(
-      FORM_MODEL_KEY,
-      form.selfhref.toString(),
-      form.locale,
-    );
-
-    return dispatch(
-      loadModularUI(connectKey, form.selfhref, {
+  const submit = (form: FormModel) =>
+    dispatch(
+      loadModularUI(form.connectKey, form.selfhref, {
         method: HTTP_METHODS.POST,
         data: form.formdata,
         updateHandler: (newModel: ModularUIModel): ModularUIModel => {
@@ -105,7 +97,6 @@ export const useFormNavigation = (): FormNavigationHook => {
         targetModel: FormModel,
       }),
     );
-  };
 
   const remove = (form: FormModel) =>
     dispatch(removeModelByKey(form.connectKey));

package/src/hooks/useModularUI.js

@@ -18,26 +18,11 @@ import type { RequestModularUIOptions } from "../utils";
 
 /**
  */
-export const createKeyForModularUIStore = (
-  modelKey: string,
-  url: string,
-  locale: string,
-): string => {
-  return `${modelKey}(${url})(${locale})`;
-};
-
-/**
- */
-const useKeyForHook = (
-  modelKey: string,
-  url: string,
-  removeQuerystringFromKey: boolean = true,
-): string => {
+const useKeyForHook = (modelKey: string, url: string) => {
   const locale = useLocale();
-  const href = removeQuerystringFromKey ? url.split("?")[0] : url;
   return useMemo(
-    () => createKeyForModularUIStore(modelKey, href, locale),
-    [modelKey, href, locale],
+    () => `${modelKey}(${url.split("?")[0]})(${locale})`,
+    [modelKey, url, locale],
   );
 };
 
@@ -54,11 +39,7 @@ export const useModularUI = (
 ): any => {
   const dispatch = useDispatch();
   const href = useMemo(() => url?.toString() || "", [url]);
-  const key = useKeyForHook(
-    modelKey,
-    href,
-    !options.method || options.method === HTTP_METHODS.GET,
-  );
+  const key = useKeyForHook(modelKey, href);
 
   const modelSelector = useMemo(() => (state) => state.modularui[key], [key]);
   const model = useSelector(modelSelector);

package/src/redux/_modularui/ModularUIActions.js

@@ -81,9 +81,10 @@ export const resetModularUI = (): ResetModularUIAction => ({
 export const updateStatus = (
   key: string,
   status: $Keys<typeof MODULARUI_STATUS>,
+  requestOptions: any,
 ): UpdateStatusAction => ({
   type: "MODULARUI/STATUS",
-  payload: { key, status },
+  payload: { key, status, requestOptions },
 });
 
 /**
@@ -177,13 +178,31 @@ export const loadModularUI =
     key: string,
     href: Href | string,
     options?: RequestModularUIOptions,
+    retryCount: number = 3,
+    retryDelay: number = 200,
   ): ThunkAction =>
   (dispatch: Dispatch, getState) => {
     const modularuiStore = getState()?.modularui;
-    if (
-      modularuiStore &&
-      modularuiStore[key]?.status === MODULARUI_STATUS.LOADING
-    ) {
+    const currentRequest = modularuiStore?.[key];
+
+    const isLoading = currentRequest?.status === MODULARUI_STATUS.LOADING;
+
+    if (isLoading) {
+      const isDifferentRequest =
+        currentRequest.requestOptions?.href?.toString() !== href.toString();
+      if (isDifferentRequest && retryCount > 0) {
+        return new Promise((resolve) => {
+          setTimeout(() => {
+            resolve(
+              dispatch(
+                loadModularUI(key, href, options, retryCount - 1, retryDelay),
+              ),
+            );
+          }, retryDelay);
+        });
+      }
+
+      // Same request is already loading — do nothing
       return Promise.resolve();
     }
 

package/src/redux/_modularui/ModularUIMiddleware.js

@@ -150,7 +150,7 @@ const handleFetch = (
 
   const modularuiRequest = createRequest(requestOptions);
 
-  dispatch(updateStatus(key, MODULARUI_STATUS.LOADING));
+  dispatch(updateStatus(key, MODULARUI_STATUS.LOADING, requestOptions));
 
   return modularuiRequest
     .fetch()

package/src/redux/_modularui/ModularUIReducer.js

@@ -11,7 +11,15 @@ import type { ModularUIModel } from "../../models";
  */
 const updateStatus = (
   state: ModularUIState,
-  { key, status }: { key: string, status: $Keys<typeof MODULARUI_STATUS> },
+  {
+    key,
+    status,
+    requestOptions,
+  }: {
+    key: string,
+    status: $Keys<typeof MODULARUI_STATUS>,
+    requestOptions: any,
+  },
 ) => {
   // model should always be available when status is not loading
   if (status !== MODULARUI_STATUS.LOADING && !state[key]) {
@@ -24,6 +32,7 @@ const updateStatus = (
       ...state[key],
       status,
       lastModification: Date.now(),
+      requestOptions: requestOptions || state[key]?.requestOptions,
     },
   };
 };

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

@@ -72,7 +72,11 @@ describe("modularui actions", () => {
     expect(store.getActions()).toStrictEqual([
       {
         type: "MODULARUI/STATUS",
-        payload: { key: "application", status: MODULARUI_STATUS.LOADING },
+        payload: {
+          key: "application",
+          status: MODULARUI_STATUS.LOADING,
+          requestOptions: undefined,
+        },
       },
     ]);
   });

package/src/redux/_modularui/types.js

@@ -21,6 +21,7 @@ export type ModelEntry = {
   +status: string,
   +model: ModularUIModel,
   +lastModification: number,
+  +requestOptions?: any,
 };
 
 export type ModularUIState = {
@@ -111,6 +112,7 @@ export type UpdateStatusAction = {
   payload: {
     key: string,
     status: $Keys<MODULARUI_STATUS>,
+    requestOptions: any,
   },
 };