From 7289a63c1686acaacc8a495348c03c20e70d6b0d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Chif=20Gerg=C5=91?= <chifgeri97@gmail.com>
Date: Thu, 17 Jan 2019 11:49:02 +0100
Subject: [PATCH] The trainee page is a table with the visited status of the
 events

---
 src/components/pages/EventDetail.js |  2 +-
 src/components/pages/Trainees.js    | 38 +++++++++++++++++++++++------
 2 files changed, 31 insertions(+), 9 deletions(-)

diff --git a/src/components/pages/EventDetail.js b/src/components/pages/EventDetail.js
index e0c8553..6383489 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 ea16589..4f3eea1 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);
-- 
GitLab