Sort events by date

src/components/pages/Schedule.js

-import 'moment/locale/hu';
+import "moment/locale/hu";
 
 import {
   Accordion,
@@ -7,12 +7,12 @@ import {
   Header,
   Icon,
   Segment,
-} from 'semantic-ui-react';
-import React, { Component } from 'react';
+} from "semantic-ui-react";
+import React, { Component } from "react";
 
-import { connect } from 'react-redux';
-import { getStudentEvents } from '../../actions/statistics';
-import moment from 'moment';
+import { connect } from "react-redux";
+import { getStudentEvents } from "../../actions/statistics";
+import moment from "moment";
 
 class Schedule extends Component {
   // eslint-disable-next-line react/state-in-constructor
@@ -34,7 +34,9 @@ class Schedule extends Component {
     const { activeIndex } = this.state;
 
     const { events } = this.props;
-    const panels = events.map((event) => (
+    const panels = events
+      .sort((a, b) => a.date - b.date)
+      .map((event) => (
         <Accordion key={Math.random()}>
           <Accordion.Title
             active={activeIndex === event.id}
@@ -44,17 +46,17 @@ class Schedule extends Component {
             <h2>
               <Grid>
                 <Grid.Column floated="left" width={5} textAlign="left">
-                <Icon name="calendar alternate outline" color="blue" />{' '}
+                  <Icon name="calendar alternate outline" color="blue" />{" "}
                   {event.name}
                 </Grid.Column>
                 <Grid.Column floated="right" width={8} textAlign="right">
-                {moment(event.date).locale('hu').format('LLLL')}
+                  {moment(event.date).locale("hu").format("LLLL")}
                 </Grid.Column>
               </Grid>
             </h2>
           </Accordion.Title>
           <Accordion.Content active={activeIndex === event.id}>
-          <Segment textAlign="left" style={{ overflowWrap: 'break-word' }}>
+            <Segment textAlign="left" style={{ overflowWrap: "break-word" }}>
               {event.description}
             </Segment>
           </Accordion.Content>
@@ -68,10 +70,10 @@ class Schedule extends Component {
             as="h1"
             content="Képzés alkalmak"
             style={{
-              fontSize: '2em',
-              fontWeight: 'bold',
-              marginBottom: '0.5em',
-              marginTop: '0.5em',
+              fontSize: "2em",
+              fontWeight: "bold",
+              marginBottom: "0.5em",
+              marginTop: "0.5em",
             }}
           />
           <Accordion fluid styled>
@@ -81,10 +83,10 @@ class Schedule extends Component {
             as="h1"
             content="Tábor"
             style={{
-              fontSize: '2em',
-              fontWeight: 'bold',
-              marginBottom: '0.5em',
-              marginTop: '1.5em',
+              fontSize: "2em",
+              fontWeight: "bold",
+              marginBottom: "0.5em",
+              marginTop: "1.5em",
             }}
           />
         </Container>