#38 получилось написать функцию которая убирает все пересечения задач

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

+import { Tune } from "@mui/icons-material";
+import { Grid } from "@mui/material";
+import { memo, useMemo } from "react";
+import CalendarStandartCell from "../CalendarStandartCell.js/CalendarStandartCell";
+import CalendarTask from "../CalendarTask/CalendarTask";
+
+const CalendarRowDay = ({xs, hoursInDay, createTaskInCellHandler, currentTask, handleOpen, modal, setCurrentTask, year, month, tasks, day, hourFormat}) => {
+
+  const hours = hoursInDay.map((hour)=>parseInt(hour.split(':')[0]))
+
+  const tasksInDay = useMemo(() => {
+    const ranges = hoursInDay.length
+    const tasksInDay = tasks.filter(task=> {
+      if (year === task.infoForCell.startYear) {
+        if (month + 1 === task.infoForCell.startMonth) {
+          if (day.dayNumber === task.infoForCell.startDay) {
+                return task
+            }
+          }
+        }      
+      })
+    let hourDiff
+    let hourDiffEnd
+    const lines = []
+    if (hourFormat) {
+      hourDiff = 1
+      hourDiffEnd = 0
+    } else {
+      hourDiff = 2
+      hourDiffEnd = 1
+    }
+    if (tasksInDay.length) {
+      const newSortedArr = [...tasksInDay].sort(function(a,b){
+        const durattionFirstDate = new Date(a.dateTimeDue).getTime() - new Date(a.dateTimeStart).getTime()
+        const durattionSecondDate = new Date(b.dateTimeDue).getTime() - new Date(b.dateTimeStart).getTime()
+        return durattionSecondDate - durattionFirstDate;
+      });
+      lines.push(hoursInDay.map((hour)=>parseInt(hour.split(':')[0])))
+      let counter = 0
+      for (let k = 0; k < newSortedArr.length; k++) {
+        let skipLine = false
+          for (let j = 0; j < lines.length; j++) {
+            const line = lines[j]
+            const task = newSortedArr[k]
+            if (skipLine) {
+              skipLine = false
+              break;
+            }
+            for (let i = 0; i < line.length; i++) {
+              const hour = hours[i]
+              let havePlace = true
+              if (((task.infoForCell.endHour <= hour || task.infoForCell.startHour <= hour) && (task.infoForCell.endHour > hour))  
+              || (task.infoForCell.startHour >= hour  && task.infoForCell.endHour < hour + hourDiff)
+              || (task.infoForCell.endMinute <= 59 && task.infoForCell.endHour === hour)) {
+                if (!isNaN(line[i])) {
+                  for (let a = 0; a < hours.length; a++) {
+                    const hour = hours[a]
+                    if (task.infoForCell.endMinute === 59 && task.infoForCell.endHour === hour) {
+                      if (isNaN(line[a])) {
+                        havePlace = false
+                        break;
+                      }
+                    }
+                  }
+                  if (!havePlace) {
+                    havePlace = true  
+                    break;
+                  }
+                  line[i] += `-${k}`
+                  if (task.infoForCell.endMinute === 59 && task.infoForCell.endHour === hour + hourDiffEnd || (!hourFormat && task.infoForCell.endMinute === 59 && task.infoForCell.endHour === hour)) {
+                    skipLine = true
+                    break;
+                  }
+                } else {
+                    if (j + 1 === lines.length) {
+                      lines.push(hoursInDay.map((hour)=>parseInt(hour.split(':')[0])))
+                    }
+                    break;
+                }
+              } 
+            }
+          }
+      }
+      console.log(lines)
+    }
+  }, [tasks, month, hourFormat])
+
+  return <>
+      <Grid 
+        container
+        item
+        xs={10.8}
+        align='center'
+        >
+          {hoursInDay.map((hour, i)=>{
+            return (
+              <CalendarStandartCell
+                key={i} 
+                item xs={12/hoursInDay.length}
+                createTaskInCellHandler={createTaskInCellHandler}
+                hours={hour}
+                dayNumber={day.dayNumber}
+                currentTask={currentTask}
+                handleOpen={handleOpen}
+                modal={modal.open}
+                >
+                  <CalendarTask
+                    setCurrentTask={setCurrentTask}
+                    year={year}
+                    month={month} 
+                    tasks={tasks}
+                    day={day}
+                    hours={hour}
+                    hourFormat={hourFormat}
+                    handleOpen={handleOpen}
+                    currentTask={currentTask}
+                  />               
+              </CalendarStandartCell>
+              ) 
+            })}
+        </Grid>
+    </>
+};
+
+export default CalendarRowDay;
\ No newline at end of file

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

@@ -82,7 +82,7 @@ const CalendarTask = ({year, month, tasks, day, hours, setCurrentTask, hourForma
     const newArrWithTypes = newSortedArr.map((task, i)=>
       {
         if (hourFormat && task.infoForCell.endHour > hour && task.infoForCell.startHour === hour || (!hourFormat && task.infoForCell.endHour > hour + 1 && (task.infoForCell.startHour === hour))) {
-          return {...task, type: 'TaskWithNoStartAndAllEnd', lineOrder: i+1}
+          return {...task, type: 'TaskWithNoStartAndAllEnd'}
         }
         if (hourFormat && task.infoForCell.startHour < hour && task.infoForCell.endHour > hour || ((!hourFormat && task.infoForCell.startHour  < hour && task.infoForCell.endHour  > hour + 2))) {
           return{...task, type: 'TaskWithAllStartAndAllEnd'}
@@ -93,7 +93,6 @@ const CalendarTask = ({year, month, tasks, day, hours, setCurrentTask, hourForma
         return {...task, type: 'TaskDefault'}})
     return newArrWithTypes
   }, [hourFormat, month, tasks])
-  console.log(tasksCell)
   useEffect(()=>{
     if (!currentTask.title) {
       setThisCellCurrentTask({})

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

@@ -6,6 +6,7 @@ import CalendarStandartCell from "./CalendarStandartCell.js/CalendarStandartCell
 import CalendarTask from "./CalendarTask/CalendarTask";
 import ModalTask from "../UI/ModalTask/ModalTask";
 import MonthCalendarModalContent from "../MonthCalendarModalContent/MonthCalendarModalContent";
+import CalendarRowDay from "./CalendarRowDay/CalendarRowDay";
 
 function MonthCalendarBody({month, year, tasks, createTaskInCellHandler, currentTask, setCurrentTask, hourFormat, setHourFormat, onChangeCurrentTaskHandler, sendNewTaskHandler, deleteTaskHandler, cellSizes, hoursInDay, daysInMonth}) {
 
@@ -54,32 +55,20 @@ function MonthCalendarBody({month, year, tasks, createTaskInCellHandler, current
           >
             <CalendarSmallCell xs={cellSizes.smallCell}>{day.dayNumber}</CalendarSmallCell>
             <CalendarSmallCell xs={cellSizes.smallCell}>{day.dayOfWeek}</CalendarSmallCell>
-            {hoursInDay.map((hours, i)=>{
-              return (
-                <CalendarStandartCell 
-                  key={i} 
-                  item xs={cellSizes.standarCell}
+            <CalendarRowDay
+              xs={cellSizes.standarCell}
               createTaskInCellHandler={createTaskInCellHandler}
-                  hours={hours}
-                  dayNumber={day.dayNumber}
+              hoursInDay={hoursInDay}
               currentTask={currentTask}
               handleOpen={handleOpen}
               modal={modal.open}
-                  >
-                    <CalendarTask
               setCurrentTask={setCurrentTask}
               year={year}
               month={month} 
               tasks={tasks}
               day={day}
-                      hours={hours}
               hourFormat={hourFormat}
-                      handleOpen={handleOpen}
-                      currentTask={currentTask}
             />
-                </CalendarStandartCell>
-                ) 
-              })}
         </CalendarRow>
       )
     })}

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

@@ -13,7 +13,6 @@ function MonthCalendar() {
   const [worker, setWorker] = useState('');
   const [calendarType, setCalendarType] = useState('Месяц');
   const [currentTask, setCurrentTask] = useState({title: '', description: '', priority: ''})
-
   const [cellSizes, setCellSizes] = useState({})
 
   useEffect(()=>{
@@ -122,12 +121,13 @@ function MonthCalendar() {
 
   const sendNewTaskHandler = async () => {
     if (currentTask.id) {
+      delete currentTask.infoForCell
+      console.log(currentTask)
       setCurrentTask(() => {
         return{
         ...currentTask,
       }}
       )
-      delete currentTask.infoForCell
       await dispatch(editTask(currentTask))
     } else {
       setCurrentTask(() => {
@@ -135,7 +135,6 @@ function MonthCalendar() {
         ...currentTask,
       }}
       )
-      console.log(currentTask)
       delete currentTask.infoForCell
       await dispatch(addTask(currentTask))
     }

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

@@ -74,7 +74,7 @@ export const addTask = (task) => {
       try {
         await axios.post("/tasks", task, {
           headers: {
-            'Authorization': 'n7Bp6vrvr9uvH3M_0NHUF'
+            'Authorization': 'tGwVYAzqxIfIm0jJfRHBQ'
           }
         });
         dispatch(addTaskSuccess())
@@ -105,10 +105,9 @@ export const editTask = (task) => {
         console.log(task)
         const r=await axios.put("/tasks", task, {
           headers: {
-            'Authorization': 'n7Bp6vrvr9uvH3M_0NHUF'
+            'Authorization': 'tGwVYAzqxIfIm0jJfRHBQ'
           }
         });
-        console.log(r)
         dispatch(editTaskSuccess())
         dispatch(fetchAllTasks())
         dispatch(fetchCalendarTasks())
@@ -137,7 +136,7 @@ export const deleteTask = (taskId) => {
       try {
         await axios.delete(`/tasks/${taskId}`, {
           headers: {
-            'Authorization': 'n7Bp6vrvr9uvH3M_0NHUF'
+            'Authorization': 'tGwVYAzqxIfIm0jJfRHBQ'
           }
         });
         dispatch(deleteTaskSuccess())
@@ -148,7 +147,3 @@ export const deleteTask = (taskId) => {
       }
   }
 }
\ No newline at end of file
-
-export const editCalendarTask = (id, line) => {
-  return {type: EDIT_CALENDAR_TASK, id, line}
-}
\ No newline at end of file

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

@@ -40,7 +40,8 @@ const tasksReduсer = (state = initialState, action) => {
               const timeEndHour = parseInt(timeEnd.split(':')[0])
               const timeStartMinute = parseInt(timeStart.split(':')[1])
               const timeEndMinute = parseInt(timeEnd.split(':')[1])
-              newArr.push({...task, infoForCell: { 
+              const newObj = {...task, 
+                infoForCell: { 
                 startDay: dayStart, 
                 startHour: timeStartHour, 
                 startMonth: monthStartNumber,
@@ -49,7 +50,8 @@ const tasksReduсer = (state = initialState, action) => {
                 endHour: timeEndHour,
                 endMinute: timeEndMinute,
               }
-              } )
+              }
+              newArr.push(newObj)
               }
             }
           })
@@ -76,14 +78,6 @@ const tasksReduсer = (state = initialState, action) => {
       return {...state, loading: true};
     case DELETE_TASK_FAILURE:
       return {...state, loading: false, error: action.error};
-    case EDIT_CALENDAR_TASK:
-      const copyArr = [...state.calendarTasks]
-      const index = copyArr.findIndex(el => el.id === action.id);
-      let copyElement = copyArr[index]
-      console.log(copyElement)
-      copyElement = {...copyElement, lineOrder: action.line}
-      copyArr[index] = copyElement
-      return {...state, calendarTasks: copyArr}
     default: 
         return state;
 }