Use useSelect for senderDomainsConfig

[MAILPOET-5796]

mailpoet/assets/js/src/automation/integrations/mailpoet/context.ts

@@ -1,4 +1,4 @@
-import { select } from '@wordpress/data';
+import { select, dispatch, useSelect } from '@wordpress/data';
 import { FormTokenItem } from '../../editor/components';
 import { storeName } from '../../editor/store';
 import { SenderRestrictionsType } from '../../../common';
@@ -23,3 +23,14 @@ export type Context = {
 
 export const getContext = (): Context =>
   select(storeName).getContext('mailpoet') as Context;
+
+export const useSelectContext = (): Context =>
+  useSelect((s) => s(storeName).getContext('mailpoet'), []);
+
+export const updateSenderDomainsConfig = (
+  senderDomainsConfig: SenderDomainsConfig,
+) => {
+  dispatch(storeName).alterContext('mailpoet', 'senderDomainsConfig', {
+    ...senderDomainsConfig,
+  });
+};

mailpoet/assets/js/src/automation/integrations/mailpoet/steps/send-email/edit/sender-domain-notice.tsx

@@ -1,10 +1,8 @@
-import { useState, useMemo, useEffect } from 'react';
-import { dispatch } from '@wordpress/data';
+import { useMemo } from 'react';
 import { extractEmailDomain } from 'common/functions';
 import { SenderEmailAddressWarning } from '../../../../../../common/sender-email-address-warning';
 import { MailPoet } from '../../../../../../mailpoet';
-import { getContext } from '../../../context';
-import { storeName } from '../../../../../editor/store';
+import { useSelectContext, updateSenderDomainsConfig } from '../../../context';
 
 type SenderDomainInlineNoticeProps = {
   email: string;
@@ -25,9 +23,7 @@ type SenderDomainInlineNoticeProps = {
 function SenderDomainStatusNotice({
   email,
 }: SenderDomainInlineNoticeProps): JSX.Element {
-  const [senderDomainsConfig, setSendersDomainConfig] = useState(
-    getContext().senderDomainsConfig,
-  );
+  const { senderDomainsConfig } = useSelectContext();
 
   const domain = extractEmailDomain(email);
   const isPartiallyVerifiedDomain =
@@ -38,12 +34,6 @@ function SenderDomainStatusNotice({
   const showSenderDomainWarning =
     !senderDomainsConfig.verifiedSenderDomains.includes(domain);
 
-  useEffect(() => {
-    dispatch(storeName).alterContext('mailpoet', 'senderDomainsConfig', {
-      ...senderDomainsConfig,
-    });
-  }, [senderDomainsConfig]);
-
   return (
     <SenderEmailAddressWarning
       emailAddress={email}
@@ -55,7 +45,7 @@ function SenderDomainStatusNotice({
       onSuccessfulEmailOrDomainAuthorization={(data) => {
         if (data.type === 'email') {
           senderDomainsConfig.authorizedEmails.push(email);
-          setSendersDomainConfig({ ...senderDomainsConfig });
+          updateSenderDomainsConfig({ ...senderDomainsConfig });
           MailPoet.trackEvent('MSS in plugin authorize email', {
             'authorized email source': 'Automations',
             wasSuccessful: 'yes',
@@ -70,7 +60,7 @@ function SenderDomainStatusNotice({
           if (!senderDomainsConfig.allSenderDomains.includes(domain)) {
             senderDomainsConfig.allSenderDomains.push(domain);
           }
-          setSendersDomainConfig({ ...senderDomainsConfig });
+          updateSenderDomainsConfig({ ...senderDomainsConfig });
           MailPoet.trackEvent('MSS in plugin verify sender domain', {
             'verify sender domain source': 'Automations',
             wasSuccessful: 'yes',