Move buttons to component

[MAILPOET-1808]

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

@@ -1,7 +1,6 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import MailPoet from 'mailpoet';
-import PreviousNextStepButtons from './previous_next_step_buttons.jsx';
 import SelectMethod from './step_method_selection/select_import_method.jsx';
 import MethodPaste from './step_method_selection/method_paste.jsx';
 import MethodUpload from './step_method_selection/method_upload.jsx';
@@ -26,57 +25,44 @@ const getNextStepLink = (importData) => {
 function StepMethodSelection({
   navigate,
 }) {
-  const [canGoNext, setCanGoNext] = useState(false);
   const [method, setMethod] = useState(undefined);
   const [csvData, setCsvData] = useState('');
 
-  const setInputValid = () => {
-    setCanGoNext(true);
+  const methodChanged = (newMethod) => {
+    setMethod(newMethod);
+    setCsvData('');
   };
 
-  const setInputInValid = () => {
-    setCanGoNext(false);
+  const navigateToNextStep = () => {
+    navigate(
+      getNextStepLink(window.importData.step_method_selection),
+      { trigger: true }
+    );
   };
 
-  const process = () => {
+  const processLocal = () => {
     processCsv(csvData, (sanitizedData) => {
       window.importData.step_method_selection = sanitizedData;
       MailPoet.trackEvent('Subscribers import started', {
         source: method === 'file-method' ? 'file upload' : 'pasted data',
         'MailPoet Free version': window.mailpoet_version,
       });
-      navigate(
-        getNextStepLink(window.importData.step_method_selection),
-        { trigger: true }
-      );
+      navigateToNextStep();
     });
   };
 
-  const showNextButton = () => {
-    if (method) {
-      return (
-        <PreviousNextStepButtons
-          canGoNext={canGoNext}
-          hidePrevious
-          onNextAction={process}
-        />
-      );
-    }
-    return null;
-  };
-
   return (
     <>
       <SelectMethod
         activeMethod={method}
-        onMethodChange={setMethod}
+        onMethodChange={methodChanged}
       />
       { method === 'paste-method'
         ? (
           <MethodPaste
             onValueChange={setCsvData}
-            setInputValid={setInputValid}
-            setInputInvalid={setInputInValid}
+            onFinish={processLocal}
+            canFinish={!!csvData.trim()}
           />
         ) : null
       }
@@ -84,19 +70,18 @@ function StepMethodSelection({
         ? (
           <MethodUpload
             onValueChange={setCsvData}
-            setInputValid={setInputValid}
-            setInputInvalid={setInputInValid}
+            onFinish={processLocal}
+            canFinish={!!csvData}
           />
         ) : null
       }
       { method === 'mailchimp-method'
         ? (
           <MethodMailChimp
-            setInputValid={setInputValid}
+            onFinish={navigateToNextStep}
           />
         ) : null
       }
-      {showNextButton()}
     </>
   );
 }

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

@@ -2,18 +2,15 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import MailPoet from 'mailpoet';
 import ReactStringReplace from 'react-string-replace';
+import PreviousNextStepButtons from '../previous_next_step_buttons.jsx';
 
 const kbLink = 'http://docs.mailpoet.com/article/126-importing-subscribers-with-csv-files'
 
 const placeholder = 'Email, First Name, Last Name\njohn@doe.com, John, Doe\nmary@smith.com, Mary, Smith\njohnny@walker.com, Johnny, Walker';
 
-const MethodPaste = ({ setInputValid, setInputInvalid, onValueChange }) => {
+const MethodPaste = ({ onValueChange, canFinish, onFinish }) => {
+
   const onChange = (e) => {
-    if (e.target.value) {
-      setInputValid();
-    } else {
-      setInputInvalid();
-    }
     onValueChange(e.target.value);
   };
 
@@ -47,19 +44,23 @@ const MethodPaste = ({ setInputValid, setInputInvalid, onValueChange }) => {
           onChange={onChange}
         />
       </label>
+      <PreviousNextStepButtons
+        canGoNext={canFinish}
+        hidePrevious
+        onNextAction={onFinish}
+      />
     </>
   );
 };
 
 MethodPaste.propTypes = {
-  setInputValid: PropTypes.func,
-  setInputInvalid: PropTypes.func,
+  onFinish: PropTypes.func,
+  canFinish: PropTypes.bool.isRequired,
   onValueChange: PropTypes.func.isRequired,
 };
 
 MethodPaste.defaultProps = {
-  setInputValid: () => {},
-  setInputInvalid: () => {},
+  onFinish: () => {},
 };
 
 export default MethodPaste;

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

@@ -2,26 +2,25 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import MailPoet from 'mailpoet';
 import ReactStringReplace from 'react-string-replace';
+import PreviousNextStepButtons from '../previous_next_step_buttons.jsx';
 
 const kbLink = 'http://docs.mailpoet.com/article/126-importing-subscribers-with-csv-files'
 
-const MethodUpload = ({ setInputValid, setInputInvalid, onValueChange }) => {
+const MethodUpload = ({ onValueChange, canFinish, onFinish }) => {
   const onChange = (e) => {
     const ext = e.target.value.match(/[^.]+$/);
     MailPoet.Notice.hide();
     if (ext === null || ext[0].toLowerCase() !== 'csv') {
-      setInputInvalid();
       MailPoet.Notice.error(MailPoet.I18n.t('wrongFileFormat'));
       onValueChange('');
     } else {
       onValueChange(e.target.files[0]);
-      setInputValid();
     }
   };
 
   return (
-    <div>
     <>
+      <div>
         <label htmlFor="paste_input" className="import_method_paste">
           <div className="import_paste_texts">
             <span className="import_heading">{MailPoet.I18n.t('methodUpload')}</span>
@@ -50,20 +49,24 @@ const MethodUpload = ({ setInputValid, setInputInvalid, onValueChange }) => {
             onChange={onChange}
           />
         </label>
-      </>
       </div>
+      <PreviousNextStepButtons
+        canGoNext={canFinish}
+        hidePrevious
+        onNextAction={onFinish}
+      />
+    </>
   );
 };
 
 MethodUpload.propTypes = {
-  setInputValid: PropTypes.func,
-  setInputInvalid: PropTypes.func,
+  canFinish: PropTypes.bool.isRequired,
+  onFinish: PropTypes.func,
   onValueChange: PropTypes.func.isRequired,
 };
 
 MethodUpload.defaultProps = {
-  setInputValid: () => {},
-  setInputInvalid: () => {},
+  onFinish: () => {},
 };
 
 export default MethodUpload;