Delete method added to task route, deleteTask action on client

client/src/actions/board.js

@@ -1,7 +1,9 @@
 import cogoToast from 'cogo-toast';
 import BoardsService from '../services/boardsService';
 import ListsService from '../services/listsService';
+import TasksService from '../services/tasksService';
 
+const taskService = new TasksService();
 const boardsService = new BoardsService();
 const listsService = new ListsService();
 
@@ -10,6 +12,7 @@ export const MOVE_TASK = '[BOARD] MOVE TASK';
 export const ADD_TASK = '[BOARD] ADD TASK';
 export const ADD_LIST = '[BOARD] ADD LIST';
 export const RESET_STATE = '[BOARD] CLEAN STATE';
+export const DELETE_TASK = '[BOARD] DELETE TASK';
 
 export const fetchBoard = (boardId) => {
   return dispatch => boardsService.fetchBoard(boardId)
@@ -103,6 +106,38 @@ export const moveTask = (originListId, destinyListId, taskId) => {
   }
 };
 
+export const deleteTask = taskId => {
+  return (dispatch, getState) => {
+    const state = getState();
+    const previousListsState = state.board.lists;
+
+    const mappedListsWithNewTask = state.board.lists.map(list => {
+      const containsTask = list.tasks.some(task => task.id == taskId);
+
+      if(containsTask) {
+        return {
+          ...list,
+          tasks: list.tasks.filter(task => task.id != taskId)
+        };
+      }
+      return list;
+    });
+
+    dispatch({
+      type: DELETE_TASK,
+      payload: mappedListsWithNewTask
+    });
+
+    taskService.deleteTask(taskId)
+      .catch(() => {
+        dispatch({
+          type: DELETE_TASK,
+          payload: previousListsState
+        });
+      })
+  }
+}
+
 export const resetState = () => {
   return dispatch => dispatch({
     type: RESET_STATE

client/src/components/Task/index.js

@@ -8,6 +8,7 @@ import { connect } from 'react-redux';
 // Project
 import { selectTaskInfoLoading, selectTaskInfoId } from '../../selectors/taskDescription';
 import { fetchTask } from '../../actions/taskDescription';
+import { deleteTask } from '../../actions/board';
 import './styles.scss';
 
 const Task = ({
@@ -16,18 +17,23 @@ const Task = ({
   id,
   index,
   fetchTask,
+  deleteTask,
   taskInfoId,
   taskInfoLoading,
 }) => {
   const handleFetch = () => {
     // Check if the task to fetch isn't already fetched.
     const alreadyFetched = id == taskInfoId;
 
-    if(!alreadyFetched && !taskInfoLoading) {
-      fetchTask(id);  
+    if (!alreadyFetched && !taskInfoLoading) {
+      fetchTask(id);
     }
   }
 
+  const handleDeleteTask = () => {
+    deleteTask(id);
+  }
+
   return (
     <Draggable
       index={index}
@@ -40,9 +46,14 @@ const Task = ({
           {...dragProvided.dragHandleProps}
           className={cn("task", className)}>
           <p className="task__title">{title}</p>
-          <i
-            onClick={handleFetch}
-            className="far fa-question-circle task__icon"></i>
+          <div>
+            <i
+              onClick={handleDeleteTask}
+              className="far fa-trash-alt task__icon"></i>
+            <i
+              onClick={handleFetch}
+              className="far fa-question-circle task__icon"></i>
+          </div>
         </div>
       )}
     </Draggable>
@@ -55,6 +66,7 @@ Task.propTypes = {
   title: propTypes.string,
   index: propTypes.number,
   fetchTask: propTypes.func,
+  deleteTask: propTypes.func,
   taskInfoId: propTypes.number,
   taskInfoLoading: propTypes.bool,
 }
@@ -66,5 +78,6 @@ const stateToProps = state => ({
 
 const dispatchToProps = dispatch => ({
   fetchTask: taskId => dispatch(fetchTask(taskId)),
+  deleteTask: taskId => dispatch(deleteTask(taskId)),
 })
 export default connect(stateToProps, dispatchToProps)(Task);

client/src/components/Task/styles.scss

@@ -4,7 +4,7 @@
   border-radius: 4px;
   width: 100%;
   min-height: 40px;
-  padding: 10px;
+  padding: 10px 8px 10px 10px;
   cursor: pointer;
   display: flex;
   justify-content: space-between;

client/src/reducers/board.js

@@ -4,6 +4,7 @@ import {
   ADD_LIST,
   ADD_TASK,
   RESET_STATE,
+  DELETE_TASK,
 } from '../actions/board';
 
 const defaultState = {
@@ -31,6 +32,11 @@ export default (state = defaultState, action) => {
         ...state,
         lists: action.payload
       };
+    case DELETE_TASK:
+      return {
+        ...state,
+        lists: action.payload,
+      };
     case RESET_STATE:
       return defaultState;
     default:

client/src/services/apiService.js

@@ -19,7 +19,7 @@ class ApiService {
     if (token) {
       data['headers']['token'] = token;
     }
-    
+
     return axios.get(fullPath, data);
   }
 
@@ -52,6 +52,21 @@ class ApiService {
 
     return axios.put(fullPath, params, options);
   }
+
+  delete(path, params) {
+    const token = this.cookies.get('token');
+    const fullPath = [this.api, path].join('');
+
+    const options = {
+      headers: {}
+    };
+
+    if (token) {
+      options['headers']['token'] = token;
+    }
+
+    return axios.delete(fullPath, options, params);
+  }
 }
 
 export default ApiService;

client/src/services/tasksService.js

@@ -8,6 +8,10 @@ class TasksService extends ApiService {
   fetchTask(taskId) {
     return this.get(`/tasks/${taskId}`);
   }
+
+  deleteTask(taskId) {
+    return this.delete(`/tasks/${taskId}`);
+  }
 }
 
 export default TasksService;

server/routes/task_routes.py

@@ -2,18 +2,28 @@
 from middlewares.protected_route import protected_route
 from models import Tasks
 from uuid import uuid4
+from database.db import db
 
 task = Blueprint('task', __name__)
 
 
-@task.route('/tasks/<task_id>', methods=['GET'])
+@task.route('/tasks/<task_id>', methods=['GET', 'DELETE'])
 @protected_route
 def task_root(task_id):
-    requested_task = Tasks.query.filter_by(id=task_id).first()
-
-    response = {
-        'uid': requested_task.uid,
-        'id': requested_task.id,
-        'title': requested_task.title,
-    }
-    return jsonify(response), 200
+    method = request.method
+
+    if method == 'GET':
+        requested_task = Tasks.query.filter_by(id=task_id).first()
+
+        response = {
+            'uid': requested_task.uid,
+            'id': requested_task.id,
+            'title': requested_task.title,
+        }
+        return jsonify(response), 200
+    elif method == 'DELETE':
+        requested_task = Tasks.query.filter_by(id=task_id).first()
+        db.session.delete(requested_task)
+        db.session.commit()
+
+        return jsonify(msg="Task deleted"), 200