#54 Реализовал изменение размера задачи через кнопки

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

 import { Grid} from "@mui/material";
 import React, { memo, useEffect, useRef, useState} from "react";
-
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
+
+const arrowClass = {
+  height: '20px',
+  cursor: 'pointer',
+  transition: '0.5s',
+  "&:hover": { 
+  transition: '0.5s',
+  transform: 'scale(1.2)'
+  }
+}
 
 const CalendarTask = ({setCurrentTask, handleOpen, task, line, setCurrentLine, increaseTaskHandler, reduceTaskHandler}) => {
 
@@ -15,80 +26,6 @@ const CalendarTask = ({setCurrentTask, handleOpen, task, line, setCurrentLine, i
     }
   }, [task])
 
-  const ref = useRef(null);
-  const refLeft = useRef(null);
-  const refRight = useRef(null);
-
-  useEffect(() => {
-    const resizeableEle = ref.current;
-    const styles = window.getComputedStyle(resizeableEle);
-    let width = parseInt(styles.width, 10);
-    let x = 0;
-
-    const lastPoint = {x: null, y: null}
-    const onMouseMoveRightResize = (event) => {
-      event.stopPropagation()
-      const leftOrRight = (
-        event.clientX > lastPoint.x ? 'right'
-        : event.clientX < lastPoint.x ? 'left'
-        : 'none'
-      )
-      if (leftOrRight === 'right') {
-        increaseTaskHandler(line, task, false)
-      }
-      lastPoint.x = event.clientX
-      lastPoint.y = event.clientY
-    };
-
-    const onMouseUpRightResize = (event) => {
-      event.stopPropagation()
-      document.removeEventListener("mousemove", onMouseMoveRightResize);
-    };
-
-    const onMouseDownRightResize = (event) => {
-      event.stopPropagation()
-      x = event.clientX;
-      resizeableEle.style.left = styles.left;
-      resizeableEle.style.right = null;
-      document.addEventListener("mousemove", onMouseMoveRightResize);
-      document.addEventListener("mouseup", onMouseUpRightResize);
-    };
-
-    // Left resize
-    const onMouseMoveLeftResize = (event) => {
-      event.stopPropagation()
-      const dx = event.clientX - x;
-      x = event.clientX;
-      width = width - dx;
-      resizeableEle.style.width = `${width}px`;
-    };
-
-    const onMouseUpLeftResize = (event) => {
-      event.stopPropagation()
-      document.removeEventListener("mousemove", onMouseMoveLeftResize);
-    };
-
-    const onMouseDownLeftResize = (event) => {
-      event.stopPropagation()
-      x = event.clientX;
-      resizeableEle.style.right = styles.right;
-      resizeableEle.style.left = null;
-      document.addEventListener("mousemove", onMouseMoveLeftResize);
-      document.addEventListener("mouseup", onMouseUpLeftResize);
-    };
-
-    // Add mouse down event listener
-    const resizerRight = refRight.current;
-    resizerRight.addEventListener("mousedown", onMouseDownRightResize);
-    const resizerLeft = refLeft.current;
-    resizerLeft.addEventListener("mousedown", onMouseDownLeftResize);
-
-    return () => {
-      resizerRight.removeEventListener("mousedown", onMouseDownRightResize);
-      resizerLeft.removeEventListener("mousedown", onMouseDownLeftResize);
-    };
-  }, []);
-
   const onClickTaskHandler = (e, task) => {
     e.stopPropagation(); 
     setCurrentTask(task); 
@@ -109,18 +46,23 @@ const CalendarTask = ({setCurrentTask, handleOpen, task, line, setCurrentLine, i
   return (<>
     <Grid  
         draggable={true} 
-        ref={ref}
         onDragLeave={(e)=>{dragLeaveHandler(e)}}
         onDragStart={(e)=>{dragStartHandler(e, line, task)}}
         onDragEnd={(e)=>{dragEndHandler(e)}}
-        sx={{ position: 'relative', height: '30px', backgroundColor: color, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', borderRadius: '10px', margin: '5px 10px', display: 'flex', justifyContent: 'flex-start', alignItems: 'center', paddingLeft: '5px', zIndex: '5'}} 
+        sx={{ position: 'relative', height: '30px', backgroundColor: color, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', borderRadius: '10px', margin: '5px 10px', display: 'flex', justifyContent: 'flex-start', alignItems: 'center', paddingLeft: '5px', zIndex: '5', justifyContent: 'space-between'}} 
         onClick={(e)=>{onClickTaskHandler(e, task)}}
       >
-      <div ref={refLeft} style={{cursor: 'col-resize',height: '100%', left: '0',top: '0', width: '5px', backgroundColor: 'grey'}}></div>
+      <div style={{display: 'flex', alignItems: 'center'}}>
+          <ArrowBackIcon sx={arrowClass} onClick={(e)=>{e.stopPropagation(); increaseTaskHandler(line, task, true)}}/>
+          <ArrowForwardIcon sx={arrowClass} onClick={(e)=>{e.stopPropagation(); reduceTaskHandler(line, task, true)}}/>
+      </div>
         <span>
           {task.title}
         </span>
-      <div ref={refRight} style={{cursor: 'col-resize',height: '100%', right: '0',top: '0', width: '5px', backgroundColor: 'grey'}}></div>
+      <div style={{display: 'flex', alignItems: 'center'}}>
+          <ArrowBackIcon sx={arrowClass} onClick={(e)=>{e.stopPropagation(); reduceTaskHandler(line, task, false)}}/>
+          <ArrowForwardIcon sx={arrowClass} onClick={(e)=>{e.stopPropagation(); increaseTaskHandler(line, task, false)}}/>
+      </div>
     </Grid>
   </>)
 };

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

@@ -157,7 +157,7 @@ function MonthCalendar() {
     let start 
     if (isStartTask) {
       due = dateToISOLikeButLocal(new Date(dateNow.year, dateNow.month, dayNumber, timeEndHour, 59))
-      start = dateToISOLikeButLocal(new Date(dateNow.year, dateNow.month, dayNumber, timeStartHour + hourDiff, 0))
+      start = dateToISOLikeButLocal(new Date(dateNow.year, dateNow.month, dayNumber, timeStartHour - hourDiff, 0))
     } else {
       due = dateToISOLikeButLocal(new Date(dateNow.year, dateNow.month, dayNumber, timeEndHour + hourDiff, 59))
       start = dateToISOLikeButLocal(new Date(dateNow.year, dateNow.month, dayNumber, timeStartHour, 0))
@@ -170,6 +170,7 @@ function MonthCalendar() {
     delete newObj.infoForCell
     await dispatch(editTask(newObj))
     setCurrentTask({})
+
   }
 
   const reduceTaskHandler = async (dayNumber, task, isStartTask) => {
@@ -178,16 +179,20 @@ function MonthCalendar() {
     const timeStart = task.dateTimeStart.split('T')[1]
     const timeStartHour = parseInt(timeStart.split(':')[0])
     let hourDiff
+    let hourDiffCheck
     if (hourFormat) {
       hourDiff = 1
+      hourDiffCheck = 0
     } else {
       hourDiff = 2
+      hourDiffCheck = 1
     }
     let due
     let start
+    if (task.infoForCell.endHour - task.infoForCell.startHour - hourDiffCheck !== 0) {
       if (isStartTask) {
         due = dateToISOLikeButLocal(new Date(dateNow.year, dateNow.month, dayNumber, timeEndHour, 59))
-      start = dateToISOLikeButLocal(new Date(dateNow.year, dateNow.month, dayNumber, timeStartHour - hourDiff, 0))
+        start = dateToISOLikeButLocal(new Date(dateNow.year, dateNow.month, dayNumber, timeStartHour + hourDiff, 0))
       } else {
         due = dateToISOLikeButLocal(new Date(dateNow.year, dateNow.month, dayNumber, timeEndHour - hourDiff, 59))
         start = dateToISOLikeButLocal(new Date(dateNow.year, dateNow.month, dayNumber, timeStartHour, 0))
@@ -201,6 +206,7 @@ function MonthCalendar() {
       await dispatch(editTask(newObj))
       setCurrentTask({})
     }
+  }
 
   const sendNewTaskHandler = async () => {
     if (currentTask.id) {

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

@@ -32,7 +32,8 @@ const tasksReduсer = (state = initialState, action) => {
         const newArr = []
           action.tasks.forEach((task)=>{
             if (task.dateTimeStart && task.dateTimeDue) {
-              if (new Date(task.dateTimeDue).getTime() - new Date(task.dateTimeStart).getTime() < (10 * 3600000)) {
+              if (new Date(task.dateTimeDue).getTime() - new Date(task.dateTimeStart).getTime() < (24 * 3600000) &&
+              new Date(task.dateTimeDue).getTime() - new Date(task.dateTimeStart).getTime() > 0) {
               const dateStart = task.dateTimeStart.split('T')[0]
               const timeStart = task.dateTimeStart.split('T')[1]
               const timeEnd = task.dateTimeDue.split('T')[1]