src/components/forms/HiddenForm.js

+import React, { Component } from 'react';
+
+import { Segment } from 'semantic-ui-react';
+
+class HiddenForm extends Component {
+  render() {
+    return (
+      <div>
+        <div style={{ marginBottom: 0, fontWeight: this.props.fontWeight }}>
+          {this.props.label}
+        </div>
+        <Segment style={{ marginTop: 0 }}>
+          <div>{this.props.value}</div>
+        </Segment>
+      </div>
+    );
+  }
+}
+
+export default HiddenForm;

src/components/forms/InfoModal.js

+import { Button, Header, Icon, Modal } from 'semantic-ui-react';
+import React, { Component } from 'react';
+
+class InfoModal extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      showModal: false,
+    };
+  }
+
+  close = () => this.setState({ showModal: false });
+
+  open = () => this.setState({ showModal: true });
+
+  render() {
+    const { button, title, content } = this.props;
+    const open = this.state.showModal;
+    return (
+      <Modal
+        open={open}
+        closeOnDimmerClick
+        trigger={button}
+        onOpen={this.open}
+        onClose={this.close}
+        size="small"
+        basic
+      >
+        <Header icon="info" content={title} />
+        <Modal.Content>
+          {content.split('\n').map((s) => (
+            <p key={Math.random()}>{s}</p>
+          ))}
+        </Modal.Content>
+        <Modal.Actions>
+          <Button color="green" inverted onClick={() => this.close()}>
+            <Icon name="checkmark" /> Rendben
+          </Button>
+        </Modal.Actions>
+      </Modal>
+    );
+  }
+}
+
+export default InfoModal;

src/components/forms/SolutionDetailsForm.js

+import './Forms.css';
+
+import { Button, Divider, Header, Icon, Modal } from 'semantic-ui-react';
+import React, { Component } from 'react';
+import { getDocuments, getSolutions } from '../../actions/homework';
+
+import CorrectSolutionForm from './CorrectSolutionForm';
+import { connect } from 'react-redux';
+import { customMessage } from '../pages/Homework';
+
+class SolutionDetailsForm extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      showModal: false,
+    };
+  }
+
+  render() {
+    const taskSolutions = this.props.homeworks.solutions.filter(
+      (solution) => solution.task === this.props.taskid
+    );
+
+    const noSubmitStudents = [];
+    const waitForCorrectionStudents = [];
+    const noAcceptStudents = [];
+    const acceptedStudents = [];
+
+    this.props.homeworks.profiles.forEach((profile) => {
+      const profileSolutions = taskSolutions.filter(
+        (solution) => solution.created_by === profile.id
+      );
+
+      if (profile.role === 'Student') {
+        if (profileSolutions.length === 0) {
+          noSubmitStudents.push(profile);
+        } else if (
+          profileSolutions[profileSolutions.length - 1].corrected === false
+        ) {
+          waitForCorrectionStudents.push(profile);
+        } else if (
+          profileSolutions[profileSolutions.length - 1].accepted === false
+        ) {
+          noAcceptStudents.push(profile);
+        } else {
+          acceptedStudents.push(profile);
+        }
+      }
+    });
+
+    const noStudentText = 'Nincs ilyen képződő jelenleg.';
+
+    return (
+      <Modal
+        open={this.state.showModal}
+        closeOnDimmerClick
+        onClose={() => this.setState({ showModal: false })}
+        trigger={
+          <button
+            type="button"
+            id="task"
+            onClick={() => {
+              this.setState({ showModal: true });
+              this.props.getSolutions();
+              this.props.getDocuments();
+            }}
+          >
+            <Icon name="external" />
+            {this.props.tasktitle}
+          </button>
+        }
+      >
+        <Modal.Header>
+          A megoldások beadásának állapota a(z) {this.props.tasktitle} nevű
+          feladatnál:
+        </Modal.Header>
+        <Modal.Content>
+          <Header as="h3">A feladat leírása:</Header>
+          {this.props.taskdesc.split('\n').map((s) => (
+            <p key={Math.random()}>{s}</p>
+          ))}
+          <Divider />
+          <Header as="h3">Nem érkezett még megoldás:</Header>
+          {noSubmitStudents.length === 0
+            ? customMessage(noStudentText)
+            : noSubmitStudents.map((student) => (
+                <Button
+                  key={Math.random()}
+                  color="blue"
+                  style={{ marginRight: '1.5em', marginTop: '1.5em' }}
+                >
+                  {student.full_name}
+                </Button>
+              ))}
+          <Divider />
+          <Header as="h3">
+            Javításra vár (A névre kattintva kijavítható a megoldás):
+          </Header>
+          {waitForCorrectionStudents.length === 0
+            ? customMessage(noStudentText)
+            : waitForCorrectionStudents.map((student) => (
+                <CorrectSolutionForm
+                  key={Math.random()}
+                  color="orange"
+                  studentName={student.nick}
+                  studentFullName={student.full_name}
+                  studentId={student.id}
+                  taskTitle={this.props.tasktitle}
+                  taskSolutions={taskSolutions}
+                />
+              ))}
+          <Divider />
+          <Header as="h3">
+            A megoldás nem elfogadható (A névre kattintva módosítható a
+            javítás):
+          </Header>
+          {noAcceptStudents.length === 0
+            ? customMessage(noStudentText)
+            : noAcceptStudents.map((student) => (
+                <CorrectSolutionForm
+                  key={Math.random()}
+                  color="red"
+                  studentName={student.nick}
+                  studentFullName={student.full_name}
+                  studentId={student.id}
+                  taskTitle={this.props.tasktitle}
+                  taskSolutions={taskSolutions}
+                />
+              ))}
+          <Divider />
+          <Header as="h3">
+            Elfogadva (A névre kattintva módosítható a javítás):
+          </Header>
+          {acceptedStudents.length === 0
+            ? customMessage(noStudentText)
+            : acceptedStudents.map((student) => (
+                <CorrectSolutionForm
+                  key={Math.random()}
+                  color="green"
+                  studentName={student.nick}
+                  studentFullName={student.full_name}
+                  studentId={student.id}
+                  taskTitle={this.props.tasktitle}
+                  taskSolutions={taskSolutions}
+                />
+              ))}
+        </Modal.Content>
+        <Modal.Actions>
+          <Button
+            inverted
+            color="green"
+            onClick={() => {
+              this.setState({ showModal: false });
+            }}
+          >
+            <Icon name="checkmark" /> Kész
+          </Button>
+        </Modal.Actions>
+      </Modal>
+    );
+  }
+}
+
+const mapStateToProps = ({ homeworks, user }) => ({ homeworks, user });
+
+export default connect(mapStateToProps, {
+  getSolutions,
+  getDocuments,
+})(SolutionDetailsForm);

src/components/pages/ApplicantProfile.js

+import { Button, Container, Header, Item, Label } from 'semantic-ui-react';
+import React, { Component } from 'react';
+import { getSelectedProfile, setStatus } from '../../actions/statistics';
+
+import ConfirmModal from '../forms/ConfirmModal';
+import { connect } from 'react-redux';
+
+const groupTypes = {
+  HAT: {
+    name: 'Hallgatói Tudásbázis',
+    color: 'purple',
+  },
+  SYS: {
+    name: 'Sysadmin',
+    color: 'violet',
+  },
+  NET: {
+    name: 'NETeam',
+    color: 'blue',
+  },
+  ST: {
+    name: 'SecurITeam',
+    color: 'teal',
+  },
+  DT: {
+    name: 'DevTeam',
+    color: 'green',
+  },
+};
+
+class ApplicantProfile extends Component {
+  UNSAFE_componentWillMount() {
+    this.props.getSelectedProfile(this.props.match.params.id);
+  }
+
+  render() {
+    const {
+      id,
+      signed,
+      role,
+      full_name,
+      nick,
+      motivation_about,
+      motivation_exercise,
+      motivation_profession,
+      groups,
+    } = this.props.selectedProfile;
+    return (
+      <Container style={{ paddingTop: '3em', paddingBottom: '6em' }}>
+        <Item>
+          <Item.Content>
+            <Container textAlign="center" style={{ paddingBottom: '2em' }}>
+              <Header as="h2">{full_name}</Header>
+              <Item.Meta>{nick}</Item.Meta>
+              <Header as="h2">
+                {groups?.map((group) => (
+                  <Label color={groupTypes[group].color}>
+                    {groupTypes[group].name}
+                  </Label>
+                ))}
+              </Header>
+            </Container>
+            <Item.Description>
+              <Container textAlign="justified" style={{ padding: '1em' }}>
+                <Header as="h3">Magamról, eddigi tevékenységem:</Header>
+                <p>
+                  {motivation_about?.split('\n').map((item, i) => (
+                    <div key={i}>{item}</div>
+                  ))}
+                </p>
+                <Header as="h3">Szakmai motiváció:</Header>
+                <p>
+                  {motivation_profession?.split('\n').map((item, i) => (
+                    <div key={i}>{item}</div>
+                  ))}
+                </p>
+                <Header as="h3">Feladatok megoldása:</Header>
+                <p>
+                  {motivation_exercise?.split('\n').map((item, i) => (
+                    <div key={i}>{item}</div>
+                  ))}
+                </p>
+              </Container>
+              <Container textAlign="center" style={{ padding: '1em' }}>
+                <Header as="h3">Státusz:</Header>
+                {signed ? (
+                  <div>
+                    {role === 'Student' ? (
+                      <Label color="green" size="huge">
+                        Elfogadva
+                      </Label>
+                    ) : null}
+                    {role === 'Staff' ? (
+                      <Label color="blue" size="huge">
+                        Staff
+                      </Label>
+                    ) : null}
+                    {role === 'Applicant' ? (
+                      <Label color="orange" size="huge">
+                        Jelentkezett
+                      </Label>
+                    ) : null}
+                    {role === 'Denied' ? (
+                      <Label color="red" size="huge">
+                        Elutasítva
+                      </Label>
+                    ) : null}
+                  </div>
+                ) : (
+                  <Label color="red" size="huge">
+                    Nem jelentkezett
+                  </Label>
+                )}
+              </Container>
+            </Item.Description>
+          </Item.Content>
+        </Item>
+        {signed && role !== 'Staff' ? (
+          <Container textAlign="center">
+            <ConfirmModal
+              button={<Button color="green">Jelentkezés elfogadása</Button>}
+              text="elfogadod a jelentkezést"
+              onAccept={() => this.props.setStatus(id, 'Student')}
+            />
+            <ConfirmModal
+              button={<Button color="red">Jelentkezés elutasítása</Button>}
+              text="elutasítod a jelentkezést"
+              onAccept={() => this.props.setStatus(id, 'Denied')}
+            />
+          </Container>
+        ) : null}
+      </Container>
+    );
+  }
+}
+
+const mapStateToProps = ({ trainees: { selectedProfile } }) => ({
+  selectedProfile,
+});
+
+export default connect(mapStateToProps, { getSelectedProfile, setStatus })(
+  ApplicantProfile
+);

src/components/pages/Applications.js

+import { Button, Container, Label, Table } from 'semantic-ui-react';
+import React, { Component } from 'react';
+import { getProfiles, setStatus } from '../../actions/statistics';
+
+import ConfirmModal from '../forms/ConfirmModal';
+import { Link } from 'react-router-dom';
+import { connect } from 'react-redux';
+
+const role = [
+  {
+    role: 'Staff',
+    text: 'Staff',
+    color: 'blue',
+  },
+  {
+    role: 'Student',
+    text: 'Elfogadott',
+    color: 'green',
+  },
+  {
+    role: 'Applicant',
+    text: 'Jelentkezett',
+    color: 'orange',
+  },
+  {
+    role: 'Denied',
+    text: 'Elutasított',
+    color: 'red',
+  },
+  {
+    role: 'no',
+    text: 'Nem jelentkezett',
+    color: 'red',
+  },
+];
+
+class Applications extends Component {
+  UNSAFE_componentWillMount() {
+    this.props.getProfiles();
+  }
+
+  renderApplicants(format) {
+    return this.props.profiles.map((profile) =>
+      profile.role === format.role &&
+      (profile.signed === true || profile.role === 'Staff') ? (
+        <Table.Row key={profile.id}>
+          <Table.Cell textAlign="center">
+            <Link to={`applicant/${profile.id}`}>{profile.full_name}</Link>
+          </Table.Cell>
+          {format.role === 'Staff' ? null : (
+            <Table.Cell textAlign="center">
+              <ConfirmModal
+                button={
+                  <Button color="blue" size="tiny">
+                    ADD STAFF STATUS
+                  </Button>
+                }
+                text="staff jogot adsz neki"
+                onAccept={() => this.props.setStatus(profile.id, 'Staff')}
+              />
+            </Table.Cell>
+          )}
+        </Table.Row>
+      ) : null
+    );
+  }
+
+  renderNotApplicants(format) {
+    return this.props.profiles.map((profile) =>
+      profile.signed === false && profile.role !== 'Staff' ? (
+        <Table.Row key={profile.id}>
+          <Table.Cell textAlign="center">
+            <Link to={`applicant/${profile.id}`}>{profile.full_name}</Link>
+          </Table.Cell>
+          {format.role === 'Staff' ? null : (
+            <Table.Cell textAlign="center">
+              <ConfirmModal
+                button={
+                  <Button color="blue" size="tiny">
+                    ADD STAFF STATUS
+                  </Button>
+                }
+                text="staff jogot adsz neki"
+                onAccept={() => this.props.setStatus(profile.id, 'Staff')}
+              />
+            </Table.Cell>
+          )}
+        </Table.Row>
+      ) : null
+    );
+  }
+
+  renderTable(format) {
+    return (
+      <Table color="blue" unstackable celled selectable compact>
+        <Table.Header>
+          <Table.Row>
+            <Table.HeaderCell textAlign="center">
+              <Label color={format.color}>{format.text}</Label>
+            </Table.HeaderCell>
+            {format.role !== 'Staff' ? (
+              <Table.HeaderCell width={3} textAlign="center">
+                <Label color={null}>
+                  {format.role === 'no'
+                    ? this.props.profiles.filter(
+                        (profile) =>
+                          profile.signed === false && profile.role !== 'Staff'
+                      ).length
+                    : this.props.profiles.filter(
+                        (profile) =>
+                          profile.role === format.role &&
+                          (profile.signed === true || profile.role === 'Staff')
+                      ).length}{' '}
+                  fő
+                </Label>
+              </Table.HeaderCell>
+            ) : null}
+          </Table.Row>
+        </Table.Header>
+        <Table.Body>
+          {format.role === 'no'
+            ? this.renderNotApplicants(format)
+            : this.renderApplicants(format)}
+        </Table.Body>
+      </Table>
+    );
+  }
+
+  render() {
+    return (
+      <Container
+        textAlign="center"
+        style={{ paddingTop: '1em', paddingBottom: '5em' }}
+      >
+        {this.renderTable(role[2])} {/* Applicant */}
+        {this.renderTable(role[1])} {/* Student */}
+        {this.renderTable(role[0])} {/* Staff */}
+        {this.renderTable(role[3])} {/* Denied */}
+        {this.renderTable(role[4])} {/* Not Signed */}
+      </Container>
+    );
+  }
+}
+
+const mapStateToProps = ({ trainees: { profiles }, user }) => ({
+  profiles,
+  user,
+});
+
+export default connect(mapStateToProps, { getProfiles, setStatus })(
+  Applications
+);

src/components/pages/EventDetail.js

+import {
+  Button,
+  Comment,
+  Container,
+  Divider,
+  Form,
+  Header,
+  Item,
+  Segment,
+  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) {
+    super(props);
+    this.state = {
+      edit: false,
+    };
+  }
+
+  UNSAFE_componentWillMount() {
+    this.props.getEventById(this.props.match.params.id);
+    this.props.getTrainees();
+    this.props.getNotesByEvent(this.props.match.params.id);
+  }
+
+  renderTrainees() {
+    const event = this.props.selectedEvent;
+    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}
+            trainee={item}
+            edit={this.state.edit}
+            key={item.id}
+          />
+        ) : null;
+      });
+  }
+
+  renderEvent() {
+    const { name, date, description } = this.props.selectedEvent;
+    return (
+      <Segment>
+        <Item>
+          <Divider style={{ fontSize: "2em" }} horizontal>
+            <Header as="h1">
+              {name}
+              <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>
+            <Item.Content>{description}</Item.Content>
+          </Container>
+        </Item>
+      </Segment>
+    );
+  }
+
+  renderComments() {
+    const notes = this.props.eventNotes;
+    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")}
+                </Comment.Metadata>
+                <Comment.Text>{note.note}</Comment.Text>
+              </Comment.Content>
+            </Comment>
+          </Segment>
+        );
+      }
+      return "";
+    });
+  }
+
+  render() {
+    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>
+        {!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.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}
+          </Table.Body>
+        </Table>
+        <Comment.Group>
+          <Header dividing>Megjegyzések</Header>
+          {this.props.eventNotes ? this.renderComments() : ""}
+          <Form reply>
+            <Form.TextArea
+              value={note.note}
+              onChange={(e) => this.props.writeNote(e)}
+            />
+            <Button
+              onClick={() => {
+                this.props.postEventNote({
+                  eventid: event.id,
+                  note: note.note,
+                });
+                this.props.clearWrite();
+              }}
+              content="Megjegyzés hozzáadása"
+              labelPosition="left"
+              icon="edit"
+              primary
+            />
+          </Form>
+        </Comment.Group>
+      </Container>
+    );
+  }
+}
+
+const mapStateToProps = ({
+  notes: { eventNotes, actualNote },
+  events: { selectedEvent },
+  trainees: { trainees },
+}) => ({
+  eventNotes,
+  selectedEvent,
+  trainees,
+  actualNote,
+});
+
+export default connect(mapStateToProps, {
+  getEventById,
+  getTrainees,
+  visitorChange,
+  getNotesByEvent,
+  submitVisitors,
+  writeNote,
+  clearWrite,
+  postEventNote,
+})(EventDetail);

src/components/pages/EventDetailTableRow.js

+import {
+  Button,
+  Comment,
+  Dropdown,
+  Form,
+  Grid,
+  Icon,
+  Popup,
+  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';
+
+const visitStates = [
+  {
+    text: 'Igen',
+    value: 'Visitor',
+  },
+  {
+    text: 'Szólt h nem',
+    value: 'Absent',
+  },
+  {
+    text: 'Nem',
+    value: 'No',
+  },
+];
+
+class TraineeTableRow extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      showAddPopup: false,
+      showMorePopup: false,
+    };
+  }
+
+  // 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 });
+
+  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>
+        {/* Show and change Visitors status  */}
+        {!this.props.edit ? (
+          <Table.Cell textAlign="center">{visitorStatusIcon}</Table.Cell>
+        ) : (
+          <Table.Cell textAlign="center">
+            <Dropdown
+              defaultValue={visitorStatusDropdown}
+              selection
+              options={visitStates}
+              onChange={(_, v) => {
+                this.props.visitorChange({ id: trainee.id, value: v.value });
+                // Submit with error check
+                this.props
+                  .submitVisitors(this.props.selectedEvent)
+                  .then((value) => {
+                    if (value === true) {
+                      console.log('success');
+                    } else {
+                      console.log('error');
+                    }
+                  });
+              }}
+            />
+          </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}
+                      </Comment.Text>
+                    </Comment.Content>
+                  </Comment>
+                ) : null}
+              </Grid.Column>
+              {/* Note buttons */}
+              <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}
+                      />
+                    }
+                    content={notes.map((oneNote) => (
+                      <Comment.Content>
+                        <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} />}
+                  open={this.state.showAddPopup}
+                  content={
+                    <Form reply>
+                      <Form.TextArea
+                        value={note.note}
+                        onChange={(e) => this.props.writeNote(e)}
+                      />
+                      <Button
+                        primary
+                        onClick={() => {
+                          this.triggerAdd();
+                          this.props.postEventNote({
+                            eventid: selectedEvent.id,
+                            userid: trainee.id,
+                            note: note.note,
+                          });
+                          this.props.clearWrite();
+                        }}
+                        content="Megjegyzés hozzáadása"
+                        labelPosition="left"
+                        icon="edit"
+                      />
+                    </Form>
+                  }
+                />
+              </Grid.Column>
+            </Grid.Row>
+          </Grid>
+        </Table.Cell>
+      </Table.Row>
+    );
+  }
+}
+const mapStateToProps = ({ notes: { actualNote } }) => ({ actualNote });
+
+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 { deleteEvent, getStaffEvents } from '../../actions/statistics';
+
+import AddEventForm from '../forms/AddEventForm';
+import { Link } from 'react-router-dom';
+import { connect } from 'react-redux';
+import moment from 'moment';
+
+class Events extends Component {
+  UNSAFE_componentWillMount() {
+    this.props.getStaffEvents();
+  }
+
+  renderEvents() {
+    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">
+          {moment(event.date).format('LL')}
+        </Table.Cell>
+        <Table.Cell textAlign="center">{event.visitor_number}</Table.Cell>
+        <Table.Cell textAlign="center">
+          <Button
+            onClick={() => this.props.deleteEvent(event)}
+            color="red"
+            compact
+            size="small"
+          >
+            Törlés
+          </Button>
+        </Table.Cell>
+      </Table.Row>
+    ));
+  }
+
+  render() {
+    return (
+      <Container textAlign="center">
+        <div style={{ overflowX: 'scroll' }}>
+          <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 />
+              </Table.Row>
+            </Table.Header>
+            <Table.Body>
+              {this.props.events
+                ? this.renderEvents()
+                : 'Nincs még alkalom beírva'}
+            </Table.Body>
+          </Table>
+        </div>
+        <br />
+        <AddEventForm />
+      </Container>
+    );
+  }
+}
+
+const mapStateToProps = ({ events: { events }, user }) => ({ events, user });
+
+export default connect(mapStateToProps, { getStaffEvents, deleteEvent })(
+  Events
+);

src/components/pages/Groups.css

+.paragraph {
+  font-size: 1.33em;
+}

src/components/pages/Circles.js → src/components/pages/Groups.js

-import React, { Component } from 'react';
+import './Groups.css';
+
 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();
+  }
 
-export default class Circles extends Component {
   render() {
     return (
       <div>
-        <Segment inverted textAlign='center' vertical>
+        <Segment inverted textAlign="center" vertical>
           <Container>
             <Header
-              as='h1'
-              content='Körök - Hamarosan'
+              as="h1"
+              content="Köreink"
               inverted
               style={{
                 fontSize: '3em',
@@ -20,7 +30,27 @@ export default class Circles extends Component {
             />
           </Container>
         </Segment>
+
+        <Segment style={{ padding: '1em 0em 5em' }} vertical>
+          <Container text>
+            {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>
       </div>
     );
   }
 }
+
+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/Home.js

-import React, { Component } from 'react';
+import "./Home.css";
+
 import {
   Button,
   Container,
+  Divider,
   Header,
   Icon,
-  Segment,
   Image,
-  Divider,
-} from 'semantic-ui-react';
-import { connect } from 'react-redux';
-import Slider from 'react-slick';
-import './Home.css';
-import KSZKbiglogo from '../images/kszk_big_logo.png';
+  Responsive,
+  Segment,
+} from "semantic-ui-react";
+/* eslint-disable react/jsx-props-no-spreading */
+import React, { Component } from "react";
+
+import KSZKbiglogo from "../images/kszk_with_shadow.png";
+import { Link } from "react-router-dom";
+import Slider from "react-slick";
+import { connect } from "react-redux";
+import { getImages } from "../../actions/home";
 
 const settings = {
   dots: false,
@@ -23,172 +29,394 @@ const settings = {
   slidesToShow: 1,
   slidesToScroll: 1,
   centerMode: true,
+  lazyLoad: true,
+  initialSlide: Math.floor(Math.random() * 32 + 1),
 };
 
-const range = (count) => {
-  const newArray = [];
-  for (let i = 1; i < count; i += 1) {
-    newArray.push(i);
+class Home extends Component {
+  UNSAFE_componentWillMount() {
+    this.props.getImages();
   }
 
-  return newArray;
-};
-
-class Home extends Component {
-  render() {
-    return (
-      <div>
-        <div className='car-image-kszk'>
+  renderSlider(view, imageWidth) {
+    if (view === 0) {
+      return (
+        <div>
+          {!!this.props.images}
           <Slider {...settings}>
-            {
-              range(23).map(image => (
+            {this.props.images &&
+              this.props.images.map((image) => (
                 <div key={image}>
-                  <img src={`images/${image}.JPG`} width='100%' alt='' />
+                  <img src={image.image} width={imageWidth} alt="" />
                 </div>
-              ))
-            }
+              ))}
           </Slider>
-          <div className='car-text-kszk'>
-            <Segment textAlign='center' vertical>
+          <div className="car-text-kszk">
+            <Segment textAlign="center" vertical>
               <Header
-                as='h1'
-                content='Üdvözlünk a'
+                as="h1"
+                content="Üdvözlünk a"
                 inverted
                 style={{
-                  fontSize: '3em',
-                  fontWeight: 'normal',
+                  fontSize: "3vw",
+                  fontWeight: "normal",
                   marginBottom: 0,
-                  marginTop: '0.5em',
                 }}
               />
               <Header
-                as='h1'
-                content='Kollégiumi Számítástechnikai Kör'
+                as="h1"
+                content="Kollégiumi Számítástechnikai Kör"
                 inverted
                 style={{
-                  fontSize: '4em',
-                  fontWeight: 'bold',
-                  marginBottom: '0.5em',
-                  marginTop: '0.5em',
+                  fontSize: "3.5vw",
+                  fontWeight: "bold",
+                  marginBottom: "0.5vw",
+                  marginTop: "0.5vw",
                 }}
               />
               <Header
-                as='h1'
-                content='érdeklődőinek szánt weboldalán!'
+                as="h1"
+                content="újoncképzésének weboldalán!"
                 inverted
                 style={{
-                  fontSize: '3em',
-                  fontWeight: 'normal',
+                  fontSize: "3vw",
+                  fontWeight: "normal",
                   marginBottom: 0,
-                  marginTop: '0.5em',
+                  marginTop: "0.5vw",
                 }}
               />
               <Image
-                verticalAlign='middle'
-                size='small'
+                verticalAlign="middle"
                 src={KSZKbiglogo}
-                style={{ marginTop: '4em' }}
+                style={{ marginTop: "1vw", width: "17%" }}
               />
               <Header
-                as='h1'
-                content='Mindenkit szeretettel várunk a KSZKépzés-re!'
+                as="h1"
+                content="Szeretettel várunk a KSZKépzésre!"
                 inverted
                 style={{
-                  fontSize: '3em',
-                  fontWeight: 'normal',
+                  fontSize: "3vw",
+                  fontWeight: "normal",
                   marginBottom: 0,
-                  marginTop: '1em',
+                  marginTop: "1vw",
                 }}
               />
               <Container>
-                {
-                  this.props.user.id ?
-                    <Button
-                      href='/profile'
-                      primary
-                      size='huge'
-                      style={{
-                        fontSize: '2em',
-                        marginTop: '1em',
-                        marginBottom: '1em',
-                      }}
-                    >
-                      Profilom
-                      <Icon name='right arrow' />
-                    </Button>
-                      :
-                    <Button
-                      href='/api/v1/login/authsch/'
-                      primary
-                      size='huge'
-                      style={{
-                        fontSize: '2em',
-                        marginTop: '1em',
-                        marginBottom: '1em',
-                      }}
-                    >
-                      Bejelentkezés
-                      <Icon name='right arrow' />
-                    </Button>
-                }
+                {this.props.user.id ? (
+                <Button
+                as={Link}
+                to="/profile"
+                primary
+                size="huge"
+                style={{
+                fontSize: "2vw",
+                marginTop: "1vw",
+                marginBottom: "1vw",
+                fontWeight: "bold",
+                letterSpacing: "0.13vw",
+                }}
+                >
+                    Jelentkezés
+                <Icon name="right arrow" />
+                </Button>
+                ) : (
+                  <Button
+                    href="/oidc/authenticate/"
+                    primary
+                    size="huge"
+                    style={{
+                      fontSize: "2vw",
+                      marginTop: "1vw",
+                      marginBottom: "1vw",
+                      fontWeight: "bold",
+                      letterSpacing: "0.13vw",
+                    }}
+                  >
+                    Bejelentkezés
+                    <Icon name="right arrow" />
+                  </Button>
+                )}
               </Container>
             </Segment>
           </div>
         </div>
-        <Segment style={{ padding: '8em 0em' }} vertical>
-          <Container text>
-            <Header as='h3' style={{ fontSize: '2em' }}>
-              Kik is vagyunk mi?
+      );
+    }
+    if (view === 1) {
+      return (
+        <div>
+          <Slider {...settings}>
+            {this.props.images.map((image) => (
+              <div key={image}>
+                <img src={image.image} width={imageWidth} alt="" />
+              </div>
+            ))}
+          </Slider>
+          <div className="car-text-kszk">
+            <Segment textAlign="center" vertical>
+              <Header
+                as="h1"
+                content="Üdvözlünk a"
+                inverted
+                style={{
+                  fontSize: "5vw",
+                  fontWeight: "bold",
+                  marginBottom: 0,
+                }}
+              />
+              <Header
+                as="h1"
+                content="Kollégiumi Számítástechnikai Kör"
+                inverted
+                style={{
+                  fontSize: "6vw",
+                  fontWeight: "bold",
+                  marginBottom: "0.5vw",
+                  marginTop: "0.5vw",
+                }}
+              />
+              <Header
+                as="h1"
+                content="újoncképzésének weboldalán!"
+                inverted
+                style={{
+                  fontSize: "5vw",
+                  fontWeight: "bold",
+                  marginBottom: 0,
+                  marginTop: "0.5vw",
+                }}
+              />
+              <Image
+                className="kszklogo"
+                verticalAlign="middle"
+                src={KSZKbiglogo}
+                style={{ marginTop: "1vw", width: "20%" }}
+              />
+              <Header
+                as="h1"
+                content="Szeretettel várunk a KSZKépzésre!"
+                inverted
+                style={{
+                  fontSize: "5vw",
+                  fontWeight: "bold",
+                  marginBottom: 0,
+                  marginTop: "1vw",
+                }}
+              />
+              <Container>
+                {this.props.user.id ? (
+                  <Button
+                    as={Link}
+                    to="/profile"
+                    primary
+                    size="massive"
+                    style={{
+                      fontSize: "4vw",
+                      marginTop: "1.5vw",
+                      marginBottom: "1vw",
+                      fontWeight: "bold",
+                      letterSpacing: "0.15vw",
+                    }}
+                  >
+                    Jelentkezés
+                    <Icon name="right arrow" />
+                  </Button>
+                ) : (
+                  <Button
+                    href="/oidc/authenticate/"
+                    primary
+                    size="massive"
+                    style={{
+                      fontSize: "4vw",
+                      marginTop: "1vw",
+                      marginBottom: "1vw",
+                      fontWeight: "bold",
+                      letterSpacing: "0.15vw",
+                    }}
+                  >
+                    Bejelentkezés
+                    <Icon name="right arrow" />
+                  </Button>
+                )}
+              </Container>
+            </Segment>
+          </div>
+        </div>
+      );
+    }
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  renderText() {
+    const kszk_age = new Date().getFullYear() - 1976;
+    return (
+      <Segment style={{ padding: "1em 0em", fontFamily: "Arial" }} vertical>
+        <Container text>
+          <Segment inverted color="green" tertiary>
+            <Header as="h3" style={{ fontSize: "2em", fontFamily: "Arial" }}>
+              Bemutatkozó videók
             </Header>
-            <p style={{ fontSize: '1.33em' }}>
-              A Kollégiumi Számítástechnikai Kör az Egyetem legrégebben működő
-              és legnagyobb aktív, informatikával foglalkozó öntevékeny
-              csoportosulása, tavaly ünnepeltük 40. születésnapunkat. A patinás
-              név mögött vidám hangulatú, alkotó kedvű csapat rejlik, mely a Kar
-              jó szakmai képességű, számítástechnika iránt kiemelten érdeklődő
-              tagjaiból verbuválódott, és bővül évente új tehetségekkel, lelkes
-              informatikusokkal, villamosmérnökökkel.
+            <p style={{ fontSize: "1.33em", fontFamily: "Arial" }}>
+              A gólyakörtére készített videóinkat megnézhetitek a{" "}
+              <a
+                href="https://www.youtube.com/@kollegiumiszamitastechnika470/videos"
+                target="_blank"
+                rel="noopener noreferrer"
+                style={{ color: "white", textDecoration: "underline" }}
+              >
+                YouTube csatornánkon
+              </a>
+              !
             </p>
-            <Button size='large' href='/circles'>
-              Ismerd meg a köreinket! <Icon name='right arrow' />
-            </Button>
-            <Divider as='h4' className='header' style={{ margin: '3em 0em' }} />
-            <Header as='h3' style={{ fontSize: '2em' }}>
-              Lehetőségek
-            </Header>
-            <p style={{ fontSize: '1.33em' }}>
-              A KSZK a lehetőségek tárháza, a hely ahol Te – leendő mérnök –
-              minden területen kipróbálhatod, továbbképezheted magad. Nálunk
-              kibontakoztathatod kreativitásod, tapasztalatot, mérnöki
-              szemléletet szerezhetsz, miközben az ún. soft skill-jeidet is
-              fejlesztheted. Ha számodra a szakma hivatás, ha szeretsz új
-              dolgokat alkotni vagy csak jó társaságra vágysz, a legjobb helyre
-              kerültél. A reszort körei a szakma egy-egy meghatározó területével
-              foglalkoznak a fejlesztés és üzemeltetés területén.
+          </Segment>
+          <Header as="h3" style={{ fontSize: "2em", fontFamily: "Arial" }}>
+            Kik is vagyunk mi?
+          </Header>
+          <p style={{ fontSize: "1.33em", fontFamily: "Arial" }}>
+            A Kollégiumi Számítástechnikai Kör az Egyetem legrégebben működő és
+            legnagyobb aktív, informatikával foglalkozó öntevékeny
+            csoportosulása, idén ünnepeljük {kszk_age}. születésnapunkat. A
+            patinás név mögött vidám hangulatú, alkotó kedvű csapat rejlik, mely
+            a Kar jó szakmai képességű, számítástechnika iránt kiemelten
+            érdeklődő tagjaiból verbuválódott, és bővül évente új tehetségekkel,
+            lelkes informatikusokkal, villamosmérnökökkel.
+          </p>
+          <Button as={Link} size="large" to="/groups">
+            Ismerd meg a köreinket! <Icon name="right arrow" />
+          </Button>
+          <Divider as="h4" className="header" style={{ margin: "3em 0em" }} />
+          <Header as="h3" style={{ fontSize: "2em", fontFamily: "Arial" }}>
+            Lehetőségek
+          </Header>
+          <p style={{ fontSize: "1.33em", fontFamily: "Arial" }}>
+            A KSZK a lehetőségek tárháza, a hely ahol Te – leendő mérnök –
+            minden területen kipróbálhatod, továbbképezheted magad. Nálunk
+            kibontakoztathatod kreativitásod, tapasztalatot, mérnöki szemléletet
+            szerezhetsz, miközben az ún. soft skill-jeidet is fejlesztheted. Ha
+            számodra a szakma hivatás, ha szeretsz új dolgokat alkotni vagy csak
+            jó társaságra vágysz, a legjobb helyre kerültél. A reszort körei a
+            szakma egy-egy meghatározó területével foglalkoznak a fejlesztés és
+            üzemeltetés területén.
+          </p>
+          <Divider as="h4" className="header" style={{ margin: "3em 0em" }} />
+          <Header as="h3" style={{ fontSize: "2em", fontFamily: "Arial" }}>
+            Miért jó KSZK-snak lenni?
+          </Header>
+          <div
+            class="quote--container"
+            style={{ fontSize: "1.5em", fontFamily: "Arial" }}
+          >
+            <p class="quote">
+              Szerintem KSZK-snak jó lenni, mert rengeteget tanulok belőle.
+              Gyakorlok, hallok újdonságokat, kipróbálhatom magam mindenféle
+              szerepben, és közben még barátokat is szerzek. Ezek a barátságok,
+              tapasztalatok egyébként később is nagyon jól jönnek, például a
+              CV-mben egész erős fegyvertény, hogy ennyi mindent csináltam.
+              Tényleg rengeteget kaptam a reszorttól, szakmailag és emberileg
+              is. Ja, és szeretem, hogy a KSZK ilyen szabad, és abba kóstolok
+              bele, amibe akarok.
+            </p>
+            <p class="quote--author">&ndash; Feri</p>
+          </div>
+          <div
+            class="quote--container"
+            style={{ fontSize: "1.5em", fontFamily: "Arial" }}
+          >
+            <p class="quote">
+              A nulláról kezdtem a képzést és az egyetemi tanulmányaimat is,
+              semmilyen infós tudásom nem volt, de rengeteget fejlődtem a
+              KSZK-nak köszönhetően. Ezenkívül nem csak szakmai tudást
+              szereztem, hanem egy fantasztikus közösség részévé is váltam.
+            </p>
+            <p class="quote--author">&ndash; Patrik</p>
+          </div>
+          <div
+            class="quote--container"
+            style={{ fontSize: "1.5em", fontFamily: "Arial" }}
+          >
+            <p class="quote">
+              Amikor idejöttem egyetemre nem tudtam, hogy mennyire fogom
+              megtalálni a helyem. Aztán, elkezdtem megismerkedni a kari
+              közösséggel és barátokat szereztem, akik jelentős részét a
+              KSZK-ban ismertem meg, vagy velem csatlakozott ide. Együtt
+              foglalkozgatunk projektekkel, a Ház rendszereinek üzemeltetésével
+              és egyéb nagyon érdekes ügyes-bajos dolgokkal. Úgy érzem, hogy a
+              KSZK-ban igazán megtaláltam a helyem, mind emberileg, mind
+              szakmailag.
+            </p>
+            <p class="quote--author">&ndash; Mike</p>
+          </div>
+          <div
+            class="quote--container"
+            style={{ fontSize: "1.5em", fontFamily: "Arial" }}
+          >
+            <p class="quote">
+              Számtalan dologgal foglalkozunk, és tényleg azt csinálhatom, ami
+              csak érdekel. Emellett a KSZK-t a szívügyemnek tekintem, szerintem
+              a legjobb lehetőség a szakmai fejlődésen kívül életre szóló
+              barátságok alakítására.
             </p>
-            <Divider as='h4' className='header' style={{ margin: '3em 0em' }} />
-            <Header as='h3' style={{ fontSize: '2em' }}>
-              Képzésünk
+            <p class="quote--author">&ndash; Blint</p>
+          </div>
+          <Divider as="h4" className="header" style={{ margin: "3em 0em" }} />
+          <Header as="h3" style={{ fontSize: "2em", fontFamily: "Arial" }}>
+            Képzésünk
+          </Header>
+          <p style={{ fontSize: "1.33em", fontFamily: "Arial" }}>
+            Képzésünk végén Te is igazi KSZK-ssá válhatsz, hiszen rengeteg
+            szakmai tudást igyekszünk átadni nektek. A képzésalkalmak rendkívül
+            jó hangulatban telnek, és a szociális irányultságú foglalkozások
+            alatt egy nagyon jó csapat kovácsolódik az érdeklődőkből. Az első
+            képzés időpontja február 20. csütörtök 18:00, ettől kezdve pedig
+            minden héten egy közösségi és számos szakmai alkalom során
+            találkozunk. A képzésalkalmak után április 11-től 13-ig rendezünk
+            tábort. Az közösségi alkalmakon és a táboron kötelező a részvétel.
+          </p>
+          <Divider as="h4" className="header" style={{ margin: "3em 0em" }} />
+          <Segment inverted color="red" tertiary>
+            <Header as="h3" style={{ fontSize: "2em", fontFamily: "Arial" }}>
+              Korlátos férőhely
             </Header>
-            <p style={{ fontSize: '1.33em' }}>
-              Kilenc alkalmas képzésünk végén Te is igazi KSZK-ssá válhatsz,
-              hiszen rengeteg szakmai tudást igyekszünk átadni nektek. A
-              képzésalkalmak rendkívül jó hangulatban telnek, és a szociális
-              irányultságú foglalkozások alatt egy nagyon jó csapat kovácsolódik
-              az érdeklődőkből. Az első képzés időpontja február 20. hétfő
-              19:30, ettől kezdve minden héten találkozunk ugyanabban az
-              időpontban. A képzés ideje alatt március 10-12 között rendezünk
-              tábort. Az alkalmakon és a táborban kötelező a részvétel.
+            <p style={{ fontSize: "1.33em", fontFamily: "Arial" }}>
+              Általánosságban elmondható, hogy a KSZK tagjai rengeteg dologgal
+              foglalkoznak a hétköznapjaik során, hogy minden informatikai
+              rendszer úgy működjön a kollégiumban, ahogy kell. Így van ez
+              velünk képzőkkel is, emiatt a férőhelyek korlátosak.
             </p>
-          </Container>
-        </Segment>
+            <p style={{ fontSize: "1.33em", fontFamily: "Arial" }}>
+              Sajnos előfordulhat olyan eset, hogy valaki már nem fér be a
+              képzésre, ezért kérünk titeket, hogy ennek tudatában
+              jelentkezzetek majd. Ilyen esetben reméljük ez nem szegi
+              kedveteket és jövőre újra próbálkoztok majd!
+            </p>
+          </Segment>
+        </Container>
+      </Segment>
+    );
+  }
+
+  render() {
+    return (
+      <div>
+        <Responsive minWidth={600}>
+          <div className="car-image-kszk">
+            <div />
+            {this.renderSlider(0, "120%")}
+          </div>
+          {this.renderText()}
+        </Responsive>
+        <Responsive maxWidth={600}>
+          <div className="car-image-kszk">{this.renderSlider(1, "200%")}</div>
+          {this.renderText()}
+        </Responsive>
       </div>
     );
   }
 }
 
-const mapStateToProps = ({ user }) => ({
+const mapStateToProps = ({ user, images }) => ({
   user,
+  images,
 });
 
-export default connect(mapStateToProps, {})(Home);
+export default connect(mapStateToProps, { getImages })(Home);

src/components/pages/Homework.js

+import {
+  Button,
+  Container,
+  Header,
+  Icon,
+  Label,
+  Message,
+  Segment,
+  Table,
+} from 'semantic-ui-react';
+/* eslint-disable no-nested-ternary */
+import React, { Component } from 'react';
+import {
+  addTask,
+  deleteTask,
+  getDocuments,
+  getProfiles,
+  getSolutions,
+  getTasks,
+  setSelectedTask,
+} from '../../actions/homework';
+
+import AddSolutionForm from '../forms/AddSolutionForm';
+import AddTaskForm from '../forms/AddTaskForm';
+import ConfirmModal from '../forms/ConfirmModal';
+import EditTaskForm from '../forms/EditTaskForm';
+import InfoModal from '../forms/InfoModal';
+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
+// {rowstyle} - Table row style (red text, yellow bg, ...)
+const displayTypes = {
+  can_submit: {
+    text: 'Beadható',
+    icon: 'send',
+    rowstyle: { warning: false, positive: false, negative: false },
+  },
+  no_submit: {
+    text: 'Beadás elmaradt',
+    icon: 'warning circle',
+    rowstyle: { warning: true, positive: false, negative: false },
+  },
+  wait_correction: {
+    text: 'Javításra vár',
+    icon: 'wait',
+    rowstyle: { warning: true, positive: false, negative: false },
+  },
+  no_accept: {
+    text: 'Nem elfogadható',
+    icon: 'warning circle',
+    rowstyle: { warning: false, positive: false, negative: true },
+  },
+  accepted: {
+    text: 'Elfogadva',
+    icon: 'checkmark',
+    rowstyle: { warning: false, positive: true, negative: false },
+  },
+};
+
+export const customMessage = (header, text, marginBottom, warning) => (
+  <Message
+    style={{ marginBottom }}
+    icon={warning ? 'warning' : 'info'}
+    info
+    warning={warning}
+    header={header}
+    content={text}
+  />
+);
+
+class Homework extends Component {
+  componentDidMount() {
+    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
+    );
+
+    if (taskSolution.length === 0) {
+      if (moment().isBefore(task.deadline)) {
+        return 'can_submit';
+      }
+
+      return 'no_submit';
+    }
+
+    if (taskSolution[0].corrected === false) {
+      return 'wait_correction';
+    }
+
+    if (taskSolution[0].accepted === false) {
+      return 'no_accept';
+    }
+
+    return 'accepted';
+  }
+
+  // Returns table rows for the tasks
+  // 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
+    );
+
+    // Normal user
+    if (!staff) {
+      return homeworks.tasks
+        .filter((task) => moment().isBefore(task.deadline) === active)
+        .map((task) => (
+          // Style
+          <Table.Row
+            key={task.id}
+            warning={
+              displayTypes[this.getTaskDisplayStyle(task)].rowstyle.warning
+            }
+            positive={
+              displayTypes[this.getTaskDisplayStyle(task)].rowstyle.positive
+            }
+            negative={
+              displayTypes[this.getTaskDisplayStyle(task)].rowstyle.negative
+            }
+          >
+            {/* Form component */}
+            <Table.Cell>
+              <AddSolutionForm
+                taskid={task.id}
+                tasktitle={task.title}
+                taskdesc={task.text}
+                multiple={this.getTaskDisplayStyle(task) !== 'can_submit'}
+                disabled={moment().isAfter(task.deadline)}
+              />
+            </Table.Cell>
+            {/* Deadline Date */}
+            <Table.Cell>
+              {moment(task.deadline).format('YYYY. MM. DD. HH:mm')}
+            </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
+                }
+              >
+                {task.bits} bit
+              </Label>
+            </Table.Cell>
+            {/* Status (Javításra vár, ...) */}
+            <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 ? (
+                <div>
+                  <InfoModal
+                    button={
+                      <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
+                    }
+                    onAccept={() => {}}
+                  />
+                </div>
+              ) : (
+                ''
+              )}
+            </Table.Cell>
+          </Table.Row>
+        ));
+    }
+
+    // Staff
+
+    const deleteButton = (
+      <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) => (
+        <Table.Row
+          key={task.id}
+          warning={
+            displayTypes[this.getTaskDisplayStyle(task)].rowstyle.warning
+          }
+          positive={
+            displayTypes[this.getTaskDisplayStyle(task)].rowstyle.positive
+          }
+          negative={
+            displayTypes[this.getTaskDisplayStyle(task)].rowstyle.negative
+          }
+        >
+          {/* Form */}
+          <Table.Cell>
+            <SolutionDetailsForm
+              taskid={task.id}
+              tasktitle={task.title}
+              taskdesc={task.text}
+            />
+          </Table.Cell>
+          {/* Deadline Date */}
+          <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"
+              onAccept={() => this.props.deleteTask(task)}
+            />
+          </Table.Cell>
+        </Table.Row>
+      ));
+  }
+
+  // Active/Inactive tasks table
+  renderHomeworksTable(active, staff) {
+    let tableColor = 'green';
+    let marginBottom = '0em';
+
+    if (!active) {
+      tableColor = 'blue';
+      marginBottom = '3em';
+    }
+
+    if (!staff) {
+      return (
+        <Table color={tableColor} fixed style={{ marginBottom }}>
+          <Table.Header>
+            <Table.Row>
+              <Table.HeaderCell>
+                <Icon circular name="home" />
+                Feladat megnevezése / beadása
+              </Table.HeaderCell>
+              <Table.HeaderCell>
+                <Icon circular name="calendar" />
+                Beadási határidő
+              </Table.HeaderCell>
+              <Table.HeaderCell width={2}></Table.HeaderCell>
+              <Table.HeaderCell>
+                <Icon circular name="tasks" />
+                Állapot
+              </Table.HeaderCell>
+            </Table.Row>
+          </Table.Header>
+          <Table.Body>{this.renderTaskList(active, staff)}</Table.Body>
+        </Table>
+      );
+    }
+    return (
+      <Table color={tableColor} fixed style={{ marginBottom }}>
+        <Table.Header>
+          <Table.Row>
+            <Table.HeaderCell>
+              <Icon circular name="home" />
+              Feladat megnevezése / Beadások állapota
+            </Table.HeaderCell>
+            <Table.HeaderCell>
+              <Icon circular name="calendar" />
+              Beadási határidő
+            </Table.HeaderCell>
+            <Table.HeaderCell width={2}></Table.HeaderCell>
+            <Table.HeaderCell>
+              <Icon circular name="edit" />
+              Módosítás / Törlés
+            </Table.HeaderCell>
+          </Table.Row>
+        </Table.Header>
+        <Table.Body>{this.renderTaskList(active, staff)}</Table.Body>
+      </Table>
+    );
+  }
+
+  // Headers and stuff around the Tables
+  renderHomeworks(active, staff) {
+    let noTask = false;
+    let noTaskText = 'Jelenleg nincs egyetlen beadható feladat sem. ';
+    let marginBottom = '0em';
+    const noTaskHeaderText = 'Nincs feladat.';
+    let headerText = 'Aktív feladatok';
+
+    if (staff) {
+      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
+    ) {
+      noTask = true;
+    }
+
+    if (!active) {
+      if (staff) {
+        headerText =
+          'Lejárt határidejű feladatok kijavítása, módosítása vagy törlése';
+      } else {
+        headerText = 'Lejárt határidejű feladatok';
+      }
+      noTaskText = 'Jelenleg nincs egyetlen lejárt határidejű feladat sem.';
+      marginBottom = '3em';
+    }
+
+    return (
+      <Segment style={{ padding: '0 0 2em 0' }} vertical basic>
+        <Container>
+          <Header
+            as="h1"
+            dividing
+            content={headerText}
+            style={{
+              fontSize: '2em',
+              fontWeight: 'normal',
+              marginBottom: 0,
+              marginTop: '0.5em',
+            }}
+          />
+          {noTask ? (
+            customMessage(noTaskHeaderText, noTaskText, marginBottom, false)
+          ) : (
+            <div>{this.renderHomeworksTable(active, staff)}</div>
+          )}
+          {!active && !staff ? (
+            <Header
+              as="h3"
+              content={
+                <div>
+                  Jelenlegi bitjeid száma:
+                  <Label color="green" size="large">
+                    {this.props.user.bits} bit
+                  </Label>
+                </div>
+              }
+              style={{
+                fontWeight: 'normal',
+                marginTop: '0.5em',
+                marginBottom: '1em',
+              }}
+              textAlign="right"
+            />
+          ) : null}
+        </Container>
+      </Segment>
+    );
+  }
+
+  render() {
+    const { user } = this.props;
+
+    if (user.role === 'Student') {
+      return (
+        <div style={{ paddingBottom: '2em' }}>
+          {this.renderHomeworks(true, false)}
+          {this.renderHomeworks(false, false)}
+        </div>
+      );
+    }
+    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"
+                style={{
+                  fontSize: '2em',
+                  fontWeight: 'normal',
+                  marginBottom: '0.5em',
+                  marginTop: '0.5em',
+                }}
+              />
+              <Button.Group>
+                <AddTaskForm />
+              </Button.Group>
+            </Container>
+          </Segment>
+          {this.renderHomeworks(true, true)}
+          {this.renderHomeworks(false, true)}
+        </div>
+      );
+    }
+    return null; // ¯\_(ツ)_/¯
+  }
+}
+
+const mapStateToProps = ({ selectedTask, homeworks, user }) => ({
+  selectedTask,
+  homeworks,
+  user,
+});
+
+export default connect(mapStateToProps, {
+  getTasks,
+  setSelectedTask,
+  getSolutions,
+  getDocuments,
+  addTask,
+  deleteTask,
+  getProfiles,
+})(Homework);

src/components/pages/LeaderBoard.js

+import { Container, Table } from 'semantic-ui-react';
+import React, { Component } from 'react';
+
+import { connect } from 'react-redux';
+import { getTrainees } from '../../actions/statistics';
+
+class LeaderBoard extends Component {
+  UNSAFE_componentWillMount() {
+    this.props.getTrainees();
+  }
+
+  // Every event rendered
+  renderTraineeBits() {
+    return this.props.trainees
+      .sort(
+        (a, b) =>
+          (Number(b.homework_bits) + Number(b.events_visited) + Number(b.extra_bits)) -
+          (Number(a.homework_bits) + Number(a.events_visited) + Number(a.extra_bits))
+      )
+      .map((trainee) =>
+        trainee.role === 'Student' ? (
+          <Table.Row key={trainee.nick}>
+            <Table.Cell textAlign="center">{trainee.full_name}</Table.Cell>
+            <Table.Cell textAlign="center">{trainee.events_visited}</Table.Cell>
+            <Table.Cell textAlign="center">
+              {Number(trainee.homework_bits) + Number(trainee.extra_bits)}
+            </Table.Cell>
+            <Table.Cell textAlign="center">
+              {Number(trainee.homework_bits) + trainee.events_visited + Number(trainee.extra_bits)}
+            </Table.Cell>
+          </Table.Row>
+        ) : null
+      );
+  }
+
+  render() {
+    return (
+      <Container textAlign="center" style={{ overflowX: 'scroll' }}>
+        <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">Jelenlét</Table.HeaderCell>
+              <Table.HeaderCell textAlign="center">Bitek</Table.HeaderCell>
+              <Table.HeaderCell textAlign="center">Szumma</Table.HeaderCell>
+            </Table.Row>
+          </Table.Header>
+          <Table.Body>
+            {this.props.trainees ? (
+              this.renderTraineeBits()
+            ) : (
+              <Table.Row>
+                <Table.Cell>Nincsenek képződők</Table.Cell>
+              </Table.Row>
+            )}
+          </Table.Body>
+        </Table>
+      </Container>
+    );
+  }
+}
+
+const mapStateToProps = ({ trainees: { trainees }, user }) => ({
+  trainees,
+  user,
+});
+
+export default connect(mapStateToProps, { getTrainees })(LeaderBoard);

src/components/pages/Mentors.js

+import {
+  Card,
+  Container,
+  Header,
+  Icon,
+  Image,
+  Item,
+  Label,
+  Responsive,
+  Segment,
+} from 'semantic-ui-react';
+import React, { Component } from 'react';
+
+import { connect } from 'react-redux';
+import { getMentors } from '../../actions/mentors';
+
+class Mentors extends Component {
+  UNSAFE_componentWillMount() {
+    this.props.getMentors();
+  }
+
+  renderMentorsNormal() {
+    return this.props.mentors.map((item, index) => (
+      <Card style={{ maxWidth: '100%', minWidth: '100%' }}>
+        <Card.Content style={{ padding: '0' }}>
+          <Item.Group>
+            <Item>
+              {index % 2 === 0 ? (
+                <Item.Image size="medium" src={item.image} />
+              ) : null}
+              <Item.Content style={{ padding: '1rem' }}>
+                <Item.Header>{item.name}</Item.Header>
+                <Item.Description>
+                  <p dangerouslySetInnerHTML={{ __html: item.text }}></p>
+                </Item.Description>
+                <Item.Extra>
+                  <Label>
+                    <Icon name="mail" />
+                    {item.email}
+                  </Label>
+                </Item.Extra>
+              </Item.Content>
+              {index % 2 === 1 ? (
+                <Item.Image size="medium" src={item.image} />
+              ) : null}
+            </Item>
+          </Item.Group>
+        </Card.Content>
+      </Card>
+    ));
+  }
+
+  renderMentorsMobile() {
+    return this.props.mentors.map((item) => (
+      <Card key={item.id}>
+        <Image src={item.image} wrapped ui={false} />
+        <Card.Content>
+          <Card.Header>{item.name}</Card.Header>
+          <Card.Description>
+            <p dangerouslySetInnerHTML={{ __html: item.text }}></p>
+          </Card.Description>
+        </Card.Content>
+        <Card.Content extra>
+          <Label>
+            <Icon name="mail" />
+            {item.email}
+          </Label>
+        </Card.Content>
+      </Card>
+    ));
+  }
+
+  render() {
+    return (
+      <div>
+        <Segment inverted textAlign="center" vertical>
+          <Container>
+            <Header
+              as="h1"
+              content="Mentorok"
+              inverted
+              style={{
+                fontSize: '3em',
+                fontWeight: 'normal',
+                marginBottom: 0,
+                marginTop: '0.5em',
+              }}
+            />
+          </Container>
+        </Segment>
+
+        <Responsive minWidth={768}>
+          <Container style={{ paddingTop: '2em', paddingBottom: '5em' }}>
+            {this.renderMentorsNormal()}
+          </Container>
+        </Responsive>
+
+        <Responsive minWidth={551} maxWidth={767}>
+          <Container style={{ paddingTop: '2em', paddingBottom: '5em' }}>
+            <Card.Group centered itemsPerRow={2}>
+              {this.renderMentorsMobile()}
+            </Card.Group>
+          </Container>
+        </Responsive>
+
+        <Responsive maxWidth={550}>
+          <Container style={{ paddingTop: '2em', paddingBottom: '5em' }}>
+            <Card.Group centered itemsPerRow={1}>
+              {this.renderMentorsMobile()}
+            </Card.Group>
+          </Container>
+        </Responsive>
+      </div>
+    );
+  }
+}
+
+const mapStateToProps = ({ mentors, user }) => ({ mentors, user });
+
+export default connect(mapStateToProps, { getMentors })(Mentors);

src/components/pages/News.css

+.news-extra {
+  color: grey;
+  font-size: 0.75em;
+  font-style: italic;
+  font-family: fantasy;
+  text-align: justify;
+}
+
+.news-text {
+  font-size: 1.15em;
+  font-family: Arial, Helvetica, sans-serif;
+  text-align: justify;
+}

src/components/pages/News.js

+import './News.css';
+
+import { Button, Container, Grid, Item, Segment } from 'semantic-ui-react';
+import React, { Component } from 'react';
+import { deleteNews, getNews, setSelectedNews } from '../../actions/news';
+
+import AddNewsForm from '../forms/AddNewsForm';
+import ConfirmModal from '../forms/ConfirmModal';
+import EditNewsForm from '../forms/EditNewsForm';
+import { connect } from 'react-redux';
+import moment from 'moment';
+
+const linkify = (text) => {
+  const urlRegex = /(https?:\/\/[^\s]+)/g;
+  return text.split(urlRegex).map((part, index) =>
+    part.match(urlRegex) ? (
+      <a key={index} href={part} target="_blank" rel="noopener noreferrer">
+        {part}
+      </a>
+    ) : (
+      part
+    )
+  );
+};
+
+class News extends Component {
+  UNSAFE_componentWillMount() {
+    this.props.getNews();
+  }
+
+  renderNews() {
+    return this.props.news.map((item) => (
+      <Item key={item.id}>
+        <Item.Content>
+          <Container text textAlign="left">
+            <Item.Header style={{ fontSize: '2em', width: '100%' }}>
+              <Grid>
+                <Grid.Column
+                  floated="left"
+                  width={this.props.user.role === 'Staff' ? 12 : 16}
+                >
+                  {item.title}
+                </Grid.Column>
+                {this.props.user.role === 'Staff' ? (
+                  <Grid.Column floated="right" width={4}>
+                    <EditNewsForm
+                      onClick={() => this.props.setSelectedNews(item)}
+                    />
+                    <ConfirmModal
+                      text={`törölni akarod a következő hírt: ${item.title}`}
+                      button={
+                        <Button compact color="red" size="mini">
+                          Törlés
+                        </Button>
+                      }
+                      onAccept={() => this.props.deleteNews(item)}
+                    />
+                  </Grid.Column>
+                ) : null}
+              </Grid>
+            </Item.Header>
+            <Item.Meta style={{ fontSize: '0.75em', fontStyle: 'italic' }}>
+              Közzétéve:
+              {moment(item.created_at).format('LLLL')}
+            </Item.Meta>
+            <Item.Description className="news-text" style={{ fontSize: '1em' }}>
+              {this.renderMultiLine(item.text)}
+            </Item.Description>
+          </Container>
+        </Item.Content>
+      </Item>
+    ));
+  }
+
+  renderMultiLine = (text) => {
+    const strings = text.split('\n');
+    return strings.map((string) => <p key={Math.random()}>{linkify(string)}</p>);
+  };
+
+  render() {
+    return (
+      <div style={{ paddingTop: '1em', paddingBottom: '5em' }}>
+        <Segment vertical>
+          {/*  { this.props.user.is_superuser ? <AddNewsForm /> : ''} */}
+          <Container text textAlign="center">
+            {this.props.user.role === 'Staff' ? <AddNewsForm /> : null}
+            <Item.Group divided>{this.renderNews()}</Item.Group>
+          </Container>
+        </Segment>
+      </div>
+    );
+  }
+}
+
+const mapStateToProps = ({ news, user }) => ({ news, user });
+
+export default connect(mapStateToProps, {
+  getNews,
+  deleteNews,
+  setSelectedNews,
+})(News);

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>

src/components/pages/Presence.js

+import { Container, Icon, Table } from 'semantic-ui-react';
+import React, { Component } from 'react';
+import { getStaffEvents, getTrainees } from '../../actions/statistics';
+
+import { connect } from 'react-redux';
+
+class Presence extends Component {
+  UNSAFE_componentWillMount() {
+    this.props.getTrainees();
+    this.props.getStaffEvents();
+  }
+
+  // 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" key={Math.random()}>
+            <Icon color="green" name="checkmark" />
+          </Table.Cell>
+        );
+      }
+      return (
+        <Table.Cell textAlign="center" key={Math.random()}>
+          <Icon color="red" name="cancel" />
+        </Table.Cell>
+      );
+    });
+  }
+
+  // Every event rendered
+  renderTraineesWithEvents() {
+    return this.props.trainees.map((trainee) =>
+      trainee.role === 'Student' ? (
+        <Table.Row key={Math.random()}>
+          <Table.Cell textAlign="center">{trainee.full_name}</Table.Cell>
+          {this.renderVisitedStatus(trainee)}
+        </Table.Row>
+      ) : null
+    );
+  }
+
+  // Column for each event
+  renderTableHeaderEvents() {
+    return this.props.events.map((event) => (
+      <Table.HeaderCell textAlign="center" key={event.id}>
+        {event.name}
+      </Table.HeaderCell>
+    ));
+  }
+
+  render() {
+    return (
+      <Container textAlign="center" style={{ overflowX: 'scroll' }}>
+        <Table color="blue" unstackable celled selectable compact>
+          <Table.Header>
+            <Table.Row>
+              <Table.HeaderCell textAlign="center">Képződők</Table.HeaderCell>
+              {this.renderTableHeaderEvents()}
+            </Table.Row>
+          </Table.Header>
+          <Table.Body>
+            {this.props.trainees ? (
+              this.renderTraineesWithEvents()
+            ) : (
+              <Table.Row>
+                <Table.Cell>Nincsenek képződők</Table.Cell>
+              </Table.Row>
+            )}
+          </Table.Body>
+        </Table>
+      </Container>
+    );
+  }
+}
+
+const mapStateToProps = ({
+  trainees: { trainees },
+  events: { events },
+  user,
+}) => ({ trainees, events, user });
+
+export default connect(mapStateToProps, { getTrainees, getStaffEvents })(
+  Presence
+);