#35 Оптимизировал немного код, убрал пролаги при вводе в инпуте

planner-api/src/routers/tasks.ts

@@ -34,6 +34,7 @@ router.post('/', async(req:Request, res:Response):Promise<Response>=>{
     newTask.author= user;
     newTask.accomplish = accomplish;
     newTask.priority = priority;
+    console.log(newTask)
     await newTask.save();
     return res.send({newTask})
 })

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

 import { Grid } from "@mui/material";
+import { memo } from "react";
 
 const CalendarRow = ({children}) => {
     return <>
@@ -12,6 +13,6 @@ const CalendarRow = ({children}) => {
     </>
 };
 
-export default CalendarRow;
+export default memo(CalendarRow);
 
 

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

 import { Grid } from "@mui/material";
+import { memo } from "react";
 
 const CalendarSmallCell = ({children, xs}) => {
     return <>
@@ -8,4 +9,4 @@ const CalendarSmallCell = ({children, xs}) => {
     </>
 };
 
-export default CalendarSmallCell;
\ No newline at end of file
+export default memo(CalendarSmallCell);
\ No newline at end of file

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

 import { Grid, TextField, Typography } from "@mui/material";
-import { useEffect, useState } from "react";
+import { memo, useEffect, useState } from "react";
 
-const CalendarStandartCell = ({children, xs, currentTask, hours, dayNumber,  createTaskInCellHandler, handleOpen, modal}) => {
+const CalendarStandartCell = ({children, xs, hours, dayNumber,  createTaskInCellHandler, handleOpen, modal}) => {
     const [isThisCell, setIsThisCell] = useState(false)
     useEffect(()=>{
         if(!modal) {
@@ -19,11 +19,14 @@ const CalendarStandartCell = ({children, xs, currentTask, hours, dayNumber,  cre
             sx={{backgroundColor: 'lightgreen', padding: '10px', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis'}} 
         >
             <span>
-                {currentTask.title}
+                Задача
             </span>
         </Grid> : null}
         </Grid>
     </>
 };
 
-export default CalendarStandartCell;
\ No newline at end of file
+export default memo(CalendarStandartCell,  (prevProps, nextProps)=>{
+    if(!prevProps.modal) return false
+    if(nextProps.modal) return true
+  });
\ No newline at end of file

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

 import { Grid, TextField, Typography } from "@mui/material";
-import React, { useEffect, useState } from "react";
+import React, { memo, useState, useEffect} from "react";
 
 const CalendarTask = ({year, month, tasks, day, hours, setCurrentTask, hourFormat, handleOpen, currentTask}) => {
   const [thisCellCurrentTask, setThisCellCurrentTask] = useState({})
@@ -27,20 +27,13 @@ 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)=>
@@ -49,9 +42,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); setThisCellCurrentTask({...task, i: i})}}
+        onClick={(e)=>{e.stopPropagation(); setCurrentTask(task); handleOpen(e)}}
         >
-          {renderText(i, task)}
+          {task.title}
       </Grid>
       )}
       ) 
@@ -59,4 +52,4 @@ const CalendarTask = ({year, month, tasks, day, hours, setCurrentTask, hourForma
   </>)
 };
 
-export default CalendarTask;
\ No newline at end of file
+export default memo(CalendarTask);
\ No newline at end of file

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

 import { FormControlLabel, Switch} from "@mui/material";
-import { useEffect, useState } from "react";
+import { memo, useEffect, useState } from "react";
 import CalendarRow from "./CalendarRow/CalendarRow";
 import CalendarSmallCell from "./CalendarSmallCell/CalendarSmallCell";
 import CalendarStandartCell from "./CalendarStandartCell.js/CalendarStandartCell";
@@ -7,11 +7,8 @@ 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, 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({})
+function MonthCalendarBody({month, year, tasks, createTaskInCellHandler, currentTask, setCurrentTask, hourFormat, setHourFormat, onChangeCurrentTaskHandler, sendNewTaskHandler, deleteTaskHandler, cellSizes, hoursInDay, daysInMonth}) {
+
   const [modal, setModal] = useState({open:false, y: 0, x: 0,});
   const handleOpen = (e) => {
     setModal( {
@@ -30,58 +27,6 @@ function MonthCalendarBody({month, year, tasks, createTaskInCellHandler, current
   };
 
 
-  useEffect(()=>{
-    const cells = hoursInDay.length
-    const xs = 10.8/cells
-    setCellSizes(()=>{
-      return {smallCell: 0.6, standarCell: xs}
-    })
-  }, [])
-
-  useEffect(()=>{
-    if (hourFormat) {
-      const arr = ['8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00','21:00','22:00']
-      const cells = arr.length
-      const xs = 10.8/cells
-      setCellSizes(()=>{
-        return {smallCell: 0.6, standarCell: xs}
-      })
-      setHoursInDay(()=>arr)
-    } else {
-      const arr = ['8:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00']
-      const cells = arr.length
-      const xs = 10.8/cells
-      setCellSizes(()=>{
-        return {smallCell: 0.6, standarCell: xs}
-      })
-      setHoursInDay(()=>arr)
-    }
-  }, [hourFormat])
-
-  useEffect(()=>{
-    setNewMonthDays()
-  }, [month])
-
-  const getDaysInMonth = () => { 
-    return new Date(year, month + 1, 0).getDate();
-  }
-
-  const getDayOfWeekString = (day) => {
-    return ["ВС","ПН","ВТ","СР","ЧТ","ПТ","СБ"][day];
-  }
-
-  const getDayOfWeekNumber = (day) => {
-    return new Date(year, month, day).getDay()
-  }
-
-  const setNewMonthDays = () => {
-    const newDaysInMonth = []
-    for (let i = 1; i <= getDaysInMonth(); i++) {
-      const dayOfWeekNumber = getDayOfWeekNumber(i)
-      newDaysInMonth.push({dayNumber: i, dayOfWeek: getDayOfWeekString(dayOfWeekNumber)})
-    }
-    setDaysInMonth(prevState=>newDaysInMonth)
-  }
 
   return (
     <>
@@ -94,7 +39,7 @@ function MonthCalendarBody({month, year, tasks, createTaskInCellHandler, current
             labelPlacement="end"
           />
         </CalendarSmallCell>
-        {hoursInDay.map((hours, i)=>{
+        {hoursInDay?.map((hours, i)=>{
           return (
             <CalendarStandartCell key={i} xs={cellSizes.standarCell}>
               {hours}
@@ -102,7 +47,7 @@ function MonthCalendarBody({month, year, tasks, createTaskInCellHandler, current
             ) 
           })}
     </CalendarRow>
-    {daysInMonth.map((day, i)=>{
+    {daysInMonth?.map((day, i)=>{
       return (
         <CalendarRow
           key={i}

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

@@ -4,14 +4,6 @@ import MonthCalendarBody from '../../components/MonthCalendarBody/MonthCalendarB
 import MonthCalendarHeader from '../../components/MonthCalendarHeader/MonthCalendarHeader';
 import { addTask, deleteTask, editTask, fetchCalendarTasks} from '../../store/actions/tasksActions';
 
-function dateToISOLikeButLocal(date) {
-  const offsetMs = date.getTimezoneOffset() * 60 * 1000;
-  const msLocal =  date.getTime() - offsetMs;
-  const dateLocal = new Date(msLocal);
-  const iso = dateLocal.toISOString();
-  return iso;
-}
-
 function MonthCalendar() {
   const dispatch = useDispatch();
   const { calendarTasks } = useSelector(state => state.tasks);
@@ -20,7 +12,9 @@ function MonthCalendar() {
   const [dateNow, setDateNow] = useState({month: '', year: ''})
   const [worker, setWorker] = useState('');
   const [calendarType, setCalendarType] = useState('Месяц');
-  const [currentTask, setCurrentTask] = useState({})
+  const [currentTask, setCurrentTask] = useState({title: '', description: '', priority: ''})
+
+  const [cellSizes, setCellSizes] = useState({})
 
   useEffect(()=>{
     setDateNow({
@@ -30,6 +24,38 @@ function MonthCalendar() {
     dispatch(fetchCalendarTasks())
   }, [dispatch])
 
+
+  const hoursInDay = useMemo(()=>{
+    if (hourFormat) {
+      const arr = ['8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00','21:00','22:00']
+      const cells = arr.length
+      const xs = 10.8/cells
+      setCellSizes(()=>{
+        return {smallCell: 0.6, standarCell: xs}
+      })
+      return arr
+    } else {
+      const arr = ['8:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00']
+      const cells = arr.length
+      const xs = 10.8/cells
+      setCellSizes(()=>{
+        return {smallCell: 0.6, standarCell: xs}
+      })
+      return arr
+    }
+  }, [hourFormat])
+
+  const daysInMonth = useMemo(() => {
+    const newDaysInMonth = []
+    const daysInMonthNumber = new Date(dateNow.year, dateNow.month + 1, 0).getDate()
+    for (let i = 1; i <= daysInMonthNumber; i++) {
+      const dayOfWeekNumber = new Date(dateNow.year, dateNow.month, i).getDay()
+      const getDayOfWeekString = ["ВС","ПН","ВТ","СР","ЧТ","ПТ","СБ"][dayOfWeekNumber]
+      newDaysInMonth.push({dayNumber: i, dayOfWeek: getDayOfWeekString})
+    }
+    return newDaysInMonth
+  }, [dateNow.month, dateNow.year])
+
   const onChangeWorkerHandler = useCallback((event) => {
     setWorker(event.target.value);
   }, []);
@@ -69,8 +95,14 @@ function MonthCalendar() {
         }
     });
   }, []);
-
-  const createTaskInCellHandler = useCallback((dayNumber, dayHour) => {
+  function dateToISOLikeButLocal(date) {
+    const offsetMs = date.getTimezoneOffset() * 60 * 1000;
+    const msLocal =  date.getTime() - offsetMs;
+    const dateLocal = new Date(msLocal);
+    const iso = dateLocal.toISOString();
+    return iso;
+  }
+  const createTaskInCellHandler = (dayNumber, dayHour) => {
     const hour = parseInt(dayHour.split(':')[0])
     let hourDue
     if (hourFormat) {
@@ -86,10 +118,9 @@ function MonthCalendar() {
       dateTimeDue: dateToISOLikeButLocal(new Date(dateNow.year, dateNow.month, dayNumber, hourDue, 59)),
     }
     setCurrentTask((newTask))
-  }, [])
+  }
 
   const sendNewTaskHandler = async () => {
-    
     if (currentTask.id) {
       setCurrentTask(() => {
         return{
@@ -104,6 +135,7 @@ function MonthCalendar() {
         ...currentTask,
       }}
       )
+      console.log(currentTask)
       delete currentTask.infoForCell
       await dispatch(addTask(currentTask))
     }
@@ -137,7 +169,11 @@ function MonthCalendar() {
         onChangeCurrentTaskHandler={onChangeCurrentTaskHandler}
         sendNewTaskHandler={sendNewTaskHandler}
         deleteTaskHandler={deleteTaskHandler}
+        cellSizes={cellSizes}
+        hoursInDay={hoursInDay}
+        daysInMonth={daysInMonth}
       />
+
     </>
   );
 }