Cavemanon/piratepoet
7
Fork 0
Code Pull Requests Actions Releases 16 Activity

Add basic optimization for usePreviewTemplates to improve render performance

Browse Source 
MAILPOET-5949
This commit is contained in:
Oluwaseun Olorunsola
2024-12-05 22:42:19 +01:00
committed by Oluwaseun Olorunsola
parent bc0ce09d61
commit 8661a169b3
1 changed files with 81 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
packages/js/email-editor/src/hooks/use-preview-templates.ts
View File

@ -1,4 +1,4 @@
// import { useMemo } from '@wordpress/element';
import { useMemo } from '@wordpress/element';
import { parse } from '@wordpress/blocks';
import { BlockInstance } from '@wordpress/blocks/index';
import { useSelect } from '@wordpress/data';
@ -89,13 +89,16 @@ function generateTemplateCssTheme(
export function usePreviewTemplates(
customEmailContent = ''
): TemplatePreview[][] {
const { templates, patterns, emailPosts } = useSelect( ( select ) => {
): [ TemplatePreview[], TemplatePreview[], boolean ] {
const { templates, patterns, emailPosts, hasEmailPosts } = useSelect(
( select ) => {
const contentBlockId =
// @ts-expect-error getBlocksByName is not defined in types
select( blockEditorStore ).getBlocksByName(
'core/post-content'
)?.[ 0 ];
const rawEmailPosts = select( storeName ).getSentEmailEditorPosts();
return {
templates: select( storeName ).getEmailTemplates(),
patterns:
@ -104,14 +107,14 @@ export function usePreviewTemplates(
[ 'core/post-content' ],
contentBlockId
),
emailPosts: select( storeName ).getSentEmailEditorPosts(),
emailPosts: rawEmailPosts,
hasEmailPosts: !! ( rawEmailPosts && rawEmailPosts?.length ),
};
}, [] );
if ( ! templates || ( ! patterns.length && ! customEmailContent ) ) {
return [ [] ];
}
},
[]
);
const allTemplates = useMemo( () => {
let contentPatternBlocksGeneral = null;
let contentPatternBlocks = null;
const parsedCustomEmailContent =
@ -138,7 +141,7 @@ export function usePreviewTemplates(
)?.blocks as BlockInstance[];
}
const allTemplates = templates.map(
return templates?.map(
( template: EmailTemplatePreview ): TemplatePreview => {
let parsedTemplate = parse( template.content?.raw );
parsedTemplate = setPostContentInnerBlocks(
@ -163,10 +166,10 @@ export function usePreviewTemplates(
};
}
);
}, [ templates, patterns, customEmailContent ] );
return [
allTemplates,
emailPosts?.map( ( post: EmailEditorPostType ) => {
const allEmailPosts = useMemo( () => {
return emailPosts?.map( ( post: EmailEditorPostType ) => {
const parsedPostContent = parse( post.content?.raw );
const cssThemeData = generateTemplateCssTheme( post, allTemplates );
return {
@ -186,6 +189,8 @@ export function usePreviewTemplates(
category: 'recent',
type: post.type,
};
} ) as unknown as TemplatePreview[],
];
} ) as unknown as TemplatePreview[];
}, [ emailPosts, allTemplates ] );
return [ allTemplates || [], allEmailPosts || [], hasEmailPosts ];
}