Add sorting in event detail page

src/components/pages/EventDetail.js

@@ -8,24 +8,24 @@ import {
   Item,
   Segment,
   Table,
-} from 'semantic-ui-react';
-import React, { Component } from 'react';
+} from "semantic-ui-react";
+import React, { Component } from "react";
 import {
   clearWrite,
   getNotesByEvent,
   postEventNote,
   writeNote,
-} from '../../actions/notes';
+} from "../../actions/notes";
 import {
   getEventById,
   getTrainees,
   submitVisitors,
   visitorChange,
-} from '../../actions/statistics';
+} from "../../actions/statistics";
 
-import TraineeTableRow from './EventDetailTableRow';
-import { connect } from 'react-redux';
-import moment from 'moment';
+import TraineeTableRow from "./EventDetailTableRow";
+import { connect } from "react-redux";
+import moment from "moment";
 
 class EventDetail extends Component {
   constructor(props) {
@@ -43,11 +43,21 @@ class EventDetail extends Component {
 
   renderTrainees() {
     const event = this.props.selectedEvent;
-    return this.props.trainees?.map((item) => {
+    return this.props.trainees
+      ?.sort(function (a, b) {
+        var nameA = a.full_name.toLowerCase(),
+          nameB = b.full_name.toLowerCase();
+        if (nameA < nameB)
+          //sort string ascending
+          return -1;
+        if (nameA > nameB) return 1;
+        return 0; //default return value (no sorting)
+      })
+      .map((item) => {
         const notes = this.props.eventNotes?.filter(
           (note) => note.profile === item.id
         );
-      return item.role === 'Student' ? (
+        return item.role === "Student" ? (
           <TraineeTableRow
             selectedEvent={event}
             notes={notes}
@@ -64,11 +74,11 @@ class EventDetail extends Component {
     return (
       <Segment>
         <Item>
-          <Divider style={{ fontSize: '2em' }} horizontal>
+          <Divider style={{ fontSize: "2em" }} horizontal>
             <Header as="h1">
               {name}
-              <Item.Header style={{ fontSize: '0.6em' }}>
-                {moment(date).format('LL')}
+              <Item.Header style={{ fontSize: "0.6em" }}>
+                {moment(date).format("LL")}
               </Item.Header>
             </Header>
           </Divider>
@@ -91,7 +101,7 @@ class EventDetail extends Component {
               <Comment.Content>
                 <Comment.Author>{note.created_by_name}</Comment.Author>
                 <Comment.Metadata>
-                  {moment(note.created_at).format('LL')}
+                  {moment(note.created_at).format("LL")}
                 </Comment.Metadata>
                 <Comment.Text>{note.note}</Comment.Text>
               </Comment.Content>
@@ -99,7 +109,7 @@ class EventDetail extends Component {
           </Segment>
         );
       }
-      return '';
+      return "";
     });
   }
 
@@ -107,11 +117,11 @@ class EventDetail extends Component {
     const event = this.props.selectedEvent;
     const note = this.props.actualNote;
     return (
-      <Container style={{ paddingTop: '1em', paddingBottom: '7em' }}>
+      <Container style={{ paddingTop: "1em", paddingBottom: "7em" }}>
         <Container textAlign="center">
           {this.props.selectedEvent && this.props.trainees
             ? this.renderEvent()
-            : ''}
+            : ""}
         </Container>
         {!this.state.edit ? (
           <Button onClick={() => this.setState({ edit: true })}>
@@ -123,7 +133,7 @@ class EventDetail extends Component {
               this.setState({ edit: false });
             }}
           >
-            {' '}
+            {" "}
             Kész
           </Button>
         )}
@@ -141,7 +151,7 @@ class EventDetail extends Component {
         </Table>
         <Comment.Group>
           <Header dividing>Megjegyzések</Header>
-          {this.props.eventNotes ? this.renderComments() : ''}
+          {this.props.eventNotes ? this.renderComments() : ""}
           <Form reply>
             <Form.TextArea
               value={note.note}