Move revert template function from component file to store action

[MAILPOET-6336]

packages/js/email-editor/src/components/sidebar/templates-panel.tsx

@@ -1,56 +1,10 @@
 import { PanelBody, Button } from '@wordpress/components';
-import { useSelect, useDispatch, dispatch, select } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
-import { __, sprintf } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 import { store as editorStore } from '@wordpress/editor';
-import { decodeEntities } from '@wordpress/html-entities';
+
-import { store as coreStore } from '@wordpress/core-data';
-import { store as noticesStore } from '@wordpress/notices';
-import apiFetch from '@wordpress/api-fetch';
-import {
-	parse,
-	// @ts-expect-error No types available for this yet.
-	__unstableSerializeAndClean, // eslint-disable-line
-} from '@wordpress/blocks';
-import { BlockInstance } from '@wordpress/blocks/index';
-import { addQueryArgs } from '@wordpress/url';
 import { storeName } from '../../store';
 
-// Todo: This is not available yet. Replace when possible.
-async function revertTemplate( template ) {
-	const templateEntityConfig = select( coreStore ).getEntityConfig(
-		'postType',
-		template.type as string
-	);
-
-	const fileTemplatePath = addQueryArgs(
-		`${ templateEntityConfig.baseURL as string }/${
-			template.id as string
-		}`,
-		{ context: 'edit', source: 'theme' }
-	);
-
-	const fileTemplate = await apiFetch( { path: fileTemplatePath } );
-
-	const serializeBlocks = ( { blocks: blocksForSerialization = [] } ) =>
-		__unstableSerializeAndClean(
-			blocksForSerialization
-		) as BlockInstance[];
-
-	// @ts-expect-error template type is not defined
-	const blocks = parse( fileTemplate?.content?.raw as string );
-	void dispatch( coreStore ).editEntityRecord(
-		'postType',
-		template.type as string,
-		// @ts-expect-error template type is not defined
-		fileTemplate.id as string,
-		{
-			content: serializeBlocks,
-			blocks,
-			source: 'theme',
-		}
-	);
-}
-
 export function TemplatesPanel() {
 	const { onNavigateToEntityRecord, template, hasHistory } = useSelect(
 		( sel ) => {
@@ -69,41 +23,7 @@ export function TemplatesPanel() {
 		[]
 	);
 
-	const { saveEditedEntityRecord } = useDispatch( coreStore );
+	const { revertAndSaveTemplate } = useDispatch( storeName );
-	const { createSuccessNotice, createErrorNotice } =
-		useDispatch( noticesStore );
-	async function revertAndSaveTemplate() {
-		try {
-			await revertTemplate( template );
-			await saveEditedEntityRecord(
-				'postType',
-				template.type,
-				template.id,
-				{}
-			);
-			void createSuccessNotice(
-				sprintf(
-					/* translators: The template/part's name. */
-					__( '"%s" reset.', 'mailpoet' ),
-					decodeEntities( template.title )
-				),
-				{
-					type: 'snackbar',
-					id: 'edit-site-template-reverted',
-				}
-			);
-		} catch ( error ) {
-			void createErrorNotice(
-				__(
-					'An error occurred while reverting the template.',
-					'mailpoet'
-				),
-				{
-					type: 'snackbar',
-				}
-			);
-		}
-	}
 
 	return (
 		<PanelBody
@@ -136,7 +56,7 @@ export function TemplatesPanel() {
 			<Button
 				variant="primary"
 				onClick={ () => {
-					void revertAndSaveTemplate();
+					void revertAndSaveTemplate( template );
 				} }
 			>
 				{ __( 'Revert customizations', 'mailpoet' ) }

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

@@ -1,13 +1,25 @@
 import { dispatch, select } from '@wordpress/data';
 import { store as interfaceStore } from '@wordpress/interface';
-import { store as coreDataStore } from '@wordpress/core-data';
+import {
+	store as coreStore,
+	store as coreDataStore,
+} from '@wordpress/core-data';
 import { store as preferencesStore } from '@wordpress/preferences';
 import { store as noticesStore } from '@wordpress/notices';
 import { store as editorStore } from '@wordpress/editor';
-import { __ } from '@wordpress/i18n';
+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, EmailTheme } from './types';
+import { addQueryArgs } from '@wordpress/url';
+import {
+	// @ts-expect-error No types for __unstableSerializeAndClean
+	// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
+	__unstableSerializeAndClean,
+	parse,
+} from '@wordpress/blocks';
+import { decodeEntities } from '@wordpress/html-entities';
 
 export const toggleFeature =
 	( feature: Feature ) =>
@@ -175,3 +187,77 @@ export function* requestSendingNewsletterPreview(
 		};
 	}
 }
+
+/**
+ * Revert template modifications to defaults
+ * Created based on https://github.com/WordPress/gutenberg/blob/4d225cc2ba6f09822227e7a820b8a555be7c4d48/packages/editor/src/store/private-actions.js#L241
+ * @param template - Template post object
+ */
+export function revertAndSaveTemplate( template ) {
+	return async ( { registry } ) => {
+		try {
+			const templateEntityConfig = registry
+				.select( coreStore )
+				.getEntityConfig( 'postType', template.type as string );
+
+			const fileTemplatePath = addQueryArgs(
+				`${ templateEntityConfig.baseURL as string }/${
+					template.id as string
+				}`,
+				{ context: 'edit', source: 'theme' }
+			);
+
+			const fileTemplate = await wpApiFetch( { path: fileTemplatePath } );
+
+			const serializeBlocks = ( {
+				blocks: blocksForSerialization = [],
+			} ) => __unstableSerializeAndClean( blocksForSerialization );
+
+			// @ts-expect-error template type is not defined
+			const blocks = parse( fileTemplate?.content?.raw as string );
+
+			await registry.dispatch( coreStore ).editEntityRecord(
+				'postType',
+				template.type as string,
+				// @ts-expect-error template type is not defined
+				fileTemplate.id as string,
+				{
+					content: serializeBlocks,
+					blocks,
+					source: 'theme',
+				}
+			);
+			await registry
+				.dispatch( coreStore )
+				.saveEditedEntityRecord(
+					'postType',
+					template.type,
+					template.id,
+					{}
+				);
+			void registry.dispatch( noticesStore ).createSuccessNotice(
+				sprintf(
+					/* translators: The template/part's name. */
+					__( '"%s" reset.', 'mailpoet' ),
+					decodeEntities( template.title )
+				),
+				{
+					type: 'snackbar',
+					id: 'edit-site-template-reverted',
+				}
+			);
+		} catch ( error ) {
+			void registry
+				.dispatch( noticesStore )
+				.createErrorNotice(
+					__(
+						'An error occurred while reverting the template.',
+						'mailpoet'
+					),
+					{
+						type: 'snackbar',
+					}
+				);
+		}
+	};
+}