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

Refactor heading steps to typescript

Browse Source 
[MAILPOET-3436]
This commit is contained in:
Pavel Dohnal
2021-03-04 10:09:25 +01:00
committed by Veljko V
parent 62bf43ad3f
commit 4fe9851a2e
4 changed files with 15 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
assets/js/src/newsletter_editor/initializer.jsx
View File

@@ -2,7 +2,7 @@ import Hooks from 'wp-js-hooks';
import MailPoet from 'mailpoet'; import MailPoet from 'mailpoet';
import React from 'react'; import React from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import ListingHeadingSteps from 'newsletters/listings/heading_steps.jsx'; import ListingHeadingSteps from 'newsletters/listings/heading_steps';
import fetchAutomaticEmailShortcodes from 'newsletters/automatic_emails/fetch_editor_shortcodes.jsx'; import fetchAutomaticEmailShortcodes from 'newsletters/automatic_emails/fetch_editor_shortcodes.jsx';
import displayTutorial from './tutorial.jsx'; import displayTutorial from './tutorial.jsx';

2
assets/js/src/newsletters/listings/heading_display.jsx
View File

@@ -1,5 +1,5 @@
import { withRouter } from 'react-router-dom'; import { withRouter } from 'react-router-dom';
import { mapPathToSteps } from './heading_steps.jsx'; import { mapPathToSteps } from './heading_steps.tsx';
const isHeaderHidden = (location) => location.hash.match(new RegExp('^#/new')) || location.pathname.match(new RegExp('^/new')); const isHeaderHidden = (location) => location.hash.match(new RegExp('^#/new')) || location.pathname.match(new RegExp('^/new'));

20
assets/js/src/newsletters/listings/heading_steps.jsx → assets/js/src/newsletters/listings/heading_steps.tsx
View File

@@ -1,23 +1,23 @@
import React from 'react'; import React from 'react';
import MailPoet from 'mailpoet'; import MailPoet from 'mailpoet';
import HideScreenOptions from '../../common/hide_screen_options/hide_screen_options.tsx'; import HideScreenOptions from '../../common/hide_screen_options/hide_screen_options';
import Steps from '../../common/steps/steps.tsx'; import Steps from '../../common/steps/steps';
export const mapPathToSteps = (location) => { export const mapPathToSteps = (location: Location): number|null => {
const stepsMap = [ const stepsMap = [
['/new/.+', 1], ['/new/.+', 1],
['/template/.+', 2], ['/template/.+', 2],
['/send/.+', 4], ['/send/.+', 4],
]; ];
if (location.search.match(/page=mailpoet-newsletter-editor/)) { if (location.search.match(/page=mailpoet-newsletter-editor/g)) {
return 3; return 3;
} }
let stepNumber = null; let stepNumber = null;
stepsMap.forEach(([regex, step]) => { stepsMap.forEach(([regex, step]) => {
if (location.hash.match(new RegExp(`^#${regex}`)) || location.pathname.match(new RegExp(`^${regex}`))) { if ((new RegExp(`^#${regex}`)).exec(location.hash) || (new RegExp(`^${regex}`)).exec(location.pathname)) {
stepNumber = step; stepNumber = step;
} }
}); });
@@ -25,7 +25,7 @@ export const mapPathToSteps = (location) => {
return stepNumber; return stepNumber;
}; };
const getEmailTypeTitle = (emailType) => { const getEmailTypeTitle = (emailType: string): string => {
const typeMap = { const typeMap = {
standard: MailPoet.I18n.t('stepNameTypeStandard'), standard: MailPoet.I18n.t('stepNameTypeStandard'),
welcome: MailPoet.I18n.t('stepNameTypeWelcome'), welcome: MailPoet.I18n.t('stepNameTypeWelcome'),
@@ -36,7 +36,11 @@ const getEmailTypeTitle = (emailType) => {
return typeMap[emailType] || MailPoet.I18n.t('stepNameTypeStandard'); return typeMap[emailType] || MailPoet.I18n.t('stepNameTypeStandard');
}; };
const stepsListingHeading = (step, emailTypeTitle, automationId) => ( const stepsListingHeading = (
step: number,
emailTypeTitle: string,
automationId: string
): JSX.Element => (
<div className="mailpoet-newsletter-listing-heading-wrapper" data-automation-id={automationId}> <div className="mailpoet-newsletter-listing-heading-wrapper" data-automation-id={automationId}>
<HideScreenOptions /> <HideScreenOptions />
<Steps count={4} current={step} titles={[emailTypeTitle, MailPoet.I18n.t('stepNameTemplate'), MailPoet.I18n.t('stepNameDesign'), MailPoet.I18n.t('stepNameSend')]} /> <Steps count={4} current={step} titles={[emailTypeTitle, MailPoet.I18n.t('stepNameTemplate'), MailPoet.I18n.t('stepNameDesign'), MailPoet.I18n.t('stepNameSend')]} />
@@ -49,7 +53,7 @@ const ListingHeadingSteps = ({
emailType, emailType,
location, location,
automationId, automationId,
}) => { }): JSX.Element => {
const stepNumber = step || mapPathToSteps(location); const stepNumber = step || mapPathToSteps(location);
const emailTypeTitle = getEmailTypeTitle(emailType); const emailTypeTitle = getEmailTypeTitle(emailType);
if (stepNumber !== null) { if (stepNumber !== null) {

2
assets/js/src/newsletters/listings/heading_steps_route.jsx
View File

@@ -1,5 +1,5 @@
import { withRouter } from 'react-router-dom'; import { withRouter } from 'react-router-dom';
import ListingHeadingSteps from './heading_steps.jsx'; import ListingHeadingSteps from './heading_steps.tsx';
const ListingHeadingStepsRoute = withRouter(ListingHeadingSteps); const ListingHeadingStepsRoute = withRouter(ListingHeadingSteps);