Added Task Modification feature

src/actions/homework.js

@@ -4,6 +4,8 @@ import { GET_TASKS,
   ADD_TASK,
   DELETE_TASK,
   WRITE_TASK,
+  EDIT_TASK,
+  SELECT_TASK,
   CLEAR_WRITE,
   ADD_SOLUTION,
   WRITE_SOLUTION,
@@ -62,6 +64,32 @@ export const addTask = ({ title, text, deadline }) => (
   }
 );
 
+export const editTask = ({
+  id,
+  title,
+  text,
+  deadline,
+}) => (
+  async (dispatch) => {
+    try {
+      const response = await axios.patch(`/api/v1/homework/tasks/${id}/`, {
+        title,
+        text,
+        deadline,
+      });
+      if (response.data.id) {
+        dispatch({
+          type: EDIT_TASK,
+          payload: response.data,
+
+        });
+      }
+    } catch (e) {
+      console.log(e);
+    }
+  }
+);
+
 export const deleteTask = task => (
   async (dispatch) => {
     try {
@@ -77,6 +105,12 @@ export const deleteTask = task => (
     }
   });
 
+export const setSelectedTask = task => (
+  (dispatch) => {
+    dispatch({ type: SELECT_TASK, payload: task });
+  }
+);
+
 export const addDocument = ({
   name, description, file, solution,
 }) => (
@@ -117,7 +151,7 @@ export const addSolution = ({
         note,
       });
       if (response.data.id) {
-        console.log(response.data.id)
+        console.log(response.data.id);
         dispatch({
           type: ADD_SOLUTION,
           payload: response.data,

src/actions/types.js

@@ -14,7 +14,9 @@ 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 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';

src/components/forms/EditTaskForm.js

+import React, { Component } from 'react';
+import { Modal, Button, Form, Input, TextArea, Icon } from 'semantic-ui-react';
+import { connect } from 'react-redux';
+import { DateTimeInput } from 'semantic-ui-calendar-react';
+import { writeTask, writeTaskDeadline, editTask, clearWrite } from '../../actions/homework';
+
+class EditTaskForm extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      showModal: false,
+    };
+  }
+
+  render() {
+    const {
+      id,
+      title,
+      text,
+      deadline,
+    } = this.props.selectedTask;
+    return (
+      <Modal
+        open={this.state.showModal}
+        onOpen={this.props.onClick}
+        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ő:'
+              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>
+        </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.editTask({
+                id,
+                title,
+                text,
+                deadline,
+              });
+              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/pages/Homework.js

@@ -10,10 +10,20 @@ import {
 } from 'semantic-ui-react';
 import { connect } from 'react-redux';
 import moment from 'moment';
-import { getTasks, getSolutions, addTask, deleteTask, addDocument, getProfiles, getDocuments } from '../../actions/homework';
+import {
+  getTasks,
+  getSolutions,
+  addTask,
+  setSelectedTask,
+  deleteTask,
+  addDocument,
+  getProfiles,
+  getDocuments,
+} from '../../actions/homework';
 import AddTaskForm from '../forms/AddTaskForm';
 import AddSolutionForm from '../forms/AddSolutionForm';
 import SolutionDetailsForm from '../forms/SolutionDetailsForm';
+import EditTaskForm from '../forms/EditTaskForm';
 import ConfirmModal from '../forms/ConfirmModal';
 
 const displayTypes = {
@@ -150,6 +160,7 @@ class Homework extends Component {
             {moment(task.deadline).format('YYYY. MM. DD. HH:mm')}
           </Table.Cell>
           <Table.Cell>
+            <EditTaskForm onClick={() => this.props.setSelectedTask(task)} />
             <ConfirmModal
               button={deleteButton}
               text='törlöd a kiválaszott feladatot a már beadott megoldásokkal együtt'
@@ -303,12 +314,13 @@ class Homework extends Component {
   }
 }
 
-const mapStateToProps = ({ homeworks, user }) => ({ homeworks, user });
+const mapStateToProps = ({ selectedTask, homeworks, user }) => ({ selectedTask, homeworks, user });
 
 export default connect(
   mapStateToProps,
   {
     getTasks,
+    setSelectedTask,
     getSolutions,
     addTask,
     deleteTask,

src/reducers/EditTaskReducer.js

+import { SELECT_TASK, WRITE_TASK, WRITE_TASK_DEADLINE, CLEAR_WRITE } from '../actions/types';
+
+const INITIAL_STATE = { };
+
+export default (state = INITIAL_STATE, action) => {
+  switch (action.type) {
+    case SELECT_TASK:
+      return action.payload;
+    case WRITE_TASK:
+      return { ...state, [action.target]: action.payload };
+    case WRITE_TASK_DEADLINE:
+      return { ...state, [action.target]: action.payload };
+    case CLEAR_WRITE:
+      return INITIAL_STATE;
+    default:
+      return state;
+  }
+};

src/reducers/HomeworksReducer.js

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

src/reducers/index.js

@@ -10,6 +10,7 @@ import EventReducer from './EventReducer';
 import TraineeReducer from './TraineeReducer';
 import NoteReducer from './NoteReducer';
 import CorrectSolutionReducer from './CorrectSolutionReducer';
+import EditTaskReducer from './EditTaskReducer';
 
 const rootReducer = combineReducers({
   user: UserReducer,
@@ -19,6 +20,7 @@ const rootReducer = combineReducers({
   homeworks: HomeworksReducer,
   correction: CorrectSolutionReducer,
   newTask: AddTaskReducer,
+  selectedTask: EditTaskReducer,
   newSolution: AddSolutionReducer,
   events: EventReducer,
   trainees: TraineeReducer,