Use store for count of subscribers

[MAILPOET-3469]

assets/js/src/segments/dynamic/store/actions.ts

@@ -8,6 +8,8 @@ import {
   SetSegmentActionType,
   SetErrorsActionType,
   SetSegmentFilerActionType,
+  SubscriberCount,
+  SetSubscriberCountActionType,
 } from '../types';
 
 export function setSegment(segment: AnyFormItem): SetSegmentActionType {
@@ -66,6 +68,13 @@ export function updateSegmentFilterFromEvent(
   };
 }
 
+export function updateSubscriberCount(data: SubscriberCount): SetSubscriberCountActionType {
+  return {
+    type: Actions.UPDATE_SUBSCRIBER_COUNT,
+    subscriberCount: data,
+  };
+}
+
 export function* pageLoaded(segmentId?: number): Generator<{
   type: string;
   segmentId?: number;

assets/js/src/segments/dynamic/store/reducer.ts

@@ -4,8 +4,9 @@ import {
   ActionType,
   SetSegmentActionType,
   SetErrorsActionType,
-  StateType,
   SetSegmentFilerActionType,
+  SetSubscriberCountActionType,
+  StateType,
 } from '../types';
 
 function setSegment(state: StateType, action: SetSegmentActionType): StateType {
@@ -39,6 +40,14 @@ function updateSegmentFilter(state: StateType, action: SetSegmentFilerActionType
   };
 }
 
+function updateSubscriberCount(state: StateType, action: SetSubscriberCountActionType): StateType {
+  const oldCount = state.subscriberCount;
+  return {
+    ...state,
+    subscriberCount: assign(oldCount, action.subscriberCount),
+  };
+}
+
 export const createReducer = (defaultState: StateType) => (
   state: StateType = defaultState,
   action: ActionType
@@ -49,6 +58,8 @@ export const createReducer = (defaultState: StateType) => (
     case Actions.UPDATE_SEGMENT: return updateSegment(state, action as SetSegmentActionType);
     case Actions.UPDATE_SEGMENT_FILTER:
       return updateSegmentFilter(state, action as SetSegmentFilerActionType);
+    case Actions.UPDATE_SUBSCRIBER_COUNT:
+      return updateSubscriberCount(state, action as SetSubscriberCountActionType);
     default:
       return state;
   }

assets/js/src/segments/dynamic/store/selectors.ts

@@ -5,7 +5,7 @@ import {
   GroupFilterValue,
   Segment,
   StateType,
-  SubscriberActionTypes,
+  SubscriberActionTypes, SubscriberCount,
   WindowCustomFields,
   WindowEditableRoles,
   WindowNewslettersList,
@@ -46,6 +46,9 @@ export const getCustomFieldsList = (state: StateType): WindowCustomFields => (
 export const getSegment = (state: StateType): Segment => (
   state.segment
 );
+export const getSubscriberCount = (state: StateType): SubscriberCount => (
+  state.subscriberCount
+);
 export const getSegmentFilter = (state: StateType, index: number): AnyFormItem | undefined => {
   let found: AnyFormItem | undefined;
   if (!Array.isArray(state.segment.filters)) {

assets/js/src/segments/dynamic/store/store.ts

@@ -40,6 +40,9 @@ export const createStore = (): void => {
         },
       ],
     },
+    subscriberCount: {
+      loading: false,
+    },
     errors: [],
     allAvailableFilters: getAvailableFilters(window.mailpoet_can_use_woocommerce_subscriptions),
   };

assets/js/src/segments/dynamic/subscribers_counter.tsx

@@ -1,36 +1,32 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
 import MailPoet from 'mailpoet';
-import { useSelect } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
 
 import { isFormValid } from './validator';
 import { loadCount } from './subscribers_calculator';
 
 import {
   Segment,
+  SubscriberCount,
 } from './types';
 
-interface SubscriberCount {
-  count?: number;
-  loading?: boolean;
-  errors?: string[];
-}
-
 const SubscribersCounter: React.FunctionComponent = () => {
-  const [subscribersCount, setSubscribersCount] = useState<SubscriberCount>({
-    loading: false,
-    count: undefined,
-    errors: undefined,
-  });
-
   const segment: Segment = useSelect(
     (select) => select('mailpoet-dynamic-segments-form').getSegment(),
     []
   );
 
+  const subscribersCount: SubscriberCount = useSelect(
+    (select) => select('mailpoet-dynamic-segments-form').getSubscriberCount(),
+    []
+  );
+
+  const { updateSubscriberCount } = useDispatch('mailpoet-dynamic-segments-form');
+
   const serializedSegment = JSON.stringify(segment);
   useEffect(() => {
     function load(loadItem: Segment): void {
-      setSubscribersCount({
+      updateSubscriberCount({
         loading: true,
         count: undefined,
         errors: undefined,
@@ -43,26 +39,26 @@ const SubscribersCounter: React.FunctionComponent = () => {
           finished.count = response.count;
           finished.errors = response.errors;
         }
-        setSubscribersCount(finished);
+        updateSubscriberCount(finished);
       }, (errorResponse) => {
         const finished = {} as SubscriberCount;
         const errors = errorResponse.errors.map((error) => error.message);
         finished.loading = false;
         finished.count = undefined;
         finished.errors = errors;
-        setSubscribersCount(finished);
+        updateSubscriberCount(finished);
       });
     }
 
     if (isFormValid(segment.filters)) {
       load(segment);
     } else {
-      setSubscribersCount({
+      updateSubscriberCount({
         count: undefined,
         loading: false,
       });
     }
-  }, [segment, serializedSegment]);
+  }, [segment, serializedSegment, updateSubscriberCount]);
 
   if (subscribersCount.errors) {
     return (

assets/js/src/segments/dynamic/types.ts

@@ -98,6 +98,12 @@ export type AnyFormItem =
   WooCommerceSubscriptionFormItem |
   EmailFormItem;
 
+export interface SubscriberCount {
+  count?: number;
+  loading?: boolean;
+  errors?: string[];
+}
+
 export type OnFilterChange = (value: AnyFormItem, filterIndex: number) => void;
 
 export type WindowEditableRoles = {
@@ -163,6 +169,7 @@ export interface StateType {
   wooCountries: WindowWooCommerceCountries;
   customFieldsList: WindowCustomFields;
   segment: Segment,
+  subscriberCount: SubscriberCount,
   errors: string[],
   allAvailableFilters: GroupFilterValue[],
 }
@@ -172,6 +179,7 @@ export enum Actions {
   SET_ERRORS = 'SET_ERRORS',
   UPDATE_SEGMENT = 'UPDATE_SEGMENT',
   UPDATE_SEGMENT_FILTER = 'UPDATE_SEGMENT_FILTER',
+  UPDATE_SUBSCRIBER_COUNT = 'UPDATE_SUBSCRIBER_COUNT',
 }
 
 export interface ActionType {
@@ -187,6 +195,10 @@ export interface SetSegmentFilerActionType extends ActionType {
   filterIndex: number;
 }
 
+export interface SetSubscriberCountActionType extends ActionType {
+  subscriberCount: SubscriberCount;
+}
+
 export interface SetErrorsActionType extends ActionType {
   errors: string[];
 }