@beinformed/ui 1.42.2 → 1.43.1

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 All notable changes to this project will be documented in this file. See [commit-and-tag-version](https://github.com/absolute-version/commit-and-tag-version) for commit guidelines.
 
+## [1.43.1](https://git.beinformed.com/public/nl.beinformed.bi.layout.lib.ui/compare/v1.43.0...v1.43.1) (2024-03-11)
+
+
+### Bug Fixes
+
+* **models:** memoize retrieval of models from modularui ([b2c6b95](https://git.beinformed.com/public/nl.beinformed.bi.layout.lib.ui/commit/b2c6b95ba969e8b97553f3bbe4af183f6f02006a))
+
+## [1.43.0](https://git.beinformed.com/public/nl.beinformed.bi.layout.lib.ui/compare/v1.42.2...v1.43.0) (2024-03-11)
+
+
+### Features
+
+* **models:** new method on useModels hook to reload models by filter ([591a375](https://git.beinformed.com/public/nl.beinformed.bi.layout.lib.ui/commit/591a375a9ebfcd5e5477234bb01559c90f590840))
+
 ## [1.42.2](https://git.beinformed.com/public/nl.beinformed.bi.layout.lib.ui/compare/v1.42.1...v1.42.2) (2024-03-08)
 
 

package/esm/hooks/useModels.js

@@ -1,13 +1,30 @@
-import { useDispatch } from "react-redux";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
+import { createSelector } from "reselect";
+import { useSelector, useDispatch } from "react-redux";
 import { reloadModel } from "../redux/_modularui/ModularUIActions";
+import { MODULARUI_STATUS } from "../constants/Constants";
 /**
  * Hook that contains the reload property that can be used to reload a model
  */
 export const useModels = () => {
   const dispatch = useDispatch();
+  const selectModularUI = state => state.modularui;
+  const selector = createSelector([selectModularUI], modularui => {
+    var _context, _context2;
+    return _mapInstanceProperty(_context = _filterInstanceProperty(_context2 = _Object$values(modularui)).call(_context2, model => model.status === MODULARUI_STATUS.FINISHED)).call(_context, model => model.model);
+  });
+  const modularuiModels = useSelector(selector);
   return {
     reload: (model, options) => {
       dispatch(reloadModel(model, options));
+    },
+    reloadWithFilter: (callbackFn, options) => {
+      const modelsToReload = _filterInstanceProperty(modularuiModels).call(modularuiModels, callbackFn);
+      for (const modelToReload of modelsToReload) {
+        dispatch(reloadModel(modelToReload, options));
+      }
     }
   };
 };

package/esm/hooks/useModels.js.map

@@ -1 +1 @@
-{"version":3,"file":"useModels.js","names":["useDispatch","reloadModel","useModels","dispatch","reload","model","options"],"sources":["../../src/hooks/useModels.js"],"sourcesContent":["// @flow\nimport { useDispatch } from \"react-redux\";\n\nimport { reloadModel } from \"../redux/_modularui/ModularUIActions\";\n\nimport type { ModularUIModel } from \"../models/types\";\n\ntype UseModels = () => {\n  reload: (model: ModularUIModel, options?: any) => void,\n};\n\n/**\n * Hook that contains the reload property that can be used to reload a model\n */\nexport const useModels: UseModels = () => {\n  const dispatch = useDispatch();\n  return {\n    reload: (model: ModularUIModel, options?: Object) => {\n      dispatch(reloadModel(model, options));\n    },\n  };\n};\n"],"mappings":"AACA,SAASA,WAAW,QAAQ,aAAa;AAEzC,SAASC,WAAW,QAAQ,sCAAsC;AAQlE;AACA;AACA;AACA,OAAO,MAAMC,SAAoB,GAAGA,CAAA,KAAM;EACxC,MAAMC,QAAQ,GAAGH,WAAW,CAAC,CAAC;EAC9B,OAAO;IACLI,MAAM,EAAEA,CAACC,KAAqB,EAAEC,OAAgB,KAAK;MACnDH,QAAQ,CAACF,WAAW,CAACI,KAAK,EAAEC,OAAO,CAAC,CAAC;IACvC;EACF,CAAC;AACH,CAAC","ignoreList":[]}
+{"version":3,"file":"useModels.js","names":["createSelector","useSelector","useDispatch","reloadModel","MODULARUI_STATUS","useModels","dispatch","selectModularUI","state","modularui","selector","_context","_context2","_mapInstanceProperty","_filterInstanceProperty","_Object$values","call","model","status","FINISHED","modularuiModels","reload","options","reloadWithFilter","callbackFn","modelsToReload","modelToReload"],"sources":["../../src/hooks/useModels.js"],"sourcesContent":["// @flow\nimport { createSelector } from \"reselect\";\nimport { useSelector, useDispatch } from \"react-redux\";\n\nimport { reloadModel } from \"../redux/_modularui/ModularUIActions\";\nimport { MODULARUI_STATUS } from \"../constants/Constants\";\n\nimport type { ModularUIModel } from \"../models/types\";\nimport type { ReduxState } from \"../redux\";\n\ntype ReloadCallback = (model: ModularUIModel) => boolean;\n\ntype UseModels = () => {\n  reload: (model: ModularUIModel, options?: any) => void,\n  reloadWithFilter: (callbackFn: ReloadCallback, options?: any) => void,\n};\n\n/**\n * Hook that contains the reload property that can be used to reload a model\n */\nexport const useModels: UseModels = () => {\n  const dispatch = useDispatch();\n\n  const selectModularUI = (state: ReduxState) => state.modularui;\n  const selector = createSelector([selectModularUI], (modularui) =>\n    Object.values(modularui)\n      .filter((model) => model.status === MODULARUI_STATUS.FINISHED)\n      .map((model) => model.model),\n  );\n  const modularuiModels = useSelector(selector);\n\n  return {\n    reload: (model: ModularUIModel, options?: Object) => {\n      dispatch(reloadModel(model, options));\n    },\n    reloadWithFilter: (callbackFn: ReloadCallback, options?: Object) => {\n      const modelsToReload = modularuiModels.filter(callbackFn);\n      for (const modelToReload of modelsToReload) {\n        dispatch(reloadModel(modelToReload, options));\n      }\n    },\n  };\n};\n"],"mappings":";;;AACA,SAASA,cAAc,QAAQ,UAAU;AACzC,SAASC,WAAW,EAAEC,WAAW,QAAQ,aAAa;AAEtD,SAASC,WAAW,QAAQ,sCAAsC;AAClE,SAASC,gBAAgB,QAAQ,wBAAwB;AAYzD;AACA;AACA;AACA,OAAO,MAAMC,SAAoB,GAAGA,CAAA,KAAM;EACxC,MAAMC,QAAQ,GAAGJ,WAAW,CAAC,CAAC;EAE9B,MAAMK,eAAe,GAAIC,KAAiB,IAAKA,KAAK,CAACC,SAAS;EAC9D,MAAMC,QAAQ,GAAGV,cAAc,CAAC,CAACO,eAAe,CAAC,EAAGE,SAAS;IAAA,IAAAE,QAAA,EAAAC,SAAA;IAAA,OAC3DC,oBAAA,CAAAF,QAAA,GAAAG,uBAAA,CAAAF,SAAA,GAAAG,cAAA,CAAcN,SAAS,CAAC,EAAAO,IAAA,CAAAJ,SAAA,EACbK,KAAK,IAAKA,KAAK,CAACC,MAAM,KAAKd,gBAAgB,CAACe,QAAQ,CAAC,EAAAH,IAAA,CAAAL,QAAA,EACxDM,KAAK,IAAKA,KAAK,CAACA,KAAK,CAAC;EAAA,CAChC,CAAC;EACD,MAAMG,eAAe,GAAGnB,WAAW,CAACS,QAAQ,CAAC;EAE7C,OAAO;IACLW,MAAM,EAAEA,CAACJ,KAAqB,EAAEK,OAAgB,KAAK;MACnDhB,QAAQ,CAACH,WAAW,CAACc,KAAK,EAAEK,OAAO,CAAC,CAAC;IACvC,CAAC;IACDC,gBAAgB,EAAEA,CAACC,UAA0B,EAAEF,OAAgB,KAAK;MAClE,MAAMG,cAAc,GAAGX,uBAAA,CAAAM,eAAe,EAAAJ,IAAA,CAAfI,eAAe,EAAQI,UAAU,CAAC;MACzD,KAAK,MAAME,aAAa,IAAID,cAAc,EAAE;QAC1CnB,QAAQ,CAACH,WAAW,CAACuB,aAAa,EAAEJ,OAAO,CAAC,CAAC;MAC/C;IACF;EACF,CAAC;AACH,CAAC","ignoreList":[]}

package/lib/hooks/__tests__/useModels.spec.js.flow

@@ -4,6 +4,8 @@ import { Provider } from "react-redux";
 import configureMockStore from "redux-mock-store";
 
 import application from "../../models/application/__mock__/application";
+import caselist from "../../models/list/__mock__/caselist";
+
 import thunk from "redux-thunk";
 import { Href } from "../../models";
 
@@ -11,7 +13,7 @@ const middlewares = [thunk];
 const mockStore = configureMockStore(middlewares);
 
 describe("model hooks", () => {
-  it("useModels", () => {
+  it("useModels.reload", () => {
     application.connectKey = "application(/)(en)";
     const store = mockStore({
       modularui: {
@@ -49,4 +51,97 @@ describe("model hooks", () => {
       },
     ]);
   });
+
+  it("useModels.reloadWithFilter - only root", () => {
+    application.connectKey = "application(/)(en)";
+    const store = mockStore({
+      modularui: {
+        "application(/)(en)": {
+          status: "FINISHED",
+          model: application,
+          lastModification: 0,
+        },
+        "list(/books/books)(en)": {
+          status: "FINISHED",
+          model: caselist,
+          lastModification: 0,
+        },
+      },
+    });
+
+    const wrapper = ({ children }) => (
+      <Provider store={store}>{children}</Provider>
+    );
+
+    const { result } = renderHook(() => useModels(), {
+      wrapper,
+    });
+
+    expect(typeof result.current.reloadWithFilter).toBe("function");
+
+    result.current.reloadWithFilter((model) =>
+      model.selfhref.equals(new Href("/")),
+    );
+    expect(store.getActions()).toStrictEqual([
+      {
+        type: "MODULARUI/STATUS",
+        payload: { key: "application(/)(en)", status: "LOADING" },
+      },
+      { type: "START_PROGRESS" },
+      {
+        type: "MODULARUI/FETCH",
+        payload: expect.objectContaining({
+          href: new Href("/", "Application"),
+          locale: "en",
+        }),
+      },
+    ]);
+  });
+
+  it("useModels.reloadWithFilter - only tab", () => {
+    application.connectKey = "application(/)(en)";
+    caselist.connectKey = "list(/books/books)(en)";
+    const store = mockStore({
+      modularui: {
+        "application(/)(en)": {
+          status: "FINISHED",
+          model: application,
+          lastModification: 0,
+        },
+        "list(/books/books)(en)": {
+          status: "FINISHED",
+          model: caselist,
+          lastModification: 0,
+        },
+      },
+    });
+
+    const wrapper = ({ children }) => (
+      <Provider store={store}>{children}</Provider>
+    );
+
+    const { result } = renderHook(() => useModels(), {
+      wrapper,
+    });
+
+    expect(typeof result.current.reloadWithFilter).toBe("function");
+
+    result.current.reloadWithFilter((model) =>
+      model.selfhref.equals(new Href("/books/books")),
+    );
+    expect(store.getActions()).toStrictEqual([
+      {
+        type: "MODULARUI/STATUS",
+        payload: { key: "list(/books/books)(en)", status: "LOADING" },
+      },
+      { type: "START_PROGRESS" },
+      {
+        type: "MODULARUI/FETCH",
+        payload: expect.objectContaining({
+          href: caselist.selfhref,
+          locale: "en",
+        }),
+      },
+    ]);
+  });
 });

package/lib/hooks/useModels.js

@@ -1,19 +1,37 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useModels = void 0;
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
+var _values = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/values"));
+var _reselect = require("reselect");
 var _reactRedux = require("react-redux");
 var _ModularUIActions = require("../redux/_modularui/ModularUIActions");
+var _Constants = require("../constants/Constants");
 /**
  * Hook that contains the reload property that can be used to reload a model
  */
 const useModels = () => {
   const dispatch = (0, _reactRedux.useDispatch)();
+  const selectModularUI = state => state.modularui;
+  const selector = (0, _reselect.createSelector)([selectModularUI], modularui => {
+    var _context, _context2;
+    return (0, _map.default)(_context = (0, _filter.default)(_context2 = (0, _values.default)(modularui)).call(_context2, model => model.status === _Constants.MODULARUI_STATUS.FINISHED)).call(_context, model => model.model);
+  });
+  const modularuiModels = (0, _reactRedux.useSelector)(selector);
   return {
     reload: (model, options) => {
       dispatch((0, _ModularUIActions.reloadModel)(model, options));
+    },
+    reloadWithFilter: (callbackFn, options) => {
+      const modelsToReload = (0, _filter.default)(modularuiModels).call(modularuiModels, callbackFn);
+      for (const modelToReload of modelsToReload) {
+        dispatch((0, _ModularUIActions.reloadModel)(modelToReload, options));
+      }
     }
   };
 };

package/lib/hooks/useModels.js.flow

@@ -1,12 +1,18 @@
 // @flow
-import { useDispatch } from "react-redux";
+import { createSelector } from "reselect";
+import { useSelector, useDispatch } from "react-redux";
 
 import { reloadModel } from "../redux/_modularui/ModularUIActions";
+import { MODULARUI_STATUS } from "../constants/Constants";
 
 import type { ModularUIModel } from "../models/types";
+import type { ReduxState } from "../redux";
+
+type ReloadCallback = (model: ModularUIModel) => boolean;
 
 type UseModels = () => {
   reload: (model: ModularUIModel, options?: any) => void,
+  reloadWithFilter: (callbackFn: ReloadCallback, options?: any) => void,
 };
 
 /**
@@ -14,9 +20,24 @@ type UseModels = () => {
  */
 export const useModels: UseModels = () => {
   const dispatch = useDispatch();
+
+  const selectModularUI = (state: ReduxState) => state.modularui;
+  const selector = createSelector([selectModularUI], (modularui) =>
+    Object.values(modularui)
+      .filter((model) => model.status === MODULARUI_STATUS.FINISHED)
+      .map((model) => model.model),
+  );
+  const modularuiModels = useSelector(selector);
+
   return {
     reload: (model: ModularUIModel, options?: Object) => {
       dispatch(reloadModel(model, options));
     },
+    reloadWithFilter: (callbackFn: ReloadCallback, options?: Object) => {
+      const modelsToReload = modularuiModels.filter(callbackFn);
+      for (const modelToReload of modelsToReload) {
+        dispatch(reloadModel(modelToReload, options));
+      }
+    },
   };
 };

package/lib/hooks/useModels.js.map

@@ -1 +1 @@
-{"version":3,"file":"useModels.js","names":["_reactRedux","require","_ModularUIActions","useModels","dispatch","useDispatch","reload","model","options","reloadModel","exports"],"sources":["../../src/hooks/useModels.js"],"sourcesContent":["// @flow\nimport { useDispatch } from \"react-redux\";\n\nimport { reloadModel } from \"../redux/_modularui/ModularUIActions\";\n\nimport type { ModularUIModel } from \"../models/types\";\n\ntype UseModels = () => {\n  reload: (model: ModularUIModel, options?: any) => void,\n};\n\n/**\n * Hook that contains the reload property that can be used to reload a model\n */\nexport const useModels: UseModels = () => {\n  const dispatch = useDispatch();\n  return {\n    reload: (model: ModularUIModel, options?: Object) => {\n      dispatch(reloadModel(model, options));\n    },\n  };\n};\n"],"mappings":";;;;;;AACA,IAAAA,WAAA,GAAAC,OAAA;AAEA,IAAAC,iBAAA,GAAAD,OAAA;AAQA;AACA;AACA;AACO,MAAME,SAAoB,GAAGA,CAAA,KAAM;EACxC,MAAMC,QAAQ,GAAG,IAAAC,uBAAW,EAAC,CAAC;EAC9B,OAAO;IACLC,MAAM,EAAEA,CAACC,KAAqB,EAAEC,OAAgB,KAAK;MACnDJ,QAAQ,CAAC,IAAAK,6BAAW,EAACF,KAAK,EAAEC,OAAO,CAAC,CAAC;IACvC;EACF,CAAC;AACH,CAAC;AAACE,OAAA,CAAAP,SAAA,GAAAA,SAAA","ignoreList":[]}
+{"version":3,"file":"useModels.js","names":["_reselect","require","_reactRedux","_ModularUIActions","_Constants","useModels","dispatch","useDispatch","selectModularUI","state","modularui","selector","createSelector","_context","_context2","_map","default","_filter","_values","call","model","status","MODULARUI_STATUS","FINISHED","modularuiModels","useSelector","reload","options","reloadModel","reloadWithFilter","callbackFn","modelsToReload","modelToReload","exports"],"sources":["../../src/hooks/useModels.js"],"sourcesContent":["// @flow\nimport { createSelector } from \"reselect\";\nimport { useSelector, useDispatch } from \"react-redux\";\n\nimport { reloadModel } from \"../redux/_modularui/ModularUIActions\";\nimport { MODULARUI_STATUS } from \"../constants/Constants\";\n\nimport type { ModularUIModel } from \"../models/types\";\nimport type { ReduxState } from \"../redux\";\n\ntype ReloadCallback = (model: ModularUIModel) => boolean;\n\ntype UseModels = () => {\n  reload: (model: ModularUIModel, options?: any) => void,\n  reloadWithFilter: (callbackFn: ReloadCallback, options?: any) => void,\n};\n\n/**\n * Hook that contains the reload property that can be used to reload a model\n */\nexport const useModels: UseModels = () => {\n  const dispatch = useDispatch();\n\n  const selectModularUI = (state: ReduxState) => state.modularui;\n  const selector = createSelector([selectModularUI], (modularui) =>\n    Object.values(modularui)\n      .filter((model) => model.status === MODULARUI_STATUS.FINISHED)\n      .map((model) => model.model),\n  );\n  const modularuiModels = useSelector(selector);\n\n  return {\n    reload: (model: ModularUIModel, options?: Object) => {\n      dispatch(reloadModel(model, options));\n    },\n    reloadWithFilter: (callbackFn: ReloadCallback, options?: Object) => {\n      const modelsToReload = modularuiModels.filter(callbackFn);\n      for (const modelToReload of modelsToReload) {\n        dispatch(reloadModel(modelToReload, options));\n      }\n    },\n  };\n};\n"],"mappings":";;;;;;;;;;AACA,IAAAA,SAAA,GAAAC,OAAA;AACA,IAAAC,WAAA,GAAAD,OAAA;AAEA,IAAAE,iBAAA,GAAAF,OAAA;AACA,IAAAG,UAAA,GAAAH,OAAA;AAYA;AACA;AACA;AACO,MAAMI,SAAoB,GAAGA,CAAA,KAAM;EACxC,MAAMC,QAAQ,GAAG,IAAAC,uBAAW,EAAC,CAAC;EAE9B,MAAMC,eAAe,GAAIC,KAAiB,IAAKA,KAAK,CAACC,SAAS;EAC9D,MAAMC,QAAQ,GAAG,IAAAC,wBAAc,EAAC,CAACJ,eAAe,CAAC,EAAGE,SAAS;IAAA,IAAAG,QAAA,EAAAC,SAAA;IAAA,OAC3D,IAAAC,IAAA,CAAAC,OAAA,EAAAH,QAAA,OAAAI,OAAA,CAAAD,OAAA,EAAAF,SAAA,OAAAI,OAAA,CAAAF,OAAA,EAAcN,SAAS,CAAC,EAAAS,IAAA,CAAAL,SAAA,EACbM,KAAK,IAAKA,KAAK,CAACC,MAAM,KAAKC,2BAAgB,CAACC,QAAQ,CAAC,EAAAJ,IAAA,CAAAN,QAAA,EACxDO,KAAK,IAAKA,KAAK,CAACA,KAAK,CAAC;EAAA,CAChC,CAAC;EACD,MAAMI,eAAe,GAAG,IAAAC,uBAAW,EAACd,QAAQ,CAAC;EAE7C,OAAO;IACLe,MAAM,EAAEA,CAACN,KAAqB,EAAEO,OAAgB,KAAK;MACnDrB,QAAQ,CAAC,IAAAsB,6BAAW,EAACR,KAAK,EAAEO,OAAO,CAAC,CAAC;IACvC,CAAC;IACDE,gBAAgB,EAAEA,CAACC,UAA0B,EAAEH,OAAgB,KAAK;MAClE,MAAMI,cAAc,GAAG,IAAAd,OAAA,CAAAD,OAAA,EAAAQ,eAAe,EAAAL,IAAA,CAAfK,eAAe,EAAQM,UAAU,CAAC;MACzD,KAAK,MAAME,aAAa,IAAID,cAAc,EAAE;QAC1CzB,QAAQ,CAAC,IAAAsB,6BAAW,EAACI,aAAa,EAAEL,OAAO,CAAC,CAAC;MAC/C;IACF;EACF,CAAC;AACH,CAAC;AAACM,OAAA,CAAA5B,SAAA,GAAAA,SAAA","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@beinformed/ui",
-  "version": "1.42.2",
+  "version": "1.43.1",
   "description": "Toolbox for be informed javascript layouts",
   "license": "SEE LICENSE IN LICENSE.md",
   "bugs": "http://support.beinformed.com",

package/src/hooks/__tests__/useModels.spec.js

@@ -4,6 +4,8 @@ import { Provider } from "react-redux";
 import configureMockStore from "redux-mock-store";
 
 import application from "../../models/application/__mock__/application";
+import caselist from "../../models/list/__mock__/caselist";
+
 import thunk from "redux-thunk";
 import { Href } from "../../models";
 
@@ -11,7 +13,7 @@ const middlewares = [thunk];
 const mockStore = configureMockStore(middlewares);
 
 describe("model hooks", () => {
-  it("useModels", () => {
+  it("useModels.reload", () => {
     application.connectKey = "application(/)(en)";
     const store = mockStore({
       modularui: {
@@ -49,4 +51,97 @@ describe("model hooks", () => {
       },
     ]);
   });
+
+  it("useModels.reloadWithFilter - only root", () => {
+    application.connectKey = "application(/)(en)";
+    const store = mockStore({
+      modularui: {
+        "application(/)(en)": {
+          status: "FINISHED",
+          model: application,
+          lastModification: 0,
+        },
+        "list(/books/books)(en)": {
+          status: "FINISHED",
+          model: caselist,
+          lastModification: 0,
+        },
+      },
+    });
+
+    const wrapper = ({ children }) => (
+      <Provider store={store}>{children}</Provider>
+    );
+
+    const { result } = renderHook(() => useModels(), {
+      wrapper,
+    });
+
+    expect(typeof result.current.reloadWithFilter).toBe("function");
+
+    result.current.reloadWithFilter((model) =>
+      model.selfhref.equals(new Href("/")),
+    );
+    expect(store.getActions()).toStrictEqual([
+      {
+        type: "MODULARUI/STATUS",
+        payload: { key: "application(/)(en)", status: "LOADING" },
+      },
+      { type: "START_PROGRESS" },
+      {
+        type: "MODULARUI/FETCH",
+        payload: expect.objectContaining({
+          href: new Href("/", "Application"),
+          locale: "en",
+        }),
+      },
+    ]);
+  });
+
+  it("useModels.reloadWithFilter - only tab", () => {
+    application.connectKey = "application(/)(en)";
+    caselist.connectKey = "list(/books/books)(en)";
+    const store = mockStore({
+      modularui: {
+        "application(/)(en)": {
+          status: "FINISHED",
+          model: application,
+          lastModification: 0,
+        },
+        "list(/books/books)(en)": {
+          status: "FINISHED",
+          model: caselist,
+          lastModification: 0,
+        },
+      },
+    });
+
+    const wrapper = ({ children }) => (
+      <Provider store={store}>{children}</Provider>
+    );
+
+    const { result } = renderHook(() => useModels(), {
+      wrapper,
+    });
+
+    expect(typeof result.current.reloadWithFilter).toBe("function");
+
+    result.current.reloadWithFilter((model) =>
+      model.selfhref.equals(new Href("/books/books")),
+    );
+    expect(store.getActions()).toStrictEqual([
+      {
+        type: "MODULARUI/STATUS",
+        payload: { key: "list(/books/books)(en)", status: "LOADING" },
+      },
+      { type: "START_PROGRESS" },
+      {
+        type: "MODULARUI/FETCH",
+        payload: expect.objectContaining({
+          href: caselist.selfhref,
+          locale: "en",
+        }),
+      },
+    ]);
+  });
 });

package/src/hooks/useModels.js

@@ -1,12 +1,18 @@
 // @flow
-import { useDispatch } from "react-redux";
+import { createSelector } from "reselect";
+import { useSelector, useDispatch } from "react-redux";
 
 import { reloadModel } from "../redux/_modularui/ModularUIActions";
+import { MODULARUI_STATUS } from "../constants/Constants";
 
 import type { ModularUIModel } from "../models/types";
+import type { ReduxState } from "../redux";
+
+type ReloadCallback = (model: ModularUIModel) => boolean;
 
 type UseModels = () => {
   reload: (model: ModularUIModel, options?: any) => void,
+  reloadWithFilter: (callbackFn: ReloadCallback, options?: any) => void,
 };
 
 /**
@@ -14,9 +20,24 @@ type UseModels = () => {
  */
 export const useModels: UseModels = () => {
   const dispatch = useDispatch();
+
+  const selectModularUI = (state: ReduxState) => state.modularui;
+  const selector = createSelector([selectModularUI], (modularui) =>
+    Object.values(modularui)
+      .filter((model) => model.status === MODULARUI_STATUS.FINISHED)
+      .map((model) => model.model),
+  );
+  const modularuiModels = useSelector(selector);
+
   return {
     reload: (model: ModularUIModel, options?: Object) => {
       dispatch(reloadModel(model, options));
     },
+    reloadWithFilter: (callbackFn: ReloadCallback, options?: Object) => {
+      const modelsToReload = modularuiModels.filter(callbackFn);
+      for (const modelToReload of modelsToReload) {
+        dispatch(reloadModel(modelToReload, options));
+      }
+    },
   };
 };