src/components/forms/EditTaskForm.js

+import { Button, Form, Icon, Input, Modal, TextArea } from 'semantic-ui-react';
+import React, { Component } from 'react';
+import {
+  clearWrite,
+  editTask,
+  writeTask,
+  writeTaskDeadline,
+} from '../../actions/homework';
+
+import { DateTimeInput } from 'semantic-ui-calendar-react';
+import { connect } from 'react-redux';
+import moment from 'moment';
+
+class EditTaskForm extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      showModal: false,
+    };
+  }
+
+  render() {
+    const { id, title, text, deadline, bits } = this.props.selectedTask;
+    return (
+      <Modal
+        open={this.state.showModal}
+        onOpen={this.props.onClick}
+        closeOnDimmerClick
+        onClose={() => this.setState({ showModal: false })}
+        trigger={
+          <Button
+            inverted
+            style={{ marginRight: '2em' }}
+            color="orange"
+            onClick={() => {
+              this.setState({ showModal: true });
+            }}
+          >
+            <Icon name="edit" /> Módosítás
+          </Button>
+        }
+      >
+        <Modal.Header>A{title} nevű feladat módosítása:</Modal.Header>
+        <Modal.Content>
+          <Form>
+            <Form.Field
+              control={Input}
+              label="Cím:"
+              name="title"
+              onChange={(e) => this.props.writeTask(e)}
+              value={title}
+              placeholder="Add meg a feladat címét."
+            />
+            <Form.Field
+              control={TextArea}
+              label="Leírás:"
+              name="text"
+              onChange={(e) => this.props.writeTask(e)}
+              value={text}
+              placeholder="Add meg a feladat leírását..."
+            />
+            <Form.Field
+              control={DateTimeInput}
+              label="Beadási határidő (a jelenlegi időnél későbbi időpont):"
+              name="deadline"
+              placeholder="Beadási határidő"
+              iconPosition="left"
+              dateTimeFormat="YYYY-MM-DDTHH:mm"
+              onChange={(e, { name, value }) => {
+                this.props.writeTaskDeadline({ name, value });
+              }}
+              value={deadline}
+            />
+            <Form.Field
+              control={Input}
+              type="number"
+              label="Bitek száma:"
+              name="bits"
+              onChange={(e) => this.props.writeTask(e)}
+              value={bits}
+              placeholder="Add meg a feladatért kapható bitek számát ..."
+            />
+          </Form>
+        </Modal.Content>
+        <Modal.Actions>
+          <Button
+            inverted
+            color="red"
+            onClick={() => {
+              this.setState({ showModal: false });
+              this.props.clearWrite();
+            }}
+          >
+            <Icon name="remove" /> Mégse
+          </Button>
+          <Button
+            inverted
+            color="green"
+            disabled={
+              title === '' ||
+              (title !== undefined ? title.length > 150 : false) ||
+              text === '' ||
+              deadline === '' ||
+              moment().isAfter(deadline)
+            }
+            onClick={() => {
+              this.props.editTask({
+                id,
+                title,
+                text,
+                deadline,
+                bits,
+              });
+              this.setState({ showModal: false });
+              this.props.clearWrite();
+            }}
+          >
+            <Icon name="checkmark" /> Módosítás
+          </Button>
+        </Modal.Actions>
+      </Modal>
+    );
+  }
+}
+
+const mapStateToProps = ({ selectedTask, user }) => ({ selectedTask, user });
+
+export default connect(mapStateToProps, {
+  writeTask,
+  writeTaskDeadline,
+  editTask,
+  clearWrite,
+})(EditTaskForm);

src/components/forms/Forms.css

+#task,
+#tasknote {
+  border: none;
+  background-color: inherit;
+  color: teal;
+}
+
+#tasknote {
+  color: black;
+}
+
+#task:hover,
+#tasknote:hover {
+  color: red;
+  cursor: pointer;
+}

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/images/kszk_logo.svg

+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="464.000000pt" height="450.000000pt" viewBox="0 0 464.000000 450.000000"
+ preserveAspectRatio="xMidYMid meet">
+
+<g transform="translate(0.000000,450.000000) scale(0.100000,-0.100000)"
+fill="#FFFFFF" stroke="none">
+<path d="M2375 4473 c-880 -75 -1579 -448 -1987 -1058 -71 -107 -184 -335
+-228 -460 -47 -134 -86 -293 -111 -455 -20 -123 -23 -184 -24 -395 0 -265 8
+-349 51 -545 114 -511 396 -899 854 -1172 260 -155 575 -260 960 -321 182 -29
+682 -31 885 -4 334 45 587 126 839 268 152 86 416 250 416 259 0 13 -179 230
+-190 230 -5 0 -40 -20 -77 -44 -298 -192 -696 -338 -1076 -395 -392 -59 -654
+-49 -1003 39 -365 93 -671 257 -899 485 -251 251 -389 545 -441 938 -22 166
+-15 483 15 650 121 685 564 1193 1262 1451 297 109 574 160 874 158 273 -1
+491 -37 745 -124 430 -147 775 -432 915 -755 106 -244 131 -522 76 -843 -48
+-280 -152 -499 -320 -674 -67 -69 -201 -176 -221 -176 -9 0 -83 185 -105 263
+-9 32 -14 64 -12 71 3 8 82 82 176 165 186 166 301 297 301 344 0 23 -7 31
+-35 43 -39 16 -102 18 -137 5 -13 -5 -111 -77 -218 -159 -107 -83 -196 -150
+-197 -148 -7 6 71 299 113 429 26 78 91 253 145 388 55 136 99 254 99 263 0
+44 -148 74 -221 43 -35 -14 -38 -20 -88 -163 -83 -235 -472 -1401 -530 -1590
+-52 -169 -52 -171 -36 -210 37 -93 146 -99 214 -12 30 38 96 178 134 285 l33
+92 69 -142 c110 -226 183 -284 342 -275 81 4 200 57 299 132 83 62 217 204
+282 299 124 180 227 445 269 692 23 137 26 498 5 615 -84 470 -302 835 -662
+1110 -285 217 -667 359 -1074 399 -100 10 -385 12 -481 4z"/>
+<path d="M1166 3282 l-38 -17 -95 -290 c-99 -305 -343 -1098 -412 -1345 -64
+-225 -70 -299 -30 -336 70 -63 180 49 275 284 l37 90 37 -56 c69 -106 175
+-196 274 -235 72 -28 176 -27 240 2 l49 21 26 -23 c88 -81 196 -129 292 -130
+54 -1 73 4 113 27 131 77 162 274 81 512 -48 139 -65 222 -65 315 0 90 15 139
+95 299 51 103 56 120 52 164 -7 81 -66 116 -194 116 -54 0 -67 -4 -93 -27 -27
+-25 -36 -50 -85 -238 -77 -298 -214 -652 -274 -708 -14 -14 -53 -43 -85 -66
+-78 -54 -118 -55 -168 -5 -59 59 -118 192 -118 267 0 7 65 70 144 140 234 207
+315 301 302 352 -7 29 -36 36 -97 25 -82 -16 -136 -49 -314 -195 -63 -53 -115
+-92 -115 -88 0 20 55 212 97 338 66 200 124 354 209 556 41 97 74 188 74 202
+0 55 -133 86 -214 49z m594 -1598 c11 -49 20 -109 20 -133 0 -43 0 -43 -22
+-27 -13 8 -42 28 -65 43 -23 16 -42 31 -43 34 0 12 81 181 86 177 2 -3 13 -45
+24 -94z"/>
+<path d="M3015 2534 c-16 -2 -77 -9 -135 -15 -151 -16 -399 -72 -444 -101 -96
+-62 -77 -194 30 -214 25 -5 86 0 173 15 74 12 136 20 138 18 2 -3 -93 -93
+-211 -201 -253 -232 -388 -372 -436 -452 -42 -71 -48 -147 -14 -204 46 -79
+117 -99 288 -81 249 27 429 77 492 136 29 28 34 39 34 78 0 38 -5 49 -30 70
+-42 36 -125 51 -244 44 l-99 -6 64 56 c35 31 148 140 250 242 203 203 355 386
+365 437 13 69 -40 156 -104 174 -36 10 -57 10 -117 4z"/>
+</g>
+</svg>

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/Groups.js

+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();
+  }
+
+  render() {
+    return (
+      <div>
+        <Segment inverted textAlign="center" vertical>
+          <Container>
+            <Header
+              as="h1"
+              content="Köreink"
+              inverted
+              style={{
+                fontSize: '3em',
+                fontWeight: 'normal',
+                marginBottom: 0,
+                marginTop: '0.5em',
+              }}
+            />
+          </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

+.car-image-kszk {
+  position: relative;
+}
+
+.car-text-kszk {
+  position: absolute;
+  width: 100%;
+  top: 1vw;
+  text-shadow: black 0px 0px 10px, black 0px 0px 6px;
+  -webkit-text-fill-color: white;
+}
+
+.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 from 'react';
+import "./Home.css";
 
-const Home = () => (
-  <div>
-    <h1>Welcome to the Tornadoes Website!</h1>
-  </div>
-);
+import {
+  Button,
+  Container,
+  Divider,
+  Header,
+  Icon,
+  Image,
+  Responsive,
+  Segment,
+} from "semantic-ui-react";
+/* eslint-disable react/jsx-props-no-spreading */
+import React, { Component } from "react";
 
-export default Home;
+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,
+  autoplay: true,
+  arrows: false,
+  infinite: true,
+  speed: 2000,
+  autoplaySpeed: 4000,
+  slidesToShow: 1,
+  slidesToScroll: 1,
+  centerMode: true,
+  lazyLoad: true,
+  initialSlide: Math.floor(Math.random() * 32 + 1),
+};
+
+class Home extends Component {
+  UNSAFE_componentWillMount() {
+    this.props.getImages();
+  }
+
+  renderSlider(view, imageWidth) {
+    if (view === 0) {
+      return (
+        <div>
+          {!!this.props.images}
+          <Slider {...settings}>
+            {this.props.images &&
+              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: "3vw",
+                  fontWeight: "normal",
+                  marginBottom: 0,
+                }}
+              />
+              <Header
+                as="h1"
+                content="Kollégiumi Számítástechnikai Kör"
+                inverted
+                style={{
+                  fontSize: "3.5vw",
+                  fontWeight: "bold",
+                  marginBottom: "0.5vw",
+                  marginTop: "0.5vw",
+                }}
+              />
+              <Header
+                as="h1"
+                content="újoncképzésének weboldalán!"
+                inverted
+                style={{
+                  fontSize: "3vw",
+                  fontWeight: "normal",
+                  marginBottom: 0,
+                  marginTop: "0.5vw",
+                }}
+              />
+              <Image
+                verticalAlign="middle"
+                src={KSZKbiglogo}
+                style={{ marginTop: "1vw", width: "17%" }}
+              />
+              <Header
+                as="h1"
+                content="Szeretettel várunk a KSZKépzésre!"
+                inverted
+                style={{
+                  fontSize: "3vw",
+                  fontWeight: "normal",
+                  marginBottom: 0,
+                  marginTop: "1vw",
+                }}
+              />
+              <Container>
+                {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>
+      );
+    }
+    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", 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>
+          </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>
+            <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", 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>
+            <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, images }) => ({
+  user,
+  images,
+});
+
+export default connect(mapStateToProps, { getImages })(Home);

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);