From 4fe9851a2e1308894538489752e8e5deee36e7f6 Mon Sep 17 00:00:00 2001
From: Pavel Dohnal <pavel.dohnal@automattic.com>
Date: Thu, 4 Mar 2021 10:09:25 +0100
Subject: [PATCH] Refactor heading steps to typescript

[MAILPOET-3436]
---
 .../js/src/newsletter_editor/initializer.jsx  |  2 +-
 .../newsletters/listings/heading_display.jsx  |  2 +-
 .../{heading_steps.jsx => heading_steps.tsx}  | 20 +++++++++++--------
 .../listings/heading_steps_route.jsx          |  2 +-
 4 files changed, 15 insertions(+), 11 deletions(-)
 rename assets/js/src/newsletters/listings/{heading_steps.jsx => heading_steps.tsx} (73%)

diff --git a/assets/js/src/newsletter_editor/initializer.jsx b/assets/js/src/newsletter_editor/initializer.jsx
index 33b83d2605..a15c3a8ab0 100644
--- a/assets/js/src/newsletter_editor/initializer.jsx
+++ b/assets/js/src/newsletter_editor/initializer.jsx
@@ -2,7 +2,7 @@ import Hooks from 'wp-js-hooks';
 import MailPoet from 'mailpoet';
 import React from 'react';
 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 displayTutorial from './tutorial.jsx';
 
diff --git a/assets/js/src/newsletters/listings/heading_display.jsx b/assets/js/src/newsletters/listings/heading_display.jsx
index b19a532642..0ecdaeacb5 100644
--- a/assets/js/src/newsletters/listings/heading_display.jsx
+++ b/assets/js/src/newsletters/listings/heading_display.jsx
@@ -1,5 +1,5 @@
 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'));
 
diff --git a/assets/js/src/newsletters/listings/heading_steps.jsx b/assets/js/src/newsletters/listings/heading_steps.tsx
similarity index 73%
rename from assets/js/src/newsletters/listings/heading_steps.jsx
rename to assets/js/src/newsletters/listings/heading_steps.tsx
index e350d25189..701a411884 100644
--- a/assets/js/src/newsletters/listings/heading_steps.jsx
+++ b/assets/js/src/newsletters/listings/heading_steps.tsx
@@ -1,23 +1,23 @@
 import React from 'react';
 import MailPoet from 'mailpoet';
-import HideScreenOptions from '../../common/hide_screen_options/hide_screen_options.tsx';
-import Steps from '../../common/steps/steps.tsx';
+import HideScreenOptions from '../../common/hide_screen_options/hide_screen_options';
+import Steps from '../../common/steps/steps';
 
-export const mapPathToSteps = (location) => {
+export const mapPathToSteps = (location: Location): number|null => {
   const stepsMap = [
     ['/new/.+', 1],
     ['/template/.+', 2],
     ['/send/.+', 4],
   ];
 
-  if (location.search.match(/page=mailpoet-newsletter-editor/)) {
+  if (location.search.match(/page=mailpoet-newsletter-editor/g)) {
     return 3;
   }
 
   let stepNumber = null;
 
   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;
     }
   });
@@ -25,7 +25,7 @@ export const mapPathToSteps = (location) => {
   return stepNumber;
 };
 
-const getEmailTypeTitle = (emailType) => {
+const getEmailTypeTitle = (emailType: string): string => {
   const typeMap = {
     standard: MailPoet.I18n.t('stepNameTypeStandard'),
     welcome: MailPoet.I18n.t('stepNameTypeWelcome'),
@@ -36,7 +36,11 @@ const getEmailTypeTitle = (emailType) => {
   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}>
     <HideScreenOptions />
     <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,
   location,
   automationId,
-}) => {
+}): JSX.Element => {
   const stepNumber = step || mapPathToSteps(location);
   const emailTypeTitle = getEmailTypeTitle(emailType);
   if (stepNumber !== null) {
diff --git a/assets/js/src/newsletters/listings/heading_steps_route.jsx b/assets/js/src/newsletters/listings/heading_steps_route.jsx
index 7be1e458ea..1f37927c3d 100644
--- a/assets/js/src/newsletters/listings/heading_steps_route.jsx
+++ b/assets/js/src/newsletters/listings/heading_steps_route.jsx
@@ -1,5 +1,5 @@
 import { withRouter } from 'react-router-dom';
-import ListingHeadingSteps from './heading_steps.jsx';
+import ListingHeadingSteps from './heading_steps.tsx';
 
 const ListingHeadingStepsRoute = withRouter(ListingHeadingSteps);