Added scrollTo to scroll top on route change

package.json

@@ -59,6 +59,7 @@
     "react-ga": "^2.2.0",
     "react-redux": "^5.0.4",
     "react-router-dom": "^4.1.1",
+    "react-router-redux": "^4.0.8",
     "redux": "^3.6.0",
     "redux-devtools": "^3.4.0",
     "redux-logger": "^3.0.1",

src/components/Layout.jsx

@@ -7,6 +7,7 @@ import {configureAuthRoute} from '../library/authentication';
 import {RedirectWithStatus} from '../library/routing';
 import {Alerts} from '../library/alerts'
 import {Loader} from '../library/loader';
+import {scrollTo} from '../library/utilities';
 import {UserActions} from '../library/authentication';
 import initInterceptors from '../interceptors';
 import {apiRoutes} from '../constants/apiBaseRoutes';
@@ -25,6 +26,10 @@ import Register from './pages/Register';
 import NotFound from './pages/NotFound';
 import Topics from './pages/Topics';
 
+let _viewListener;
+
+// TODO: Animation between view change is not working when wrapped around a Switch
+
 // Initialize global interceptors such as 401, 403
 initInterceptors(apiRoutes.dev, 300);
 
@@ -37,8 +42,20 @@ const mapDispatchToProps = (dispatch) => {
 class Layout extends React.Component {
 	constructor() {
         super();
+
+		this.onViewChange = this.onViewChange.bind(this);
     }
 
+	componentWillMount() {
+		_viewListener = this.props.history.listen((location, action) => {
+			this.onViewChange(location);
+		});
+	}
+
+	onViewChange(location) {
+		scrollTo(0, 100);
+	}
+
     render() {
 		return (
 			<div>
@@ -48,9 +65,9 @@ class Layout extends React.Component {
 
 				<Animation transitionName="view" transitionAppear={true} transitionAppearTimeout={250} transitionEnter={true} transitionEnterTimeout={250} transitionLeave={true} transitionLeaveTimeout={250} component='div' className='content-container'>
 					<Switch>
-						<Route location={this.props.location} path="/" exact component={Home}/>
+						<Route key={1} location={this.props.location} path="/" exact component={Home}/>
 						<RedirectWithStatus location={this.props.location} status={301} from="/redirect" to="/"/>
-						<Route location={this.props.location} path="/contacts" component={Contacts}/>
+						<Route key={2} location={this.props.location} path="/contacts" component={Contacts}/>
 						<Route location={this.props.location} path="/login" component={Login}/>
 						<Route location={this.props.location} path="/register" component={Register}/>
 						<Route location={this.props.location} path="/providers" component={Providers}/>
@@ -68,6 +85,10 @@ class Layout extends React.Component {
 			</div>
 		)
 	}
+
+	componentWillUnmount() {
+		_viewListener();
+	}
 }
 
 export default withRouter(connect(null, mapDispatchToProps)(Layout));

src/index.jsx

@@ -2,11 +2,14 @@ import React from 'react';
 import {render} from 'react-dom';
 import {BrowserRouter} from 'react-router-dom';
 import {Provider} from 'react-redux'
-import Layout from './components/Layout';
 import {createBrowserHistory} from 'history';
+import {syncHistoryWithStore} from 'react-router-redux';
+import Layout from './components/Layout';
 import store from './store';
 
-const history = createBrowserHistory();
+// TODO: This does not seem to be working
+const browserHistory = createBrowserHistory();
+let history = syncHistoryWithStore(browserHistory, store);
 
 window.onload = () => {
     render(

src/reducers/index.js

@@ -1,6 +1,7 @@
 'use strict';
 
 import {combineReducers} from 'redux';
+import {routerReducer as routing} from 'react-router-redux';
 import {provider, providers} from './providers';
 import {contact, contacts} from './contacts';
 import {alerts} from '../library/alerts';
@@ -9,6 +10,7 @@ import {loader} from '../library/loader';
 import {forms} from '../library/validations';
 
 export default combineReducers({
+	routing,
 	contact,
 	contacts,
 	provider,

yarn.lock

@@ -4363,6 +4363,10 @@ react-router-dom@^4.1.1:
     prop-types "^15.5.4"
     react-router "^4.1.1"
 
+react-router-redux@^4.0.8:
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/react-router-redux/-/react-router-redux-4.0.8.tgz#227403596b5151e182377dab835b5d45f0f8054e"
+
 react-router@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/react-router/-/react-router-4.1.1.tgz#d448f3b7c1b429a6fbb03395099949c606b1fe95"