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

-import React, { Component } from 'react';
-import { Container, Header, Segment, Divider } from 'semantic-ui-react';
 import './Groups.css';
 
-export default class Groups extends Component {
+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>
+        <Segment inverted textAlign="center" vertical>
           <Container>
             <Header
-              as='h1'
-              content='Köreink'
+              as="h1"
+              content="Köreink"
               inverted
               style={{
                 fontSize: '3em',
@@ -22,70 +31,26 @@ export default class Groups extends Component {
           </Container>
         </Segment>
 
-        <Segment style={{ padding: '8em 0em' }} vertical>
+        <Segment style={{ padding: '1em 0em 5em' }} vertical>
           <Container text>
-            <Header as='h3' style={{ fontSize: '2em' }}>DevTeam</Header>
-            <p className='paragraph'>
-              A DevTeam a KSZK fejlesztő köre. Az informatika számos területével foglalkoznak, többek között például alkalmazás- és mobilszoftver fejlesztéssel, weblapkészítéssel. Ezen felül találkozhatsz mikrokontrollerek programozásával, legyen az akár Raspberry Pi vagy Arduino. Saját ötleteid megvalósításában is szívesen nyújtanak segítő kezet, illetve egyes gyűléseiken gyorstalpalókat tartanak, hogy az érdeklődők mielőbb be tudjanak csatlakozni a munkába.
-            </p>
-            <p className='paragraph'>
-              Jelenlegi projektjeik közé tartozik egy Schönherz szintű kölcsönzési rendszer kialakítása, egy gyakorlóoldal készítése, melyen egyetemi tárgyak ZH-ira, vizsgáira lehet készülni, a tanuló helyiségek foglaltságát vizsgáló rendszer bevezetése, de szívesen viszik érdeklődő, lelkes tagjaik új projektötleteit is.
-            </p>
-            <p className='paragraph'>
-              A kör szeretettel vár mindenkit, legyen akár profi fejlesztő, vagy olyan, aki csak most ismerkedik a fejlesztés szépségeivel – náluk mindenki talál a képességeinek megfelelő elfoglaltságot.
-            </p>
-
-            <Divider as='h4' className='header' style={{ margin: '3em 0em' }} />
-            <Header as='h3' style={{ fontSize: '2em' }}>Hallgatói Tudásbázis</Header>
-            <p className='paragraph'>
-              A HaT (Hallgatói Tudásbázis) a VIK Wiki adminisztrációjáért, illetve üzemeltetéséért, fejlesztéséért felelős kör. Nekik köszönhető a Wiki rendezett állapota. Odafigyelnek rá, hogy kövessék a szerkesztői szokásokat, és rendszeresen felmérik, milyen újításra van kereslet. Azoknak a jelentkezését várják, akik nem riadnak vissza egy (rosszabb napjain) napi ötezer oldalmegtekintést produkáló rendszer ápolgatásától.
-            </p>
-
-            <Divider as='h4' className='header' style={{ margin: '3em 0em' }} />
-            <Header as='h3' style={{ fontSize: '2em' }}>NETeam</Header>
-            <p className='paragraph'>
-              A NETeam foglalkozik a kollégiumi hálózati infrastruktúra üzemeltetésével és fejlesztésével. Biztosítják a hálózat folyamatos működését, követik az új hálózati technológiák alakulását, igyekeznek gyakorlatban is kipróbálni őket, alkalomadtán pedig cégekkel kapcsolatot tartva vesznek részt új megoldások tesztelésében is.
-            </p>
-            <p className='paragraph'>
-              A Schönherzben a 90-es évek óta üzemelteti a Házat lefedő hálózatot a KSZK, mely azóta többször teljes cserén esett át. A KSZK reszorttá válása előtt a NETeam egy erre szakosodott csoportja volt, 2014 óta pedig önálló körként folytatja tevékenységét. A kör tagjai hagyományosan a NetAdmin és segéd-NetAdminok, akik a kollégiumi hálózat fenntartásáért felelősek, illetve a Netikai Bizottság elnöke és tagjai, akik a hálózathasználati szabályzatot tartatják be, illetve a hálózathasználati szabályzattal szemben elkövetett kihágásokat felügyelik és szankcionálják.
-            </p>
-            <p className='paragraph'>
-              Az ide kerülőknek lehetőségük van bekapcsolódni az ISO/OSI modell majdnem minden rétegében működő szolgáltatások üzemeltetésébe és fejlesztésébe, amit szolgáltatástól függően akár az egész karon használnak. Ilyen például a Cisco eszközök konfigurációja, WiFi hálózat, VoIP, VPN, DNS/Dinamikus DNS üzemeltetése, fejlesztése, felhasználói adatbázis kezelése, forgalommonitorozás. Ezek széleskörű rálátást engednek egy komplex hálózatra és a használt technológiák működésére. A használt hálózattól függetlenül kialakított router laborban pedig lehetőség van szinte bármilyen, az iparban használt switching/routing megoldás próba szintű felépítésére.
-            </p>
-            <p className='paragraph'>
-              Jelenleg várható legnagyobb projektjük a Házat teljes egészében lefedő WiFi hálózat kiépítése lesz, de a következő évben kilátásban van a Software Defined Networking megoldásokkal való ismerkedés, illetve a router labor továbbfejlesztése is.
-            </p>
-            <p className='paragraph'>
-              Aki csatlakozik a körbe és hálózatot vagy szolgáltatásokat üzemeltet, fejleszt, felelősséggel fog tartozni az általa irányított rendszerért, ezzel pedig fontos része lesz a Schönherzes közéletnek. Ez a felelősség, az ezzel járó nem kizárólag szakmai tapasztalat és technikai tudás pedig egy későbbi önéletrajzban is olyan tényező tud lenni, amivel kevés frissen végzett hálózati szakember rendelkezik.
-            </p>
-
-            <Divider as='h4' className='header' style={{ margin: '3em 0em' }} />
-            <Header as='h3' style={{ fontSize: '2em' }}>SecurITeam</Header>
-            <p className='paragraph'>
-              A SecurITeam-ben te is megismerkedhetsz az IT biztonságban használt technikákkal: weboldalakat, szervereket, zárakat és még hardvereket is törnek.
-            </p>
-            <p className='paragraph'>
-              Csináltál egy weboldalt vagy appot, de nem vagy meggyőződve arról, hogy biztonságos? Náluk mind a támadó, mind a védekező oldal technikáiról tanulhatsz, és ki is próbálhatod a tudásodat élőben. Az SQL injection, programok visszafejtése és exploitálása, webes alkalmazások biztonságának vizsgálata, ismert támadások (pl. Shellshock, Meltdown) kipróbálása, gyenge titkosítások megkerülése, valamint a privacy védelme mind olyan dolgok, amivel ez a kör foglalkozik. A szoftveres témák mellett a fizikai biztonságra is hangsúlyt fektetnek, legyen az Bluetooth sniffing, rádiós lehallgatás, RFID klónozás vagy lockpicking, náluk megtalálod ez ehhez szükséges eszközöket és szaktudást!
-            </p>
-            <p className='paragraph'>
-              A kör előadásokat, tanfolyamokat és workshopokattart, illetve a Schönherzes infrastruktúra biztonságát rendszeresen pentestekkel ellenőrzik.
-            </p>
-            <p className='paragraph'>
-              A körben lehetőséged adódik arra, hogy a korábban felsorolt tevékenységek bármelyikével foglalkozz, tanulj, versenyezz IT biztonsági versenyeken (CTF), illetve a Wargame fejlesztésébe is be tudsz csatlakozni.
-            </p>
-
-            <Divider as='h4' className='header' style={{ margin: '3em 0em' }} />
-            <Header as='h3' style={{ fontSize: '2em' }}>Sysadmin</Header>
-            <p className='paragraph'>
-              A Sysadmin a Schönherz szerverüzemeltetésével foglalkozó öntevékeny köre. A kollégiumban működő IT szolgáltatásokat nyújtó infrastruktúrát ők felügyelik, fejlesztik. Az általuk használt szoftverek között megtalálhatóak Linux, BSD, Solaris valamint Windows alapú megoldások is. Az infrastruktúra VPN szerverének segítségével akár otthonról is hozzáférhetsz azokhoz az erőforrásokhoz, amelyek csak az egyetemi hálózatból elérhetők. 2014 végén indult a legfiatalabb, RemoteApp névre hallgató szolgáltatásuk, mellyel úgy értheted el az oktatásban is használt (és egyéb) szoftvereket, hogy nem szükséges azokat telepítened a gépedre. A felhasználói igények alapján folyamatosan bővítik szolgáltatásaik palettáját.
-            </p>
-            <p className='paragraph'>
-              Minden félévben indítanak új projekteket. Jelenleg és a következő félévekben egy Docker (Kubernetes) alapú container cluster fejlesztésén és üzembe helyezésén, illetve konfiguráció menedzsment bevezetésén dolgoznak. Az új dolgok mellett persze komoly hangsúlyt fektetnek a jelenleg üzemelő szerverek folyamatos karbantartására is. Náluk megtanulhatod, hogyan kell egy több fizikai hosztból álló, körülbelül 150 virtuális szervert kiszolgáló virtualizációs clustert üzemeltetni, de akár a webhosting területén is fejlesztheted tudásod a Ház legnagyobb (~200 weboldat kiszolgáló) szerverének felügyelete során. Ha szeretnél a felszín mögé látni, és releváns szakmai tapasztalatot szerezni a területen, akkor köztük a helyed. Az előismeret nem követelmény, a lelkesedés igen.
-            </p>
-
+            {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 { Link } from 'react-router-dom';
-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,
@@ -25,185 +30,393 @@ const settings = {
   slidesToScroll: 1,
   centerMode: true,
   lazyLoad: true,
-  initialSlide: Math.floor((Math.random() * 32) + 1),
+  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(32).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>
+              <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>
+          <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: '3vw',
-                  fontWeight: 'normal',
+                  fontSize: "5vw",
+                  fontWeight: "bold",
                   marginBottom: 0,
-                  marginTop: '0.5vw',
                 }}
               />
               <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: '4vw',
-                  fontWeight: 'bold',
-                  marginBottom: '0.5vw',
-                  marginTop: '0.5vw',
+                  fontSize: "6vw",
+                  fontWeight: "bold",
+                  marginBottom: "0.5vw",
+                  marginTop: "0.5vw",
                 }}
               />
               <Header
-                as='h1'
-                content='újoncképzésének weboldalán!'
+                as="h1"
+                content="újoncképzésének weboldalán!"
                 inverted
                 style={{
-                  fontSize: '3vw',
-                  fontWeight: 'normal',
+                  fontSize: "5vw",
+                  fontWeight: "bold",
                   marginBottom: 0,
-                  marginTop: '0.5vw',
+                  marginTop: "0.5vw",
                 }}
               />
               <Image
-                verticalAlign='middle'
+                className="kszklogo"
+                verticalAlign="middle"
                 src={KSZKbiglogo}
-                style={{ marginTop: '4vw', width: '15%' }}
+                style={{ marginTop: "1vw", width: "20%" }}
               />
               <Header
-                as='h1'
-                content='Szeretettel várunk a KSZKépzésre!'
+                as="h1"
+                content="Szeretettel várunk a KSZKépzésre!"
                 inverted
                 style={{
-                  fontSize: '3vw',
-                  fontWeight: 'normal',
+                  fontSize: "5vw",
+                  fontWeight: "bold",
                   marginBottom: 0,
-                  marginTop: '1vw',
+                  marginTop: "1vw",
                 }}
               />
               <Container>
-                {
-                  this.props.user.id ?
-                    <Button
-                      as={Link}
-                      to='/profile'
-                      primary
-                      size='huge'
-                      style={{
-                        fontSize: '2vw',
-                        marginTop: '1vw',
-                        marginBottom: '1vw',
-                      }}
-                    >
-                      Jelentkezés
-                      <Icon name='right arrow' />
-                    </Button>
-                      :
-                    <Button
-                      href='/api/v1/login/authsch/'
-                      primary
-                      size='huge'
-                      style={{
-                        fontSize: '2vw',
-                        marginTop: '1vw',
-                        marginBottom: '1vw',
-                      }}
-                    >
-                      Bejelentkezés
-                      <Icon name='right arrow' />
-                    </Button>
-                }
+                {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>
-        <Segment style={{ padding: '8em 0em' }} vertical>
-          <Container text>
-            <Header as='h3' style={{ fontSize: '2em' }}>
-              Kik is vagyunk mi?
+      );
+    }
+  }
+
+  // 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, idén ünnepeljük 42. 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 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' }}>
-              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>
-            <Divider as='h4' className='header' style={{ margin: '3em 0em' }} />
-            <Header as='h3' style={{ fontSize: '2em' }}>
-              Képzésünk
+            <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' }}>
-              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 19. hétfő
-              20:00, ettől kezdve pedig minden héten találkozunk ugyanabban az
-              időpontban. A képzés ideje alatt március 9-11 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>
+            <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>
-            <Divider as='h4' className='header' style={{ margin: '3em 0em' }} />
-            <Segment inverted color='red' tertiary>
-              <Header as='h3' style={{ fontSize: '2em' }}>
-                Korlátos férőhely
-              </Header>
-              <p style={{ fontSize: '1.33em' }}>
-                Á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 hetente csak egy képzésalkalmat tudunk tartani. Mivel az oktatóterem férőhelyében korlátozott, ezért a képzésre maximum 35 embert tudunk befogadni.
-              </p>
-              <p style={{ fontSize: '1.33em' }}>
-                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>
+        </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 { Container, Header, Segment, Divider } from 'semantic-ui-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';
 
-import { getNews } from '../../actions';
+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 {
-
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     this.props.getNews();
   }
 
-  render_news() {
-    const news = this.props.news;
-
-    return news.map( (item, index) => (
-      <div key={index}>
-        { index > 0 ? <Divider /> : ''}
-        <Header as='h3' style={{ fontSize: '2em' }}>{item.title}</Header>
-        <p style={{ fontSize: '1.33em' }}>{item.text}</p>
-      </div>
+  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>
-        <Segment inverted textAlign='center' vertical>
-          <Container>
-            <Header
-              as='h1'
-              content='Hírek'
-              inverted
-              style={{
-                fontSize: '3em',
-                fontWeight: 'normal',
-                marginBottom: 0,
-                marginTop: '0.5em',
-              }}
-            />
-          </Container>
-        </Segment>
-
-        <Segment style={{ padding: '8em 0em' }} vertical>
-          <Container text>
-            {this.render_news()}
+      <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>
@@ -52,7 +92,10 @@ class News extends Component {
   }
 }
 
+const mapStateToProps = ({ news, user }) => ({ news, user });
 
-const mapStateToProps = ({ news }) => ({ news });
-
-export default connect(mapStateToProps, { getNews })(News);
+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
+);

src/components/pages/Profile.js

-import React, { Component } from 'react';
-import { Container, Form, Dropdown, Divider } from 'semantic-ui-react';
-import { connect } from 'react-redux';
-import { textChange, submitRegistration, groupChange } from '../../actions';
+import { Container, Divider, Dropdown, Form, Segment } from "semantic-ui-react";
+import React, { Component } from "react";
+import { groupChange, submitRegistration, textChange } from "../../actions";
+
+import HiddenForm from "../forms/HiddenForm";
+import { connect } from "react-redux";
+import { getDeadline } from "../../actions/auth";
 
 const options = [
-  { key: 'DT', text: 'DevTeam', value: 'DT' },
-  { key: 'NET', text: 'NeTeam', value: 'NET' },
-  { key: 'ST', text: 'SecurITeam', value: 'ST' },
-  { key: 'SYS', text: 'SysAdmin', value: 'SYS' },
-  { key: 'HAT', text: 'Hallgatói Tudásbázis', value: 'HAT' },
+  { key: "DT", text: "DevTeam", value: "DT" },
+  { key: "NET", text: "NETeam", value: "NET" },
+  { key: "ST", text: "SecurITeam", value: "ST" },
+  { key: "SYS", text: "SysAdmin", value: "SYS" },
+  { key: "HAT", text: "Hallgatói Tudásbázis", value: "HAT" },
 ];
 
 class Profile extends Component {
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
+    this.props.getDeadline();
     if (!this.props.id) {
-      this.props.history.push('/home');
+      this.props.history.push("/home");
     }
   }
 
   render() {
     const {
-      nick, groups, motivationAbout, motivationProfession, motivationExercise, signed, id,
+      nick,
+      groups,
+      motivationAbout,
+      motivationProfession,
+      motivationExercise,
+      signed,
+      id,
+      deadline,
+      messageBefore,
+      messageAfter,
     } = this.props;
+    const endDate = new Date(deadline);
+    const canEdit = Date.now() < endDate;
     return (
       <Container
         style={{
-          marginBottom: '0.5em',
-          marginTop: '0.5em',
+          marginTop: "1em",
         }}
       >
-        <Form>
-          <Form.Input
-            fluid
-            name='nick'
-            label='Becenév'
-            onChange={e => this.props.textChange(e)}
-            placeholder='Becenév'
-            value={nick}
-          />
+        {canEdit ? (
+          <Segment inverted color="red" tertiary>
+            <p
+              style={{ fontSize: "1.3em" }}
+              dangerouslySetInnerHTML={{ __html: messageBefore }}
+            />
+          </Segment>
+        ) : (
+          <Segment inverted color="red" tertiary>
+            <p
+              style={{ fontSize: "1.3em" }}
+              dangerouslySetInnerHTML={{ __html: messageAfter }}
+            />
+          </Segment>
+        )}
 
+        <Form>
+          {canEdit ? (
+            <Form.Input
+              fluid
+              name="nick"
+              label="Becenév"
+              onChange={(e) => this.props.textChange(e)}
+              placeholder="Becenév"
+              value={nick}
+            />
+          ) : (
+            <HiddenForm fontWeight="bold" label="Becenév" value={nick} />
+          )}
           <Divider horizontal>Motiváció</Divider>
-          <Form.TextArea
-            rows={10}
-            name='motivationAbout'
-            label='Mesélj nekünk egy kicsit magadról. Milyen szakmai vagy más eredményeket értél el, amikre büszke vagy?'
-            onChange={e => this.props.textChange(e)}
-            placeholder='Mesélj nekünk egy kicsit magadról. Milyen szakmai vagy más eredményeket értél el, amikre büszke vagy?'
-            value={motivationAbout}
-          />
-
+          {canEdit ? (
+            <Form.TextArea
+              rows={10}
+              name="motivationAbout"
+              label="Mesélj nekünk egy kicsit magadról. Milyen szakmai vagy más eredményeket értél el, amikre büszke vagy?"
+              onChange={(e) => this.props.textChange(e)}
+              placeholder="Mesélj nekünk egy kicsit magadról. Milyen szakmai vagy más eredményeket értél el, amikre büszke vagy?"
+              value={motivationAbout}
+            />
+          ) : (
+            <HiddenForm
+              fontWeight="bold"
+              label="Mesélj nekünk egy kicsit magadról. Milyen szakmai vagy más eredményeket értél el, amikre büszke vagy?"
+              value={motivationAbout}
+            />
+          )}
           <Divider horizontal />
-          <Form.TextArea
-            rows={10}
-            label='Mit vársz el a képzéstõl, miért szeretnél rá jelentkezni, szerinted mire tudod majd használni az itt megszerzett tudást? Mit szeretnél elérni a szakmádban?'
-            name='motivationProfession'
-            onChange={e => this.props.textChange(e)}
-            placeholder='Mit vársz el a képzéstõl, miért szeretnél rá jelentkezni, szerinted mire tudod majd használni az itt megszerzett tudást? Mit szeretnél elérni a szakmádban?'
-            value={motivationProfession}
-          />
+          {canEdit ? (
+            <Form.TextArea
+              rows={10}
+              label="Mit vársz el a képzéstől, miért szeretnél rá jelentkezni, szerinted mire tudod majd használni az itt megszerzett tudást? Mit szeretnél elérni a szakmádban?"
+              name="motivationProfession"
+              onChange={(e) => this.props.textChange(e)}
+              placeholder="Mit vársz el a képzéstől, miért szeretnél rá jelentkezni, szerinted mire tudod majd használni az itt megszerzett tudást? Mit szeretnél elérni a szakmádban?"
+              value={motivationProfession}
+            />
+          ) : (
+            <HiddenForm
+              fontWeight="bold"
+              label="Mit vársz el a képzéstől, miért szeretnél rá jelentkezni, szerinted mire tudod majd használni az itt megszerzett tudást? Mit szeretnél elérni a szakmádban?"
+              value={motivationProfession}
+            />
+          )}
 
           <Divider horizontal />
-          <Form.TextArea
-            rows={10}
-            name='motivationExercise'
-            onChange={e => this.props.textChange(e)}
-            placeholder=''
-            label={
-              <p>
-                Alább találsz néhány elgondolkodtató kérdést, megoldandó feladatot. A kérdések és feladatok elkészítése opcionális, nem titkolt célunk ezzel a lelkesedés felmérése. A válaszokat a lenti szövegdobozba várjuk a feladatszámok megjelölésével.
-                <br />
-                Szeretnéd kedvenc tantárgyad vik.wiki oldalát elérni, de szomorúan látod, hogy az oldal nem jön be. A Steam pedig hibátlanul megy a háttérben és az emailek is megérkeznek... Szobatársadnak pont megvan a vik.wiki szerverének IP-címe. Csodálkozva látod, hogy a böngésző címsorába írva eléred a kiszolgáló webszervert. Mi lehet a baj?
-                <br />
-                Két előadás közti szünetben úgy döntesz, hogy laptopoddal az index.hu tech cikkeit fogod görgetni. Ám az oldal nem válaszol. Sőt: a régebbi oldalak többsége sem. Ugyanakkor a Facebook, Gmail, de még az egyetemi oldalak többsége is működik. Van valami ötleted mi okozhatja a gondot?
-                <br />
-                Találsz egy értelmetlen szöveget egy honlapon (például: https://static.mbraptor.ml/zebra.html), de feltűnik, hogy két egyenlőségjellel fejeződik be. Nyomozz, s a végeredményt (amit találtál) írd ide!
-              </p>
-            }
-            value={motivationExercise}
-          />
+          {canEdit ? (
+            <Form.TextArea
+              rows={10}
+              name="motivationExercise"
+              onChange={(e) => this.props.textChange(e)}
+              placeholder=""
+              label={
+                <div>
+                  <b>
+                    Alább találsz néhány elgondolkodtató kérdést, megoldandó
+                    feladatot. A kérdések és feladatok elkészítése opcionális,
+                    nem titkolt célunk ezzel a lelkesedés felmérése. A
+                    válaszokat a kérdések alatti szövegdobozba várjuk.
+                  </b>
+                  <ul>
+                    <li>
+                      Szeretnéd kedvenc tantárgyad vik.wiki oldalát elérni, de
+                      szomorúan látod, hogy az oldal nem jön be. A Steam pedig
+                      hibátlanul megy a háttérben és az emailek is
+                      megérkeznek... Szobatársadnak pont megvan a vik.wiki
+                      szerverének IP-címe. Csodálkozva látod, hogy a böngésző
+                      címsorába írva eléred a kiszolgáló webszervert. Mi lehet a
+                      baj?
+                    </li>
+                    <br />
+                    <li>
+                      Kicsit hosszúra nyúlt az előadás és lassan rohannod kell
+                      haza, ezért úgy döntesz, hogy megnézed a menetrendet a
+                      menetrendek.hu weboldalon. Ám az oldal nem válaszol, a
+                      hiba okát megpróbálod kideríteni. Ekkor veszed észre, hogy
+                      az alábbiakat sem éred el: sze.hu, corvinus.hu,
+                      startlap.hu. Ugyanakkor a Facebook, a Gmail, a YouTube, de
+                      még az egyetemi oldalak többsége is működik. Szerinted mi
+                      lehet a hiba oka?
+                    </li>
+                    <br />
+                    <li>
+                      Találsz egy értelmetlen szöveget egy honlapon (például:{" "}
+                      <a href="https://ujonc.kszk.bme.hu/kepzes-media/public/zebra.html">
+                        https://ujonc.kszk.bme.hu/kepzes-media/public/zebra.html
+                      </a>
+                      ), de feltűnik, hogy egyenlőségjellel fejeződik be.
+                      Nyomozz, s a végeredményt (amit találtál) írd ide!
+                    </li>
+                    <br />
+                    <li>
+                      A <b>ujonc-gres.kszk.bme.hu</b> címen elérhető gépen fut
+                      egy szolgáltatás az alapértelmezett <b>5432</b> porton
+                      (használd az előző feladatban kapott adatokat). Belépés
+                      után írd le mit találtál!
+                    </li>
+                  </ul>
+                </div>
+              }
+              value={motivationExercise}
+            />
+          ) : (
+            <HiddenForm
+              fontWeight="normal"
+              label={
+                <div>
+                  <b>
+                    Alább találsz néhány elgondolkodtató kérdést, megoldandó
+                    feladatot. A kérdések és feladatok elkészítése opcionális,
+                    nem titkolt célunk ezzel a lelkesedés felmérése. A
+                    válaszokat a kérdések alatti szövegdobozba várjuk.
+                  </b>
+                  <ul>
+                    <li>
+                      Szeretnéd kedvenc tantárgyad vik.wiki oldalát elérni, de
+                      szomorúan látod, hogy az oldal nem jön be. A Steam pedig
+                      hibátlanul megy a háttérben és az emailek is
+                      megérkeznek... Szobatársadnak pont megvan a vik.wiki
+                      szerverének IP-címe. Csodálkozva látod, hogy a böngésző
+                      címsorába írva eléred a kiszolgáló webszervert. Mi lehet a
+                      baj?
+                    </li>
+                    <br />
+                    <li>
+                      Kicsit hosszúra nyúlt az előadás és lassan rohannod kell
+                      haza, ezért úgy döntesz, hogy megnézed a menetrendet a
+                      menetrendek.hu weboldalon. Ám az oldal nem válaszol, a
+                      hiba okát megpróbálod kideríteni. Ekkor veszed észre, hogy
+                      az alábbiakat sem éred el: sze.hu, corvinus.hu,
+                      startlap.hu. Ugyanakkor a Facebook, a Gmail, a YouTube, de
+                      még az egyetemi oldalak többsége is működik. Szerinted mi
+                      lehet a hiba oka?
+                    </li>
+                    <br />
+                    <li>
+                      Találsz egy értelmetlen szöveget egy honlapon (például:{" "}
+                      <a href="https://ujonc.kszk.bme.hu/kepzes-media/public/zebra.html">
+                        https://ujonc.kszk.bme.hu/kepzes-media/public/zebra.html
+                      </a>
+                      ), de feltűnik, hogy egyenlőségjellel fejeződik be.
+                      Nyomozz, s a végeredményt (amit találtál) írd ide!
+                    </li>
+                    <br />
+                    <li>
+                      A <b>ujonc-gres.kszk.bme.hu</b> címen elérhető gépen fut
+                      egy szolgáltatás az alapértelmezett <b>5432</b> porton
+                      (használd az előző feladatban kapott adatokat). Belépés
+                      után keresd meg a feladat megoldását!
+                    </li>
+                  </ul>
+                </div>
+              }
+              value={motivationExercise}
+            />
+          )}
 
-          <Divider horizontal>Érdekelődés</Divider>
+          <Divider horizontal>Érdeklődés</Divider>
           <Dropdown
             fluid
             multiple
             selection
-            placeholder='DevTeam, ...'
+            placeholder="DevTeam, ..."
             onChange={(_, v) => this.props.groupChange(v.value)}
             options={options}
             defaultValue={groups}
+            disabled={!canEdit}
           />
           <br />
           <Form.Checkbox
-            name='signed'
-            label='Szeretnék jelentkezni a KSZK-ba'
+            name="signed"
+            label="Szeretnék a képzés során emaileket kapni és jelentkezni a KSZKépzésre"
             onChange={(_, v) =>
-              this.props.textChange({ target: { name: v.name, value: v.checked } })
+              this.props.textChange({
+                target: { name: v.name, value: v.checked },
+              })
             }
             checked={signed}
+            readOnly={!canEdit}
+            style={!canEdit ? { marginBottom: "5em" } : null}
           />
-          <Form.Button
-            primary
-            onClick={() => this.props.submitRegistration({
-              nick, motivationAbout, motivationProfession, motivationExercise, signed, groups, id,
-            })}
-          >
-            Mentés
-          </Form.Button>
+          {canEdit ? (
+            <Form.Button
+              primary
+              style={{ marginBottom: "5em" }}
+              disabled={!signed}
+              onClick={() =>
+                this.props.submitRegistration({
+                  nick,
+                  motivationAbout,
+                  motivationProfession,
+                  motivationExercise,
+                  signed,
+                  groups,
+                  id,
+                })
+              }
+            >
+              Mentés
+            </Form.Button>
+          ) : (
+            ""
+          )}
         </Form>
       </Container>
     );
@@ -114,7 +273,16 @@ class Profile extends Component {
 
 const mapStateToProps = ({
   user: {
-    nick, groups, motivationAbout, motivationProfession, motivationExercise, signed, id,
+    nick,
+    groups,
+    motivationAbout,
+    motivationProfession,
+    motivationExercise,
+    signed,
+    id,
+    deadline,
+    messageBefore,
+    messageAfter,
   },
 }) => ({
   nick,
@@ -124,6 +292,14 @@ const mapStateToProps = ({
   motivationExercise,
   signed,
   id,
+  deadline,
+  messageBefore,
+  messageAfter,
 });
 
-export default connect(mapStateToProps, { textChange, submitRegistration, groupChange })(Profile);
+export default connect(mapStateToProps, {
+  textChange,
+  submitRegistration,
+  groupChange,
+  getDeadline,
+})(Profile);

src/components/pages/Schedule.js

-import React, { Component } from 'react';
-import { Container, Header, Segment } from 'semantic-ui-react';
+import "moment/locale/hu";
+
+import {
+  Accordion,
+  Container,
+  Grid,
+  Header,
+  Icon,
+  Segment,
+} from "semantic-ui-react";
+import React, { Component } from "react";
+
+import { connect } from "react-redux";
+import { getStudentEvents } from "../../actions/statistics";
+import moment from "moment";
+
+class Schedule extends Component {
+  // eslint-disable-next-line react/state-in-constructor
+  state = { activeIndex: 0 };
+
+  UNSAFE_componentWillMount() {
+    this.props.getStudentEvents();
+  }
+
+  handleClick = (e, titleProps) => {
+    const { index } = titleProps;
+    const { activeIndex } = this.state;
+    const newIndex = activeIndex === index ? -1 : index;
+
+    this.setState({ activeIndex: newIndex });
+  };
 
-export default class Schedule extends Component {
   render() {
+    const { activeIndex } = this.state;
+
+    const { events } = this.props;
+    const panels = events
+      .sort((a, b) => a.date - b.date)
+      .map((event) => (
+        <Accordion key={Math.random()}>
+          <Accordion.Title
+            active={activeIndex === event.id}
+            index={event.id}
+            onClick={this.handleClick}
+          >
+            <h2>
+              <Grid>
+                <Grid.Column floated="left" width={5} textAlign="left">
+                  <Icon name="calendar alternate outline" color="blue" />{" "}
+                  {event.name}
+                </Grid.Column>
+                <Grid.Column floated="right" width={8} textAlign="right">
+                  {moment(event.date).locale("hu").format("LLLL")}
+                </Grid.Column>
+              </Grid>
+            </h2>
+          </Accordion.Title>
+          <Accordion.Content active={activeIndex === event.id}>
+            <Segment textAlign="left" style={{ overflowWrap: "break-word" }}>
+              {event.description}
+            </Segment>
+          </Accordion.Content>
+        </Accordion>
+      ));
+
     return (
       <div>
-        <Segment inverted textAlign='center' vertical>
-          <Container>
-            <Header
-              as='h1'
-              content='Ütemterv - Hamarosan'
-              inverted
-              style={{
-                fontSize: '3em',
-                fontWeight: 'normal',
-                marginBottom: 0,
-                marginTop: '0.5em',
-              }}
-            />
-          </Container>
-        </Segment>
+        <Container textAlign="center">
+          <Header
+            as="h1"
+            content="Képzés alkalmak"
+            style={{
+              fontSize: "2em",
+              fontWeight: "bold",
+              marginBottom: "0.5em",
+              marginTop: "0.5em",
+            }}
+          />
+          <Accordion fluid styled>
+            {panels}
+          </Accordion>
+          <Header
+            as="h1"
+            content="Tábor: április 11-13"
+            style={{
+              fontSize: "2em",
+              fontWeight: "bold",
+              marginBottom: "0.5em",
+              marginTop: "1.5em",
+            }}
+          />
+        </Container>
       </div>
     );
   }
 }
+
+const mapStateToProps = ({ events: { events }, user }) => ({ events, user });
+
+export default connect(mapStateToProps, { getStudentEvents })(Schedule);