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,6 +19,7 @@ const ImportSubscribers = () => {
   const [stepDataManipulationData, setStepDataManipulationData] = useState({});
   return (
     <HashRouter>
+      <ScrollToTop>
         <Switch>
           <Route
             path="/step_method_selection"
@@ -69,6 +71,7 @@ const ImportSubscribers = () => {
             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');
       }
     },