From c020b79c94775b6c794337e18ba96eb8348de3e7 Mon Sep 17 00:00:00 2001 From: David Remer Date: Tue, 13 Jun 2023 09:56:50 +0300 Subject: [PATCH] Make updateSection an action and remove boot helper [MAILPOET-5088] --- .../mailpoet/analytics/api/index.ts | 50 ----------------- .../mailpoet/analytics/helpers/boot.ts | 12 ----- .../integrations/mailpoet/analytics/index.tsx | 14 ++++- .../mailpoet/analytics/store/actions/index.ts | 54 +++++++++++++++++-- 4 files changed, 62 insertions(+), 68 deletions(-) delete mode 100644 mailpoet/assets/js/src/automation/integrations/mailpoet/analytics/helpers/boot.ts diff --git a/mailpoet/assets/js/src/automation/integrations/mailpoet/analytics/api/index.ts b/mailpoet/assets/js/src/automation/integrations/mailpoet/analytics/api/index.ts index 693ccdc4c1..703a4ace9d 100644 --- a/mailpoet/assets/js/src/automation/integrations/mailpoet/analytics/api/index.ts +++ b/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, - }); -} diff --git a/mailpoet/assets/js/src/automation/integrations/mailpoet/analytics/helpers/boot.ts b/mailpoet/assets/js/src/automation/integrations/mailpoet/analytics/helpers/boot.ts deleted file mode 100644 index c06b5e4008..0000000000 --- a/mailpoet/assets/js/src/automation/integrations/mailpoet/analytics/helpers/boot.ts +++ /dev/null @@ -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); - }); -} diff --git a/mailpoet/assets/js/src/automation/integrations/mailpoet/analytics/index.tsx b/mailpoet/assets/js/src/automation/integrations/mailpoet/analytics/index.tsx index 8573e9da20..1341e31699 100644 --- a/mailpoet/assets/js/src/automation/integrations/mailpoet/analytics/index.tsx +++ b/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 { boot } from './helpers/boot'; +import { createStore, Section, storeName } from './store'; 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) { diff --git a/mailpoet/assets/js/src/automation/integrations/mailpoet/analytics/store/actions/index.ts b/mailpoet/assets/js/src/automation/integrations/mailpoet/analytics/store/actions/index.ts index 77490b880f..73bdbef53b 100644 --- a/mailpoet/assets/js/src/automation/integrations/mailpoet/analytics/store/actions/index.ts +++ b/mailpoet/assets/js/src/automation/integrations/mailpoet/analytics/store/actions/index.ts @@ -1,12 +1,14 @@ -import { select } from '@wordpress/data'; -import { Query, Section } from '../types'; +import { dispatch, select } from '@wordpress/data'; +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, + }; +}