From 94a25f3f1ceee9e1cc1e24fa9fb017358e44508d Mon Sep 17 00:00:00 2001
From: Pavel Dohnal <pavel@mailpoet.com>
Date: Mon, 22 Jul 2019 15:52:57 +0200
Subject: [PATCH] Scroll to top on navigation

[MAILPOET-2129]
---
 assets/js/src/common/scroll_to_top.jsx        |  12 ++
 .../src/subscribers/importExport/import.jsx   | 105 +++++++++---------
 .../import/step_input_validation.jsx          |   2 +-
 3 files changed, 67 insertions(+), 52 deletions(-)
 create mode 100644 assets/js/src/common/scroll_to_top.jsx

diff --git a/assets/js/src/common/scroll_to_top.jsx b/assets/js/src/common/scroll_to_top.jsx
new file mode 100644
index 0000000000..24d5741648
--- /dev/null
+++ b/assets/js/src/common/scroll_to_top.jsx
@@ -0,0 +1,12 @@
+import { useEffect } from 'react';
+import { withRouter } from 'react-router-dom';
+
+const ScrollToTop = ({ children, location: { pathname } }) => {
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, [pathname]);
+
+  return children || null;
+};
+
+export default withRouter(ScrollToTop);
diff --git a/assets/js/src/subscribers/importExport/import.jsx b/assets/js/src/subscribers/importExport/import.jsx
index 84daa1a93b..f2c6679f56 100644
--- a/assets/js/src/subscribers/importExport/import.jsx
+++ b/assets/js/src/subscribers/importExport/import.jsx
@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom';
 import {
   HashRouter, Switch, Route, Redirect,
 } from 'react-router-dom';
+import ScrollToTop from 'common/scroll_to_top.jsx';
 
 import StepMethodSelection from './import/step_method_selection.jsx';
 import StepInputValidation from './import/step_input_validation.jsx';
@@ -18,57 +19,59 @@ const ImportSubscribers = () => {
   const [stepDataManipulationData, setStepDataManipulationData] = useState({});
   return (
     <HashRouter>
-      <Switch>
-        <Route
-          path="/step_method_selection"
-          render={props => (
-            <StepMethodSelection
-              {...props}
-              setStepMethodSelectionData={setStepMethodSelectionData}
-              subscribersLimitForValidation={subscribersLimitForValidation}
-            />
-          )}
-        />
-        <Route
-          path="/step_input_validation"
-          render={props => (
-            <StepInputValidation
-              {...props}
-              stepMethodSelectionData={stepMethodSelectionData}
-            />
-          )}
-        />
-        <Route
-          path="/step_data_manipulation"
-          render={props => (
-            <StepDataManipulation
-              {...props}
-              stepMethodSelectionData={stepMethodSelectionData}
-              subscribersLimitForValidation={subscribersLimitForValidation}
-              setStepDataManipulationData={setStepDataManipulationData}
-            />
-          )}
-        />
-        <Route
-          path="/step_results"
-          render={props => (
-            <StepResults
-              {...props}
-              errors={stepDataManipulationData.errors}
-              createdSubscribers={stepDataManipulationData.created}
-              updatedSubscribers={stepDataManipulationData.updated}
-              segments={stepDataManipulationData.segments}
-              addedToSegmentWithWelcomeNotification={
-                stepDataManipulationData.added_to_segment_with_welcome_notification
-              }
-            />
-          )}
-        />
-        <Route
-          path="*"
-          render={() => <Redirect to="/step_method_selection" />}
-        />
-      </Switch>
+      <ScrollToTop>
+        <Switch>
+          <Route
+            path="/step_method_selection"
+            render={props => (
+              <StepMethodSelection
+                {...props}
+                setStepMethodSelectionData={setStepMethodSelectionData}
+                subscribersLimitForValidation={subscribersLimitForValidation}
+              />
+            )}
+          />
+          <Route
+            path="/step_input_validation"
+            render={props => (
+              <StepInputValidation
+                {...props}
+                stepMethodSelectionData={stepMethodSelectionData}
+              />
+            )}
+          />
+          <Route
+            path="/step_data_manipulation"
+            render={props => (
+              <StepDataManipulation
+                {...props}
+                stepMethodSelectionData={stepMethodSelectionData}
+                subscribersLimitForValidation={subscribersLimitForValidation}
+                setStepDataManipulationData={setStepDataManipulationData}
+              />
+            )}
+          />
+          <Route
+            path="/step_results"
+            render={props => (
+              <StepResults
+                {...props}
+                errors={stepDataManipulationData.errors}
+                createdSubscribers={stepDataManipulationData.created}
+                updatedSubscribers={stepDataManipulationData.updated}
+                segments={stepDataManipulationData.segments}
+                addedToSegmentWithWelcomeNotification={
+                  stepDataManipulationData.added_to_segment_with_welcome_notification
+                }
+              />
+            )}
+          />
+          <Route
+            path="*"
+            render={() => <Redirect to="/step_method_selection" />}
+          />
+        </Switch>
+      </ScrollToTop>
     </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 4ab651ac51..04211671e5 100644
--- a/assets/js/src/subscribers/importExport/import/step_input_validation.jsx
+++ b/assets/js/src/subscribers/importExport/import/step_input_validation.jsx
@@ -13,7 +13,7 @@ function StepInputValidation({ stepMethodSelectionData, history }) {
 
   useEffect(
     () => {
-      if (stepMethodSelectionData === 'undefined') {
+      if (stepMethodSelectionData === undefined) {
         history.replace('step_method_selection');
       }
     },