src/components/pages/EventDetail.js

-import React, { Component } from 'react';
 import {
-  Container,
-  Item,
   Button,
   Comment,
+  Container,
+  Divider,
   Form,
   Header,
-  Table,
+  Item,
   Segment,
-  Divider,
-} from 'semantic-ui-react';
-import { connect } from 'react-redux';
-import moment from 'moment';
-import { getEventById, getTrainees, visitorChange, submitVisitors } from '../../actions/statistics';
-import { getNotesByEvent, writeNote, clearWrite, postEventNote } from '../../actions/notes';
-import TraineeTableRow from './EventDetailTableRow';
+  Table,
+} from "semantic-ui-react";
+import React, { Component } from "react";
+import {
+  clearWrite,
+  getNotesByEvent,
+  postEventNote,
+  writeNote,
+} from "../../actions/notes";
+import {
+  getEventById,
+  getTrainees,
+  submitVisitors,
+  visitorChange,
+} from "../../actions/statistics";
 
+import TraineeTableRow from "./EventDetailTableRow";
+import { connect } from "react-redux";
+import moment from "moment";
 
 class EventDetail extends Component {
   constructor(props) {
@@ -31,12 +41,23 @@ class EventDetail extends Component {
     this.props.getNotesByEvent(this.props.match.params.id);
   }
 
-
   renderTrainees() {
     const event = this.props.selectedEvent;
-    return this.props.trainees?.map((item) => {
-      const notes = this.props.eventNotes?.filter(note => note.profile === item.id);
-      return (
+    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" ? (
           <TraineeTableRow
             selectedEvent={event}
             notes={notes}
@@ -44,7 +65,7 @@ class EventDetail extends Component {
             edit={this.state.edit}
             key={item.id}
           />
-      );
+        ) : null;
       });
   }
 
@@ -53,16 +74,16 @@ class EventDetail extends Component {
     return (
       <Segment>
         <Item>
-          <Divider style={{ fontSize: '2em'}} horizontal>
-            <Header as='h1'>
+          <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>
-          <Container textAlign='justified'>
-            <Item.Header as='h3'>Leírás</Item.Header>
+          <Container textAlign="justified">
+            <Item.Header as="h3">Leírás</Item.Header>
             <Item.Content>{description}</Item.Content>
           </Container>
         </Item>
@@ -75,19 +96,20 @@ class EventDetail extends Component {
     return notes.map((note) => {
       if (!note.profile) {
         return (
+          <Segment>
             <Comment key={Math.random()}>
               <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.Text>{note.note}</Comment.Text>
               </Comment.Content>
-          </Comment>);
+            </Comment>
+          </Segment>
+        );
       }
-      return '';
+      return "";
     });
   }
 
@@ -95,66 +117,57 @@ class EventDetail extends Component {
     const event = this.props.selectedEvent;
     const note = this.props.actualNote;
     return (
-      <Container style={{paddingTop: '1em', paddingBottom: '7em'}}>
-        <Container textAlign='center'>
-          { this.props.selectedEvent && this.props.trainees ?
-            this.renderEvent()
-            :
-            ''
-        }
+      <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 })}>
+            Módosítás
+          </Button>
+        ) : (
+          <Button
+            onClick={() => {
+              this.setState({ edit: false });
+            }}
+          >
+            {" "}
+            Kész
+          </Button>
+        )}
         <Table celled unstackable>
           <Table.Header>
-            <Table.Row textAlign='center'>
+            <Table.Row textAlign="center">
               <Table.HeaderCell>Név</Table.HeaderCell>
               <Table.HeaderCell>Jelen volt</Table.HeaderCell>
               <Table.HeaderCell>Megjegyzések</Table.HeaderCell>
             </Table.Row>
           </Table.Header>
           <Table.Body>
-            { this.props.selectedEvent ?
-              this.renderTrainees()
-              :
-              null
-            }
+            {this.props.selectedEvent ? this.renderTrainees() : null}
           </Table.Body>
         </Table>
-        {!this.state.edit ?
-          <Button onClick={() => this.setState({ edit: true })}>
-            Módosítás
-          </Button>
-        : 
-          <Button onClick={() => {
-              this.setState({ edit: false });
-              this.props.submitVisitors(this.props.selectedEvent);
-            }}
-          > Kész
-          </Button>
-        }
         <Comment.Group>
-          <Header dividing>
-            Megjegyzések
-          </Header>
-          {this.props.eventNotes ?
-            this.renderComments()
-            :
-            ''
-          }
+          <Header dividing>Megjegyzések</Header>
+          {this.props.eventNotes ? this.renderComments() : ""}
           <Form reply>
             <Form.TextArea
               value={note.note}
-              onChange={e => this.props.writeNote(e)}
+              onChange={(e) => this.props.writeNote(e)}
             />
             <Button
               onClick={() => {
-                              this.props.postEventNote({ eventid: event.id,
-                                                        note: note.note });
+                this.props.postEventNote({
+                  eventid: event.id,
+                  note: note.note,
+                });
                 this.props.clearWrite();
-                            }
-                      }
-              content='Megjegyzés hozzáadása'
-              labelPosition='left'
-              icon='edit'
+              }}
+              content="Megjegyzés hozzáadása"
+              labelPosition="left"
+              icon="edit"
               primary
             />
           </Form>
@@ -167,8 +180,13 @@ class EventDetail extends Component {
 const mapStateToProps = ({
   notes: { eventNotes, actualNote },
   events: { selectedEvent },
-  trainees: { trainees }
-}) => ({ eventNotes, selectedEvent, trainees, actualNote });
+  trainees: { trainees },
+}) => ({
+  eventNotes,
+  selectedEvent,
+  trainees,
+  actualNote,
+});
 
 export default connect(mapStateToProps, {
   getEventById,

src/components/pages/EventDetailTableRow.js

-import React, { Component } from 'react';
 import {
+  Button,
   Comment,
-  Table,
+  Dropdown,
+  Form,
+  Grid,
   Icon,
   Popup,
-  Grid,
-  Button,
-  Form,
-  Dropdown,
+  Table,
 } from 'semantic-ui-react';
+import React, { Component } from 'react';
+import { clearWrite, postEventNote, writeNote } from '../../actions/notes';
+import { submitVisitors, visitorChange } from '../../actions/statistics';
+
 import { connect } from 'react-redux';
-import { visitorChange, submitVisitors } from '../../actions/statistics';
-import { writeNote, clearWrite, postEventNote } from '../../actions/notes';
 
 const visitStates = [
   {
@@ -25,8 +26,8 @@ const visitStates = [
   {
     text: 'Nem',
     value: 'No',
-  }
-]
+  },
+];
 
 class TraineeTableRow extends Component {
   constructor(props) {
@@ -38,123 +39,125 @@ 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 })
+  triggerAdd = () =>
+    this.setState({ ...this.state, showAddPopup: !this.state.showAddPopup });
+
+  triggerMore = () =>
+    this.setState({ ...this.state, showMorePopup: !this.state.showMorePopup });
 
   render() {
     const note = this.props.actualNote;
     const { trainee, selectedEvent, notes } = this.props;
     const isVisitor = selectedEvent.visitors.includes(trainee.id);
     const isAbsent = selectedEvent.absent.includes(trainee.id);
+    let visitorStatusIcon;
+    let visitorStatusDropdown;
+    if (isVisitor) {
+      visitorStatusIcon = <Icon color="green" name="checkmark" />;
+      visitorStatusDropdown = 'Visitor';
+    } else if (isAbsent) {
+      visitorStatusIcon = <Icon color="orange" name="minus" />;
+      visitorStatusDropdown = 'Absent';
+    } else {
+      visitorStatusIcon = <Icon color="red" name="cancel" />;
+      visitorStatusDropdown = 'No';
+    }
+
     return (
       <Table.Row>
-        <Table.Cell textAlign='center'>
-          {trainee.full_name}
-        </Table.Cell>
+        <Table.Cell textAlign="center">{trainee.full_name}</Table.Cell>
         {/* Show and change Visitors status  */}
-        {!this.props.edit ?
-          <Table.Cell textAlign='center'>
-            {
-                isVisitor ?
-                  <Icon color='green' name='checkmark' />
-                :
-                isAbsent ?
-                  <Icon color='orange' name='minus' />
-                  :
-                  <Icon color='red' name='cancel' />
-              }
-          </Table.Cell>
-        :
-          <Table.Cell textAlign='center'>
+        {!this.props.edit ? (
+          <Table.Cell textAlign="center">{visitorStatusIcon}</Table.Cell>
+        ) : (
+          <Table.Cell textAlign="center">
             <Dropdown
-              defaultValue={isVisitor ? 'Visitor' : isAbsent ? 'Absent' : 'No'}
+              defaultValue={visitorStatusDropdown}
               selection
               options={visitStates}
               onChange={(_, v) => {
-                this.props.visitorChange({ id : trainee.id, value: v.value })
+                this.props.visitorChange({ id: trainee.id, value: v.value });
                 // Submit with error check
-                this.props.submitVisitors(this.props.selectedEvent)
-                  .then( value => {
+                this.props
+                  .submitVisitors(this.props.selectedEvent)
+                  .then((value) => {
                     if (value === true) {
-                      console.log('success')
+                      console.log('success');
                     } else {
-                      console.log('error')
+                      console.log('error');
                     }
-                  })
+                  });
               }}
             />
-             
           </Table.Cell>
-        }
+        )}
         {/* Notes for trainees */}
         <Table.Cell>
           <Grid>
             <Grid.Row>
               {/* Note text */}
-              <Grid.Column floated='left' width={8}>
-                {notes.length > 0 ?
+              <Grid.Column floated="left" width={8}>
+                {notes.length > 0 ? (
                   <Comment>
                     <Comment.Content>
-                      <Comment.Author><b>{notes[0].created_by_name}:</b></Comment.Author>
+                      <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
-                }
+                ) : null}
               </Grid.Column>
               {/* Note buttons */}
-              <Grid.Column floated='right' width={6} textAlign='right'>
-                {notes.length > 0 ?
-                  <Popup basic
+              <Grid.Column floated="right" width={6} textAlign="right">
+                {notes.length > 0 ? (
+                  <Popup
+                    basic
                     open={this.state.showMorePopup}
                     trigger={
-                      <Button icon='comment alternate outline' onClick={this.triggerMore} />
+                      <Button
+                        icon="comment alternate outline"
+                        onClick={this.triggerMore}
+                      />
                     }
-                    content={notes.map((note) => {
-                      return (
+                    content={notes.map((oneNote) => (
                       <Comment.Content>
-                          <Comment.Author><b>{note.created_by_name}:</b></Comment.Author>
-                          <Comment.Text>
-                            {note.note}
-                          </Comment.Text>
+                        <Comment.Author>
+                          <b>{oneNote.created_by_name}:</b>
+                        </Comment.Author>
+                        <Comment.Text>{oneNote.note}</Comment.Text>
                       </Comment.Content>
-                      );
-                    })}
+                    ))}
                   />
-                :
-                  null
-                }
-                <Popup basic
-                  trigger={
-                    <Button icon='plus' onClick={this.triggerAdd}/>
-                  }
+                ) : null}
+                <Popup
+                  basic
+                  trigger={<Button icon="plus" onClick={this.triggerAdd} />}
                   open={this.state.showAddPopup}
                   content={
                     <Form reply>
                       <Form.TextArea
                         value={note.note}
-                        onChange={e => this.props.writeNote(e)}
+                        onChange={(e) => this.props.writeNote(e)}
                       />
-                      <Button primary
+                      <Button
+                        primary
                         onClick={() => {
-                          this.triggerAdd()
+                          this.triggerAdd();
                           this.props.postEventNote({
                             eventid: selectedEvent.id,
                             userid: trainee.id,
-                            note: note.note 
-                          })
-                          this.props.clearWrite()
+                            note: note.note,
+                          });
+                          this.props.clearWrite();
                         }}
-                        content='Megjegyzés hozzáadása'
-                        labelPosition='left'
-                        icon='edit'
+                        content="Megjegyzés hozzáadása"
+                        labelPosition="left"
+                        icon="edit"
                       />
                     </Form>
                   }
@@ -167,9 +170,12 @@ class TraineeTableRow extends Component {
     );
   }
 }
-const mapStateToProps = ({ notes: { actualNote } }) => ({ actualNote })
+const mapStateToProps = ({ notes: { actualNote } }) => ({ actualNote });
 
-export default connect(mapStateToProps, 
-  { writeNote, clearWrite, postEventNote, 
-    visitorChange, submitVisitors})
-    (TraineeTableRow)
+export default connect(mapStateToProps, {
+  writeNote,
+  clearWrite,
+  postEventNote,
+  visitorChange,
+  submitVisitors,
+})(TraineeTableRow);

src/components/pages/Events.js

+import { Button, Container, Table } from 'semantic-ui-react';
 import React, { Component } from 'react';
-import moment from 'moment';
+import { deleteEvent, getStaffEvents } from '../../actions/statistics';
+
+import AddEventForm from '../forms/AddEventForm';
 import { Link } from 'react-router-dom';
-import { Container, Table, Button } from 'semantic-ui-react';
 import { connect } from 'react-redux';
-import { getStaffEvents, deleteEvent } from '../../actions/statistics';
-import AddEventForm from '../forms/AddEventForm';
+import moment from 'moment';
 
 class Events extends Component {
   UNSAFE_componentWillMount() {
@@ -12,51 +13,57 @@ class Events extends Component {
   }
 
   renderEvents() {
-    return this.props.events.map((event) => { 
-      return (
-        <Table.Row >
-          <Table.Cell textAlign='center'>
-            <Link to={`events/${event.id}`}>
-              {event.name}
-            </Link>
+    return this.props.events.map((event) => (
+      <Table.Row key={event.id}>
+        <Table.Cell textAlign="center">
+          <Link to={`events/${event.id}`}>{event.name}</Link>
         </Table.Cell>
-          <Table.Cell textAlign='center'>
+        <Table.Cell textAlign="center">
           {moment(event.date).format('LL')}
         </Table.Cell>
-          <Table.Cell textAlign='center'>
-            {event.visitor_number}
-          </Table.Cell>
-          <Table.Cell textAlign='center'>
+        <Table.Cell textAlign="center">{event.visitor_number}</Table.Cell>
+        <Table.Cell textAlign="center">
           <Button
             onClick={() => this.props.deleteEvent(event)}
-              color='red'
+            color="red"
             compact
-              size='small'
+            size="small"
           >
             Törlés
           </Button>
         </Table.Cell>
       </Table.Row>
-      );
-    });
+    ));
   }
 
   render() {
     return (
-      <Container textAlign='center'>
+      <Container textAlign="center">
         <div style={{ overflowX: 'scroll' }}>
-          <Table color='blue' unstackable celled selectable compact
-          size='small'>
+          <Table
+            color="blue"
+            unstackable
+            celled
+            selectable
+            compact
+            size="small"
+          >
             <Table.Header>
               <Table.Row>
-                <Table.HeaderCell textAlign='center'>Alkalom neve</Table.HeaderCell>
-                <Table.HeaderCell textAlign='center'>Dátum</Table.HeaderCell>
-                <Table.HeaderCell textAlign='center'>Jelen voltak</Table.HeaderCell>
+                <Table.HeaderCell textAlign="center">
+                  Alkalom neve
+                </Table.HeaderCell>
+                <Table.HeaderCell textAlign="center">Dátum</Table.HeaderCell>
+                <Table.HeaderCell textAlign="center">
+                  Jelen voltak
+                </Table.HeaderCell>
                 <Table.HeaderCell />
               </Table.Row>
             </Table.Header>
             <Table.Body>
-              {this.props.events ? this.renderEvents() : 'Nincs még alkalom beírva'}
+              {this.props.events
+                ? this.renderEvents()
+                : 'Nincs még alkalom beírva'}
             </Table.Body>
           </Table>
         </div>
@@ -69,4 +76,6 @@ class Events extends Component {
 
 const mapStateToProps = ({ events: { events }, user }) => ({ events, user });
 
-export default connect(mapStateToProps, { getStaffEvents, deleteEvent })(Events);
+export default connect(mapStateToProps, { getStaffEvents, deleteEvent })(
+  Events
+);

src/components/pages/Groups.js

-import React, { Component } from 'react';
-import { Container, Header, Segment, Divider } from 'semantic-ui-react';
 import './Groups.css';
-import GroupCard from '../extra/GroupCard'
 
+import { Container, Header, Segment } from 'semantic-ui-react';
+import React, { Component } from 'react';
+
+import GroupCard from '../extra/GroupCard';
 import { connect } from 'react-redux';
 import { getGroups } from '../../actions/groups';
 
-
 class Groups extends Component {
   UNSAFE_componentWillMount() {
-    this.props.getGroups()
+    this.props.getGroups();
   }
 
   render() {
     return (
       <div>
-        <Segment inverted textAlign='center' vertical>
+        <Segment inverted textAlign="center" vertical>
           <Container>
             <Header
-              as='h1'
-              content='Köreink'
+              as="h1"
+              content="Köreink"
               inverted
               style={{
                 fontSize: '3em',
@@ -33,8 +33,16 @@ class Groups extends Component {
 
         <Segment style={{ padding: '1em 0em 5em' }} vertical>
           <Container text>
-            { this.props.groups.map(item => {
-              return <GroupCard key={item.id} label={item.name} value={item.description}/>
+            {this.props.groups
+              // eslint-disable-next-line arrow-body-style
+              .map((item) => {
+                return (
+                  <GroupCard
+                    key={item.id}
+                    label={item.name}
+                    value={item.description}
+                  />
+                );
               })}
           </Container>
         </Segment>
@@ -46,4 +54,3 @@ class Groups extends Component {
 const mapStateToProps = ({ groups }) => ({ groups });
 
 export default connect(mapStateToProps, { getGroups })(Groups);
-

src/components/pages/Home.css

@@ -5,8 +5,33 @@
 .car-text-kszk {
   position: absolute;
   width: 100%;
-  top: 0px;
+  top: 1vw;
+  text-shadow: black 0px 0px 10px, black 0px 0px 6px;
   -webkit-text-fill-color: white;
-  -webkit-text-stroke-color: black;
-  -webkit-text-stroke-width: 0.75px;
+}
+
+.quote {
+  position: relative;
+  margin-bottom: 0.5rem;
+}
+
+.quote:before {
+  content: '“';
+  position: absolute;
+  left: -0.45em;
+}
+
+.quote::after {
+  content: '”';
+  margin-right: -1rem;
+}
+
+.quote--container {
+  margin: 2rem auto 0;
+  padding-bottom: 0.7rem;
+}
+
+.quote--author {
+  text-align: right;
+  font-weight: 300;
 }

src/components/pages/Homework.js

-import React, { Component } from 'react';
 import {
+  Button,
   Container,
   Header,
-  Segment,
-  Table,
   Icon,
-  Message,
-  Button,
   Label,
+  Message,
+  Segment,
+  Table,
 } from 'semantic-ui-react';
-import { connect } from 'react-redux';
-import moment from 'moment';
+/* eslint-disable no-nested-ternary */
+import React, { Component } from 'react';
 import {
-  getTasks,
-  getSolutions,
-  getDocuments,
   addTask,
-  setSelectedTask,
   deleteTask,
+  getDocuments,
   getProfiles,
+  getSolutions,
+  getTasks,
+  setSelectedTask,
 } from '../../actions/homework';
-import AddTaskForm from '../forms/AddTaskForm';
+
 import AddSolutionForm from '../forms/AddSolutionForm';
-import SolutionDetailsForm from '../forms/SolutionDetailsForm';
+import AddTaskForm from '../forms/AddTaskForm';
+import ConfirmModal from '../forms/ConfirmModal';
 import EditTaskForm from '../forms/EditTaskForm';
 import InfoModal from '../forms/InfoModal';
-import ConfirmModal from '../forms/ConfirmModal';
+import SolutionDetailsForm from '../forms/SolutionDetailsForm';
+import { connect } from 'react-redux';
+import moment from 'moment';
 
 // Display type for the Table Semantic UI component
 // {icon} {text} - Displayed for the student for each Task
@@ -71,16 +73,17 @@ export const customMessage = (header, text, marginBottom, warning) => (
 
 class Homework extends Component {
   componentDidMount() {
-    this.props.getTasks()
-    this.props.getProfiles()
-    this.props.getSolutions()
-    this.props.getDocuments()
+    this.props.getTasks();
+    this.props.getProfiles();
+    this.props.getSolutions();
+    this.props.getDocuments();
   }
 
   // Returns a table style for the given task
   getTaskDisplayStyle(task) {
-    const taskSolution = this.props.homeworks.solutions
-      .filter(solution => solution.task === task.id)
+    const taskSolution = this.props.homeworks.solutions.filter(
+      (solution) => solution.task === task.id
+    );
 
     if (taskSolution.length === 0) {
       if (moment().isBefore(task.deadline)) {
@@ -105,15 +108,15 @@ class Homework extends Component {
   // given parameters separates the active/inactive tasks and normal/staff users
   renderTaskList(active, staff) {
     const { user, homeworks } = this.props;
-    const profileSolutions = homeworks.solutions
-      .filter(solution => solution.created_by === user.id);
-    
+    const profileSolutions = homeworks.solutions.filter(
+      (solution) => solution.created_by === user.id
+    );
 
     // Normal user
     if (!staff) {
       return homeworks.tasks
-        .filter(task => moment().isBefore(task.deadline) === active)
-        .map(task => (
+        .filter((task) => moment().isBefore(task.deadline) === active)
+        .map((task) => (
           // Style
           <Table.Row
             key={task.id}
@@ -143,11 +146,18 @@ class Homework extends Component {
             </Table.Cell>
 
             <Table.Cell>
-              <Label color={
-                  displayTypes[this.getTaskDisplayStyle(task)].rowstyle.positive ? 
-                    'green' 
-                  : moment().isAfter(task.deadline) ? 'red' 
-                  : displayTypes[this.getTaskDisplayStyle(task)].rowstyle.negative ? 'red': null}>
+              <Label
+                color={
+                  displayTypes[this.getTaskDisplayStyle(task)].rowstyle.positive
+                    ? 'green'
+                    : moment().isAfter(task.deadline)
+                    ? 'red'
+                    : displayTypes[this.getTaskDisplayStyle(task)].rowstyle
+                        .negative
+                    ? 'red'
+                    : null
+                }
+              >
                 {task.bits} bit
               </Label>
             </Table.Cell>
@@ -155,25 +165,34 @@ class Homework extends Component {
             <Table.Cell>
               <Icon name={displayTypes[this.getTaskDisplayStyle(task)].icon} />{' '}
               {displayTypes[this.getTaskDisplayStyle(task)].text}
-              {profileSolutions.filter(solution => solution.task === task.id)
-                && profileSolutions.filter(solution => solution.task === task.id).slice(-1)[0]
-                && profileSolutions.filter(solution => solution.task === task.id).slice(-1)[0].note
-                ?
+              {profileSolutions.filter(
+                (solution) => solution.task === task.id
+              ) &&
+              profileSolutions
+                .filter((solution) => solution.task === task.id)
+                .slice(-1)[0] &&
+              profileSolutions
+                .filter((solution) => solution.task === task.id)
+                .slice(-1)[0].note ? (
                 <div>
                   <InfoModal
                     button={
-                        <button id='tasknote'>
-                          (Megjegyzés <Icon name='external' />)
+                      <button type="button" id="tasknote">
+                        (Megjegyzés <Icon name="external" />)
                       </button>
                     }
-                      title='Megjegyzés a feladathoz'
-                      content={profileSolutions.filter(solution =>
-                      solution.task === task.id).slice(-1)[0].note}
+                    title="Megjegyzés a feladathoz"
+                    content={
+                      profileSolutions
+                        .filter((solution) => solution.task === task.id)
+                        .slice(-1)[0].note
+                    }
                     onAccept={() => {}}
                   />
                 </div>
-                : ''
-              }
+              ) : (
+                ''
+              )}
             </Table.Cell>
           </Table.Row>
         ));
@@ -182,18 +201,14 @@ class Homework extends Component {
     // Staff
 
     const deleteButton = (
-      <Button
-        inverted
-        style={{ marginRight: '2em' }}
-        color='red'
-      >
-        <Icon name='x' /> Törlés
+      <Button inverted style={{ marginRight: '2em' }} color="red">
+        <Icon name="x" /> Törlés
       </Button>
     );
 
     return this.props.homeworks.tasks
-      .filter(task => moment().isBefore(task.deadline) === active)
-      .map(task => (
+      .filter((task) => moment().isBefore(task.deadline) === active)
+      .map((task) => (
         <Table.Row
           key={task.id}
           warning={
@@ -218,12 +233,16 @@ class Homework extends Component {
           <Table.Cell>
             {moment(task.deadline).format('YYYY. MM. DD. HH:mm')}
           </Table.Cell>
+          {/* Bits */}
+          <Table.Cell>
+            <Label color={null}>{task.bits} bit</Label>
+          </Table.Cell>
           {/* Admin buttons */}
           <Table.Cell>
             <EditTaskForm onClick={() => this.props.setSelectedTask(task)} />
             <ConfirmModal
               button={deleteButton}
-              text='törlöd a kiválaszott feladatot a már beadott megoldásokkal együtt'
+              text="törlöd a kiválaszott feladatot a már beadott megoldásokkal együtt"
               onAccept={() => this.props.deleteTask(task)}
             />
           </Table.Cell>
@@ -247,17 +266,16 @@ class Homework extends Component {
           <Table.Header>
             <Table.Row>
               <Table.HeaderCell>
-                <Icon circular name='home' />
+                <Icon circular name="home" />
                 Feladat megnevezése / beadása
               </Table.HeaderCell>
               <Table.HeaderCell>
-                <Icon circular name='calendar' />
+                <Icon circular name="calendar" />
                 Beadási határidő
               </Table.HeaderCell>
-              <Table.HeaderCell width={2}>
-              </Table.HeaderCell>
+              <Table.HeaderCell width={2}></Table.HeaderCell>
               <Table.HeaderCell>
-                <Icon circular name='tasks' />
+                <Icon circular name="tasks" />
                 Állapot
               </Table.HeaderCell>
             </Table.Row>
@@ -271,15 +289,16 @@ class Homework extends Component {
         <Table.Header>
           <Table.Row>
             <Table.HeaderCell>
-              <Icon circular name='home' />
+              <Icon circular name="home" />
               Feladat megnevezése / Beadások állapota
             </Table.HeaderCell>
             <Table.HeaderCell>
-              <Icon circular name='calendar' />
+              <Icon circular name="calendar" />
               Beadási határidő
             </Table.HeaderCell>
+            <Table.HeaderCell width={2}></Table.HeaderCell>
             <Table.HeaderCell>
-              <Icon circular name='edit' />
+              <Icon circular name="edit" />
               Módosítás / Törlés
             </Table.HeaderCell>
           </Table.Row>
@@ -301,15 +320,18 @@ class Homework extends Component {
       headerText = 'Aktív feladatok kijavítása, módosítása vagy törlése';
     }
 
-    if (this.props.homeworks.tasks.filter(task =>
-          moment().isBefore(task.deadline) === active).length === 0
+    if (
+      this.props.homeworks.tasks.filter(
+        (task) => moment().isBefore(task.deadline) === active
+      ).length === 0
     ) {
       noTask = true;
     }
 
     if (!active) {
       if (staff) {
-        headerText = 'Lejárt határidejű feladatok kijavítása, módosítása vagy törlése';
+        headerText =
+          'Lejárt határidejű feladatok kijavítása, módosítása vagy törlése';
       } else {
         headerText = 'Lejárt határidejű feladatok';
       }
@@ -321,11 +343,9 @@ class Homework extends Component {
       <Segment style={{ padding: '0 0 2em 0' }} vertical basic>
         <Container>
           <Header
-            as='h1'
+            as="h1"
             dividing
-            content={
-              headerText
-            }
+            content={headerText}
             style={{
               fontSize: '2em',
               fontWeight: 'normal',
@@ -333,18 +353,18 @@ class Homework extends Component {
               marginTop: '0.5em',
             }}
           />
-          {noTask ? 
+          {noTask ? (
             customMessage(noTaskHeaderText, noTaskText, marginBottom, false)
-            : 
-            <div>
-              {this.renderHomeworksTable(active, staff)}
-              {!active && !staff ?
+          ) : (
+            <div>{this.renderHomeworksTable(active, staff)}</div>
+          )}
+          {!active && !staff ? (
             <Header
-                  as='h3'
+              as="h3"
               content={
                 <div>
                   Jelenlegi bitjeid száma:
-                      <Label color='green' size='large'>
+                  <Label color="green" size="large">
                     {this.props.user.bits} bit
                   </Label>
                 </div>
@@ -352,14 +372,11 @@ class Homework extends Component {
               style={{
                 fontWeight: 'normal',
                 marginTop: '0.5em',
+                marginBottom: '1em',
               }}
-                  textAlign='right'
+              textAlign="right"
             />
-                : null
-              }
-            </div>
-            
-          }
+          ) : null}
         </Container>
       </Segment>
     );
@@ -375,13 +392,16 @@ class Homework extends Component {
           {this.renderHomeworks(false, false)}
         </div>
       );
-    } else if (user.role === 'Staff') {
+    }
+    if (user.role === 'Staff') {
       return (
         <div style={{ paddingBottom: '2em' }}>
           <Segment style={{ padding: '0 0 2em 0' }} vertical basic>
             <Container>
-              <Header dividing as='h1'
-                content='Új házi feladat létrehozása'
+              <Header
+                dividing
+                as="h1"
+                content="Új házi feladat létrehozása"
                 style={{
                   fontSize: '2em',
                   fontWeight: 'normal',
@@ -403,11 +423,13 @@ class Homework extends Component {
   }
 }
 
-const mapStateToProps = ({ selectedTask, homeworks, user }) => ({ selectedTask, homeworks, user });
+const mapStateToProps = ({ selectedTask, homeworks, user }) => ({
+  selectedTask,
+  homeworks,
+  user,
+});
 
-export default connect(
-  mapStateToProps,
-  {
+export default connect(mapStateToProps, {
   getTasks,
   setSelectedTask,
   getSolutions,
@@ -415,5 +437,4 @@ export default connect(
   addTask,
   deleteTask,
   getProfiles,
-  },
-)(Homework);
+})(Homework);

src/components/pages/NotFound.js

-import React, { Component } from 'react';
 import { Button, Container, Header, Icon, Segment } from 'semantic-ui-react';
+import React, { Component } from 'react';
 
 export default class NotFound extends Component {
   render() {
     return (
       <div>
-        <Segment inverted textAlign='center' vertical>
+        <Segment inverted textAlign="center" vertical>
           <Container>
             <Header
-              as='h1'
-              content='404 - A keresett oldal nem található!'
+              as="h1"
+              content="404 - A keresett oldal nem található!"
               inverted
               style={{
                 fontSize: '3em',
@@ -19,9 +19,9 @@ export default class NotFound extends Component {
               }}
             />
             <Button
-              href='/'
+              href="/"
               primary
-              size='huge'
+              size="huge"
               style={{
                 fontSize: '2em',
                 marginTop: '1em',
@@ -29,7 +29,7 @@ export default class NotFound extends Component {
               }}
             >
               Vissza a Főoldalra
-              <Icon name='right arrow' />
+              <Icon name="right arrow" />
             </Button>
           </Container>
         </Segment>