Added task deletion feature

src/actions/homework.js

@@ -2,6 +2,7 @@ import axios from './session';
 import { GET_TASKS,
   GET_SOLUTIONS,
   ADD_TASK,
+  DELETE_TASK,
   WRITE_TASK,
   CLEAR_WRITE,
   ADD_SOLUTION,
@@ -50,13 +51,10 @@ export const addTask = ({ title, text, deadline }) => (
         deadline,
       });
       if (response.data.id) {
-        alert('Sikeres mentés!');
         dispatch({
           type: ADD_TASK,
           payload: response.data,
         });
-      } else {
-        alert('Mentés nem sikerült!');
       }
     } catch (e) {
       console.log(e);
@@ -64,6 +62,21 @@ export const addTask = ({ title, text, deadline }) => (
   }
 );
 
+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 addDocument = ({
   name, description, file, solution,
 }) => (

src/actions/types.js

@@ -13,6 +13,7 @@ export const SELECT_NEWS = 'select_news';
 
 export const GET_TASKS = 'get_homeworks';
 export const ADD_TASK = 'add_task';
+export const DELETE_TASK = 'delete_task';
 export const WRITE_TASK = 'write_task';
 export const WRITE_SOLUTION = 'write_solution';
 export const WRITE_SOLUTION_FILE = 'write_solution_file';

src/components/pages/Homework.js

@@ -10,10 +10,11 @@ import {
 } from 'semantic-ui-react';
 import { connect } from 'react-redux';
 import moment from 'moment';
-import { getTasks, getSolutions, addTask, addDocument, getProfiles, getDocuments } from '../../actions/homework';
+import { getTasks, getSolutions, addTask, deleteTask, addDocument, getProfiles, getDocuments } from '../../actions/homework';
 import AddTaskForm from '../forms/AddTaskForm';
 import AddSolutionForm from '../forms/AddSolutionForm';
 import SolutionDetailsForm from '../forms/SolutionDetailsForm';
+import ConfirmModal from '../forms/ConfirmModal';
 
 const displayTypes = {
   can_submit: {
@@ -117,6 +118,16 @@ class Homework extends Component {
         ));
     }
 
+    const deleteButton = (
+      <Button
+        inverted
+        style={{ marginRight: '2em' }}
+        color='red'
+      >
+        <Icon name='x' /> Törlés
+      </Button>
+    );
+
     return this.props.homeworks.tasks
       .filter(task => moment().isBefore(task.deadline) === active)
       .map(task => (
@@ -139,8 +150,11 @@ class Homework extends Component {
             {moment(task.deadline).format('YYYY. MM. DD. HH:mm')}
           </Table.Cell>
           <Table.Cell>
-            <Icon name={displayTypes[this.getTaskDisplayStyle(task)].icon} />{' '}
-            {displayTypes[this.getTaskDisplayStyle(task)].text}
+            <ConfirmModal
+              button={deleteButton}
+              text='törlöd a kiválaszott feladatot a már beadott megoldásokkal együtt'
+              onAccept={() => this.props.deleteTask(task)}
+            />
           </Table.Cell>
         </Table.Row>
       ));
@@ -155,13 +169,14 @@ class Homework extends Component {
       marginBottom = '3em';
     }
 
+    if (!staff) {
       return (
         <Table color={tableColor} fixed style={{ marginBottom }}>
           <Table.Header>
             <Table.Row>
               <Table.HeaderCell>
                 <Icon circular name='home' />
-              Feladat megnevezése
+              Feladat megnevezése / beadása
               </Table.HeaderCell>
               <Table.HeaderCell>
                 <Icon circular name='calendar' />
@@ -177,6 +192,28 @@ class Homework extends Component {
         </Table>
       );
     }
+    return (
+      <Table color={tableColor} fixed style={{ marginBottom }}>
+        <Table.Header>
+          <Table.Row>
+            <Table.HeaderCell>
+              <Icon circular name='home' />
+              Feladat megnevezése / Beadások állapota
+            </Table.HeaderCell>
+            <Table.HeaderCell>
+              <Icon circular name='calendar' />
+              Beadási határidő
+            </Table.HeaderCell>
+            <Table.HeaderCell>
+              <Icon circular name='edit' />
+              Módosítás / Törlés
+            </Table.HeaderCell>
+          </Table.Row>
+        </Table.Header>
+        <Table.Body>{this.renderTaskList(active, staff)}</Table.Body>
+      </Table>
+    );
+  }
 
   renderHomeworks(active, staff) {
     let empty = false;
@@ -186,7 +223,7 @@ class Homework extends Component {
     let headerText = 'Aktív feladatok';
 
     if (staff) {
-      headerText = 'Aktív feladatok kijavítása';
+      headerText = 'Aktív feladatok kijavítása, módosítása vagy törlése';
     }
 
     if (
@@ -198,7 +235,7 @@ class Homework extends Component {
 
     if (!active) {
       if (staff) {
-        headerText = 'Lejárt határidejű feladatok kijavítása';
+        headerText = 'Lejárt határidejű feladatok kijavítása, módosítása vagy törlése';
       } else {
         headerText = 'Lejárt határidejű feladatok';
       }
@@ -214,7 +251,7 @@ class Homework extends Component {
             dividing
             content={headerText}
             style={{
-                fontSize: '3em',
+                fontSize: '2em',
                 fontWeight: 'normal',
                 marginBottom: 0,
                 marginTop: '0.5em',
@@ -244,9 +281,9 @@ class Homework extends Component {
               <Header
                 as='h1'
                 dividing
-                content='Házi feladat hozzáadása, módosítása vagy törlése'
+                content='Új házi feladat létrehozása'
                 style={{
-                      fontSize: '3em',
+                      fontSize: '2em',
                       fontWeight: 'normal',
                       marginBottom: '0.5em',
                       marginTop: '0.5em',
@@ -274,6 +311,7 @@ export default connect(
     getTasks,
     getSolutions,
     addTask,
+    deleteTask,
     addDocument,
     getProfiles,
     getDocuments,

src/reducers/HomeworksReducer.js

-import { GET_TASKS, GET_SOLUTIONS, ADD_TASK, ADD_SOLUTION, GET_PROFILES, GET_DOCUMENTS } from '../actions/types';
+import { GET_TASKS, GET_SOLUTIONS, ADD_TASK, DELETE_TASK, ADD_SOLUTION, GET_PROFILES, GET_DOCUMENTS } from '../actions/types';
 
 const INITIAL_STATE = {
   id: 0,
@@ -19,6 +19,12 @@ export default (state = INITIAL_STATE, action) => {
       return { ...state, solutions: [action.payload, ...state.solutions], id: action.payload.id };
     case ADD_TASK:
       return { ...state, tasks: [action.payload, ...state.tasks] };
+    case DELETE_TASK:
+      return {
+        ...state,
+        tasks: [...state.tasks.slice(0, state.tasks.indexOf(action.payload)),
+          ...state.tasks.slice(state.tasks.indexOf(action.payload) + 1)],
+      };
     case GET_PROFILES:
       return { ...state, profiles: action.payload };
     case GET_DOCUMENTS: