#30 Реализовал удаление задачи, изменил название переменных

planner-api/src/models/Task.ts

@@ -22,7 +22,7 @@ import {
     dateTimeStart:Date| null;
     dateTimeDue:Date| null;
     accomplish: taskFinishType;
-    priority: priorityType;
+    priority: priorityType | null;
     author: User;
     project:Project|null;
     executors:User[]
@@ -54,9 +54,10 @@ import {
     @Column({
       type: "enum",
       enum: ["A", "B" , "C"],
-      default: "C"
+      default: "C",
+      nullable: true
     })
-    priority!: priorityType
+    priority!: priorityType | null;
 
     
 

planner-front/src/components/MonthCalendarBody/MonthCalendarBody.js

@@ -7,7 +7,7 @@ import CalendarTask from "./CalendarTask/CalendarTask";
 import ModalTask from "../UI/ModalTask/ModalTask";
 import MonthCalendarModalContent from "../MonthCalendarModalContent/MonthCalendarModalContent";
 
-function MonthCalendarBody({month, year, tasks, createTaskInCellHandler, currentTask, setCurrentTask, hourFormat, setHourFormat, onChangeCurrentTaskHandler, sendNewTask}) {
+function MonthCalendarBody({month, year, tasks, createTaskInCellHandler, currentTask, setCurrentTask, hourFormat, setHourFormat, onChangeCurrentTaskHandler, sendNewTaskHandler, deleteTaskHandler}) {
   
   const [hoursInDay, setHoursInDay] = useState(['8:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00'])
   const [daysInMonth, setDaysInMonth] = useState([])
@@ -147,7 +147,8 @@ function MonthCalendarBody({month, year, tasks, createTaskInCellHandler, current
         description={currentTask.description}
         priority={currentTask.priority}
         onChangeCurrentTaskHandler={(e)=>{ onChangeCurrentTaskHandler(e)}}
-        sendNewTask={()=>{sendNewTask(); handleClose()}}
+        sendNewTaskHandler={()=>{sendNewTaskHandler(); handleClose()}}
+        deleteTaskHandler={()=>{deleteTaskHandler(currentTask.id); handleClose()}}
       />
     </ModalTask>
     </>

planner-front/src/components/MonthCalendarModalContent/MonthCalendarModalContent.js

 import { Button, FormControl, InputLabel, MenuItem, Select, TextField } from "@mui/material";
 
-function MonthCalendarModalContent({title, onChangeCurrentTaskHandler, description, priority, sendNewTask}) {
+function MonthCalendarModalContent({title, onChangeCurrentTaskHandler, description, priority, sendNewTaskHandler, deleteTaskHandler}) {
   return (<>
   <TextField 
     id="task-description-title" 
@@ -41,8 +41,8 @@ function MonthCalendarModalContent({title, onChangeCurrentTaskHandler, descripti
         <MenuItem value={"C"}>C</MenuItem>
       </Select>
   </FormControl>
-  <Button sx={{marginRight: '40px'}} onClick={sendNewTask}>Сохранить</Button>
-  <Button>Удалить</Button>
+  <Button sx={{marginRight: '40px'}} onClick={sendNewTaskHandler}>Сохранить</Button>
+  <Button onClick={deleteTaskHandler}>Удалить</Button>
   </>);
 }
 

planner-front/src/containers/MonthCalendar/MonthCalendar.js

-import { Container } from '@mui/material';
 import { useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import MonthCalendarBody from '../../components/MonthCalendarBody/MonthCalendarBody';
 import MonthCalendarHeader from '../../components/MonthCalendarHeader/MonthCalendarHeader';
-import { addTask, editTask, fetchTasks} from '../../store/actions/tasksActions';
+import { addTask, deleteTask, editTask, fetchCalendarTasks} from '../../store/actions/tasksActions';
 
 function MonthCalendar() {
   const dispatch = useDispatch();
-  const { tasks } = useSelector(state => state.tasks);
+  const { calendarTasks } = useSelector(state => state.tasks);
 
   const [hourFormat, setHourFormat] = useState(false);
   const [month, setMonth] = useState('')
@@ -18,7 +17,7 @@ function MonthCalendar() {
   useEffect(()=>{
     setMonth(new Date().getMonth())
     setYear(new Date().getFullYear())
-    dispatch(fetchTasks())
+    dispatch(fetchCalendarTasks())
   }, [dispatch])
 
   const onChangeWorkerHandler = (event) => {
@@ -89,13 +88,12 @@ function MonthCalendar() {
     setCurrentTask((newTask))
   }
 
-  const sendNewTask = async () => {
+  const sendNewTaskHandler = async () => {
     
     if (currentTask.id) {
       setCurrentTask(() => {
         return{
         ...currentTask,
-        priority: currentTask.priority ? currentTask.priority : 'C'
       }}
       )
       delete currentTask.infoForCell
@@ -104,7 +102,6 @@ function MonthCalendar() {
       setCurrentTask(() => {
         return{
         ...currentTask,
-        priority: currentTask.priority ? currentTask.priority : 'C'
       }}
       )
       delete currentTask.infoForCell
@@ -112,6 +109,10 @@ function MonthCalendar() {
     }
   }
 
+  const deleteTaskHandler = async (taskId) => {
+    dispatch(deleteTask(taskId))
+  }
+
   return (
     <>
       <MonthCalendarHeader
@@ -128,14 +129,15 @@ function MonthCalendar() {
       <MonthCalendarBody
         month={month}
         year={year}
-        tasks={tasks}
+        tasks={calendarTasks}
         createTaskInCellHandler={createTaskInCellHandler}
         setCurrentTask={setCurrentTask}
         hourFormat={hourFormat} 
         setHourFormat={setHourFormat}
         currentTask={currentTask}
         onChangeCurrentTaskHandler={onChangeCurrentTaskHandler}
-        sendNewTask={sendNewTask}
+        sendNewTaskHandler={sendNewTaskHandler}
+        deleteTaskHandler={deleteTaskHandler}
       />
     </>
   );

planner-front/src/store/actionTypes/tasksTypes.js

-export const FETCH_TASKS_REQUEST = "FETCH_TASKS_REQUEST";
-export const FETCH_TASKS_SUCCESS = "FETCH_TASKS_SUCCESS";
-export const FETCH_TASKS_FAILURE = "FETCH_TASKS_FAILURE";
+export const FETCH_CALENDAR_TASKS_REQUEST = "FETCH_CALENDAR_TASKS_REQUEST";
+export const FETCH_CALENDAR_TASKS_SUCCESS = "FETCH_CALENDAR_TASKS_SUCCESS";
+export const FETCH_CALENDAR_TASKS_FAILURE = "FETCH_CALENDAR_TASKS_FAILURE";
 
 export const ADD_NEW_TASK_REQUEST = "ADD_NEW_TASK_REQUEST";
 export const ADD_NEW_TASK_SUCCESS = "ADD_NEW_TASK_SUCCESS";
@@ -9,3 +9,7 @@ export const ADD_NEW_TASK_FAILURE = "ADD_NEW_TASK_FAILURE";
 export const EDIT_TASK_REQUEST = "EDIT_TASK_REQUEST";
 export const EDIT_TASK_SUCCESS = "EDIT_TASK_SUCCESS";
 export const EDIT_TASK_FAILURE = "EDIT_TASK_FAILURE";
+
+export const DELETE_TASK_REQUEST = "DELETE_TASK_REQUEST";
+export const DELETE_TASK_SUCCESS = "DELETE_TASK_SUCCESS";
+export const DELETE_TASK_FAILURE = "DELETE_TASK_FAILURE";
\ No newline at end of file

planner-front/src/store/actions/tasksActions.js

-import { ADD_NEW_TASK_FAILURE, ADD_NEW_TASK_REQUEST, ADD_NEW_TASK_SUCCESS, EDIT_TASK_FAILURE, EDIT_TASK_REQUEST, EDIT_TASK_SUCCESS, FETCH_TASKS_FAILURE, FETCH_TASKS_REQUEST, FETCH_TASKS_SUCCESS} from "../actionTypes/tasksTypes";
+import { 
+  ADD_NEW_TASK_FAILURE, 
+  ADD_NEW_TASK_REQUEST, 
+  ADD_NEW_TASK_SUCCESS, 
+  DELETE_TASK_FAILURE, 
+  DELETE_TASK_REQUEST, 
+  DELETE_TASK_SUCCESS, 
+  EDIT_TASK_FAILURE, 
+  EDIT_TASK_REQUEST, 
+  EDIT_TASK_SUCCESS, 
+  FETCH_CALENDAR_TASKS_FAILURE, 
+  FETCH_CALENDAR_TASKS_REQUEST, 
+  FETCH_CALENDAR_TASKS_SUCCESS} from "../actionTypes/tasksTypes";
 import axios from '../../axiosPlanner'
 
-const fetchTasksRequest = () => {
-  return {type:  FETCH_TASKS_REQUEST}
+const fetchCalendarTasksRequest = () => {
+  return {type: FETCH_CALENDAR_TASKS_REQUEST}
 };
 
-const fetchTasksSuccess = (tasks) => {
-  return {type: FETCH_TASKS_SUCCESS, tasks}
+const fetchCalendarTasksSuccess = (tasks) => {
+  return {type: FETCH_CALENDAR_TASKS_SUCCESS, tasks}
 };
 
-const fetchTasksFailure = (error) => {
-  return {type: FETCH_TASKS_FAILURE, error}
+const fetchCalendarTasksFailure = (error) => {
+  return {type: FETCH_CALENDAR_TASKS_FAILURE, error}
 };
 
-export const fetchTasks = () => {
+export const fetchCalendarTasks = () => {
   return async (dispatch) => {
-      dispatch(fetchTasksRequest());
+      dispatch(fetchCalendarTasksRequest());
       try {
         const response = await axios.get("/tasks");
-        dispatch(fetchTasksSuccess(response.data.tasks))
+        dispatch(fetchCalendarTasksSuccess(response.data.tasks))
       } catch (error) {
-        dispatch(fetchTasksFailure(error.response.data));
+        dispatch(fetchCalendarTasksFailure(error.response.data));
       }
   }
 }
@@ -48,7 +60,7 @@ export const addTask = (task) => {
           }
         });
         dispatch(addTaskSuccess())
-        dispatch(fetchTasks())
+        dispatch(fetchCalendarTasks())
       } catch (error) {
         dispatch(addTaskFailure(error.response.data));
       }
@@ -78,9 +90,39 @@ export const editTask = (task) => {
           }
         });
         dispatch(editTaskSuccess())
-        dispatch(fetchTasks())
+        dispatch(fetchCalendarTasks())
       } catch (error) {
         dispatch(editTaskFailure(error.response.data));
       }
   }
 }
+
+const deleteTaskRequest = () => {
+  return {type: DELETE_TASK_REQUEST}
+};
+
+const deleteTaskSuccess = () => {
+  return {type: DELETE_TASK_SUCCESS}
+};
+
+const deleteTaskFailure = (error) => {
+  return {type: DELETE_TASK_FAILURE, error}
+};
+
+export const deleteTask = (taskId) => {
+  return async (dispatch, getState) => {
+      dispatch(deleteTaskRequest());
+      const token = getState().users?.user?.token;
+      try {
+        await axios.delete(`/tasks/${taskId}`, {
+          headers: {
+            'Authorization': 'IwGVRaksGTWtnKlOZd7zJ'
+          }
+        });
+        dispatch(deleteTaskSuccess())
+        dispatch(fetchCalendarTasks())
+      } catch (error) {
+        dispatch(deleteTaskFailure(error.response.data));
+      }
+  }
+}
\ No newline at end of file

planner-front/src/store/reducers/tasksReducer.js

-import { ADD_NEW_TASK_FAILURE, ADD_NEW_TASK_REQUEST, ADD_NEW_TASK_SUCCESS, EDIT_TASK_FAILURE, EDIT_TASK_REQUEST, EDIT_TASK_SUCCESS, FETCH_TASKS_FAILURE, FETCH_TASKS_REQUEST, FETCH_TASKS_SUCCESS} from "../actionTypes/tasksTypes";
+import { 
+  ADD_NEW_TASK_FAILURE, 
+  ADD_NEW_TASK_REQUEST, 
+  ADD_NEW_TASK_SUCCESS, 
+  EDIT_TASK_FAILURE, 
+  EDIT_TASK_REQUEST, 
+  EDIT_TASK_SUCCESS, 
+  FETCH_CALENDAR_TASKS_FAILURE, 
+  FETCH_CALENDAR_TASKS_REQUEST, 
+  FETCH_CALENDAR_TASKS_SUCCESS,
+  DELETE_TASK_SUCCESS,
+  DELETE_TASK_REQUEST,
+  DELETE_TASK_FAILURE} from "../actionTypes/tasksTypes";
 
 const initialState = {
-    tasks: [],
+    calendarTasks: [],
     loading: false,
     error: null,
 };
 
 const tasksReduсer = (state = initialState, action) => {
   switch(action.type) {
-    case FETCH_TASKS_REQUEST:
+    case FETCH_CALENDAR_TASKS_REQUEST:
         return {...state, loading: true};
-    case FETCH_TASKS_SUCCESS:
+    case FETCH_CALENDAR_TASKS_SUCCESS:
         const newArr = []
         action.tasks.forEach((task)=>{
             if (task.dateTimeStart && task.dateTimeDue) {
@@ -38,8 +50,8 @@ const tasksReduсer = (state = initialState, action) => {
               }
             }
           })
-        return {...state, loading: false, tasks: newArr};
-    case FETCH_TASKS_FAILURE:
+        return {...state, loading: false, calendarTasks: newArr};
+    case FETCH_CALENDAR_TASKS_FAILURE:
         return {...state, loading: false, error: action.error};
     case ADD_NEW_TASK_SUCCESS:
       return {...state, loading: false};
@@ -53,6 +65,12 @@ const tasksReduсer = (state = initialState, action) => {
       return {...state, loading: true};
     case EDIT_TASK_FAILURE:
       return {...state, loading: false, error: action.error};
+    case DELETE_TASK_SUCCESS:
+      return {...state, loading: false};
+    case DELETE_TASK_REQUEST:
+      return {...state, loading: true};
+    case DELETE_TASK_FAILURE:
+      return {...state, loading: false, error: action.error};
     default: 
         return state;
 }