Refactor initial fetch tags into resolver

[MAILPOET-6354]

packages/js/email-editor/src/components/block-editor/editor.tsx

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useDispatch, useSelect } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 import {
 	ErrorBoundary,
 	PostLockedModal,
@@ -23,7 +23,6 @@ import { unlockPatternsRelatedSelectorsFromCoreStore } from '../../private-apis'
 import { storeName } from '../../store';
 import { Layout } from './layout';
 import { useNavigateToEntityRecord } from '../../hooks/use-navigate-to-entity-record';
-import { useEffect } from 'react';
 
 export function InnerEditor( {
 	postId: initialPostId,
@@ -32,12 +31,6 @@ export function InnerEditor( {
 	initialEdits,
 	...props
 } ) {
-	const { loadPersonalizationTags } = useDispatch( storeName );
-
-	useEffect( () => {
-		void loadPersonalizationTags();
-	}, [ loadPersonalizationTags ] );
-
 	const {
 		currentPost,
 		onNavigateToEntityRecord,

packages/js/email-editor/src/components/personalization-tags/personalization-tags-modal.tsx

@@ -14,10 +14,13 @@ const PersonalizationTagsModal = () => {
 
 	const { togglePersonalizationTagsModal } = useDispatch( storeName );
 
-	const { isModalOpened, list } = useSelect(
-		( select ) => select( storeName ).getPersonalizationTagsState(),
-		[]
-	);
+	const { isModalOpened, list } = useSelect( ( select ) => {
+		const store = select( storeName );
+		return {
+			isModalOpened: store.getPersonalizationTagsState().isModalOpened,
+			list: store.getPersonalizationTagsList(),
+		};
+	}, [] );
 
 	if ( ! isModalOpened ) {
 		return null;

packages/js/email-editor/src/store/actions.ts

@@ -11,7 +11,12 @@ import { __, sprintf } from '@wordpress/i18n';
 import { apiFetch } from '@wordpress/data-controls';
 import wpApiFetch from '@wordpress/api-fetch';
 import { storeName, mainSidebarDocumentTab } from './constants';
-import { SendingPreviewStatus, State, Feature } from './types';
+import {
+	SendingPreviewStatus,
+	State,
+	Feature,
+	PersonalizationTag,
+} from './types';
 import { addQueryArgs } from '@wordpress/url';
 import {
 	// @ts-expect-error No types for __unstableSerializeAndClean
@@ -272,14 +277,20 @@ export function revertAndSaveTemplate( template ) {
 	};
 }
 
-export function* loadPersonalizationTags() {
-	const data = yield apiFetch( {
-		path: `/mailpoet-email-editor/v1/get_personalization_tags`,
-		method: 'GET',
-	} );
-
+export function setIsFetchingPersonalizationTags( isFetching: boolean ) {
 	return {
-		type: 'SET_PERSONALIZATION_TAGS',
-		personalizationTags: data.result,
+		type: 'SET_IS_FETCHING_PERSONALIZATION_TAGS',
+		state: {
+			isFetching,
+		} as Partial< State[ 'personalizationTags' ] >,
+	} as const;
+}
+
+export function setPersonalizationTagsList( list: PersonalizationTag[] ) {
+	return {
+		type: 'SET_PERSONALIZATION_TAGS_LIST',
+		state: {
+			list,
+		} as Partial< State[ 'personalizationTags' ] >,
 	} as const;
 }

packages/js/email-editor/src/store/initial-state.ts

@@ -42,6 +42,7 @@ export function getInitialState(): State {
 			isModalOpened: false,
 			list: [],
 			onInsert: null,
+			isFetching: false,
 		},
 	};
 }

packages/js/email-editor/src/store/reducer.ts

@@ -31,6 +31,22 @@ export function reducer( state: State, action ): State {
 					list: action.personalizationTags,
 				},
 			};
+		case 'SET_IS_FETCHING_PERSONALIZATION_TAGS':
+			return {
+				...state,
+				personalizationTags: {
+					...state.personalizationTags,
+					...action.state,
+				},
+			};
+		case 'SET_PERSONALIZATION_TAGS_LIST':
+			return {
+				...state,
+				personalizationTags: {
+					...state.personalizationTags,
+					...action.state,
+				},
+			};
 		default:
 			return state;
 	}

packages/js/email-editor/src/store/resolvers.ts

@@ -0,0 +1,33 @@
+import { apiFetch } from '@wordpress/data-controls';
+import {
+	setPersonalizationTagsList,
+	setIsFetchingPersonalizationTags,
+} from './actions';
+import { storeName } from './constants';
+import { select } from '@wordpress/data';
+
+export function* getPersonalizationTagsList() {
+	// Access the state to check if already fetching
+	const state = yield select( storeName );
+	const isAlreadyFetching = state.personalizationTags?.isFetching;
+
+	// Exit if a fetch operation is already in progress
+	if ( isAlreadyFetching ) {
+		return;
+	}
+
+	// Mark as fetching
+	yield setIsFetchingPersonalizationTags( true );
+
+	try {
+		const data = yield apiFetch( {
+			path: `/mailpoet-email-editor/v1/get_personalization_tags`,
+			method: 'GET',
+		} );
+
+		yield setPersonalizationTagsList( data.result );
+	} finally {
+		// Ensure fetching status is reset
+		yield setIsFetchingPersonalizationTags( false );
+	}
+}

packages/js/email-editor/src/store/selectors.ts

@@ -286,6 +286,12 @@ export function getPersonalizationTagsState(
 	return state.personalizationTags;
 }
 
+export function getPersonalizationTagsList(
+	state: State
+): State[ 'personalizationTags' ][ 'list' ] {
+	return state.personalizationTags.list;
+}
+
 export const getDeviceType = createRegistrySelector(
 	( select ) => () =>
 		// @ts-expect-error getDeviceType is missing in types.

packages/js/email-editor/src/store/store.ts

@@ -9,12 +9,14 @@ import { storeName } from './constants';
 import { getInitialState } from './initial-state';
 import { reducer } from './reducer';
 import * as selectors from './selectors';
+import * as resolvers from './resolvers';
 
 const getConfig = () =>
 	( {
 		actions,
 		controls,
 		selectors,
+		resolvers,
 		reducer,
 		initialState: getInitialState(),
 	} ) as const;

packages/js/email-editor/src/store/types.ts

@@ -204,6 +204,7 @@ export type State = {
 		isModalOpened: boolean;
 		list: PersonalizationTag[];
 		onInsert: ( ( value: string ) => void ) | null;
+		isFetching: boolean;
 	};
 };