Scroll to top on navigation

[MAILPOET-2129]
This commit is contained in:
Pavel Dohnal
2019-07-22 15:52:57 +02:00
committed by M. Shull
parent 7dde2149dd
commit 94a25f3f1c
3 changed files with 67 additions and 52 deletions

View File

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

View File

@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom';
import { import {
HashRouter, Switch, Route, Redirect, HashRouter, Switch, Route, Redirect,
} from 'react-router-dom'; } from 'react-router-dom';
import ScrollToTop from 'common/scroll_to_top.jsx';
import StepMethodSelection from './import/step_method_selection.jsx'; import StepMethodSelection from './import/step_method_selection.jsx';
import StepInputValidation from './import/step_input_validation.jsx'; import StepInputValidation from './import/step_input_validation.jsx';
@@ -18,57 +19,59 @@ const ImportSubscribers = () => {
const [stepDataManipulationData, setStepDataManipulationData] = useState({}); const [stepDataManipulationData, setStepDataManipulationData] = useState({});
return ( return (
<HashRouter> <HashRouter>
<Switch> <ScrollToTop>
<Route <Switch>
path="/step_method_selection" <Route
render={props => ( path="/step_method_selection"
<StepMethodSelection render={props => (
{...props} <StepMethodSelection
setStepMethodSelectionData={setStepMethodSelectionData} {...props}
subscribersLimitForValidation={subscribersLimitForValidation} setStepMethodSelectionData={setStepMethodSelectionData}
/> subscribersLimitForValidation={subscribersLimitForValidation}
)} />
/> )}
<Route />
path="/step_input_validation" <Route
render={props => ( path="/step_input_validation"
<StepInputValidation render={props => (
{...props} <StepInputValidation
stepMethodSelectionData={stepMethodSelectionData} {...props}
/> stepMethodSelectionData={stepMethodSelectionData}
)} />
/> )}
<Route />
path="/step_data_manipulation" <Route
render={props => ( path="/step_data_manipulation"
<StepDataManipulation render={props => (
{...props} <StepDataManipulation
stepMethodSelectionData={stepMethodSelectionData} {...props}
subscribersLimitForValidation={subscribersLimitForValidation} stepMethodSelectionData={stepMethodSelectionData}
setStepDataManipulationData={setStepDataManipulationData} subscribersLimitForValidation={subscribersLimitForValidation}
/> setStepDataManipulationData={setStepDataManipulationData}
)} />
/> )}
<Route />
path="/step_results" <Route
render={props => ( path="/step_results"
<StepResults render={props => (
{...props} <StepResults
errors={stepDataManipulationData.errors} {...props}
createdSubscribers={stepDataManipulationData.created} errors={stepDataManipulationData.errors}
updatedSubscribers={stepDataManipulationData.updated} createdSubscribers={stepDataManipulationData.created}
segments={stepDataManipulationData.segments} updatedSubscribers={stepDataManipulationData.updated}
addedToSegmentWithWelcomeNotification={ segments={stepDataManipulationData.segments}
stepDataManipulationData.added_to_segment_with_welcome_notification addedToSegmentWithWelcomeNotification={
} stepDataManipulationData.added_to_segment_with_welcome_notification
/> }
)} />
/> )}
<Route />
path="*" <Route
render={() => <Redirect to="/step_method_selection" />} path="*"
/> render={() => <Redirect to="/step_method_selection" />}
</Switch> />
</Switch>
</ScrollToTop>
</HashRouter> </HashRouter>
); );
}; };

View File

@@ -13,7 +13,7 @@ function StepInputValidation({ stepMethodSelectionData, history }) {
useEffect( useEffect(
() => { () => {
if (stepMethodSelectionData === 'undefined') { if (stepMethodSelectionData === undefined) {
history.replace('step_method_selection'); history.replace('step_method_selection');
} }
}, },