#38 Небольшие изменения

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

 import { Grid, TextField, Typography } from "@mui/material";
-import React, { memo, useState, useEffect} from "react";
+import React, { memo, useState, useEffect, useMemo} from "react";
 
 
 const TaskDefault = ({task, onClickTaskHandler}) => {
   return(<Grid  
-        sx={{backgroundColor: 'lightgreen', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', padding: '10px',  borderBottom: '1px solid rgb(29, 161, 51)', borderRadius: '10px', margin:"5px 10px"}} 
+        sx={{backgroundColor: 'lightgreen', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', padding: '5px',  borderBottom: '1px solid rgb(29, 161, 51)', borderRadius: '10px', margin:"5px 10px"}} 
         onClick={onClickTaskHandler}
         >
           <span>
@@ -15,7 +15,7 @@ const TaskDefault = ({task, onClickTaskHandler}) => {
 
 const TaskWithNoStartAndAllEnd = ({task, onClickTaskHandler}) => {
   return(<Grid
-        sx={{backgroundColor: 'lightgreen', whiteSpace: 'nowrap', padding: '10px',  borderBottom: '1px solid rgb(29, 161, 51)', borderTopLeftRadius: '10px', borderBottomLeftRadius: '10px', margin:"5px -1px 5px 10px", position:'relative'}} 
+        sx={{backgroundColor: 'lightgreen', whiteSpace: 'nowrap', padding: '5px',  borderBottom: '1px solid rgb(29, 161, 51)', borderTopLeftRadius: '10px', borderBottomLeftRadius: '10px', margin:"5px -1px 5px 10px", position:'relative'}} 
         onClick={onClickTaskHandler}
         >
           <span>
@@ -25,7 +25,7 @@ const TaskWithNoStartAndAllEnd = ({task, onClickTaskHandler}) => {
 }
 const TaskWithAllStartAndNoEnd = ({task, onClickTaskHandler}) => {
   return(<Grid  
-        sx={{backgroundColor: 'lightgreen', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', padding: '10px',  borderBottom: '1px solid rgb(29, 161, 51)', borderTopRightRadius: '10px', borderBottomRightRadius: '10px', margin:"5px 10px 5px -1px"}} 
+        sx={{backgroundColor: 'lightgreen', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', padding: '5px',  borderBottom: '1px solid rgb(29, 161, 51)', borderTopRightRadius: '10px', borderBottomRightRadius: '10px', margin:"5px 10px 5px -1px"}} 
         onClick={onClickTaskHandler}
         >
           <span>
@@ -35,7 +35,7 @@ const TaskWithAllStartAndNoEnd = ({task, onClickTaskHandler}) => {
 }
 const TaskWithAllStartAndAllEnd = ({task, onClickTaskHandler}) => {
   return(<Grid  
-        sx={{backgroundColor: 'lightgreen', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', padding: '10px',  borderBottom: '1px solid rgb(29, 161, 51)', margin:"5px -1px"}} 
+        sx={{backgroundColor: 'lightgreen', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', padding: '5px',  borderBottom: '1px solid rgb(29, 161, 51)', margin:"5px -1px"}} 
         onClick={onClickTaskHandler}
         >
           <span>
@@ -50,8 +50,9 @@ const TaskWithAllStartAndAllEnd = ({task, onClickTaskHandler}) => {
 const CalendarTask = ({year, month, tasks, day, hours, setCurrentTask, hourFormat, handleOpen, currentTask}) => {
 
   const [thisCellCurrentTask, setThisCellCurrentTask] = useState({})
+
   const hour = parseInt(hours.split(':')[0])
-  const getTaskInDayCell = (tasks, day, hours) => {
+  const tasksCell = useMemo(() => {
     let hourDiffEnd
     if (hourFormat) {
       hourDiffEnd = hour + 1
@@ -77,9 +78,7 @@ const CalendarTask = ({year, month, tasks, day, hours, setCurrentTask, hourForma
       return durattionSecondDate - durattionFirstDate;
     });
     return tasksCell
-  }
-
-  const tasksCell = getTaskInDayCell(tasks, day, hours)
+  }, [hourFormat, month, tasks])
 
   useEffect(()=>{
     if (!currentTask.title) {
@@ -98,7 +97,7 @@ const CalendarTask = ({year, month, tasks, day, hours, setCurrentTask, hourForma
       {tasksCell.length ? tasksCell.map((task, i)=>
       {
 
-        if (hourFormat && task.infoForCell.endHour > hour && task.infoForCell.startHour === hour || (!hourFormat && task.infoForCell.endHour > hour + 1 && task.infoForCell.startHour === hour)) {
+        if (hourFormat && task.infoForCell.endHour > hour && task.infoForCell.startHour === hour || (!hourFormat && task.infoForCell.endHour > hour + 1 && (task.infoForCell.startHour === hour))) {
           return (
             <TaskWithNoStartAndAllEnd
               key={task.id}
@@ -117,21 +116,21 @@ const CalendarTask = ({year, month, tasks, day, hours, setCurrentTask, hourForma
           )
         }
         if (hourFormat && task.infoForCell.endMinute === 59 && task.infoForCell.startHour < hour || (!hourFormat && task.infoForCell.endMinute === 59 && task.infoForCell.startHour < hour && (task.infoForCell.endHour === hour || task.infoForCell.endHour === hour + 1 && task.infoForCell.startHour + 1 !== hour))) {
-          return (
+          return (<>
             <TaskWithAllStartAndNoEnd
               key={task.id}
               task={task}
               onClickTaskHandler={(e)=>{onClickTaskHandler(e, task)}}
             />
-          )
+          </>)
         }
-        return (
+        return (<>
           <TaskDefault
             key={task.id}
             task={task}
             onClickTaskHandler={(e)=>{onClickTaskHandler(e, task)}}
           />
-        )}
+        </>)}
       ) 
       : null}
   </>)

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

@@ -10,6 +10,7 @@ import MonthCalendarModalContent from "../MonthCalendarModalContent/MonthCalenda
 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 [allCellsTasks, setAllCellsTasks] = useState([])
   const handleOpen = (e) => {
     setModal( {
       open: true, 
@@ -27,7 +28,6 @@ function MonthCalendarBody({month, year, tasks, createTaskInCellHandler, current
   };
 
 
-
   return (
     <>
     <CalendarRow

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

@@ -11,7 +11,8 @@ import {
   FETCH_CALENDAR_TASKS_FAILURE, 
   FETCH_CALENDAR_TASKS_REQUEST, 
   FETCH_CALENDAR_TASKS_SUCCESS,
-  FETCH_ALL_TASKS_SUCCESS} from "../actionTypes/tasksTypes";
+  FETCH_ALL_TASKS_SUCCESS,
+  } from "../actionTypes/tasksTypes";
 import axios from '../../axiosPlanner'
 
 const fetchCalendarTasksRequest = () => {

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

@@ -11,7 +11,8 @@ import {
   DELETE_TASK_SUCCESS,
   DELETE_TASK_REQUEST,
   DELETE_TASK_FAILURE,
-  FETCH_ALL_TASKS_SUCCESS} from "../actionTypes/tasksTypes";
+  FETCH_ALL_TASKS_SUCCESS,
+} from "../actionTypes/tasksTypes";
 
 const initialState = {
     calendarTasks: [],