Refactor welcome wizard controller to function component

[MAILPOET-1916]

assets/js/src/welcome_wizard/steps_controller.jsx

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import MailPoet from 'mailpoet';
 import WelcomeWizardHeader from './header.jsx';
 import WelcomeWizardSenderStep from './steps/sender_step.jsx';
@@ -8,57 +8,42 @@ import WelcomeWizardEmailCourseStep from './steps/email_course_step.jsx';
 import WelcomeWizardUsageTrackingStep from './steps/usage_tracking_step.jsx';
 import WelcomeWizardWooCommerceStep from './steps/woo_commerce_step.jsx';
 
-class WelcomeWizardStepsController extends React.Component {
+const WelcomeWizardStepsController = (props) => {
-  constructor(props) {
+  const [stepsCount] = useState(window.is_woocommerce_active ? 4 : 3);
-    super(props);
+  const [shouldSetSender] = useState(!window.is_mp2_migration_complete);
+  const [loading, setLoading] = useState(false);
+  const [sender, setSender] = useState(window.sender_data);
+  const [replyTo, setReplyTo] = useState(window.reply_to_data);
 
-    this.state = {
+  useEffect(() => {
-      stepsCount: window.is_woocommerce_active ? 4 : 3,
+    const step = parseInt(props.match.params.step, 10);
-      shouldSetSender: !window.is_mp2_migration_complete,
+    if (step > stepsCount || step < 1) {
-      loading: false,
+      props.history.push('/steps/1');
-      sender: window.sender_data,
-      replyTo: window.reply_to_data,
-    };
-
-    this.finishWizard = this.finishWizard.bind(this);
-    this.updateSettings = this.updateSettings.bind(this);
-    this.activateTracking = this.activateTracking.bind(this);
-    this.updateSender = this.updateSender.bind(this);
-    this.updateReplyTo = this.updateReplyTo.bind(this);
-    this.submitSender = this.submitSender.bind(this);
-    this.showWooCommerceStepOrFinish = this.showWooCommerceStepOrFinish.bind(this);
-    this.componentDidUpdate();
-  }
-
-  componentDidUpdate() {
-    const step = parseInt(this.props.match.params.step, 10);
-    if (step > this.state.stepsCount || step < 1) {
-      this.props.history.push('/steps/1');
     }
-  }
+  });
 
-  finishWizard() {
+  function finishWizard() {
-    this.setState({ loading: true });
+    setLoading(true);
     window.location = window.finish_wizard_url;
   }
 
-  showWooCommerceStepOrFinish() {
+  function showWooCommerceStepOrFinish() {
-    if (this.state.stepsCount === 4) {
+    if (stepsCount === 4) {
-      this.props.history.push('/steps/4');
+      props.history.push('/steps/4');
     } else {
-      this.finishWizard();
+      finishWizard();
     }
   }
 
-  updateSettings(data) {
+  function updateSettings(data) {
-    this.setState({ loading: true });
+    setLoading(true);
     return MailPoet.Ajax.post({
       api_version: window.mailpoet_api_version,
       endpoint: 'settings',
       action: 'set',
       data,
-    }).then(() => this.setState({ loading: false })).fail((response) => {
+    }).then(() => setLoading(false)).fail((response) => {
-      this.setState({ loading: false });
+      setLoading(false);
       if (response.errors.length > 0) {
         MailPoet.Notice.error(
           response.errors.map(error => error.message),
@@ -68,95 +53,90 @@ class WelcomeWizardStepsController extends React.Component {
     });
   }
 
-  activateTracking() {
+  function activateTracking() {
-    this.updateSettings({ analytics: { enabled: true } }).then(() => (
+    updateSettings({ analytics: { enabled: true } }).then(() => (
-      this.showWooCommerceStepOrFinish()));
+      showWooCommerceStepOrFinish()));
   }
 
-  updateSender(data) {
+  function updateSender(data) {
-    this.setState(prevState => ({
+    setSender({ ...sender, ...data });
-      sender: { ...prevState.sender, ...data },
-    }));
   }
 
-  updateReplyTo(data) {
+  function updateReplyTo(data) {
-    this.setState(prevState => ({
+    setReplyTo({ ...replyTo, ...data });
-      replyTo: { ...prevState.replyTo, ...data },
-    }));
   }
 
-  submitSender() {
+  function submitSender() {
-    this.updateSettings({
+    updateSettings({
-      sender: this.state.sender,
+      sender,
-      reply_to: this.state.replyTo,
+      reply_to: replyTo,
-    }).then(() => (this.props.history.push('/steps/2')));
+    }).then(() => (props.history.push('/steps/2')));
   }
 
-  render() {
+  const step = parseInt(props.match.params.step, 10);
-    const step = parseInt(this.props.match.params.step, 10);
-    return (
-      <div className="mailpoet_welcome_wizard_steps mailpoet_welcome_wizard_centered_column">
-        <WelcomeWizardHeader
-          current_step={step}
-          steps_count={this.state.stepsCount}
-          logo_src={window.mailpoet_logo_url}
-        />
-        { step === 1 && this.state.shouldSetSender
-          ? (
-            <WelcomeWizardSenderStep
-              update_sender={this.updateSender}
-              submit_sender={this.submitSender}
-              update_reply_to={this.updateReplyTo}
-              finish={this.finishWizard}
-              loading={this.state.loading}
-              sender={this.state.sender}
-              reply_to={this.state.replyTo}
-            />
-          ) : null
-        }
 
-        { step === 1 && !this.state.shouldSetSender
+  return (
-          ? (
+    <div className="mailpoet_welcome_wizard_steps mailpoet_welcome_wizard_centered_column">
-            <WelcomeWizardMigratedUserStep
+      <WelcomeWizardHeader
-              next={() => this.props.history.push('/steps/2')}
+        current_step={step}
-            />
+        steps_count={stepsCount}
-          ) : null
+        logo_src={window.mailpoet_logo_url}
-        }
+      />
+      { step === 1 && shouldSetSender
+        ? (
+          <WelcomeWizardSenderStep
+            update_sender={updateSender}
+            submit_sender={submitSender}
+            update_reply_to={updateReplyTo}
+            finish={finishWizard}
+            loading={loading}
+            sender={sender}
+            reply_to={replyTo}
+          />
+        ) : null
+      }
 
-        { step === 2
+      { step === 1 && !shouldSetSender
-          ? (
+        ? (
-            <WelcomeWizardEmailCourseStep
+          <WelcomeWizardMigratedUserStep
-              next={() => this.props.history.push('/steps/3')}
+            next={() => props.history.push('/steps/2')}
-              illustration_url={window.email_course_illustration}
+          />
-            />
+        ) : null
-          ) : null
+      }
-        }
 
-        { step === 3
+      { step === 2
-          ? (
+        ? (
-            <WelcomeWizardUsageTrackingStep
+          <WelcomeWizardEmailCourseStep
-              skip_action={this.showWooCommerceStepOrFinish}
+            next={() => props.history.push('/steps/3')}
-              allow_action={this.activateTracking}
+            illustration_url={window.email_course_illustration}
-              allow_text={this.state.stepsCount === 4
+          />
-                ? MailPoet.I18n.t('allowAndContinue') : MailPoet.I18n.t('allowAndFinish')}
+        ) : null
-              loading={this.state.loading}
+      }
-            />
-          ) : null
-        }
 
-        { step === 4
+      { step === 3
-          ? (
+        ? (
-            <WelcomeWizardWooCommerceStep
+          <WelcomeWizardUsageTrackingStep
-              next={this.finishWizard}
+            skip_action={showWooCommerceStepOrFinish}
-              screenshot_src={window.woocommerce_screenshot_url}
+            allow_action={activateTracking}
-              loading={this.state.loading}
+            allow_text={stepsCount === 4
-            />
+              ? MailPoet.I18n.t('allowAndContinue') : MailPoet.I18n.t('allowAndFinish')}
-          ) : null
+            loading={loading}
-        }
+          />
-      </div>
+        ) : null
-    );
+      }
-  }
+
-}
+      { step === 4
+        ? (
+          <WelcomeWizardWooCommerceStep
+            next={finishWizard}
+            screenshot_src={window.woocommerce_screenshot_url}
+            loading={loading}
+          />
+        ) : null
+      }
+    </div>
+  );
+};
 
 WelcomeWizardStepsController.propTypes = {
   match: PropTypes.shape({