Add accordion to schedule page, add default values to reducers

src/components/pages/EventDetail.js

@@ -138,8 +138,7 @@ class EventDetail extends Component {
               </Table.Row>
             </Table.Header>
             <Table.Body>
-              { this.props.trainees &&
-                this.props.selectedEvent ?
+              { this.props.selectedEvent ?
                 this.renderTrainees()
                 :
                 ''

src/components/pages/Schedule.js

 import React, { Component } from 'react';
-import { Container, Header, Segment } from 'semantic-ui-react';
+import { Container, Accordion, Icon } from 'semantic-ui-react';
+import { connect } from 'react-redux';
+import moment from 'moment';
+import { getEvents } from '../../actions/statistics';
+
+class Schedule extends Component {
+  state = { activeIndex: 0 }
+
+  componentWillMount() {
+    this.props.getEvents();
+  }
+
+  handleClick = (e, titleProps) => {
+    const { index } = titleProps
+    const { activeIndex } = this.state
+    const newIndex = activeIndex === index ? -1 : index
+
+    this.setState({ activeIndex: newIndex })
+  }
 
-export default class Schedule extends Component {
   render() {
+    const { activeIndex } = this.state
+
+    const events = this.props.events;
+    const panels = events.map(event => (
+      <>
+        <Accordion.Title
+          active={activeIndex === event.id}
+          index={event.id}
+          onClick={this.handleClick}
+        >
+          <h2>
+           <Icon name='transgender' color='blue' />
+           {event.name} {moment(event.date).format('LLL')}
+          </h2>
+         </Accordion.Title>
+         <Accordion.Content active={activeIndex === event.id}>
+           <p>
+             A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can
+             be found as a welcome guest in many households across the world.
+           </p>
+         </Accordion.Content>
+        </>
+       ));
+
     return (
-      <div>
-        <Segment inverted textAlign='center' vertical>
-          <Container>
-            <Header
-              as='h1'
-              content='Ütemterv - Hamarosan'
-              inverted
-              style={{
-                fontSize: '3em',
-                fontWeight: 'normal',
-                marginBottom: 0,
-                marginTop: '0.5em',
-              }}
-            />
-          </Container>
-        </Segment>
-      </div>
+      <Container
+        textAlign='center'
+        style={{
+          padding: '60px'
+        }}
+      >
+        <h2>Képzés alkalmak:</h2>
+        <Accordion
+          fluid
+          styled
+          defaultActiveIndex={-1}
+          panels={panels}
+        >
+        {panels}
+      </Accordion>
+      <h2>Tábor:</h2>
+      </Container>
     );
   }
 }
+
+
+const mapStateToProps = ({ events: { events }, user }) => ({ events, user });
+
+export default connect(mapStateToProps, { getEvents })(Schedule);

src/reducers/EventReducer.js

@@ -7,7 +7,7 @@ import {
   DELETE_EVENT,
 } from '../actions/types';
 
-const INITIAL_STATE = { newEvent: {} };
+const INITIAL_STATE = { events: [], newEvent: {} };
 
 export default (state = INITIAL_STATE, action) => {
   switch (action.type) {

src/reducers/TraineeReducer.js

 import { GET_TRAINEES, GET_TRAINEE_BY_ID } from '../actions/types';
 
-const INITIAL_STATE = {};
+const INITIAL_STATE = { trainees: [], selectedTrainee: {}};
 
 export default (state = INITIAL_STATE, action) => {
   switch (action.type) {