cleanup

src/components/pages/TraineeTableRow.js

@@ -37,6 +37,7 @@ class TraineeTableRow extends Component {
     };
   }
 
+  // Hides and shows the Add and More popup 
   triggerAdd = () => this.setState({ ...this.state, showAddPopup: !this.state.showAddPopup})
   triggerMore = () => this.setState({ ...this.state, showMorePopup: !this.state.showMorePopup })
 
@@ -50,6 +51,7 @@ class TraineeTableRow extends Component {
         <Table.Cell textAlign='center'>
           {trainee.full_name}
         </Table.Cell>
+        {/* Show and change Visitors status  */}
         {!this.props.edit ?
           <Table.Cell textAlign='center'>
             {
@@ -62,7 +64,7 @@ class TraineeTableRow extends Component {
                   <Icon color='red' name='cancel' />
               }
           </Table.Cell>
-          :
+        :
           <Table.Cell textAlign='center'>
             <Dropdown
               defaultValue={isVisitor ? 'Visitor' : isAbsent ? 'Absent' : 'No'}
@@ -72,33 +74,37 @@ class TraineeTableRow extends Component {
             />
           </Table.Cell>
         }
+        {/* Notes for trainees */}
         <Table.Cell>
           <Grid>
             <Grid.Row>
+              {/* Note text */}
               <Grid.Column floated='left' width={8}>
-
                 {notes.length > 0 ?
                   <Comment>
                     <Comment.Content>
                       <Comment.Author><b>{notes[0].created_by_name}:</b></Comment.Author>
                       <Comment.Text style={{wordWrap: 'break-word'}}>
-                        {notes[0].note.length > 25 ? notes[0].note.slice(0, 25).concat('...')
-                         :
-                         notes[0].note }
+                        {notes[0].note.length > 25 ? 
+                          notes[0].note.slice(0, 25).concat('...')
+                        :
+                          notes[0].note 
+                        }
                       </Comment.Text>
                     </Comment.Content>
                   </Comment>
-                  :
+                :
                   null
-                 }
+                }
               </Grid.Column>
+              {/* Note buttons */}
               <Grid.Column floated='right' width={6} textAlign='right'>
                 {notes.length > 0 ?
-                  <Popup
-                    basic
+                  <Popup basic
                     open={this.state.showMorePopup}
-                    trigger={<Button icon='comment alternate outline' 
-                    onClick={this.triggerMore} />}
+                    trigger={
+                      <Button icon='comment alternate outline' onClick={this.triggerMore} />
+                    }
                     content={notes.map((note) => {
                       return (
                         <Comment.Content>
@@ -111,11 +117,12 @@ class TraineeTableRow extends Component {
                     })}
                   />
                 :
-                null
+                  null
                 }
-                <Popup
-                  trigger={<Button icon='plus' onClick={this.triggerAdd}/>}
-                  basic
+                <Popup basic
+                  trigger={
+                    <Button icon='plus' onClick={this.triggerAdd}/>
+                  }
                   open={this.state.showAddPopup}
                   content={
                     <Form reply>
@@ -123,7 +130,7 @@ class TraineeTableRow extends Component {
                         value={note.note}
                         onChange={e => this.props.writeNote(e)}
                       />
-                      <Button
+                      <Button primary
                         onClick={() => {
                           this.triggerAdd()
                           this.props.postEventNote({ 
@@ -136,10 +143,9 @@ class TraineeTableRow extends Component {
                         content='Megjegyzés hozzáadása'
                         labelPosition='left'
                         icon='edit'
-                        primary
                       />
                     </Form>
-                }
+                  }
                 />
               </Grid.Column>
             </Grid.Row>

src/components/pages/Trainees.js

@@ -9,27 +9,32 @@ class Trainees extends Component {
     this.props.getStaffEvents();
   }
 
+  // Number of visited events
   VisitedStatusNumber(trainee) {
     return (this.props.events.filter((event) => {
       return event.visitors.includes(trainee.id)
     })).length;
   }
 
+  // Every event with visit status in table cells
   renderVisitedStatus(trainee) {
     return (this.props.events.map((event) => {
       if (event.visitors.includes(trainee.id)) {
         return (
           <Table.Cell textAlign='center'>
             <Icon color='green' name='checkmark' />
-          </Table.Cell>);
+          </Table.Cell>
+        );
       }
       return (
         <Table.Cell textAlign='center'>
           <Icon color='red' name='cancel' />
-        </Table.Cell>);
+        </Table.Cell>
+      );
     }));
   }
 
+  // Every event rendered
   renderTraineesWithEvents() {
     return this.props.trainees.map((trainee) =>
     { return (
@@ -42,57 +47,74 @@ class Trainees extends Component {
     );
     });
   }
-  renderTraineesWithPoints() {
-    return this.props.trainees.map((trainee) =>
-    { return (
-      <Table.Row textAlign='center'>
-        <Table.Cell>
-          {trainee.full_name}
-        </Table.Cell>
-        <Table.Cell textAlign='center'>
-          {`${this.VisitedStatusNumber(trainee)} / ${this.props.events.length}`}
-        </Table.Cell>
-      </Table.Row>
-    );
+  // Only visit number rendered
+  renderTraineesWithVisitNum() {
+    return this.props.trainees.map((trainee) =>{ 
+      return (
+        <Table.Row textAlign='center'>
+          <Table.Cell>
+            {trainee.full_name}
+          </Table.Cell>
+          <Table.Cell textAlign='center'>
+            {`${this.VisitedStatusNumber(trainee)} / ${this.props.events.length}`}
+          </Table.Cell>
+        </Table.Row>
+      );
     });
   }
 
-  renderTableHeader() {
-    return (this.props.events.map(event => (
-      <Table.HeaderCell textAlign='center'>
+  // Column for each event
+  renderTableHeaderEvents() {
+    return (this.props.events.map(event => {
+      return (<Table.HeaderCell textAlign='center'>
         {event.name}
-      </Table.HeaderCell>)));
+      </Table.HeaderCell>
+      )
+    }));
   }
 
   render() {
     return (
       <Container textAlign='center'>
+        {/* Rendered on larger screens */}
         <Responsive minWidth={600} >
           <Table color='blue' unstackable celled selectable compact>
             <Table.Header>
               <Table.Row>
-                <Table.HeaderCell textAlign='center'>Képződők</Table.HeaderCell>
-                { this.renderTableHeader() }
+                <Table.HeaderCell textAlign='center'>
+                  Képződők
+                </Table.HeaderCell>
+                { this.renderTableHeaderEvents() }
               </Table.Row>
             </Table.Header>
-
             <Table.Body>
-              {this.props.trainees ? this.renderTraineesWithEvents() : 'Nincsenek képződők'}
+              {this.props.trainees ? 
+                this.renderTraineesWithEvents() 
+              : 
+                'Nincsenek képződők'
+              }
             </Table.Body>
           </Table>
         </Responsive>
+        {/* Rendered on mobile */}
         <Responsive maxWidth={599} >
           <Table color='blue' unstackable celled selectable compact>
             <Table.Header>
               <Table.Row>
-                <Table.HeaderCell textAlign='center'>Képződők</Table.HeaderCell>
+                <Table.HeaderCell textAlign='center'>
+                  Képződők
+                </Table.HeaderCell>
                 <Table.HeaderCell textAlign='center'>
                   Részvételi arány
                 </Table.HeaderCell>
               </Table.Row>
             </Table.Header>
             <Table.Body>
-              {this.props.trainees ? this.renderTraineesWithPoints() : 'Nincsenek képződők'}
+              {this.props.trainees ? 
+                this.renderTraineesWithVisitNum() 
+              : 
+                'Nincsenek képződők'
+              }
             </Table.Body>
           </Table>
         </Responsive>