src/components/forms/EditTaskForm.js

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

src/components/forms/Forms.css

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

src/components/forms/HiddenForm.js

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

src/components/forms/InfoModal.js

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

src/components/forms/SolutionDetailsForm.js

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

src/components/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/Circles.js

-import React, { Component } from "react";
-import { Container, Header, Segment } from "semantic-ui-react";
-
-export default class Circles extends Component {
-  render() {
-    return (
-      <div>
-        <Segment inverted textAlign="center" vertical>
-          <Container>
-            <Header
-              as="h1"
-              content="Körök - TODO"
-              inverted
-              style={{
-                fontSize: "3em",
-                fontWeight: "normal",
-                marginBottom: 0,
-                marginTop: "0.5em"
-              }}
-            />
-          </Container>
-        </Segment>
-      </div>
-    );
-  }
-}

src/components/pages/EventDetail.js

+import {
+  Button,
+  Comment,
+  Container,
+  Divider,
+  Form,
+  Header,
+  Item,
+  Segment,
+  Table,
+} from "semantic-ui-react";
+import React, { Component } from "react";
+import {
+  clearWrite,
+  getNotesByEvent,
+  postEventNote,
+  writeNote,
+} from "../../actions/notes";
+import {
+  getEventById,
+  getTrainees,
+  submitVisitors,
+  visitorChange,
+} from "../../actions/statistics";
+
+import TraineeTableRow from "./EventDetailTableRow";
+import { connect } from "react-redux";
+import moment from "moment";
+
+class EventDetail extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      edit: false,
+    };
+  }
+
+  UNSAFE_componentWillMount() {
+    this.props.getEventById(this.props.match.params.id);
+    this.props.getTrainees();
+    this.props.getNotesByEvent(this.props.match.params.id);
+  }
+
+  renderTrainees() {
+    const event = this.props.selectedEvent;
+    return this.props.trainees
+      ?.sort(function (a, b) {
+        var nameA = a.full_name.toLowerCase(),
+          nameB = b.full_name.toLowerCase();
+        if (nameA < nameB)
+          //sort string ascending
+          return -1;
+        if (nameA > nameB) return 1;
+        return 0; //default return value (no sorting)
+      })
+      .map((item) => {
+        const notes = this.props.eventNotes?.filter(
+          (note) => note.profile === item.id
+        );
+        return item.role === "Student" ? (
+          <TraineeTableRow
+            selectedEvent={event}
+            notes={notes}
+            trainee={item}
+            edit={this.state.edit}
+            key={item.id}
+          />
+        ) : null;
+      });
+  }
+
+  renderEvent() {
+    const { name, date, description } = this.props.selectedEvent;
+    return (
+      <Segment>
+        <Item>
+          <Divider style={{ fontSize: "2em" }} horizontal>
+            <Header as="h1">
+              {name}
+              <Item.Header style={{ fontSize: "0.6em" }}>
+                {moment(date).format("LL")}
+              </Item.Header>
+            </Header>
+          </Divider>
+          <Container textAlign="justified">
+            <Item.Header as="h3">Leírás</Item.Header>
+            <Item.Content>{description}</Item.Content>
+          </Container>
+        </Item>
+      </Segment>
+    );
+  }
+
+  renderComments() {
+    const notes = this.props.eventNotes;
+    return notes.map((note) => {
+      if (!note.profile) {
+        return (
+          <Segment>
+            <Comment key={Math.random()}>
+              <Comment.Content>
+                <Comment.Author>{note.created_by_name}</Comment.Author>
+                <Comment.Metadata>
+                  {moment(note.created_at).format("LL")}
+                </Comment.Metadata>
+                <Comment.Text>{note.note}</Comment.Text>
+              </Comment.Content>
+            </Comment>
+          </Segment>
+        );
+      }
+      return "";
+    });
+  }
+
+  render() {
+    const event = this.props.selectedEvent;
+    const note = this.props.actualNote;
+    return (
+      <Container style={{ paddingTop: "1em", paddingBottom: "7em" }}>
+        <Container textAlign="center">
+          {this.props.selectedEvent && this.props.trainees
+            ? this.renderEvent()
+            : ""}
+        </Container>
+        {!this.state.edit ? (
+          <Button onClick={() => this.setState({ edit: true })}>
+            Módosítás
+          </Button>
+        ) : (
+          <Button
+            onClick={() => {
+              this.setState({ edit: false });
+            }}
+          >
+            {" "}
+            Kész
+          </Button>
+        )}
+        <Table celled unstackable>
+          <Table.Header>
+            <Table.Row textAlign="center">
+              <Table.HeaderCell>Név</Table.HeaderCell>
+              <Table.HeaderCell>Jelen volt</Table.HeaderCell>
+              <Table.HeaderCell>Megjegyzések</Table.HeaderCell>
+            </Table.Row>
+          </Table.Header>
+          <Table.Body>
+            {this.props.selectedEvent ? this.renderTrainees() : null}
+          </Table.Body>
+        </Table>
+        <Comment.Group>
+          <Header dividing>Megjegyzések</Header>
+          {this.props.eventNotes ? this.renderComments() : ""}
+          <Form reply>
+            <Form.TextArea
+              value={note.note}
+              onChange={(e) => this.props.writeNote(e)}
+            />
+            <Button
+              onClick={() => {
+                this.props.postEventNote({
+                  eventid: event.id,
+                  note: note.note,
+                });
+                this.props.clearWrite();
+              }}
+              content="Megjegyzés hozzáadása"
+              labelPosition="left"
+              icon="edit"
+              primary
+            />
+          </Form>
+        </Comment.Group>
+      </Container>
+    );
+  }
+}
+
+const mapStateToProps = ({
+  notes: { eventNotes, actualNote },
+  events: { selectedEvent },
+  trainees: { trainees },
+}) => ({
+  eventNotes,
+  selectedEvent,
+  trainees,
+  actualNote,
+});
+
+export default connect(mapStateToProps, {
+  getEventById,
+  getTrainees,
+  visitorChange,
+  getNotesByEvent,
+  submitVisitors,
+  writeNote,
+  clearWrite,
+  postEventNote,
+})(EventDetail);

src/components/pages/EventDetailTableRow.js

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

src/components/pages/Events.js

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

src/components/pages/Groups.css

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

src/components/pages/Groups.js

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

src/components/pages/Home.css

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

src/components/pages/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;
+}