Scroll to top on navigation

[MAILPOET-2129]

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);

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>
   );
 };

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');
       }
     },