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 Footer from './Footer';
+import React from 'react';
 
 const App = () => (
-  <div>
-    <Header />
-    <Main />
-    <Footer />
+  <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 React from 'react';
-import { Container, Segment } from 'semantic-ui-react';
+import { Container, Segment } from "semantic-ui-react";
+
+import React from "react";
 
 const Footer = () => (
-  <Segment inverted vertical textAlign='center'>
+  <Segment inverted vertical textAlign="center">
     <Container>
-      <p textalign='center'>Created by DevTeam &copy; 2017-2018.</p>
+      <p textalign="center">Created by DevTeam &copy; 2018-2025.</p>
     </Container>
   </Segment>
 );

src/components/Header.js

-import React, { Component } from 'react';
-import { Link } from 'react-router-dom';
 import {
-  Menu,
-  Container,
   Button,
-  Segment,
-  Visibility,
+  Container,
+  Icon,
   Image,
-} from 'semantic-ui-react';
-import { connect } from 'react-redux';
-import { getUserData } from '../actions';
-import KSZKlogo from './images/kszk_logo.svg';
+  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' }} />,
+    text: "Főoldal",
+    to: "/home",
+    prefix: (
+      <Image size="mini" src={KSZKlogo} style={{ marginRight: "1.5em" }} />
+    ),
+    permissionLevel: 0,
   },
   {
-    text: 'Hírek',
-    to: '/news',
-    prefix: '',
+    text: "Hírek",
+    to: "/news",
+    prefix: "",
+    permissionLevel: 0,
   },
   {
-    text: 'Köreink',
-    to: '/groups',
-    prefix: '',
+    text: "Köreink",
+    to: "/groups",
+    prefix: "",
+    permissionLevel: 0,
   },
   {
-    text: 'Ütemterv',
-    to: '/schedule',
-    prefix: '',
+    text: "Ütemterv",
+    to: "/schedule",
+    prefix: "",
+    permissionLevel: 1,
   },
-]
-
-const FixedMenu = ({ user }) => (
-  <Menu fixed='top' size='large' pointing>
-    <Container>
-      {menuItems.map( (item, i) => <Menu.Item key={i} as={Link} to={item.to}>{item.text}</Menu.Item>)}
-
-      <Menu.Menu position='right'>
-        <Menu.Item className='item'>
-          {
-            user.id ?
-              <Button.Group>
-                <Button primary as={Link} to='/profile'>Profilom</Button>
-                <Button as='a' href='/api/v1/logout/' icon='sign out' />
-              </Button.Group>
-            :
-              <Button as='a' href='/api/v1/login/authsch/'>Bejelentkezés</Button>
-          }
-        </Menu.Item>
-      </Menu.Menu>
-    </Container>
-  </Menu>
-);
+  {
+    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 = {
-      visible: false,
+      isOpen: false,
     };
   }
-  componentWillMount() {
+
+  // Fetch the userData-s
+  UNSAFE_componentWillMount() {
     this.props.getUserData();
   }
 
-  hideFixedMenu() {
-    this.setState({ visible: false });
-  }
+  // Hide the menu after clicking an item on mobile
+  handleOpen = () => {
+    this.setState({ isOpen: true });
+  };
 
-  showFixedMenu() {
-    this.setState({ visible: 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() {
-    const { visible } = this.state;
-
     return (
       <div>
-        {visible ? <FixedMenu user={this.props.user} /> : null}
-        <Visibility
-          onBottomPassed={() => this.showFixedMenu()}
-          onBottomVisible={() => this.hideFixedMenu()}
-          once={false}
-        >
-          <Segment inverted textAlign='center' vertical>
+        {/* 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'>
-
-                {menuItems.map(
-                  (item, i) => (
-                    <Menu.Item key={i} as={Link} to={item.to}>{item.prefix}{item.text}</Menu.Item>
-                  )
-                )}
-
-                <Menu.Item position='right'>
-                  {
-                    this.props.user.id ?
-                      <Button.Group>
-                        <Button inverted as={Link} to='/profile'>Profilom</Button>
-                        <Button as='a' href='/api/v1/logout/' icon='sign out' />
-                      </Button.Group>
-                    :
-                      <Button as='a' href='/api/v1/login/authsch/' inverted>Bejelentkezés</Button>
-                  }
+              <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>
-        </Visibility>
+        </Responsive>
       </div>
     );
   }

src/components/Main.js

-import React from 'react';
-import { Switch, Route, Redirect, withRouter } from 'react-router-dom';
+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 Trainers from './pages/Trainers';
-import Schedule from './pages/Schedule';
+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';
-import Groups from './pages/Groups';
-import News from './pages/News';
 
 const Main = () => (
   <Switch>
-    <Redirect exact from='/' to='/home' />
-    <Route exact path='/home' component={Home} />
-    <Route path='/news' component={News} />
-    <Route path='/trainers' component={Trainers} />
-    <Route path='/schedule' component={Schedule} />
-    <Route path='/profile' component={withRouter(Profile)} />
-    <Route path='/statistics' component={Statistics} />
-    <Route path='/groups' component={Groups} />
+    <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>
 );

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

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;