Little changes in Schedule page, add a ScrollRestoration component

package.json

@@ -16,9 +16,9 @@
     "redux": "^4.0.1",
     "redux-logger": "^3.0.6",
     "redux-thunk": "^2.3.0",
+    "semantic-ui-calendar-react": "^0.12.2",
     "semantic-ui-css": "^2.4.0",
     "semantic-ui-react": "^0.84.0",
-    "semantic-ui-calendar-react": "^0.12.2",
     "slick-carousel": "^1.8.1"
   },
   "scripts": {

src/components/ScrollToTop.js

+import React, { Component } from 'react';
+import { withRouter } from 'react-router-dom';
+
+/*
+* Default ScrollResoration:
+* https://reacttraining.com/react-router/web/guides/scroll-restoration
+*/
+class ScrollToTop extends Component {
+  componentDidUpdate(prevProps) {
+    if (this.props.location !== prevProps.location) {
+      window.scrollTo(0, 0)
+    }
+  }
+
+  render() {
+    return this.props.children;
+  }
+}
+
+export default withRouter(ScrollToTop);

src/components/pages/Schedule.js

@@ -32,7 +32,7 @@ class Schedule extends Component {
         >
           <h3>
              <Grid>
-              <Grid.Column floated='left' width={5} textAlign='left'>
+              <Grid.Column floated='left' width={8} textAlign='left'>
                  <Icon name='angle right' color='blue' />{event.name}
               </Grid.Column>
               <Grid.Column floated='right' width={8} textAlign='right'>
@@ -42,23 +42,21 @@ class Schedule extends Component {
           </h3>
          </Accordion.Title>
          <Accordion.Content active={activeIndex === event.id}>
-           <Container text textAlign='left'>
            <p>
              {event.description}
            </p>
-           </Container>
          </Accordion.Content>
        </div>
        ));
 
     return (
       <Container
-        textAlign='center'
+        textAlign='left'
         style={{
           padding: '60px'
         }}
       >
-        <h2>Képzés alkalmak:</h2>
+        <h2>Képzésalkalmak:</h2>
         <Accordion
           fluid
           styled
@@ -67,7 +65,6 @@ class Schedule extends Component {
         >
         {panels}
       </Accordion>
-      <h2>Tábor:</h2>
       </Container>
     );
   }

src/index.js

@@ -5,6 +5,7 @@ import { BrowserRouter as Router } from 'react-router-dom';
 import 'slick-carousel/slick/slick.css';
 import 'slick-carousel/slick/slick-theme.css';
 import 'semantic-ui-css/semantic.min.css';
+import ScrollToTop from './components/ScrollToTop';
 
 import configureStore from './configureStore';
 import App from './components/App';
@@ -19,7 +20,9 @@ const store = configureStore();
 render(
   <Provider store={store}>
     <Router>
-      <App />
+      <ScrollToTop>
+        <App />
+      </ScrollToTop>
     </Router>
   </Provider>,
   document.getElementById('root'),