From b80f869c8b23a243c554476d4e110455f6468b4b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Chif=20Gerg=C5=91?= <chifgeri97@gmail.com>
Date: Thu, 17 Jan 2019 21:48:55 +0100
Subject: [PATCH] Add accordion to schedule page, add default values to
 reducers

---
 src/components/pages/EventDetail.js |  3 +-
 src/components/pages/Schedule.js    | 84 ++++++++++++++++++++++-------
 src/reducers/EventReducer.js        |  2 +-
 src/reducers/TraineeReducer.js      |  2 +-
 4 files changed, 68 insertions(+), 23 deletions(-)

diff --git a/src/components/pages/EventDetail.js b/src/components/pages/EventDetail.js
index 685697d..dc2dffe 100644
--- a/src/components/pages/EventDetail.js
+++ b/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()
                 :
                 ''
diff --git a/src/components/pages/Schedule.js b/src/components/pages/Schedule.js
index d6a6ac6..971e0c9 100644
--- a/src/components/pages/Schedule.js
+++ b/src/components/pages/Schedule.js
@@ -1,26 +1,72 @@
 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);
diff --git a/src/reducers/EventReducer.js b/src/reducers/EventReducer.js
index 0766ddd..071ede5 100644
--- a/src/reducers/EventReducer.js
+++ b/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) {
diff --git a/src/reducers/TraineeReducer.js b/src/reducers/TraineeReducer.js
index f7fa38e..118135f 100644
--- a/src/reducers/TraineeReducer.js
+++ b/src/reducers/TraineeReducer.js
@@ -1,6 +1,6 @@
 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) {
-- 
GitLab