diff --git a/src/components/pages/EventDetail.js b/src/components/pages/EventDetail.js index e0c85533cba74b140a9a176078fc950730d03bfe..6383489ed8c42b47ab7b3a2300a23dca9c3dedc6 100644 --- a/src/components/pages/EventDetail.js +++ b/src/components/pages/EventDetail.js @@ -43,7 +43,7 @@ class EventDetail extends Component { isVisitor ? <Icon color='green' name='checkmark' /> : - <Icon color='green' name='cancel' /> + <Icon color='red' name='cancel' /> } </Table.Cell> : diff --git a/src/components/pages/Trainees.js b/src/components/pages/Trainees.js index ea165892f2e84e04cb6bf94a5853f08f592a3e0b..4f3eea17041369441814324ced31488ef3ac0693 100644 --- a/src/components/pages/Trainees.js +++ b/src/components/pages/Trainees.js @@ -1,12 +1,27 @@ import React, { Component } from 'react'; -import { Link } from 'react-router-dom'; -import { Container, Table } from 'semantic-ui-react'; +import { Container, Table, Icon } from 'semantic-ui-react'; import { connect } from 'react-redux'; -import { getTrainees } from '../../actions/statistics'; +import { getTrainees, getEvents } from '../../actions/statistics'; class Trainees extends Component { componentWillMount() { this.props.getTrainees(); + this.props.getEvents(); + } + + renderVisitedStatus(trainee) { + return (this.props.events.map((event) => { + if (event.visitors.includes(trainee.id)) { + return ( + <Table.Cell> + <Icon color='green' name='checkmark' /> + </Table.Cell>); + } + return ( + <Table.Cell> + <Icon color='red' name='cancel' /> + </Table.Cell>); + })); } renderTrainees() { @@ -14,15 +29,21 @@ class Trainees extends Component { { return ( <Table.Row> <Table.Cell> - <Link to={`trainees/${trainee.id}`}> - {trainee.full_name} - </Link> + {trainee.full_name} </Table.Cell> + {this.renderVisitedStatus(trainee)} </Table.Row> ); }); } + renderTableHeader() { + return (this.props.events.map(event => ( + <Table.HeaderCell> + {event.name} + </Table.HeaderCell>))); + } + render() { return ( <Container textAlign='center'> @@ -30,6 +51,7 @@ class Trainees extends Component { <Table.Header> <Table.Row> <Table.HeaderCell>KĂŠpzĹdĹk</Table.HeaderCell> + { this.renderTableHeader() } </Table.Row> </Table.Header> @@ -42,6 +64,6 @@ class Trainees extends Component { } } -const mapStateToProps = ({ trainees: { trainees }, user }) => ({ trainees, user }); +const mapStateToProps = ({ trainees: { trainees }, events: { events }, user }) => ({ trainees, events, user }); -export default connect(mapStateToProps, { getTrainees })(Trainees); +export default connect(mapStateToProps, { getTrainees, getEvents })(Trainees);