#30 Реализовал изменение тайтла в уже существующей задачке

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

 import { Grid, TextField, Typography } from "@mui/material";
 import React, { useEffect, useState } from "react";
 
-const CalendarTask = ({year, month, tasks, day, hours, setCurrentTask, hourFormat, handleOpen}) => {
+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
@@ -26,6 +27,21 @@ const CalendarTask = ({year, month, tasks, day, hours, setCurrentTask, hourForma
     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)=>
       {
@@ -33,9 +49,9 @@ const CalendarTask = ({year, month, tasks, day, hours, setCurrentTask, hourForma
       <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)}}
+        onClick={(e)=>{e.stopPropagation(); setCurrentTask(task); handleOpen(e); setThisCellCurrentTask({...task, i: i})}}
         >
-          {task.title}
+          {renderText(i, task)}
       </Grid>
       )}
       ) 

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

@@ -130,6 +130,7 @@ function MonthCalendarBody({month, year, tasks, createTaskInCellHandler, current
                       hours={hours}
                       hourFormat={hourFormat}
                       handleOpen={handleOpen}
+                      currentTask={currentTask}
                     />               
                 </CalendarStandartCell>
                 ) 

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

@@ -33,7 +33,7 @@ function MonthCalendarModalContent({title, onChangeCurrentTaskHandler, descripti
         name='priority'
         onChange={onChangeCurrentTaskHandler}
       >
-        <MenuItem value="">
+        <MenuItem value={null}>
                 <em>-- Выберите Приоритет --</em>
         </MenuItem>
         <MenuItem value={"A"}>A</MenuItem>

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

@@ -3,7 +3,7 @@ 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, editTask, fetchTasks} from '../../store/actions/tasksActions';
 
 function MonthCalendar() {
   const dispatch = useDispatch();
@@ -14,8 +14,7 @@ function MonthCalendar() {
   const [year, setYear] = useState('')
   const [worker, setWorker] = useState('');
   const [calendarType, setCalendarType] = useState('Месяц');
-  const [currentTask, setCurrentTask] = useState({title: '', description: '', priority: '', dateTimeStart: '', dateTimeDue:''})
-  console.log(currentTask)
+  const [currentTask, setCurrentTask] = useState({title: '', description: '', priority: null, dateTimeStart: '', dateTimeDue:''})
   useEffect(()=>{
     setMonth(new Date().getMonth())
     setYear(new Date().getFullYear())
@@ -83,7 +82,7 @@ function MonthCalendar() {
     const newTask = {
       title:"Задача",
       description:"описание",
-      priority: "",
+      priority: null,
       dateTimeStart: dateToISOLikeButLocal(new Date(year, month, dayNumber, hour, 0)),
       dateTimeDue: dateToISOLikeButLocal(new Date(year, month, dayNumber, hourDue, 59)),
     }
@@ -91,11 +90,26 @@ function MonthCalendar() {
   }
 
   const sendNewTask = async () => {
-    setCurrentTask(({
-      ...currentTask,
-      priority: currentTask.priority ? currentTask.priority : 'C'
-    }))
-    await dispatch(addTask(currentTask))
+    
+    if (currentTask.id) {
+      setCurrentTask(() => {
+        return{
+        ...currentTask,
+        priority: currentTask.priority ? currentTask.priority : 'C'
+      }}
+      )
+      delete currentTask.infoForCell
+      await dispatch(editTask(currentTask))
+    } else {
+      setCurrentTask(() => {
+        return{
+        ...currentTask,
+        priority: currentTask.priority ? currentTask.priority : 'C'
+      }}
+      )
+      delete currentTask.infoForCell
+      await dispatch(addTask(currentTask))
+    }
   }
 
   return (

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

@@ -4,4 +4,8 @@ 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 ADD_NEW_TASK_FAILURE = "ADD_NEW_TASK_FAILURE";
\ No newline at end of file
+
+export const EDIT_TASK_REQUEST = "EDIT_TASK_REQUEST";
+export const EDIT_TASK_SUCCESS = "EDIT_TASK_SUCCESS";
+export const EDIT_TASK_FAILURE = "EDIT_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} 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_TASKS_FAILURE, FETCH_TASKS_REQUEST, FETCH_TASKS_SUCCESS} from "../actionTypes/tasksTypes";
 import axios from '../../axiosPlanner'
 
 const fetchTasksRequest = () => {
@@ -53,4 +53,34 @@ export const addTask = (task) => {
         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(fetchTasks())
+      } catch (error) {
+        dispatch(editTaskFailure(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} 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_TASKS_FAILURE, FETCH_TASKS_REQUEST, FETCH_TASKS_SUCCESS} from "../actionTypes/tasksTypes";
 
 const initialState = {
     tasks: [],
@@ -41,6 +41,18 @@ const tasksReduсer = (state = initialState, action) => {
         return {...state, loading: false, tasks: newArr};
     case FETCH_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};
     default: 
         return state;
 }