Make updateSection an action and remove boot helper

[MAILPOET-5088]

mailpoet/assets/js/src/automation/integrations/mailpoet/analytics/api/index.ts

@@ -1,10 +1,5 @@
 import apiFetch from '@wordpress/api-fetch';
-import { dispatch, select } from '@wordpress/data';
-import { getCurrentDates } from '@woocommerce/date';
-import { addQueryArgs } from '@wordpress/url';
 import { api } from '../config';
-import { storeName } from '../store/constants';
-import { Query, Section, SectionData } from '../store/types';
 
 export type ApiError = {
   code?: string;
@@ -22,48 +17,3 @@ export const initializeApi = () => {
   apiFetch.use(apiFetch.createRootURLMiddleware(apiUrl));
   apiFetch.use(apiFetch.createNonceMiddleware(api.nonce));
 };
-
-export async function updateSection(
-  section: Section,
-  queryParam: Query | undefined = undefined,
-) {
-  const query = queryParam ?? select(storeName).getCurrentQuery();
-
-  const defaultDateRange = 'period=month&compare=previous_year';
-
-  const { primary: primaryDate, secondary: secondaryDate } = getCurrentDates(
-    query,
-    defaultDateRange,
-  );
-
-  const dates = {
-    primary: {
-      after: primaryDate.after.toDate().toISOString(),
-      before: primaryDate.before.toDate().toISOString(),
-    },
-    secondary: {
-      after: secondaryDate.after.toDate().toISOString(),
-      before: secondaryDate.before.toDate().toISOString(),
-    },
-  };
-
-  const id = select(storeName).getAutomation().id;
-  dispatch(storeName).setSectionData({
-    ...section,
-    data: undefined,
-  });
-
-  const path = addQueryArgs(section.endpoint, { id, query: dates });
-  const method = 'GET';
-  const response: {
-    data: SectionData;
-  } = await apiFetch({
-    path,
-    method,
-  });
-
-  dispatch(storeName).setSectionData({
-    ...section,
-    data: response.data,
-  });
-}

mailpoet/assets/js/src/automation/integrations/mailpoet/analytics/helpers/boot.ts

@@ -1,12 +0,0 @@
-import { select } from '@wordpress/data';
-import { initializeApi, updateSection } from '../api';
-import { Section, storeName } from '../store';
-
-export function boot() {
-  initializeApi();
-  select(storeName)
-    .getSections()
-    .forEach((section: Section) => {
-      void updateSection(section);
-    });
-}

mailpoet/assets/js/src/automation/integrations/mailpoet/analytics/index.tsx

@@ -1,13 +1,14 @@
 import ReactDOM from 'react-dom';
 import { BrowserRouter } from 'react-router-dom';
+import { dispatch, select } from '@wordpress/data';
 import { TopBarWithBeamer } from '../../../../common/top_bar/top_bar';
 import { Notices } from '../../../listing/components/notices';
 import { Header } from './components/header';
 import { Overview } from './components/overview';
 import { Tabs } from './components/tabs';
-import { createStore } from './store';
+import { createStore, Section, storeName } from './store';
-import { boot } from './helpers/boot';
 import { registerApiErrorHandler } from '../../../listing/api-error-handler';
+import { initializeApi } from './api';
 
 function Analytics(): JSX.Element {
   return (
@@ -29,6 +30,15 @@ function App(): JSX.Element {
   );
 }
 
+function boot() {
+  initializeApi();
+  select(storeName)
+    .getSections()
+    .forEach((section: Section) => {
+      dispatch(storeName).updateSection(section);
+    });
+}
+
 window.addEventListener('DOMContentLoaded', () => {
   const root = document.getElementById('mailpoet_automation_analytics');
   if (!root) {

mailpoet/assets/js/src/automation/integrations/mailpoet/analytics/store/actions/index.ts

@@ -1,12 +1,14 @@
-import { select } from '@wordpress/data';
+import { dispatch, select } from '@wordpress/data';
-import { Query, Section } from '../types';
+import { getCurrentDates } from '@woocommerce/date';
+import { addQueryArgs } from '@wordpress/url';
+import { apiFetch } from '@wordpress/data-controls';
+import { Query, Section, SectionData } from '../types';
 import { storeName } from '../constants';
-import { updateSection } from '../../api';
 
 export function setQuery(query: Query) {
   const sections = select(storeName).getSections();
   sections.forEach((section: Section) => {
-    void updateSection(section, query);
+    void dispatch(storeName).updateSection(section, query);
   });
   return {
     type: 'SET_QUERY',
@@ -20,3 +22,47 @@ export function setSectionData(payload: Section) {
     payload,
   };
 }
+
+export function* updateSection(
+  section: Section,
+  queryParam: Query | undefined = undefined,
+) {
+  const query = queryParam ?? select(storeName).getCurrentQuery();
+  const defaultDateRange = 'period=month&compare=previous_year';
+
+  const { primary: primaryDate, secondary: secondaryDate } = getCurrentDates(
+    query,
+    defaultDateRange,
+  );
+
+  const dates = {
+    primary: {
+      after: primaryDate.after.toDate().toISOString(),
+      before: primaryDate.before.toDate().toISOString(),
+    },
+    secondary: {
+      after: secondaryDate.after.toDate().toISOString(),
+      before: secondaryDate.before.toDate().toISOString(),
+    },
+  };
+
+  const id = select(storeName).getAutomation().id;
+
+  const path = addQueryArgs(section.endpoint, { id, query: dates });
+  const method = 'GET';
+  const response: {
+    data: SectionData;
+  } = yield apiFetch({
+    path,
+    method,
+  });
+
+  const payload = {
+    ...section,
+    data: response?.data || undefined,
+  };
+  return {
+    type: 'SET_SECTION_DATA',
+    payload,
+  };
+}