src/actions/homework.js

+import {
+  ADD_DOCUMENT,
+  ADD_SOLUTION,
+  ADD_TASK,
+  CHECK,
+  CLEAR_WRITE,
+  CORRECT_SOLUTION,
+  DELETE_TASK,
+  EDIT_TASK,
+  GET_DOCUMENTS,
+  GET_PROFILES,
+  GET_SOLUTIONS,
+  GET_TASKS,
+  SELECT_SOLUTION,
+  SELECT_TASK,
+  SETCHECKTRUE,
+  WRITE_SOLUTION,
+  WRITE_SOLUTION_FILE,
+  WRITE_TASK,
+} from './types';
+
+import axios from './session';
+
+export const getTasks = () => async (dispatch) => {
+  try {
+    const response = await axios.get('/api/v1/homework/tasks/');
+    dispatch({
+      type: GET_TASKS,
+      payload: response.data,
+    });
+  } catch (e) {
+    console.log(e);
+  }
+};
+
+export const getSolutions = (taskId) => async (dispatch) => {
+  try {
+    const response = await axios.get('/api/v1/homework/solutions/', {
+      task: taskId,
+    });
+    dispatch({
+      type: GET_SOLUTIONS,
+      payload: response.data,
+    });
+  } catch (e) {
+    console.log(e);
+  }
+};
+
+export const addTask = ({ title, text, deadline, bits }) => async (
+  dispatch
+) => {
+  try {
+    const response = await axios.post('/api/v1/homework/tasks/', {
+      title,
+      text,
+      deadline,
+      bits,
+    });
+    if (response.data.id) {
+      dispatch({
+        type: ADD_TASK,
+        payload: response.data,
+      });
+    }
+  } catch (e) {
+    console.log(e);
+  }
+};
+
+export const editTask = ({ id, title, text, deadline, bits }) => async (
+  dispatch
+) => {
+  try {
+    const response = await axios.patch(`/api/v1/homework/tasks/${id}/`, {
+      title,
+      text,
+      deadline,
+      bits,
+    });
+    if (response.data.id) {
+      dispatch({
+        type: EDIT_TASK,
+        payload: response.data,
+      });
+    }
+  } catch (e) {
+    console.log(e);
+  }
+};
+
+export const deleteTask = (task) => async (dispatch) => {
+  try {
+    const response = await axios.delete(`/api/v1/homework/tasks/${task.id}/`);
+    if (!response.data.id) {
+      dispatch({
+        type: DELETE_TASK,
+        payload: task,
+      });
+    }
+  } catch (e) {
+    console.log(e);
+  }
+};
+
+export const setSelectedTask = (task) => (dispatch) => {
+  dispatch({ type: SELECT_TASK, payload: task });
+};
+
+export const addDocument = ({ name, description, file, solution }) => async (
+  dispatch
+) => {
+  try {
+    const formData = new FormData();
+    formData.append('name', name);
+    formData.append('description', description);
+    formData.append('file', file);
+    formData.append('solution', solution);
+    const config = {
+      headers: {
+        'content-type': 'multipart/form-data',
+      },
+    };
+    const response = await axios.post('/api/v1/documents/', formData, config);
+    if (response.data.id) {
+      dispatch({
+        type: ADD_DOCUMENT,
+        payload: response.data,
+      });
+    }
+  } catch (e) {
+    console.log(e);
+  }
+};
+
+export const addSolution = ({
+  task,
+  accepted,
+  corrected,
+  note,
+  name,
+  description,
+  file,
+}) => async (dispatch) => {
+  try {
+    const response = await axios.post('/api/v1/homework/solutions/', {
+      task,
+      accepted,
+      corrected,
+      note,
+    });
+    if (response.data.id) {
+      dispatch({
+        type: ADD_SOLUTION,
+        payload: response.data,
+      });
+    }
+
+    const solution = response.data.id;
+
+    const formData = new FormData();
+    formData.append('name', name);
+    formData.append('description', description);
+    formData.append('file', file);
+    formData.append('solution', solution);
+    const config = {
+      headers: {
+        'content-type': 'multipart/form-data',
+      },
+    };
+    const responsedoc = await axios.post(
+      '/api/v1/documents/',
+      formData,
+      config
+    );
+    if (responsedoc.data.id) {
+      dispatch({
+        type: ADD_DOCUMENT,
+        payload: responsedoc.data,
+      });
+    }
+  } catch (e) {
+    console.log(e);
+  }
+};
+
+export const getDocuments = (solutionID) => async (dispatch) => {
+  try {
+    const response = await axios.get('/api/v1/documents', {
+      params: { solution: solutionID },
+    });
+    dispatch({
+      type: GET_DOCUMENTS,
+      payload: response.data,
+    });
+  } catch (e) {
+    console.log(e);
+  }
+};
+
+export const writeSolution = ({ target: { name, value } }) => (dispatch) => {
+  dispatch({ type: WRITE_SOLUTION, payload: value, target: name });
+};
+
+export const writeSolutionFile = ({ target: { files } }) => (dispatch) => {
+  dispatch({ type: WRITE_SOLUTION_FILE, payload: files[0], target: 'file' });
+};
+
+export const writeTask = ({ target: { name, value } }) => (dispatch) => {
+  dispatch({ type: WRITE_TASK, payload: value, target: name });
+};
+
+export const writeTaskDeadline = ({ name, value }) => (dispatch) => {
+  dispatch({ type: WRITE_TASK, payload: value, target: name });
+};
+
+export const clearWrite = () => (dispatch) => {
+  dispatch({ type: CLEAR_WRITE });
+};
+
+export const getProfiles = () => async (dispatch) => {
+  try {
+    const response = await axios.get('/api/v1/profiles/');
+    dispatch({
+      type: GET_PROFILES,
+      payload: response.data,
+    });
+  } catch (e) {
+    console.log(e);
+  }
+};
+
+export const correctSolution = (id, corrected, accepted, note) => async (
+  dispatch
+) => {
+  try {
+    const response = await axios.patch(`/api/v1/homework/solutions/${id}/`, {
+      corrected,
+      accepted,
+      note,
+    });
+    if (response.data.id) {
+      dispatch({
+        type: CORRECT_SOLUTION,
+        payload: response.data,
+      });
+    }
+  } catch (e) {
+    console.log(e);
+  }
+};
+
+export const check = (name) => (dispatch) => {
+  dispatch({ type: CHECK, target: name });
+};
+
+export const setchecktrue = (name) => (dispatch) => {
+  dispatch({ type: SETCHECKTRUE, target: name });
+};
+
+export const selectSolution = (solution) => (dispatch) => {
+  dispatch({
+    type: SELECT_SOLUTION,
+    payload: solution,
+  });
+};

src/actions/index.js

+export * from './auth';

src/actions/mentors.js

+import { GET_MENTORS } from './types';
+import axios from './session';
+
+export const getMentors = () => async (dispatch) => {
+  try {
+    const response = await axios.get('/api/v1/mentors');
+    dispatch({
+      type: GET_MENTORS,
+      payload: response.data,
+    });
+  } catch (e) {
+    console.log(e);
+  }
+};

src/actions/news.js

+import {
+  ADD_NEWS,
+  CLEAR_WRITE,
+  DELETE_NEWS,
+  EDIT_NEWS,
+  GET_NEWS,
+  SELECT_NEWS,
+  WRITE_NEWS,
+} from './types';
+
+import axios from './session';
+
+export const getNews = () => async (dispatch) => {
+  try {
+    const response = await axios.get('/api/v1/news');
+    dispatch({
+      type: GET_NEWS,
+      payload: response.data,
+    });
+  } catch (e) {
+    console.log(e);
+  }
+};
+
+export const postNews = ({ title, updated_by, text }) => async (dispatch) => {
+  try {
+    const response = await axios.post('/api/v1/news/', {
+      updated_by,
+      title,
+      text,
+    });
+    if (response.data.id) {
+      alert('Sikeres mentés!');
+      dispatch({
+        type: ADD_NEWS,
+        payload: response.data,
+      });
+    } else {
+      alert('Mentés nem sikerült!');
+    }
+  } catch (e) {
+    console.log(e);
+  }
+};
+
+export const editNews = ({ id, title, text, updated_by }) => async (
+  dispatch
+) => {
+  try {
+    const response = await axios.patch(`/api/v1/news/${id}/`, {
+      updated_by,
+      title,
+      text,
+    });
+    if (response.data.id) {
+      alert('Sikeres mentés!');
+      dispatch({
+        type: EDIT_NEWS,
+        payload: response.data,
+      });
+    } else {
+      alert('Mentés nem sikerült!');
+    }
+  } catch (e) {
+    console.log(e);
+  }
+};
+
+export const deleteNews = (news) => async (dispatch) => {
+  try {
+    const response = await axios.delete(`/api/v1/news/${news.id}/`);
+    if (!response.data.id) {
+      alert('Sikeres törlés!');
+      dispatch({
+        type: DELETE_NEWS,
+        payload: news,
+      });
+    } else {
+      alert('A törlés nem sikerült!');
+    }
+  } catch (e) {
+    console.log(e);
+  }
+};
+
+export const writeNews = ({ target: { name, value } }) => (dispatch) => {
+  dispatch({ type: WRITE_NEWS, payload: value, target: name });
+};
+
+export const clearWrite = () => (dispatch) => {
+  dispatch({ type: CLEAR_WRITE });
+};
+
+export const setSelectedNews = (item) => (dispatch) => {
+  dispatch({ type: SELECT_NEWS, payload: item });
+};

src/actions/notes.js

+import {
+  ADD_EVENT_NOTE,
+  CLEAR_WRITE,
+  GET_NOTES_BY_EVENT,
+  WRITE_NOTE,
+} from './types';
+
+import axios from './session';
+
+export const getNotesByEvent = (id) => async (dispatch) => {
+  try {
+    const response = await axios.get('/api/v1/notes/', {
+      params: { eventID: id },
+    });
+    dispatch({
+      type: GET_NOTES_BY_EVENT,
+      payload: response.data,
+    });
+  } catch (e) {
+    console.log(e);
+  }
+};
+
+export const writeNote = (event) => (dispatch) =>
+  dispatch({ type: WRITE_NOTE, payload: event.target.value });
+
+export const postEventNote = ({ eventid, userid, note }) => async (
+  dispatch
+) => {
+  try {
+    const response = await axios.post('/api/v1/notes/', {
+      event: eventid || '',
+      profile: userid || '',
+      note,
+    });
+    if (response.data.id) {
+      alert('Sikeres mentés!');
+      dispatch({
+        type: ADD_EVENT_NOTE,
+        payload: response.data,
+      });
+    }
+  } catch (e) {
+    console.log(e);
+  }
+};
+
+export const clearWrite = () => (dispatch) => {
+  dispatch({ type: CLEAR_WRITE });
+};

src/actions/session.js

+import ax from 'axios';
+
+const axios = ax.create({
+  xsrfCookieName: 'csrftoken',
+  xsrfHeaderName: 'X-CSRFToken',
+});
+
+export default axios;

src/actions/statistics.js

+import {
+  ABSENT_CHANGE,
+  ADD_EVENT,
+  CHANGE_NO,
+  DELETE_EVENT,
+  GET_EVENTS,
+  GET_EVENT_BY_ID,
+  GET_PROFILES,
+  GET_SELECTED_PROFILE,
+  GET_TRAINEES,
+  SET_STATUS,
+  VISITOR_CHANGE,
+  WRITE_EVENT,
+} from './types';
+
+import axios from './session';
+
+export const getStaffEvents = () => async (dispatch) => {
+  try {
+    const response = await axios.get('/api/v1/staff_events/');
+    dispatch({
+      type: GET_EVENTS,
+      payload: response.data,
+    });
+  } catch (e) {
+    console.log(e);
+  }
+};
+
+export const getStudentEvents = () => async (dispatch) => {
+  try {
+    const response = await axios.get('/api/v1/student_events/');
+    dispatch({
+      type: GET_EVENTS,
+      payload: response.data,
+    });
+  } catch (e) {
+    console.log(e);
+  }
+};
+
+export const getEventById = (id) => async (dispatch) => {
+  try {
+    const response = await axios.get(`/api/v1/staff_events/${id}`);
+    dispatch({
+      type: GET_EVENT_BY_ID,
+      payload: response.data,
+    });
+  } catch (e) {
+    console.log(e);
+  }
+};
+
+export const getTrainees = () => async (dispatch) => {
+  try {
+    const response = await axios.get('/api/v1/profiles/');
+    dispatch({
+      type: GET_TRAINEES,
+      payload: response.data,
+    });
+  } catch (e) {
+    console.log(e);
+  }
+};
+
+export const visitorChange = ({ id, value }) => {
+  switch (value) {
+    case 'Visitor':
+      return (dispatch) => dispatch({ type: VISITOR_CHANGE, payload: id });
+    case 'Absent':
+      return (dispatch) => dispatch({ type: ABSENT_CHANGE, payload: id });
+    case 'No':
+      return (dispatch) => dispatch({ type: CHANGE_NO, payload: id });
+    default:
+      return null;
+  }
+};
+
+export const submitVisitors = ({ id, visitors, absent }) => async () => {
+  try {
+    const response = await axios.patch(`/api/v1/staff_events/${id}/`, {
+      visitors,
+      absent,
+    });
+    if (response.data.id === id) {
+      return true;
+    }
+    return false;
+  } catch (e) {
+    console.log(e);
+    return false;
+  }
+};
+
+export const writeEvent = ({ target: { name, value } }) => (dispatch) => {
+  dispatch({ type: WRITE_EVENT, payload: value, target: name });
+};
+
+export const eventDate = (name, value) => (dispatch) => {
+  dispatch({ type: WRITE_EVENT, payload: value, target: name });
+};
+
+export const addEvent = ({ name, date, description }) => async (dispatch) => {
+  try {
+    const response = await axios.post('/api/v1/staff_events/', {
+      name,
+      date,
+      description,
+      absent: [],
+    });
+    if (response.data.id) {
+      alert('Sikeres mentés!');
+      dispatch({
+        type: ADD_EVENT,
+        payload: response.data,
+      });
+    } else {
+      alert('Mentés nem sikerült!');
+    }
+  } catch (e) {
+    console.log(e);
+  }
+};
+
+export const deleteEvent = (event) => async (dispatch) => {
+  try {
+    const response = await axios.delete(`/api/v1/staff_events/${event.id}/`);
+    if (!response.data.id) {
+      alert('Sikeres törlés!');
+      dispatch({
+        type: DELETE_EVENT,
+        payload: event,
+      });
+    } else {
+      alert('A törlés nem sikerült!');
+    }
+  } catch (e) {
+    console.log(e);
+  }
+};
+
+export const getProfiles = () => async (dispatch) => {
+  try {
+    const response = await axios.get('/api/v1/profiles/');
+    dispatch({
+      type: GET_PROFILES,
+      payload: response.data,
+    });
+  } catch (e) {
+    console.log(e);
+  }
+};
+
+export const setStatus = (id, status) => async (dispatch) => {
+  try {
+    const response = await axios.patch(`/api/v1/profiles/${id}/`, {
+      role: status,
+    });
+    if (response.data.id) {
+      dispatch({
+        type: SET_STATUS,
+        payload: response.data,
+      });
+    }
+  } catch (e) {
+    console.log(e);
+  }
+};
+
+export const getSelectedProfile = (id) => async (dispatch) => {
+  try {
+    const response = await axios.get(`/api/v1/profiles/${id}/`);
+    dispatch({
+      type: GET_SELECTED_PROFILE,
+      payload: response.data,
+    });
+  } catch (e) {
+    console.log(e);
+  }
+};

src/actions/types.js

+export const GET_USERDATA = 'get_userdata';
+export const GET_NEWS = 'get_news';
+export const GET_DEADLINE = 'get_deadline';
+
+export const GET_GROUPS = 'get_groups';
+
+export const PROFILE_CHANGE = 'profile_change';
+export const GROUP_CHANGE = 'group_change';
+
+export const WRITE_NEWS = 'write_news';
+export const CLEAR_WRITE = 'clear_write';
+export const ADD_NEWS = 'add_news';
+export const DELETE_NEWS = 'delete_news';
+export const EDIT_NEWS = 'edit_news';
+export const SELECT_NEWS = 'select_news';
+
+export const GET_MENTORS = 'get_mentors';
+
+export const GET_IMAGES = 'get_images';
+
+export const GET_TASKS = 'get_homeworks';
+export const ADD_TASK = 'add_task';
+export const DELETE_TASK = 'delete_task';
+export const EDIT_TASK = 'edit_task';
+export const WRITE_TASK = 'write_task';
+export const SELECT_TASK = 'select_task';
+export const WRITE_SOLUTION = 'write_solution';
+export const WRITE_SOLUTION_FILE = 'write_solution_file';
+export const WRITE_TASK_DEADLINE = 'write_task_deadline';
+export const GET_SOLUTIONS = 'get_solutions';
+export const ADD_SOLUTION = 'add_solution';
+export const ADD_DOCUMENT = 'add_document';
+export const GET_DOCUMENTS = 'get_documents';
+export const CORRECT_SOLUTION = 'correct_solution';
+export const SELECT_SOLUTION = 'select_solution';
+export const CHECK = 'check';
+export const SETCHECKTRUE = 'setchecktrue';
+
+export const GET_EVENTS = 'get_events';
+export const GET_EVENT_BY_ID = 'get_event_by_id';
+
+export const GET_TRAINEES = 'get_trainees';
+export const VISITOR_CHANGE = 'visitor_change';
+export const ABSENT_CHANGE = 'absent_change';
+export const CHANGE_NO = 'change_no';
+
+export const GET_NOTES_BY_EVENT = 'get_notes_by_event';
+export const WRITE_EVENT = 'write_event';
+export const ADD_EVENT = 'add_event';
+export const DELETE_EVENT = 'delete_event';
+
+export const WRITE_NOTE = 'write_note';
+export const CLEAR_NOTE = 'clear_note';
+export const ADD_EVENT_NOTE = 'add_note';
+
+export const GET_PROFILES = 'get_profiles';
+export const SET_STATUS = 'set_status';
+export const GET_SELECTED_PROFILE = 'get_selected_profile';

src/components/App.js

-import React from 'react';
+import Footer from './Footer';
 import Header from './Header';
 import Main from './Main';
+import React from 'react';
 
 const App = () => (
-  <div>
-    {/*<Header />*/}
-    <Main />
+  <div style={{ minHeight: '100%', position: 'relative', paddingBottom: '3em' }}>
+    <header id="header">
+      <Header />
+    </header>
+    <main id="main" style={{ minHeight: '100%', position: 'relative' }}>
+      <Main />
+    </main>
+    <footer
+      id="footer"
+      style={{ position: 'absolute', width: '100%', bottom: '0' }}
+    >
+      <Footer />
+    </footer>
   </div>
 );
 

src/components/Footer.js

+import { Container, Segment } from "semantic-ui-react";
+
+import React from "react";
+
+const Footer = () => (
+  <Segment inverted vertical textAlign="center">
+    <Container>
+      <p textalign="center">Created by DevTeam &copy; 2018-2025.</p>
+    </Container>
+  </Segment>
+);
+
+export default Footer;

src/components/Header.js

-import React from 'react';
-import { Link } from 'react-router-dom';
-
-const Header = () => (
-  <header>
-    <nav>
-      <ul>
-        <li><Link to='/'>Home</Link></li>
-        <li><Link to='/roster'>Roster</Link></li>
-        <li><Link to='/schedule'>Schedule</Link></li>
-      </ul>
-    </nav>
-  </header>
-);
-
-export default Header;
+import {
+  Button,
+  Container,
+  Icon,
+  Image,
+  Menu,
+  Popup,
+  Responsive,
+  Segment,
+} from "semantic-ui-react";
+import React, { Component } from "react";
+
+import KSZKlogo from "./images/kszk_logo.svg";
+import { Link } from "react-router-dom";
+import { connect } from "react-redux";
+import { getUserData } from "../actions";
+
+// Objects that will be converted to menu items in the render method
+const menuItems = [
+  {
+    text: "Főoldal",
+    to: "/home",
+    prefix: (
+      <Image size="mini" src={KSZKlogo} style={{ marginRight: "1.5em" }} />
+    ),
+    permissionLevel: 0,
+  },
+  {
+    text: "Hírek",
+    to: "/news",
+    prefix: "",
+    permissionLevel: 0,
+  },
+  {
+    text: "Köreink",
+    to: "/groups",
+    prefix: "",
+    permissionLevel: 0,
+  },
+  {
+    text: "Ütemterv",
+    to: "/schedule",
+    prefix: "",
+    permissionLevel: 1,
+  },
+  {
+    text: "Mentorok",
+    to: "/mentors",
+    prefix: "",
+    permissionLevel: 1,
+  },
+  {
+    text: "Statisztika",
+    to: "/statistics",
+    prefix: "",
+    permissionLevel: 3,
+  },
+  {
+    text: "Jelentkezések",
+    to: "/applications",
+    prefix: "",
+    permissionLevel: 3,
+  },
+  {
+    text: "Házi feladatok",
+    to: "/homework",
+    prefix: "",
+    permissionLevel: 2,
+  },
+];
+
+class Header extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isOpen: false,
+    };
+  }
+
+  // Fetch the userData-s
+  UNSAFE_componentWillMount() {
+    this.props.getUserData();
+  }
+
+  // Hide the menu after clicking an item on mobile
+  handleOpen = () => {
+    this.setState({ isOpen: true });
+  };
+
+  handleClose = () => {
+    this.setState({ isOpen: false });
+  };
+
+  renderHeader(inHeader) {
+    let renderedItemNum = 0;
+    let current = 0;
+    let maxNum = 0;
+    if (this.props.user.id) {
+      maxNum = menuItems.filter(
+        (item) => this.props.user.permission >= item.permissionLevel,
+      ).length;
+    } else {
+      maxNum = 3;
+    }
+
+    return (
+      <Segment inverted textAlign="center" vertical>
+        <Container>
+          <Menu inverted secondary size="large">
+            {/* Default Menu items */}
+            {menuItems.map((item) => {
+              if (item.permissionLevel === 0) {
+                renderedItemNum += 1;
+                return (
+                  <Menu.Item key={Math.random()} as={Link} to={item.to}>
+                    {item.prefix}
+                    {item.text}
+                  </Menu.Item>
+                );
+              }
+              return null;
+            })}
+            {/* After default menu items */}
+            {menuItems.map((item, i) => {
+              if (
+                this.props.user.permission >= item.permissionLevel &&
+                item.permissionLevel > 0 &&
+                renderedItemNum < inHeader &&
+                current < i
+              ) {
+                renderedItemNum += 1;
+                current = i;
+                return (
+                  <Menu.Item key={Math.random()} as={Link} to={item.to}>
+                    {item.prefix}
+                    {item.text}
+                  </Menu.Item>
+                );
+              }
+              return null;
+            })}
+            {/* Arrow menu */}
+            {this.props.user.id && current + 1 < maxNum ? (
+              <Popup
+                flowing
+                hoverable
+                inverted
+                trigger={
+                  <Menu.Item>
+                    <Icon name="angle down" size="large" />
+                  </Menu.Item>
+                }
+                position="top center"
+              >
+                <Menu inverted secondary size="large">
+                  {menuItems.map((item, i) =>
+                    this.props.user.permission >= item.permissionLevel &&
+                    item.permissionLevel > 0 &&
+                    current < i ? (
+                      <Menu.Item key={Math.random()} as={Link} to={item.to}>
+                        {item.prefix}
+                        {item.text}
+                      </Menu.Item>
+                    ) : null,
+                  )}
+                </Menu>
+              </Popup>
+            ) : null}
+            {/* Login Button */}
+            <Menu.Item position="right">
+              {this.props.user.id ? (
+                <Button.Group>
+                  <Button inverted as={Link} to="/profile">
+                    Profilom
+                  </Button>
+                  <Button as="a" href="/oidc/logout/" icon="sign out" />
+                </Button.Group>
+              ) : (
+                <Button as="a" href="/oidc/authenticate/" inverted>
+                  Bejelentkezés
+                </Button>
+              )}
+            </Menu.Item>
+          </Menu>
+        </Container>
+      </Segment>
+    );
+  }
+
+  render() {
+    return (
+      <div>
+        {/* Tablet, Computer, ... view */}
+        <Responsive minWidth={600} maxWidth={700}>
+          {this.renderHeader(3)}
+        </Responsive>
+        <Responsive minWidth={701} maxWidth={800}>
+          {this.renderHeader(4)}
+        </Responsive>
+        <Responsive minWidth={801} maxWidth={1000}>
+          {this.renderHeader(5)}
+        </Responsive>
+        <Responsive minWidth={1001} maxWidth={1100}>
+          {this.renderHeader(6)}
+        </Responsive>
+        <Responsive minWidth={1101} maxWidth={1200}>
+          {this.renderHeader(7)}
+        </Responsive>
+        <Responsive minWidth={1201}>{this.renderHeader(8)}</Responsive>
+        {/* Mobile view */}
+        <Responsive maxWidth={599}>
+          <Segment inverted textAlign="center" vertical>
+            <Container>
+              <Menu inverted secondary size="large">
+                {/* kszk logo + home link */}
+                <Menu.Item as={Link} to={menuItems[0].to}>
+                  {menuItems[0].prefix}
+                  {menuItems[0].text}
+                </Menu.Item>
+                {/* Sandwich menu */}
+                <Popup
+                  flowing
+                  hoverable
+                  inverted
+                  trigger={
+                    <Menu.Item onClick={this.handleClose} position="right">
+                      <Icon name="bars" size="large" />
+                    </Menu.Item>
+                  }
+                  position="top center"
+                  open={this.state.isOpen}
+                  onOpen={this.handleOpen}
+                  on="click"
+                  size="huge"
+                >
+                  <Menu vertical inverted secondary size="large">
+                    {menuItems.map((item, i) =>
+                      (this.props.user.permission >= item.permissionLevel ||
+                        item.permissionLevel === 0) &&
+                      i > 0 ? (
+                        <Menu.Item
+                          onClick={this.handleClose}
+                          key={Math.random()}
+                          as={Link}
+                          to={item.to}
+                        >
+                          {item.prefix}
+                          {item.text}
+                        </Menu.Item>
+                      ) : null,
+                    )}
+                    <Menu.Item>
+                      {this.props.user.id ? (
+                        <Button.Group>
+                          <Button
+                            onClick={this.handleClose}
+                            inverted
+                            as={Link}
+                            to="/profile"
+                          >
+                            Profilom
+                          </Button>
+                          <Button
+                            onClick={this.handleClose}
+                            as="a"
+                            href="/oidc/logout/"
+                            icon="sign out"
+                          />
+                        </Button.Group>
+                      ) : (
+                        <Button
+                          onClick={this.handleClose}
+                          as="a"
+                          href="/oidc/authenticate/"
+                          inverted
+                        >
+                          Bejelentkezés
+                        </Button>
+                      )}
+                    </Menu.Item>
+                  </Menu>
+                </Popup>
+              </Menu>
+            </Container>
+          </Segment>
+        </Responsive>
+      </div>
+    );
+  }
+}
+
+const mapStateToProps = ({ user }) => ({
+  user,
+});
+
+export default connect(mapStateToProps, { getUserData })(Header);

src/components/Main.js

-import React, { Component } from 'react'
-import { NavLink } from 'react-router-dom';
-import {
-  Button,
-  Container,
-  Divider,
-  Grid,
-  Header,
-  Icon,
-  Image,
-  List,
-  Menu,
-  Segment,
-  Visibility,
-} from 'semantic-ui-react'
-
-const FixedMenu = () => (
-  <Menu fixed='top' size='large'>
-    <Container>
-      <Menu.Item as={NavLink} to='/home'>Home</Menu.Item>
-      <Menu.Item as={NavLink} to='/roster'>Roster</Menu.Item>
-      <Menu.Item as={NavLink} to='/schedule'>Schedule</Menu.Item>
-      <Menu.Item>Careers</Menu.Item>
-      <Menu.Menu position='right'>
-        <Menu.Item className='item'>
-          <Button >Log in</Button>
-        </Menu.Item>
-        <Menu.Item>
-          <Button primary>Sign Up</Button>
-        </Menu.Item>
-      </Menu.Menu>
-    </Container>
-  </Menu>
-)
-
-export default class HomepageLayout extends Component {
-  state = {}
-
-  hideFixedMenu = () => this.setState({ visible: false })
-  showFixedMenu = () => this.setState({ visible: true })
-
-  render() {
-    const { visible } = this.state
-
-    return (
-      <div>
-        { visible ? <FixedMenu /> : null }
-
-        <Visibility
-          onBottomPassed={this.showFixedMenu}
-          onBottomVisible={this.hideFixedMenu}
-          once={false}
-        >
-          <Segment
-            inverted
-            textAlign='center'
-            style={{ minHeight: 700, padding: '1em 0em' }}
-            vertical
-          >
-            <Container>
-              <Menu inverted pointing secondary size='large'>
-                <Menu.Item as={NavLink} to='/home'>Home</Menu.Item>
-                <Menu.Item as={NavLink} to='/roster'>Roster</Menu.Item>
-                <Menu.Item as={NavLink} to='/schedule'>Schedule</Menu.Item>
-                <Menu.Item as='a'>Careers</Menu.Item>
-                <Menu.Item position='right'>
-                  <Button as='a' inverted>Log in</Button>
-                  <Button as='a' inverted style={{ marginLeft: '0.5em' }}>Sign Up</Button>
-                </Menu.Item>
-              </Menu>
-            </Container>
-
-            <Container text>
-              <Header
-                as='h1'
-                content='Imagine-a-Company'
-                inverted
-                style={{ fontSize: '4em', fontWeight: 'normal', marginBottom: 0, marginTop: '3em' }}
-              />
-              <Header
-                as='h2'
-                content='Do whatever you want when you want to.'
-                inverted
-                style={{ fontSize: '1.7em', fontWeight: 'normal' }}
-              />
-              <Button primary size='huge'>
-                Get Started
-                <Icon name='right arrow' />
-              </Button>
-            </Container>
-          </Segment>
-        </Visibility>
-
-        <Segment style={{ padding: '8em 0em' }} vertical>
-          <Grid container stackable verticalAlign='middle'>
-            <Grid.Row>
-              <Grid.Column width={8}>
-                <Header as='h3' style={{ fontSize: '2em' }}>We Help Companies and Companions</Header>
-                <p style={{ fontSize: '1.33em' }}>
-                  We can give your company superpowers to do things that they never thought possible. Let us delight
-                  your customers and empower your needs... through pure data analytics.
-                </p>
-                <Header as='h3' style={{ fontSize: '2em' }}>We Make Bananas That Can Dance</Header>
-                <p style={{ fontSize: '1.33em' }}>
-                  Yes that's right, you thought it was the stuff of dreams, but even bananas can be bioengineered.
-                </p>
-              </Grid.Column>
-              <Grid.Column floated='right' width={6}>
-                <Image
-                  bordered
-                  rounded
-                  size='large'
-                  src='/assets/images/wireframe/white-image.png'
-                />
-              </Grid.Column>
-            </Grid.Row>
-            <Grid.Row>
-              <Grid.Column textAlign='center'>
-                <Button size='huge'>Check Them Out</Button>
-              </Grid.Column>
-            </Grid.Row>
-          </Grid>
-        </Segment>
-
-        <Segment style={{ padding: '0em' }} vertical>
-          <Grid celled='internally' columns='equal' stackable>
-            <Grid.Row textAlign='center'>
-              <Grid.Column style={{ paddingBottom: '5em', paddingTop: '5em' }}>
-                <Header as='h3' style={{ fontSize: '2em' }}>"What a Company"</Header>
-                <p style={{ fontSize: '1.33em' }}>That is what they all say about us</p>
-              </Grid.Column>
-              <Grid.Column style={{ paddingBottom: '5em', paddingTop: '5em' }}>
-                <Header as='h3' style={{ fontSize: '2em' }}>"I shouldn't have gone with their competitor."</Header>
-                <p style={{ fontSize: '1.33em' }}>
-                  <Image avatar src='/assets/images/avatar/large/nan.jpg' />
-                  <b>Nan</b> Chief Fun Officer Acme Toys
-                </p>
-              </Grid.Column>
-            </Grid.Row>
-          </Grid>
-        </Segment>
-
-        <Segment style={{ padding: '8em 0em' }} vertical>
-          <Container text>
-            <Header as='h3' style={{ fontSize: '2em' }}>Breaking The Grid, Grabs Your Attention</Header>
-            <p style={{ fontSize: '1.33em' }}>
-              Instead of focusing on content creation and hard work, we have learned how to master the art of doing
-              nothing by providing massive amounts of whitespace and generic content that can seem massive, monolithic
-              and worth your attention.
-            </p>
-            <Button as='a' size='large'>Read More</Button>
-
-            <Divider
-              as='h4'
-              className='header'
-              horizontal
-              style={{ margin: '3em 0em', textTransform: 'uppercase' }}
-            >
-              <a href='#'>Case Studies</a>
-            </Divider>
-
-            <Header as='h3' style={{ fontSize: '2em' }}>Did We Tell You About Our Bananas?</Header>
-            <p style={{ fontSize: '1.33em' }}>
-              Yes I know you probably disregarded the earlier boasts as non-sequitur filler content, but it's really
-              true.
-              It took years of gene splicing and combinatory DNA research, but our bananas can really dance.
-            </p>
-            <Button as='a' size='large'>I'm Still Quite Interested</Button>
-          </Container>
-        </Segment>
-
-        <Segment inverted vertical style={{ padding: '5em 0em' }}>
-          <Container>
-            <Grid divided inverted stackable>
-              <Grid.Row>
-                <Grid.Column width={3}>
-                  <Header inverted as='h4' content='About' />
-                  <List link inverted>
-                    <List.Item as='a'>Sitemap</List.Item>
-                    <List.Item as='a'>Contact Us</List.Item>
-                    <List.Item as='a'>Religious Ceremonies</List.Item>
-                    <List.Item as='a'>Gazebo Plans</List.Item>
-                  </List>
-                </Grid.Column>
-                <Grid.Column width={3}>
-                  <Header inverted as='h4' content='Services' />
-                  <List link inverted>
-                    <List.Item as='a'>Banana Pre-Order</List.Item>
-                    <List.Item as='a'>DNA FAQ</List.Item>
-                    <List.Item as='a'>How To Access</List.Item>
-                    <List.Item as='a'>Favorite X-Men</List.Item>
-                  </List>
-                </Grid.Column>
-                <Grid.Column width={7}>
-                  <Header as='h4' inverted>Footer Header</Header>
-                  <p>Extra space for a call to action inside the footer that could help re-engage users.</p>
-                </Grid.Column>
-              </Grid.Row>
-            </Grid>
-          </Container>
-        </Segment>
-      </div>
-    )
-  }
-}
+import { Redirect, Route, Switch, withRouter } from 'react-router-dom';
+
+import ApplicantProfile from './pages/ApplicantProfile';
+import Applications from './pages/Applications';
+import EventDetail from './pages/EventDetail';
+import Groups from './pages/Groups';
+import Home from './pages/Home';
+import Homework from './pages/Homework';
+import Mentors from './pages/Mentors';
+import News from './pages/News';
+import NotFound from './pages/NotFound';
+import Profile from './pages/Profile';
+import React from 'react';
+import Schedule from './pages/Schedule';
+import Statistics from './pages/Statistics';
+
+const Main = () => (
+  <Switch>
+    <Redirect exact from="/" to="/home" />
+    <Route exact path="/home" component={Home} />
+    <Route path="/news" component={News} />
+    <Route path="/mentors" component={Mentors} />
+    <Route path="/schedule" component={Schedule} />
+    <Route path="/profile" component={withRouter(Profile)} />
+    <Route path="/statistics" component={Statistics} />
+    <Route path="/groups" component={Groups} />
+    <Route path="/homework" component={Homework} />
+    <Route path="/events/:id" component={EventDetail} />
+    <Route path="/applications" component={Applications} />
+    <Route path="/applicant/:id" component={ApplicantProfile} />
+    <Route component={NotFound} />
+  </Switch>
+);
+
+export default Main;

src/components/extra/GroupCard.js

+import { Divider, Header, Segment } from 'semantic-ui-react';
+import React, { Component } from 'react';
+
+class GroupCard extends Component {
+  render() {
+    return (
+      <Segment style={{ marginTop: 0 }}>
+        <Divider style={{ fontSize: '2em' }} horizontal>
+          <Header as="h3" style={{ fontSize: '1.2em' }}>
+            {this.props.label}
+          </Header>
+        </Divider>
+        <div
+          className="paragraph"
+          dangerouslySetInnerHTML={{ __html: this.props.value }}
+        />
+      </Segment>
+    );
+  }
+}
+
+export default GroupCard;

src/components/forms/AddEventForm.js

+import { Button, Form, Icon, Input, Modal } from 'semantic-ui-react';
+import React, { Component } from 'react';
+import { addEvent, eventDate, writeEvent } from '../../actions/statistics';
+
+import { DateTimeInput } from 'semantic-ui-calendar-react';
+import { clearWrite } from '../../actions/news';
+import { connect } from 'react-redux';
+
+class AddEventForm extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      showModal: false,
+      date: '',
+    };
+  }
+
+  // Handling change in redux action creator throws an exception
+  // Temporal solotion using the components state to display, instead redux state
+  handleChange = (event, { name, value }) => {
+    if (this.state.hasOwnProperty(name)) {
+      this.setState({ [name]: value });
+    }
+    this.props.eventDate(name, value);
+  };
+
+  render() {
+    const { name, description } = this.props.newEvent;
+    return (
+      <Modal
+        open={this.state.showModal}
+        trigger={
+          <Button
+            size="big"
+            onClick={() => {
+              this.setState({ showModal: true });
+            }}
+          >
+            Alkalom hozzáadása
+          </Button>
+        }
+      >
+        <Modal.Header>Új alkalom:</Modal.Header>
+        <Modal.Content
+          style={{
+            paddingTop: '20px',
+          }}
+        >
+          <Form>
+            <Form.Field
+              control={Input}
+              label="Név"
+              name="name"
+              onChange={(e) => this.props.writeEvent(e)}
+              value={name}
+              style={{
+                marginBottom: '20px',
+              }}
+              placeholder="Title"
+            />
+            <Form.TextArea
+              name="description"
+              label="Leírás:"
+              placeholder="Rövid leírás"
+              value={description}
+              onChange={(e) => this.props.writeEvent(e)}
+            />
+            <DateTimeInput
+              name="date"
+              label="Dátum:"
+              dateFormat="YYYY-MM-DD"
+              placeholder="Date"
+              value={this.state.date}
+              iconPosition="left"
+              onChange={this.handleChange}
+            />
+          </Form>
+        </Modal.Content>
+        <Modal.Actions>
+          <Button
+            inverted
+            color="red"
+            onClick={() => {
+              this.setState({ showModal: false });
+              this.props.clearWrite();
+            }}
+          >
+            <Icon name="remove" />
+            Cancel
+          </Button>
+          <Button
+            inverted
+            color="green"
+            onClick={() => {
+              this.props.addEvent(this.props.newEvent);
+              this.setState({ showModal: false, date: '' });
+            }}
+          >
+            <Icon name="checkmark" /> Add
+          </Button>
+        </Modal.Actions>
+      </Modal>
+    );
+  }
+}
+
+const mapStateToProps = ({ events: { newEvent } }) => ({ newEvent });
+
+export default connect(mapStateToProps, {
+  writeEvent,
+  addEvent,
+  eventDate,
+  clearWrite,
+})(AddEventForm);

src/components/forms/AddNewsForm.js

+import { Button, Form, Icon, Input, Modal, TextArea } from 'semantic-ui-react';
+import React, { Component } from 'react';
+import { clearWrite, postNews, writeNews } from '../../actions/news';
+
+import { connect } from 'react-redux';
+
+class AddNewsForm extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      showModal: false,
+    };
+  }
+
+  render() {
+    const { title, text } = this.props.newNews;
+    const updated_by = this.props.user.id;
+    return (
+      <Modal
+        open={this.state.showModal}
+        trigger={
+          <Button
+            size="big"
+            onClick={() => {
+              this.setState({ showModal: true });
+            }}
+          >
+            Hír hozzáadása
+          </Button>
+        }
+      >
+        <Modal.Header>Új hír:</Modal.Header>
+        <Modal.Content>
+          <Form>
+            <Form.Field
+              control={Input}
+              label="Title"
+              name="title"
+              onChange={(e) => this.props.writeNews(e)}
+              value={title}
+              placeholder="Title"
+            />
+            <Form.Field
+              control={TextArea}
+              label="Text"
+              name="text"
+              onChange={(e) => this.props.writeNews(e)}
+              value={text}
+              placeholder="Tell us what you want..."
+            />
+          </Form>
+        </Modal.Content>
+        <Modal.Actions>
+          <Button
+            inverted
+            color="red"
+            onClick={() => {
+              this.setState({ showModal: false });
+            }}
+          >
+            <Icon name="remove" />
+            Cancel
+          </Button>
+          <Button
+            inverted
+            color="green"
+            onClick={() => {
+              this.props.postNews({ title, text, updated_by });
+              this.setState({ showModal: false });
+              this.props.clearWrite();
+            }}
+          >
+            <Icon name="checkmark" /> Add
+          </Button>
+        </Modal.Actions>
+      </Modal>
+    );
+  }
+}
+
+const mapStateToProps = ({ newNews, user }) => ({ newNews, user });
+
+export default connect(mapStateToProps, { postNews, writeNews, clearWrite })(
+  AddNewsForm
+);

src/components/forms/AddSolutionForm.js

+import './Forms.css';
+
+import {
+  Button,
+  Dimmer,
+  Divider,
+  Form,
+  Header,
+  Icon,
+  Input,
+  Loader,
+  Modal,
+  Segment,
+  TextArea,
+} from 'semantic-ui-react';
+import React, { Component } from 'react';
+import {
+  addDocument,
+  addSolution,
+  clearWrite,
+  getDocuments,
+  getSolutions,
+  writeSolution,
+  writeSolutionFile,
+} from '../../actions/homework';
+
+import ConfirmModal from './ConfirmModal';
+import { connect } from 'react-redux';
+import { customMessage } from '../pages/Homework';
+
+const allowedFileTypes = [
+  'image/jpeg',
+  'image/png',
+  'application/zip',
+  'application/x-zip',
+];
+
+const allowedFileEnds = ['.zip', '.jpeg', '.jpg', '.jpe', '.png'];
+
+function validateFileName(fileNameToValidate) {
+  return (
+    allowedFileEnds.find((typeName) => {
+      return fileNameToValidate.toLowerCase().endsWith(typeName);
+    }).length > 0
+  );
+}
+
+// in megabytes
+const maxFileSize = 50;
+
+class AddSolutionForm extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      showModal: false,
+      loading: false,
+    };
+  }
+
+  render() {
+    const { name, description, file } = this.props.newSolution;
+
+    const task = this.props.taskid;
+
+    const thisTaskSolution = this.props.homeworks.solutions.filter(
+      (solution) => solution.task === task
+    );
+    const thisTaskDocument = this.props.homeworks.documents.filter(
+      (document) => document.solution === thisTaskSolution[0]?.id
+    );
+
+    const lastName = thisTaskDocument[0]?.name;
+    const lastDesc = thisTaskDocument[0]?.description;
+    const lastFile = thisTaskDocument[0]?.file_url;
+
+    const corrected = false;
+    const accepted = false;
+    const sentences = this.props.taskdesc.split('\n');
+    const note = '';
+    const disabledText = 'A határidő lejárt, további beadás nem lehetséges.';
+
+    return (
+      <Modal
+        open={this.state.showModal}
+        closeOnDimmerClick
+        onClose={() => this.setState({ showModal: false })}
+        trigger={
+          <button
+            type="button"
+            id="task"
+            onClick={() => {
+              this.setState({ showModal: true });
+            }}
+          >
+            <Icon name="external" />
+            {this.props.tasktitle}
+          </button>
+        }
+      >
+        <Modal.Header>
+          {this.props.multiple ? 'Másik megoldás' : 'Megoldás'} beadása a(z)
+          {this.props.tasktitle} nevű feladathoz:
+        </Modal.Header>
+        <Modal.Content>
+          <Modal.Description style={{ marginBottom: '2em' }}>
+            <Header as="h5">Feladat leírása:</Header>
+            {sentences.map((s) => (
+              <p key={Math.random()}>{s}</p>
+            ))}
+          </Modal.Description>
+          {this.props.disabled ? (
+            <div>
+              {lastName ? (
+                <div style={{ paddingBottom: '1em' }}>
+                  <div style={{ marginBottom: '1em', fontWeight: 'bold' }}>
+                    Legutóbbi megoldásod:
+                  </div>
+                  <Segment attached="top">
+                    <h5 style={{ paddingBottom: '0.4em' }}>Cím:</h5>
+                    {lastName}
+                  </Segment>
+                  <Segment attached>
+                    <h5 style={{ paddingBottom: '0.4em' }}>Leírás:</h5>
+                    {lastDesc}
+                  </Segment>
+                  <Segment attached="bottom">
+                    <h5>Beadott fájl:</h5>
+                    {lastFile ? (
+                      <a href={lastFile} rel="noreferrer noopener" download>
+                        Fájl letöltése
+                      </a>
+                    ) : (
+                      <span>-</span>
+                    )}
+                  </Segment>
+                </div>
+              ) : (
+                customMessage(
+                  disabledText,
+                  undefined,
+                  undefined,
+                  this.props.disabled
+                )
+              )}
+            </div>
+          ) : (
+            <Form>
+              {lastName ? (
+                <div style={{ paddingBottom: '1em' }}>
+                  <div style={{ fontWeight: 'bold' }}>
+                    Legutóbbi megoldásod:
+                  </div>
+                  <Segment attached="top">
+                    <h5 style={{ paddingBottom: '0.4em' }}>Cím:</h5>
+                    {lastName}
+                  </Segment>
+                  <Segment attached>
+                    <h5 style={{ paddingBottom: '0.4em' }}>Leírás:</h5>
+                    {lastDesc}
+                  </Segment>
+                  <Segment attached="bottom">
+                    <h5>Beadott fájl:</h5>
+                    {lastFile ? (
+                      <a href={lastFile} rel="noreferrer noopener" download>
+                        Fájl letöltése
+                      </a>
+                    ) : (
+                      <span>-</span>
+                    )}
+                  </Segment>
+                </div>
+              ) : null}
+              <Divider />
+              <Form.Field
+                control={Input}
+                label="Megoldás címe:"
+                name="name"
+                onChange={(e) => this.props.writeSolution(e)}
+                value={name}
+                placeholder="Adj meg egy címet a beadandó megoldásodnak..."
+              />
+              <Form.Field
+                control={TextArea}
+                label="Megoldás leírása:"
+                name="description"
+                onChange={(e) => this.props.writeSolution(e)}
+                value={description}
+                placeholder="Add meg a megoldás leírását..."
+              />
+              <Form.Field>
+                <label>
+                  Fájl (Megengedett fájltípusok: png, jpeg, jpg, zip. Maximum 50
+                  MB.):
+                </label>
+                <Input
+                  type="file"
+                  accept={allowedFileTypes.join(',')}
+                  onChange={(e) => this.props.writeSolutionFile(e)}
+                />
+              </Form.Field>
+            </Form>
+          )}
+        </Modal.Content>
+        <Modal.Actions>
+          <Button
+            inverted
+            color="red"
+            onClick={() => {
+              this.setState({ showModal: false });
+              this.props.clearWrite();
+            }}
+          >
+            <Icon name="remove" /> Mégse
+          </Button>
+          {this.props.multiple ? (
+            <ConfirmModal
+              button={
+                <Button
+                  disabled={
+                    !name ||
+                    !description ||
+                    (!file
+                      ? false
+                      : !validateFileName(file.name) ||
+                        file.size > maxFileSize * 1024 ** 2)
+                  }
+                  inverted
+                  color="green"
+                >
+                  <Icon name="checkmark" />
+                  Beadás
+                  {this.state.loading ? (
+                    <Dimmer active>
+                      <Loader size="massive" />
+                    </Dimmer>
+                  ) : null}
+                </Button>
+              }
+              text="beadod az új megoldást, ami felülírja az előzőt"
+              onAccept={() => {
+                this.setState({
+                  loading: true,
+                });
+                this.props
+                  .addSolution({
+                    task,
+                    accepted,
+                    corrected,
+                    note,
+                    name,
+                    description,
+                    file,
+                  })
+                  .then(
+                    () => {
+                      this.setState({
+                        loading: false,
+                        showModal: false,
+                      });
+                      this.props.clearWrite();
+                    },
+                    () => {
+                      this.setState({
+                        loading: false,
+                      });
+                      alert('Sikertelen feltöltés!');
+                    }
+                  )
+                  .finally(() => {
+                    window.location.reload(false);
+                  });
+              }}
+            />
+          ) : (
+            <Button
+              inverted
+              color="green"
+              disabled={
+                !name ||
+                !description ||
+                (!file
+                  ? false
+                  : !validateFileName(file.name) ||
+                    file.size > maxFileSize * 1024 ** 2)
+              }
+              onClick={() => {
+                this.props.addSolution({
+                  task,
+                  accepted,
+                  corrected,
+                  note,
+                  name,
+                  description,
+                  file,
+                });
+                this.setState({ showModal: false });
+                this.props.clearWrite();
+              }}
+            >
+              <Icon name="checkmark" /> Beadás
+            </Button>
+          )}
+        </Modal.Actions>
+      </Modal>
+    );
+  }
+}
+
+const mapStateToProps = ({ newSolution, homeworks, user }) => ({
+  newSolution,
+  homeworks,
+  user,
+});
+
+export default connect(mapStateToProps, {
+  addSolution,
+  writeSolution,
+  writeSolutionFile,
+  addDocument,
+  getDocuments,
+  clearWrite,
+  getSolutions,
+})(AddSolutionForm);

src/components/forms/AddTaskForm.js

+import {
+  Button,
+  Form,
+  Icon,
+  Input,
+  Modal,
+  TextArea,
+} from 'semantic-ui-react';
+import React, { Component } from 'react';
+import {
+  addTask,
+  clearWrite,
+  writeTask,
+  writeTaskDeadline,
+} from '../../actions/homework';
+
+import { DateTimeInput } from 'semantic-ui-calendar-react';
+import { connect } from 'react-redux';
+import moment from 'moment';
+
+class AddTaskForm extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      showModal: false,
+    };
+  }
+
+  render() {
+    const {
+      title, text, deadline, bits = 1,
+    } = this.props.newTask;
+    return (
+      <Modal
+        open={this.state.showModal}
+        closeOnDimmerClick
+        onClose={() => this.setState({ showModal: false })}
+        trigger={(
+          <Button
+            inverted
+            style={{ marginRight: '2em' }}
+            color='blue'
+            onClick={() => { this.setState({ showModal: true }); }}
+          >
+            <Icon name='plus' />
+            {' '}
+Új feladat hozzáadása
+          </Button>
+        )}
+      >
+        <Modal.Header>Új feladat:</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.length > 150
+              || text === ''
+              || deadline === '' || moment().isAfter(deadline)
+            }
+            onClick={() => {
+              this.props.addTask({
+                title, text, deadline, bits,
+              });
+              this.setState({ showModal: false });
+              this.props.clearWrite();
+            }}
+          >
+            <Icon name='checkmark' />
+            {' '}
+Hozzáadás
+          </Button>
+        </Modal.Actions>
+      </Modal>
+    );
+  }
+}
+
+const mapStateToProps = ({ newTask, user }) => ({ newTask, user });
+
+export default connect(mapStateToProps, {
+  addTask,
+  writeTask,
+  writeTaskDeadline,
+  clearWrite,
+})(AddTaskForm);

src/components/forms/ConfirmModal.js

+import { Button, Header, Icon, Modal } from 'semantic-ui-react';
+import React, { Component } from 'react';
+
+class ConfirmModal extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      showModal: false,
+    };
+  }
+
+  close = () => this.setState({ showModal: false });
+
+  open = () => this.setState({ showModal: true });
+
+  render() {
+    const { button, text, onAccept } = 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="question" content="Megerősítés" />
+        <Modal.Content>
+          <p>Biztos hogy {text}?</p>
+        </Modal.Content>
+        <Modal.Actions>
+          <Button basic color="red" inverted onClick={() => this.close()}>
+            <Icon name="remove" /> Nem
+          </Button>
+          <Button
+            color="green"
+            inverted
+            onClick={() => {
+              onAccept();
+              this.close();
+            }}
+          >
+            <Icon name="checkmark" /> Igen
+          </Button>
+        </Modal.Actions>
+      </Modal>
+    );
+  }
+}
+
+export default ConfirmModal;

src/components/forms/CorrectSolutionForm.js

+import {
+  Button,
+  Checkbox,
+  Form,
+  Header,
+  Icon,
+  Modal,
+  TextArea,
+} from 'semantic-ui-react';
+import React, { Component } from 'react';
+import {
+  check,
+  clearWrite,
+  correctSolution,
+  getDocuments,
+  getSolutions,
+  selectSolution,
+  setchecktrue,
+  writeSolution,
+} from '../../actions/homework';
+
+import { connect } from 'react-redux';
+
+class CorrectSolutionForm extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      showModal: false,
+    };
+  }
+
+  render() {
+    const { studentFullName, studentId, taskTitle, taskSolutions } = this.props;
+    const taskSolutionsProfile = taskSolutions.filter(
+      (solution) => solution.created_by === studentId
+    );
+    const relevantSolution = taskSolutionsProfile.slice(-1)[0];
+    const relevantDocuments = this.props.homeworks.documents
+      .filter((document) => document.solution === relevantSolution.id)
+      .filter((document) => document.uploaded_by_name === studentFullName);
+    const relevantDocument = relevantDocuments.slice(-1)[0];
+    let fileLink;
+    if (relevantDocument && relevantDocument.file_url) {
+      fileLink = `${relevantDocument.file_url}`;
+    } else {
+      fileLink = null;
+    }
+    const { corrected, accepted, note } = this.props.correction;
+    return (
+      <Modal
+        open={this.state.showModal}
+        closeOnDimmerClick
+        onClose={() => this.setState({ showModal: false })}
+        trigger={
+          <Button
+            inverted
+            color={this.props.color}
+            style={{ marginRight: '1.5em', marginTop: '1.5em' }}
+            onClick={() => {
+              this.setState({ showModal: true });
+              this.props.selectSolution(relevantSolution);
+            }}
+          >
+            {studentFullName}
+          </Button>
+        }
+      >
+        <Modal.Header>
+          A(z) {taskTitle} nevű feladat {studentFullName} által beadott
+          megoldásának kijavítása:
+        </Modal.Header>
+        <Modal.Content>
+          <Header as="h5">A megoldás címe:</Header>
+          {relevantDocument && relevantDocument.description ? (
+            <p>{relevantDocument.name}</p>
+          ) : (
+            <p>Nincs cím.</p>
+          )}
+          <Header as="h5">A megoldás leírása:</Header>
+          {relevantDocument && relevantDocument.description ? (
+            relevantDocument.description
+              .split('\n')
+              .map((s) => <p key={Math.random()}>{s}</p>)
+          ) : (
+            <p>Nincs leírás.</p>
+          )}
+          <Header as="h5">A beadott dokumentum:</Header>
+          {fileLink ? (
+            <a href={fileLink} rel="noreferrer noopener" target>
+              Fájl letöltése
+            </a>
+          ) : (
+            <p>Nincs fájl.</p>
+          )}
+          <Header as="h5">Kijavítás állapotának változtatása:</Header>
+          <Button
+            color="orange"
+            inverted={corrected}
+            onClick={() => this.props.check('corrected')}
+          >
+            <Checkbox label="Nincs kijavítva" checked={!corrected} />
+          </Button>
+          <Header as="h5">Elfogadás/elutasítás:</Header>
+          <Button
+            color="green"
+            inverted={!accepted}
+            onClick={() => {
+              this.props.check('accepted');
+              this.props.setchecktrue('corrected');
+            }}
+          >
+            <Checkbox label="Elfogadható" checked={accepted} />
+          </Button>
+          <Button
+            color="red"
+            inverted={accepted}
+            onClick={() => this.props.check('accepted')}
+          >
+            <Checkbox label="Nem elfogadható" checked={!accepted} />
+          </Button>
+          <Header as="h5">A feladat megoldásának szöveges értékelése:</Header>
+          <Form>
+            <Form.Field
+              control={TextArea}
+              name="note"
+              onChange={(e) => this.props.writeSolution(e)}
+              value={note}
+              placeholder="Írhatsz megjegyzést a megoldásra..."
+            />
+          </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"
+            onClick={() => {
+              this.props.correctSolution(
+                relevantSolution.id,
+                corrected,
+                accepted,
+                note
+              );
+              this.setState({ showModal: false });
+              this.props.clearWrite();
+            }}
+          >
+            <Icon name="checkmark" /> Beadás
+          </Button>
+        </Modal.Actions>
+      </Modal>
+    );
+  }
+}
+
+const mapStateToProps = ({ homeworks, correction, user }) => ({
+  homeworks,
+  correction,
+  user,
+});
+
+export default connect(mapStateToProps, {
+  correctSolution,
+  writeSolution,
+  check,
+  setchecktrue,
+  clearWrite,
+  getSolutions,
+  getDocuments,
+  selectSolution,
+})(CorrectSolutionForm);

src/components/forms/EditNewsForm.js

+import { Button, Form, Icon, Input, Modal, TextArea } from 'semantic-ui-react';
+import React, { Component } from 'react';
+import { clearWrite, editNews, writeNews } from '../../actions/news';
+
+import { connect } from 'react-redux';
+import moment from 'moment';
+
+class EditNewsForm extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      showModal: false,
+    };
+  }
+
+  render() {
+    const {
+      id,
+      title,
+      text,
+      author,
+      last_update_by,
+      created_at,
+      updated_at,
+    } = this.props.selectedNews;
+    const updated_by = this.props.user.id;
+    return (
+      <Modal
+        open={this.state.showModal}
+        onOpen={this.props.onClick}
+        trigger={
+          <Button
+            compact
+            onClick={() => {
+              this.setState({ showModal: true });
+            }}
+            size="mini"
+          >
+            Edit
+          </Button>
+        }
+      >
+        <Modal.Header>Szerkesztés:</Modal.Header>
+        <Modal.Content>
+          <p style={{ fontStyle: 'italic' }}>
+            <b>Közzétéve:</b> {moment(created_at).format('LLLL')} <br />
+            <b>Írta:</b> {author} <br />
+            <b>Szerkesztve:</b> {moment(updated_at).format('LLLL')} <br />
+            <b>Szerkesztette:</b> {last_update_by}
+          </p>
+          <Form>
+            <Form.Field
+              control={Input}
+              label="Title"
+              name="title"
+              onChange={(e) => this.props.writeNews(e)}
+              value={title}
+              placeholder="Title"
+            />
+            <Form.Field
+              control={TextArea}
+              label="Text"
+              name="text"
+              onChange={(e) => this.props.writeNews(e)}
+              value={text}
+              placeholder="Tell us what you want..."
+            />
+          </Form>
+        </Modal.Content>
+        <Modal.Actions>
+          <Button
+            inverted
+            color="red"
+            onClick={() => {
+              this.setState({ showModal: false });
+            }}
+          >
+            <Icon name="remove" /> Cancel
+          </Button>
+          <Button
+            inverted
+            color="green"
+            onClick={() => {
+              this.props.editNews({
+                id,
+                title,
+                text,
+                updated_by,
+              });
+              this.setState({ showModal: false });
+              this.props.clearWrite();
+            }}
+          >
+            <Icon name="checkmark" /> Edit
+          </Button>
+        </Modal.Actions>
+      </Modal>
+    );
+  }
+}
+
+const mapStateToProps = ({ user, selectedNews }) => ({ user, selectedNews });
+
+export default connect(mapStateToProps, {
+  editNews,
+  writeNews,
+  clearWrite,
+})(EditNewsForm);