diff --git a/src/actions/statistics.js b/src/actions/statistics.js index f4d9d8e0f879f946d218622189fd69f29b4f4718..00ac6cc48da28e9ad1354215ffdca3a9c552f52b 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 0000000000000000000000000000000000000000..35e81ca9138f9924d69924a4e2706f8aaa23404f --- /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 f316bd85b3340e306503e6f9b55fd4351ca70856..052e492a2f469fefca70c4293aea5ac54056b1ec 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> );