Lift state to top level component

[MAILPOET-1809]

assets/js/src/subscribers/importExport/import.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import ReactDOM from 'react-dom';
 import { HashRouter, Switch, Route, Redirect } from 'react-router-dom';
 
@@ -6,13 +6,18 @@ import StepMethodSelection from './import/step_method_selection.jsx';
 
 const container = document.getElementById('import_container');
 
-if (container) {
+const ImportSubscribers = () => {
-  ReactDOM.render((
+  const [stepMethodSelection, setStepMethodSelection] = useState(undefined);
+  return (
     <HashRouter>
       <Switch>
-        <Route path="/step_method_selection" component={StepMethodSelection} />
+        <Route path="/step_method_selection" render={props => <StepMethodSelection {...props} setStepMethodSelection={setStepMethodSelection} />} />
         <Route path="*" render={() => <Redirect to="/step_method_selection" />} />
       </Switch>
     </HashRouter>
-  ), container);
+  );
+};
+
+if (container) {
+  ReactDOM.render(<ImportSubscribers />, container);
 }

assets/js/src/subscribers/importExport/import/step_method_selection.jsx

@@ -25,13 +25,13 @@ const getNextStepLink = (importData) => {
 
 function StepMethodSelection({
   history,
+  setStepMethodSelection,
 }) {
   const [method, setMethod] = useState(undefined);
   const [pastedCsvData, setPastedCsvData] = useState('');
   const [file, setFile] = useState(undefined);
 
   const finish = (parsedData) => {
-    window.importData.step_method_selection = parsedData;
     setStepMethodSelection(parsedData);
     history.push(getNextStepLink(parsedData));
   };
@@ -94,6 +94,7 @@ StepMethodSelection.propTypes = {
   history: PropTypes.shape({
     push: PropTypes.func.isRequired,
   }).isRequired,
+  setStepMethodSelection: PropTypes.func.isRequired,
 };
 
 export default withRouter(StepMethodSelection);

assets/js/src/subscribers/importExport/import/step_method_selection/process_csv.jsx

@@ -14,12 +14,12 @@ function papaParserConfig(done) {
       if (sanitizedData) {
         done(sanitizedData);
       } else {
-        MailPoet.Modal.loading(false);
         let errorNotice = MailPoet.I18n.t('noValidRecords');
         errorNotice = errorNotice.replace('[link]', MailPoet.I18n.t('csvKBLink'));
         errorNotice = errorNotice.replace('[/link]', '</a>');
         MailPoet.Notice.error(errorNotice);
       }
+      MailPoet.Modal.loading(false);
     },
   };
 }