настроила функцию удаления задачи с сервера

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-api/src/routers/tasks.ts

@@ -97,7 +97,7 @@ router.put('/',async(req:Request, res:Response)=> {
     .getOne()
     if (!user) return res.status(404).send({Message:'user not found'})
 
-    const {id,title,description,project,executors,dateTimeDue,dateTimeStart,accomplish,priority} = req.body;
+    const {id,title,description,project,dateTimeDue,dateTimeStart,accomplish,priority} = req.body;
     await dataSource
     .createQueryBuilder()    
     .update(Task)
@@ -105,7 +105,6 @@ router.put('/',async(req:Request, res:Response)=> {
         title: title, 
         description: description,
         project: project,
-        executors: executors,
         dateTimeDue: dateTimeDue,
         dateTimeStart: dateTimeStart,
         author:user,

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

-import { Grid } from "@mui/material";
+import { Grid, TextField, Typography } from "@mui/material";
+import { useEffect, useState } from "react";
 
-const CalendarStandartCell = ({children, xs, onClick}) => {
+const CalendarStandartCell = ({children, xs, currentTask, hours, dayNumber,  createTaskInCellHandler, handleOpen, modal}) => {
+    const [isThisCell, setIsThisCell] = useState(false)
+    useEffect(()=>{
+        if(!modal) {
+            setIsThisCell(false);
+        }
+    }, [modal])
     return <>
         <Grid  
             item xs={xs} 
             sx={{borderRight: '1px solid black'}} 
-            onClick={onClick}>
+            onClick={(e)=>{createTaskInCellHandler(dayNumber, hours); setIsThisCell(true); handleOpen(e)}}>
             {children}
+        {isThisCell ?  
+        <Grid
+            sx={{backgroundColor: 'lightgreen', padding: '10px', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis'}} 
+        >
+            <span>
+                {currentTask.title}
+            </span>
+        </Grid> : null}
         </Grid>
     </>
 };

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

-import { Grid, TextField } from "@mui/material";
+import { Grid, TextField, Typography } from "@mui/material";
 import React, { useEffect, useState } from "react";
 
-const CalendarTask = ({year, month, tasks, day, hours, setCurrentTask, onChange, hourFormat}) => {
-
+const CalendarTask = ({year, month, tasks, day, hours, setCurrentTask, hourFormat, handleOpen, currentTask}) => {
+  const [thisCellCurrentTask, setThisCellCurrentTask] = useState({})
   const getTaskInDayCell = (tasks, day, hours) => {
     const hour = parseInt(hours.split(':')[0])
     let hourDiffEnd
-    let hourDiffStart
     if (hourFormat) {
       hourDiffEnd = hour + 1
     } else {
       hourDiffEnd = hour + 2
     }
-    if (hourFormat) {
-      hourDiffStart = hour - 1
-    } else {
-      hourDiffStart = hour - 2
-    }
     const tasksCell = tasks.filter(task=> {
     if (year === task.infoForCell.startYear) {
       if (month + 1 === task.infoForCell.startMonth) {
@@ -32,24 +26,36 @@ const CalendarTask = ({year, month, tasks, day, hours, setCurrentTask, onChange,
     })
     return tasksCell
   }
-  
   const tasksCell = getTaskInDayCell(tasks, day, hours)
   
+  useEffect(()=>{
+    if (!currentTask.title) {
+      setThisCellCurrentTask({})
+    }
+  }, [currentTask])
+
+  const renderText = (i, task) => {
+    if (thisCellCurrentTask && i === thisCellCurrentTask.i) {
+      return (<>{currentTask.title}</>)
+    } else {
+      return (<>{task.title}</>)
+    }
+  }
+
   return (<> 
       {tasksCell.length ? tasksCell.map((task, i)=>
       {
       return (
-      <Grid  key={task.id} sx={{backgroundColor: 'lightgreen'}}>
-        <TextField 
-        id={task.title} 
-        variant="standard" 
-        value={task.title} 
-        name='title' 
-        onClick={(e)=>{e.stopPropagation(); setCurrentTask(task)}}
-        onChange={onChange}>
-        </TextField>
-      </Grid>)}
-      ) : null }
+      <Grid  
+        key={task.id} 
+        sx={{backgroundColor: 'lightgreen', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', padding: '10px',  borderBottom: '1px solid rgb(29, 161, 51);;'}} 
+        onClick={(e)=>{e.stopPropagation(); setCurrentTask(task); handleOpen(e); setThisCellCurrentTask({...task, i: i})}}
+        >
+          {renderText(i, task)}
+      </Grid>
+      )}
+      ) 
+      : null}
   </>)
 };
 

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

-import { FormControlLabel, Switch } from "@mui/material";
+import { FormControlLabel, Switch} from "@mui/material";
 import { useEffect, useState } from "react";
 import CalendarRow from "./CalendarRow/CalendarRow";
 import CalendarSmallCell from "./CalendarSmallCell/CalendarSmallCell";
 import CalendarStandartCell from "./CalendarStandartCell.js/CalendarStandartCell";
 import CalendarTask from "./CalendarTask/CalendarTask";
+import ModalTask from "../UI/ModalTask/ModalTask";
+import MonthCalendarModalContent from "../MonthCalendarModalContent/MonthCalendarModalContent";
 
-function MonthCalendarBody({month, year, tasks, createTaskInCellHandler, onChangeCellTaskTitle, setCurrentTask, hourFormat, setHourFormat}) {
+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([])
   const [cellSizes, setCellSizes] = useState({})
+  const [modal, setModal] = useState({open:false, y: 0, x: 0,});
+  const handleOpen = (e) => {
+    setModal( {
+      open: true, 
+      yPage: e.pageY, 
+      xPage: e.pageX, 
+      yDivClick: e.nativeEvent.offsetY,
+      xDivClick: e.nativeEvent.offsetX,
+      yDiv: e.target.offsetHeight,
+      xDiv: e.target.offsetWidth,
+    })
+  };
+  const handleClose = () => {
+    setModal({...modal, open: false})
+    setCurrentTask({})
+  };
+
+
   useEffect(()=>{
     const cells = hoursInDay.length
     const xs = 10.8/cells
@@ -94,17 +114,23 @@ function MonthCalendarBody({month, year, tasks, createTaskInCellHandler, onChang
                 <CalendarStandartCell 
                   key={i} 
                   item xs={cellSizes.standarCell}
-                  onClick={()=>{createTaskInCellHandler(day.dayNumber, hours)}}
+                  createTaskInCellHandler={createTaskInCellHandler}
+                  hours={hours}
+                  dayNumber={day.dayNumber}
+                  currentTask={currentTask}
+                  handleOpen={handleOpen}
+                  modal={modal.open}
                   >
                     <CalendarTask
                       setCurrentTask={setCurrentTask}
-                      onChange={(e)=>{onChangeCellTaskTitle(e)}}
                       year={year}
                       month={month} 
                       tasks={tasks}
                       day={day}
                       hours={hours}
                       hourFormat={hourFormat}
+                      handleOpen={handleOpen}
+                      currentTask={currentTask}
                     />               
                 </CalendarStandartCell>
                 ) 
@@ -112,6 +138,19 @@ function MonthCalendarBody({month, year, tasks, createTaskInCellHandler, onChang
         </CalendarRow>
       )
     })}
+    <ModalTask
+      modal={modal}
+      handleClose={()=>{handleClose()}}
+    >
+      <MonthCalendarModalContent
+        title={currentTask.title}
+        description={currentTask.description}
+        priority={currentTask.priority}
+        onChangeCurrentTaskHandler={(e)=>{ onChangeCurrentTaskHandler(e)}}
+        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, sendNewTaskHandler, deleteTaskHandler}) {
+  return (<>
+  <TextField 
+    id="task-description-title" 
+    value={title}
+    label="Название" 
+    variant="outlined" 
+    sx={{marginBottom: '30px'}}
+    name='title'
+    onChange={(e)=>{onChangeCurrentTaskHandler(e)}}
+  />
+  <TextField 
+    id="task-description" 
+    multiline
+    rows={4}
+    value={description}
+    label="Описание" 
+    variant="outlined" 
+    sx={{marginBottom: '30px'}} 
+    name='description'
+    onChange={(e)=>{onChangeCurrentTaskHandler(e)}}
+  />
+  <FormControl variant="outlined" sx={{width: '160px', marginBottom: '30px'}}>
+    <InputLabel id="priority-type-label">Приоритет</InputLabel>
+      <Select
+        labelId="priority-type-label"
+        id="priority-type"
+        label="Приоритет"
+        sx={{width: '160px'}}
+        value={priority}
+        name='priority'
+        onChange={onChangeCurrentTaskHandler}
+      >
+        <MenuItem value={null}>
+                <em>-- Выберите Приоритет --</em>
+        </MenuItem>
+        <MenuItem value={"A"}>A</MenuItem>
+        <MenuItem value={"B"}>B</MenuItem>
+        <MenuItem value={"C"}>C</MenuItem>
+      </Select>
+  </FormControl>
+  <Button sx={{marginRight: '40px'}} onClick={sendNewTaskHandler}>Сохранить</Button>
+  <Button onClick={deleteTaskHandler}>Удалить</Button>
+  </>);
+}
+
+export default MonthCalendarModalContent;
\ No newline at end of file

planner-front/src/components/UI/ModalTask/ModalTask.js

+import Box from '@mui/material/Box';
+import Modal from '@mui/material/Modal';
+
+
+export default function ModalTask({modal, handleClose, children}) {
+
+  const style = {
+    position: 'absolute',
+    top: modal.yPage - modal.yDiv - modal.yDivClick,
+    left: modal.xPage + modal.xDiv - modal.xDivClick + 10,
+    width: 250,
+    height: 350,
+    bgcolor: 'background.paper',
+    border: '2px solid #000',
+    boxShadow: 24,
+    p: 4,
+  };
+  return (
+    <>
+      <Modal
+        open={modal.open}
+        onClose={handleClose}
+        aria-labelledby="modal-modal-title"
+        aria-describedby="modal-modal-description"
+        BackdropProps={{ style: { backgroundColor: 'rgba(255,255,255, 0)' } }}
+      >
+        <Box sx={style}>
+          {children}
+        </Box>
+      </Modal>
+    </>
+  );
+}
\ No newline at end of file

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, 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('')
   const [year, setYear] = useState('')
   const [worker, setWorker] = useState('');
   const [calendarType, setCalendarType] = useState('Месяц');
-  const [currentTask, setCurrentTask] = useState({})
-  
+  const [currentTask, setCurrentTask] = useState({title: '', description: '', priority: null, dateTimeStart: '', dateTimeDue:''})
   useEffect(()=>{
     setMonth(new Date().getMonth())
     setYear(new Date().getFullYear())
-    dispatch(fetchTasks())
+    dispatch(fetchCalendarTasks())
   }, [dispatch])
 
   const onChangeWorkerHandler = (event) => {
@@ -62,6 +60,16 @@ function MonthCalendar() {
     return iso;
   }
 
+  const onChangeCurrentTaskHandler = (e) => {
+    const {name, value} = e.target;
+    setCurrentTask((prevState) => {
+        return {
+            ...prevState,
+            [name]: value
+        }
+    });
+  };
+
   const createTaskInCellHandler = (dayNumber, dayHour) => {
     const hour = parseInt(dayHour.split(':')[0])
     let hourDue
@@ -73,24 +81,40 @@ function MonthCalendar() {
     const newTask = {
       title:"Задача",
       description:"описание",
+      priority: null,
       dateTimeStart: dateToISOLikeButLocal(new Date(year, month, dayNumber, hour, 0)),
       dateTimeDue: dateToISOLikeButLocal(new Date(year, month, dayNumber, hourDue, 59)),
     }
-    console.log(newTask)
-    dispatch(addTask(newTask))
     setCurrentTask((newTask))
   }
 
-  const onChangeCellTaskTitle = (e) => {
-    e.stopPropagation()
-    const value = e.target.value;
-    const name = e.target.name;
-    setCurrentTask({ ...currentTask, [name]: value })
+  const sendNewTaskHandler = async () => {
+    
+    if (currentTask.id) {
+      setCurrentTask(() => {
+        return{
+        ...currentTask,
+      }}
+      )
+      delete currentTask.infoForCell
+      await dispatch(editTask(currentTask))
+    } else {
+      setCurrentTask(() => {
+        return{
+        ...currentTask,
+      }}
+      )
+      delete currentTask.infoForCell
+      await dispatch(addTask(currentTask))
+    }
+  }
+
+  const deleteTaskHandler = async (taskId) => {
+    dispatch(deleteTask(taskId))
   }
 
   return (
     <>
-    <Container>
       <MonthCalendarHeader
         month={month}
         year={year}
@@ -105,14 +129,16 @@ function MonthCalendar() {
       <MonthCalendarBody
         month={month}
         year={year}
-        tasks={tasks}
+        tasks={calendarTasks}
         createTaskInCellHandler={createTaskInCellHandler}
-        onChangeCellTaskTitle={onChangeCellTaskTitle}
         setCurrentTask={setCurrentTask}
         hourFormat={hourFormat} 
         setHourFormat={setHourFormat}
+        currentTask={currentTask}
+        onChangeCurrentTaskHandler={onChangeCurrentTaskHandler}
+        sendNewTaskHandler={sendNewTaskHandler}
+        deleteTaskHandler={deleteTaskHandler}
       />
-    </Container>
     </>
   );
 }

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

@@ -10,8 +10,7 @@ import {
   Paper,
   IconButton,
   Tooltip,
-  
-} from "@mui/material";
+  } from "@mui/material";
 import { useState, useEffect } from "react";
 import {useDispatch, useSelector} from "react-redux";
 import { Done, Edit } from "@mui/icons-material";
@@ -25,6 +24,7 @@ import MaterialUIPickers from "../../components/MyTasksCompoments/DateTimePicker
 import MaterialUIPickersDue from "../../components/MyTasksCompoments/DateTimePicker/DateTimePickerDue";
 import BasicSelect from "../../components/UI/Select/Select";
 import { fetchAllTasks} from "../../store/actions/tasksActions";
+import { deleteTask } from "../../store/actions/tasksActions";
 
 function descendingComparator(a, b, orderBy) {
   if (b[orderBy] < a[orderBy]) {
@@ -77,6 +77,7 @@ export default function EnhancedTable() {
 }, []);
 const tasks = useSelector(state => state.tasks.tasks);
 console.log(tasks)
+
   // const [tasks,setTasks]=useState([
   // {
   //   user:"first",
@@ -157,6 +158,7 @@ console.log(tasks)
         if (task.id === id) {
           return { ...task, isEditMode: !task.isEditMode };
         }
+        
         return task;
       });
     
@@ -195,11 +197,8 @@ console.log(tasks)
     setOrderBy(property);
   };
   
-  const deleteTask=(id)=>{
-    console.log(id)
-    let newTasks=[...tasks]
-    newTasks.splice(tasks[id],1)
-    tasks=newTasks
+  const deleteHandle=(id)=>{
+     dispatch(deleteTask(id))
   };
 
   const handleChangePage = (event, newPage) => {
@@ -242,7 +241,8 @@ console.log(tasks)
   tasks=newTasks;
   };
 
-  return (
+ if (tasks)
+  {return (
     <Box sx={{ width: 'fullwidth' }}>
       <Paper sx={{ width: '100%', mb: 2 }}>
 
@@ -332,7 +332,7 @@ console.log(tasks)
               </TableCell>
                      <TableCell>
                       <Tooltip title="Delete">
-                      <IconButton onClick={(id)=>{deleteTask(id)}}>
+                      <IconButton onClick={(id)=>{deleteHandle(task.id)}}>
                         <DeleteIcon />
                       </IconButton>
                       </Tooltip>
@@ -365,5 +365,5 @@ console.log(tasks)
           // setTasks={setTasks}      
         /> 
     </Box>
-  );
+  )};
 }

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

@@ -56,7 +56,7 @@ const Register = () => {
             }
         });
     };
-
+    console.log(state)
     const submitHandler = async (e) => {
         e.preventDefault();
         const formData = new FormData();

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_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 FETCH_ALL_TASKS_SUCCESS = "FETCH_ALL_TASKS_SUCCESS";
-export const FETCH_TASKS_FAILURE = "FETCH_TASKS_FAILURE";
 
 export const ADD_NEW_TASK_REQUEST = "ADD_NEW_TASK_REQUEST";
 export const ADD_NEW_TASK_SUCCESS = "ADD_NEW_TASK_SUCCESS";
 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, FETCH_TASKS_FAILURE, FETCH_TASKS_REQUEST, FETCH_TASKS_SUCCESS, FETCH_ALL_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,
+  FETCH_ALL_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 fetchAllTasksSuccess = (tasks) => {
   return {type: FETCH_ALL_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));
       }
   }
 };
 export const fetchAllTasks = () => {
   return async (dispatch) => {
-      dispatch(fetchTasksRequest());
+      dispatch(fetchCalendarTasksRequest());
       try {
         const response = await axios.get("/tasks");
-       
+       console.log(response)
         dispatch(fetchAllTasksSuccess(response.data.tasks))
       } catch (error) {
-        dispatch(fetchTasksFailure(error.response.data));
+        dispatch(fetchCalendarTasksFailure(error.response.data));
       }
   }
 };
@@ -60,13 +73,74 @@ export const addTask = (task) => {
       try {
         await axios.post("/tasks", task, {
           headers: {
-            'Authorization': 'yjBjcPCQwytwrYo9rRuiK'
+            'Authorization': 'IwGVRaksGTWtnKlOZd7zJ'
           }
         });
         dispatch(addTaskSuccess())
-        dispatch(fetchTasks())
+        dispatch(fetchCalendarTasks())
       } catch (error) {
         dispatch(addTaskFailure(error.response.data));
       }
   }
 }
+
+const editTaskRequest = () => {
+  return {type: EDIT_TASK_REQUEST}
+};
+
+const editTaskSuccess = () => {
+  return {type: EDIT_TASK_SUCCESS}
+};
+
+const editTaskFailure = (error) => {
+  return {type: EDIT_TASK_FAILURE, error}
+};
+
+export const editTask = (task) => {
+  return async (dispatch, getState) => {
+      dispatch(editTaskRequest());
+      const token = getState().users?.user?.token;
+      try {
+        await axios.put("/tasks", task, {
+          headers: {
+            'Authorization': 'IwGVRaksGTWtnKlOZd7zJ'
+          }
+        });
+        dispatch(editTaskSuccess())
+        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())
+        dispatch(fetchAllTasks())
+      } catch (error) {
+        dispatch(deleteTaskFailure(error.response.data));
+      }
+  }
+}
\ No newline at end of file

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

-import { FETCH_TASKS_FAILURE, FETCH_TASKS_REQUEST, FETCH_TASKS_SUCCESS,FETCH_ALL_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,
+  FETCH_ALL_TASKS_SUCCESS} from "../actionTypes/tasksTypes";
 
 const initialState = {
-    tasks: [],
+    calendarTasks: [],
     loading: false,
-    error: null
+    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) {
-              if (new Date(task.dateTimeDue).getTime() - new Date(task.dateTimeStart).getTime() < (4 * 3600000)) {
+              if (new Date(task.dateTimeDue).getTime() - new Date(task.dateTimeStart).getTime() < (10 * 3600000)) {
               const dateStart = task.dateTimeStart.split('T')[0]
               const timeStart = task.dateTimeStart.split('T')[1]
               const timeEnd = task.dateTimeDue.split('T')[1]
@@ -38,11 +51,28 @@ const tasksReduсer = (state = initialState, action) => {
               }
             }
           })
-        return {...state, loading: false, tasks: newArr};
+        return {...state, loading: false, calendarTasks: newArr};
     case FETCH_ALL_TASKS_SUCCESS:
         return {...state, loading: false, tasks: action.tasks}; 
-        
-    case FETCH_TASKS_FAILURE:
+    case FETCH_CALENDAR_TASKS_FAILURE:
+        return {...state, loading: false, error: action.error};
+    case ADD_NEW_TASK_SUCCESS:
+      return {...state, loading: false};
+    case ADD_NEW_TASK_REQUEST:
+      return {...state, loading: true};
+    case ADD_NEW_TASK_FAILURE:
+      return {...state, loading: false, error: action.error};
+    case EDIT_TASK_SUCCESS:
+      return {...state, loading: false};
+    case EDIT_TASK_REQUEST:
+      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;