From faf064a15624eddd0afba008a6ffc5891208ea9b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Chif=20Gerg=C5=91?= <chifgeri97@gmail.com>
Date: Sun, 30 Dec 2018 11:14:13 +0100
Subject: [PATCH] Create Event component, add it to Statistics page.

---
 src/actions/statistics.js          |  2 +-
 src/components/pages/Events.js     | 44 ++++++++++++++++++++++++++++++
 src/components/pages/Statistics.js | 28 ++++++++++++++-----
 3 files changed, 66 insertions(+), 8 deletions(-)
 create mode 100644 src/components/pages/Events.js

diff --git a/src/actions/statistics.js b/src/actions/statistics.js
index f4d9d8e..00ac6cc 100644
--- a/src/actions/statistics.js
+++ b/src/actions/statistics.js
@@ -4,7 +4,7 @@ import { GET_EVENTS } from './types';
 export const getEvents = () => (
   async (dispatch) => {
     try {
-      const response = await axios.get('/api/v1/events');
+      const response = await axios.get('/api/v1/events/');
       dispatch({
         type: GET_EVENTS,
         payload: response.data,
diff --git a/src/components/pages/Events.js b/src/components/pages/Events.js
new file mode 100644
index 0000000..35e81ca
--- /dev/null
+++ b/src/components/pages/Events.js
@@ -0,0 +1,44 @@
+import React, { Component } from 'react';
+import { Container, Table } from 'semantic-ui-react';
+import { connect } from 'react-redux';
+import { getEvents } from '../../actions/statistics';
+
+class Events extends Component {
+  componentWillMount() {
+    this.props.getEvents();
+  }
+
+  renderEvents() {
+    return this.props.events.map((event) =>
+    { return (
+        <Table.Row>
+          <Table.Cell>{event.name}</Table.Cell>
+          <Table.Cell>{event.date}</Table.Cell>
+        </Table.Row>
+    );
+    });
+  }
+
+  render() {
+    return (
+      <Container textAlign='center'>
+        <Table celled selectable>
+          <Table.Header>
+            <Table.Row>
+              <Table.HeaderCell>Alkalom neve</Table.HeaderCell>
+              <Table.HeaderCell>DĂĄtum</Table.HeaderCell>
+            </Table.Row>
+          </Table.Header>
+
+          <Table.Body>
+            {this.renderEvents()}
+          </Table.Body>
+        </Table>
+      </Container>
+    );
+  }
+}
+
+const mapStateToProps = ({ events, user }) => ({ events, user });
+
+export default connect(mapStateToProps, { getEvents })(Events);
diff --git a/src/components/pages/Statistics.js b/src/components/pages/Statistics.js
index f316bd8..052e492 100644
--- a/src/components/pages/Statistics.js
+++ b/src/components/pages/Statistics.js
@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import { Container, Header, Segment, Menu } from 'semantic-ui-react';
+import Events from './Events'
 
 export default class Statistics extends Component {
   state = { activeItem: 'events' }
@@ -9,18 +10,31 @@ export default class Statistics extends Component {
     const { activeItem } = this.state
     return (
       <div>
-          <Container textAlign="center">
-          <Menu tabular compact={true}>
-            <Menu.Item name='events' active={activeItem === 'events'} onClick={this.handleItemClick} />
+          <Container
+            textAlign="center"
+            style={{
+              padding: '20px'
+            }}
+          >
+          <Menu
+            attached='top'
+            tabular
+            size='huge'
+            compact={true}>
+            <Menu.Item
+              name='events'
+              active={activeItem === 'events'}
+              onClick={this.handleItemClick}
+            >Alkalmak
+            </Menu.Item>
             <Menu.Item
               name='trainees'
               active={activeItem === 'trainees'}
               onClick={this.handleItemClick}
-            />
-            <Segment inverted textAlign='center' vertical>
-
-            </Segment>
+            >Képződők
+            </Menu.Item>
           </Menu>
+          { activeItem === 'events' ? <Events /> : '' }
         </Container>
       </div>
     );
-- 
GitLab