Separate SelectTemplateModal into smaller components

MAILPOET-6331

packages/js/email-editor/src/components/template-select/select-modal.tsx

@@ -1,19 +1,17 @@
-// @ts-expect-error No types available for this component
+
-import { BlockPreview } from '@wordpress/block-editor';
 import { store as editorStore } from '@wordpress/editor';
 import { dispatch } from '@wordpress/data';
 import {
 	Modal,
-	__experimentalHStack as HStack, // eslint-disable-line
 	Button,
 	Flex,
 	FlexItem,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-
-import { Async } from './async';
 import { usePreviewTemplates } from '../../hooks';
 import { storeName, TemplatePreview } from '../../store';
+import { TemplateList } from './template-list';
+import { TemplateCategoriesListSidebar } from './template-categories-list-sidebar';
 
 const BLANK_TEMPLATE = 'email-general';
 
@@ -51,6 +49,19 @@ export function SelectTemplateModal( {
 		handleTemplateSelection( blankTemplate );
 	};
 
+  const dummyTemplateCategories = [
+    {
+      name: 'recent',
+      label: 'Recent'
+    },
+    {
+      name: 'basic',
+      label: 'Basic'
+    }
+  ];
+
+  const onClickCategory = () => {}
+
 	return (
 		<Modal
 			title="Select a template"
@@ -60,90 +71,21 @@ export function SelectTemplateModal( {
 			isFullScreen
 		>
 			<div className="block-editor-block-patterns-explorer">
-				<div className="block-editor-block-patterns-explorer__sidebar">
+        <TemplateCategoriesListSidebar templateCategories={dummyTemplateCategories} selectedCategory={dummyTemplateCategories[0].name} onClickCategory={onClickCategory} />
-					<div className="block-editor-block-patterns-explorer__sidebar__categories-list">
-						<Button
-							key="category"
-							label="Category"
-							className="block-editor-block-patterns-explorer__sidebar__categories-list__item"
-							isPressed
-							onClick={ () => {} }
-						>
-							Dummy Category
-						</Button>
-					</div>
-				</div>
-				<div className="block-editor-block-patterns-explorer__list">
-					<div
-						className="block-editor-block-patterns-list"
-						role="listbox"
-					>
-						{ templates.map( ( template ) => (
-							<div
-								key={ template.slug }
-								className="block-editor-block-patterns-list__list-item"
-							>
-								<div
-									className="block-editor-block-patterns-list__item"
-									role="button"
-									tabIndex={ 0 }
-									onClick={ () => {
-										handleTemplateSelection( template );
-									} }
-									onKeyPress={ ( event ) => {
-										if (
-											event.key === 'Enter' ||
-											event.key === ' '
-										) {
-											handleTemplateSelection( template );
-										}
-									} }
-								>
-									<Async
-										placeholder={
-											<p>rendering template</p>
-										}
-									>
-										<BlockPreview
-											blocks={
-												template.previewContentParsed
-											}
-											viewportWidth={ 900 }
-											minHeight={ 300 }
-											additionalStyles={ [
-												{
-													css: template.template
-														.email_theme_css,
-												},
-											] }
-										/>
 
-										<HStack className="block-editor-patterns__pattern-details">
+        <TemplateList templates={templates} onTemplateSelection={ handleTemplateSelection} />
-											<div className="block-editor-block-patterns-list__item-title">
-												{
-													template.template.title
-														.rendered
-												}
-											</div>
-										</HStack>
-									</Async>
-								</div>
-							</div>
-						) ) }
-					</div>
 
-					<Flex justify="flex-end">
+        <Flex justify="flex-end">
-						<FlexItem>
+          <FlexItem>
-							<Button
+            <Button
-								variant="tertiary"
+              variant="tertiary"
-								onClick={ () => handleCloseWithoutSelection() }
+              onClick={ () => handleCloseWithoutSelection() }
-								isBusy={ ! hasTemplates }
+              isBusy={ ! hasTemplates }
-							>
+            >
-								{ __( 'Start from scratch', 'mailpoet' ) }
+              { __( 'Start from scratch', 'mailpoet' ) }
-							</Button>
+            </Button>
-						</FlexItem>
+          </FlexItem>
-					</Flex>
+        </Flex>
-				</div>
 			</div>
 		</Modal>
 	);

packages/js/email-editor/src/components/template-select/template-categories-list-sidebar.tsx

@@ -0,0 +1,30 @@
+import { Button } from '@wordpress/components';
+
+export function TemplateCategoriesListSidebar( {
+                                                 selectedCategory,
+                                                 templateCategories,
+                                                 onClickCategory,
+                                               } ) {
+  const baseClassName = 'block-editor-block-patterns-explorer__sidebar';
+  return (
+    <div className={baseClassName}>
+      <div className={`${baseClassName}__categories-list`}>
+        {templateCategories.map(({ name, label }) => {
+          return (
+            <Button
+              key={name}
+              label={label}
+              className={`${baseClassName}__categories-list__item`}
+              isPressed={selectedCategory === name}
+              onClick={() => {
+                onClickCategory(name);
+              }}
+            >
+              {label}
+            </Button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

packages/js/email-editor/src/components/template-select/template-list.tsx

@@ -0,0 +1,67 @@
+// @ts-expect-error No types available for this component
+import { BlockPreview } from '@wordpress/block-editor';
+import {
+  __experimentalHStack as HStack, // eslint-disable-line
+} from '@wordpress/components';
+import { Async } from './async';
+
+export function TemplateList({templates, onTemplateSelection}) {
+
+  return (
+    <div className="block-editor-block-patterns-explorer__list">
+      <div
+        className="block-editor-block-patterns-list"
+        role="listbox"
+      >
+        {templates.map((template) => (
+          <div
+            key={template.slug}
+            className="block-editor-block-patterns-list__list-item"
+          >
+            <div
+              className="block-editor-block-patterns-list__item"
+              role="button"
+              tabIndex={0}
+              onClick={() => {
+                onTemplateSelection(template);
+              }}
+              onKeyPress={(event) => {
+                if (
+                  event.key === 'Enter' ||
+                  event.key === ' '
+                ) {
+                  onTemplateSelection(template);
+                }
+              }}
+            >
+              <Async
+                placeholder={
+                  <p>rendering template</p>
+                }
+              >
+                <BlockPreview
+                  blocks={template.previewContentParsed}
+                  viewportWidth={900}
+                  minHeight={300}
+                  additionalStyles={[
+                    {
+                      css: template.template.email_theme_css,
+                    },
+                  ]}
+                />
+
+                <HStack className="block-editor-patterns__pattern-details">
+                  <div className="block-editor-block-patterns-list__item-title">
+                    {
+                      template.template.title.rendered
+                    }
+                  </div>
+                </HStack>
+              </Async>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}