From 24900caed676dccf2c189b543f9bc4eb4fe48caa Mon Sep 17 00:00:00 2001
From: Pavel Dohnal <pavel@mailpoet.com>
Date: Tue, 2 Jul 2019 11:31:05 +0200
Subject: [PATCH] Add input validation component to react

[MAILPOET-1809]
---
 assets/css/src/components/_importExport.scss  |  1 +
 .../src/subscribers/importExport/import.jsx   |  6 +++-
 .../import/step_input_validation.jsx          | 30 ++++++++++++++++---
 3 files changed, 32 insertions(+), 5 deletions(-)

diff --git a/assets/css/src/components/_importExport.scss b/assets/css/src/components/_importExport.scss
index f888dd577a..047f0f39eb 100644
--- a/assets/css/src/components/_importExport.scss
+++ b/assets/css/src/components/_importExport.scss
@@ -126,6 +126,7 @@ tr {
 }
 
 .mailpoet_method_selection_step {
+  align-items: flex-start;
   display: flex;
   flex-direction: column;
 
diff --git a/assets/js/src/subscribers/importExport/import.jsx b/assets/js/src/subscribers/importExport/import.jsx
index b56969cba1..65b0dd4e8a 100644
--- a/assets/js/src/subscribers/importExport/import.jsx
+++ b/assets/js/src/subscribers/importExport/import.jsx
@@ -1,8 +1,11 @@
 import React, { useState } from 'react';
 import ReactDOM from 'react-dom';
-import { HashRouter, Switch, Route, Redirect } from 'react-router-dom';
+import {
+  HashRouter, Switch, Route, Redirect,
+} from 'react-router-dom';
 
 import StepMethodSelection from './import/step_method_selection.jsx';
+import StepInputValidation from './import/step_input_validation.jsx';
 
 const container = document.getElementById('import_container');
 
@@ -12,6 +15,7 @@ const ImportSubscribers = () => {
     <HashRouter>
       <Switch>
         <Route path="/step_method_selection" render={props => <StepMethodSelection {...props} setStepMethodSelection={setStepMethodSelection} />} />
+        <Route path="/step_input_validation" render={props => <StepInputValidation {...props} stepMethodSelection={stepMethodSelection} />} />
         <Route path="*" render={() => <Redirect to="/step_method_selection" />} />
       </Switch>
     </HashRouter>
diff --git a/assets/js/src/subscribers/importExport/import/step_input_validation.jsx b/assets/js/src/subscribers/importExport/import/step_input_validation.jsx
index 6c640b1123..4ac6026912 100644
--- a/assets/js/src/subscribers/importExport/import/step_input_validation.jsx
+++ b/assets/js/src/subscribers/importExport/import/step_input_validation.jsx
@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import { withRouter } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import ReactStringReplace from 'react-string-replace';
 import MailPoet from 'mailpoet';
@@ -48,6 +49,12 @@ class StepInputValidation extends Component {
     };
   }
 
+  componentDidMount() {
+    if (typeof (this.props.stepMethodSelection) === 'undefined') {
+      this.props.history.replace('step_method_selection');
+    }
+  }
+
   isFormValid() {
     return this.state.subscribersAgreed
       && this.state.sentOnceLastYear
@@ -112,8 +119,8 @@ class StepInputValidation extends Component {
         </p>
         <PreviousNextStepButtons
           canGoNext={this.isFormValid()}
-          onPreviousAction={() => this.props.navigate('step_method_selection', { trigger: true })}
-          onNextAction={() => this.props.navigate('step_data_manipulation', { trigger: true })}
+          onPreviousAction={() => this.props.history.push('step_method_selection')}
+          onNextAction={() => this.props.history.push('step_data_manipulation')}
         />
       </div>
     );
@@ -121,7 +128,22 @@ class StepInputValidation extends Component {
 }
 
 StepInputValidation.propTypes = {
-  navigate: PropTypes.func.isRequired,
+  history: PropTypes.shape({
+    push: PropTypes.func.isRequired,
+    replace: PropTypes.func.isRequired,
+  }).isRequired,
+  stepMethodSelection: PropTypes.shape({
+    duplicate: PropTypes.arrayOf(PropTypes.string),
+    header: PropTypes.arrayOf(PropTypes.string),
+    invalid: PropTypes.arrayOf(PropTypes.string),
+    role: PropTypes.arrayOf(PropTypes.string),
+    subscribersCount: PropTypes.number,
+    subscribers: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.string)),
+  }),
 };
 
-export default StepInputValidation;
+StepInputValidation.defaultProps = {
+  stepMethodSelection: undefined,
+};
+
+export default withRouter(StepInputValidation);