woocommerce/plugins/woocommerce-admin/client/customize-store/assembler-hub/hooks/use-home-templates.ts

79 lines
1.9 KiB
TypeScript

/* eslint-disable @woocommerce/dependency-group */
/* eslint-disable @typescript-eslint/ban-ts-comment */
/**
* External dependencies
*/
import { useMemo } from '@wordpress/element';
import { parse } from '@wordpress/blocks';
/**
* Internal dependencies
*/
import { usePatterns, Pattern, PatternWithBlocks } from './use-patterns';
import { HOMEPAGE_TEMPLATES } from '~/customize-store/data/homepageTemplates';
export const getTemplatePatterns = (
template: string[],
patternsByName: Record< string, Pattern >
) =>
template
.map( ( patternName: string ) => {
const pattern = patternsByName[ patternName ];
if ( pattern && pattern.content ) {
return {
...pattern,
// @ts-ignore - Passing options is valid, but not in the type.
blocks: parse( pattern.content, {
__unstableSkipMigrationLogs: true,
} ),
};
}
return null;
} )
.filter( ( pattern ) => pattern !== null ) as PatternWithBlocks[];
export const patternsToNameMap = ( blockPatterns: Pattern[] ) =>
blockPatterns.reduce(
( acc: Record< string, Pattern >, pattern: Pattern ) => {
acc[ pattern.name ] = pattern;
return acc;
},
{}
);
// Returns home template patterns excluding header and footer.
export const useHomeTemplates = () => {
const { blockPatterns, isLoading } = usePatterns();
const patternsByName = useMemo(
() => patternsToNameMap( blockPatterns ),
[ blockPatterns ]
);
const homeTemplates = useMemo( () => {
if ( isLoading ) return {};
const recommendedTemplates = HOMEPAGE_TEMPLATES;
return Object.entries( recommendedTemplates ).reduce(
(
acc: Record< string, PatternWithBlocks[] >,
[ templateName, template ]
) => {
if ( templateName in recommendedTemplates ) {
acc[ templateName ] = getTemplatePatterns(
template.blocks.slice( 1, -1 ),
patternsByName
);
}
return acc;
},
{}
);
}, [ isLoading, patternsByName ] );
return {
homeTemplates,
isLoading,
};
};