Allowing for asynchronous actions in afterSet and delegating loadData responsibility to setFilter

src/store/actions.js

@@ -8,10 +8,11 @@ export default function getActions(pageDefinition) {
   const actions = {};
   const filters = pageDefinition.filters();
   for (const filterKey in filters) {
-    const filterAction = function (payload) {
+    const filterAction = async function (payload, triggerLoadData = true) {
       this[`${filterKey}Filter`] = payload;
+      this[`${filterKey}TriggerLoadData`] = triggerLoadData;
     };
-    const optionsAction = function (payload) {
+    const optionsAction = async function (payload) {
       this[`${filterKey}Options`] = payload;
     };
     actions[`set${capitalize(filterKey)}Filter`] = filterAction;
@@ -67,9 +68,6 @@ export default function getActions(pageDefinition) {
         .loadData(pageDefinition, pageStore)
         .then(function (response) {
           return response;
-        })
-        .catch(function (error) {
-          throw Error(error);
         });
       for (const chartKey in pageDefinition.charts()) {
         if (data[chartKey] === null) {

src/store/filters.js

@@ -243,11 +243,12 @@ export function getFilterActions() {
      *
      * @param  {String} key a filter key
      * @param  {any} payload a payload to set
+     * @param  {Boolean} triggerLoadData=true optional variable, if true will trigger a loadData action
      * @memberof module:pageStore
      */
-    setFilter(key, payload) {
+    setFilter(key, payload, triggerLoadData = false) {
       this._validFilterKey(key);
-      this[`set${capitalize(key)}Filter`](payload);
+      this[`set${capitalize(key)}Filter`](payload, triggerLoadData);
     },
 
     /**

src/store/state.js

@@ -18,6 +18,7 @@ export default function getState(pageDefinition) {
       filters[filterKey].options,
     );
     state[`${filterKey}Options`] = filters[filterKey].options || [];
+    state[`${filterKey}TriggerLoadData`] = true;
   }
 
   // add chart data container for each chart type

src/store/subscriptions.js

@@ -1,50 +1,79 @@
 import { capitalize } from "./utils.js";
 
 export default function subscribeActions(store, pageDefinition) {
-  store.$onAction(({ name, store, args, after }) => {
+  store.$onAction(async ({ name, store, args, after }) => {
     //before action is called
-    runSubscriptions(name, args, store, pageDefinition, "before");
-    after(() => {
-      runSubscriptions(name, args, store, pageDefinition, "after");
+    after(async () => {
+      await runSubscriptions(name, args, store, pageDefinition, "after");
+      await checkForLoadData(name, store);
     });
+
+    await runSubscriptions(name, args, store, pageDefinition, "before");
   });
 }
 
-function runSubscriptions(name, args, store, pageDefinition, hook) {
+async function runSubscriptions(name, args, store, pageDefinition, hook) {
   // for loadData actions, both toggle the dataLoading state variable
   // and also check for before/after loadData hooks
   if (name === "loadData") {
     store.toggleDataLoading();
     if (pageDefinition[`${hook}LoadData`]) {
-      pageDefinition[`${hook}LoadData`]({ name, args }, store);
+      await pageDefinition[`${hook}LoadData`]({ name, args }, store);
     }
   } else if (name.includes("Filter") && name !== "setFilter") {
     // iterate over filters to find if any match the action name
     // and run their before/after hooks
-    Object.keys(store.getFilters).forEach((filterKey) => {
-      const filterActionString = `set${capitalize(filterKey)}Filter`;
-      if (
-        name === filterActionString &&
-        store.getFilters[filterKey][`${hook}Set`]
-      ) {
-        store.getFilters[filterKey][`${hook}Set`]({ name, args }, store);
-      }
-    });
+    await Promise.all(
+      Object.keys(store.getFilters).map(async (filterKey) => {
+        const filterActionString = `set${capitalize(filterKey)}Filter`;
+        if (
+          name === filterActionString &&
+          store.getFilters[filterKey][`${hook}Set`]
+        ) {
+          await store.getFilters[filterKey][`${hook}Set`](
+            { name, args },
+            store,
+          );
+        }
+      }),
+    );
   } else if (name.includes("ChartData") && name !== "setChartData") {
-    // iterate over hcarts to find if any match the action name
+    // iterate over charts to find if any match the action name
     // and run their before/after hooks
-    Object.keys(store.getCharts).forEach((chartKey) => {
-      const chartActionString = `set${capitalize(chartKey)}ChartData`;
-      if (
-        name === chartActionString &&
-        store.getCharts[chartKey][`${hook}Set`]
-      ) {
-        store.getCharts[chartKey][`${hook}Set`]({ name, args }, store);
-      }
-    });
+    await Promise.all(
+      Object.keys(store.getCharts).map(async (chartKey) => {
+        const chartActionString = `set${capitalize(chartKey)}ChartData`;
+        if (
+          name === chartActionString &&
+          store.getCharts[chartKey][`${hook}Set`]
+        ) {
+          await store.getCharts[chartKey][`${hook}Set`]({ name, args }, store);
+        }
+      }),
+    );
   }
 
   if (pageDefinition.extendSubscriptions) {
     pageDefinition.extendSubscriptions(name, args, store, pageDefinition, hook);
   }
+  return Promise.resolve();
+}
+
+// checks to see if the action is a filter action and if so, checks if the filter is synchronous
+// if not, it will trigger a loadData action
+async function checkForLoadData(name, store) {
+  if (name.includes("Filter") && name !== "setFilter") {
+    // get filter name from action
+    const filterName = name.slice(3, -6);
+    // find the matching filter key and retrieve definition
+    const filterKey = store.getFilterKeys.find(
+      (filter) => capitalize(filter) === filterName,
+    );
+    if (filterKey) {
+      // check to see if last run of setFilter enabled triggerLoadData
+      if (store[`${filterKey}TriggerLoadData`]) {
+        await store.loadData();
+      }
+    }
+  }
 }