#112 Оптимизировал и разделил код связанный со странице недельного календаря

planner-front/src/components/Calendars/HourFormatSwitch/HourFormatSwitch.js

+import { FormControlLabel, Switch } from "@mui/material";
+import { memo } from "react";
+const HourFormatSwitch = ({ hourFormat, setHourFormat }) => {
+
+  return (<>
+    <FormControlLabel
+      control={<Switch color="primary" checked={hourFormat} onChange={() => { setHourFormat(() => !hourFormat) }} />}
+      label="1 час"
+      labelPlacement="end"
+    />
+  </>)
+};
+
+export default memo(HourFormatSwitch);
\ No newline at end of file

planner-front/src/components/Calendars/WeekCalendar/WeekCalendarBody/CalendarColumnDayWeek/CalendarColumnDayWeek.js

@@ -4,15 +4,17 @@ import CalendarStandartCell from "../../../CalendarStandartCell/CalendarStandart
 import { useEffect, useRef, useState } from "react";
 import { Grid } from "@mui/material";
 import CalendarWeekTask from "./CalendarWeekTask/CalendarWeekTask";
+import { getTasksWithInfoForPosition, getWidthLeftZIndex } from "./Helpers";
 
 
 
 function CalendarColumnDayWeek({ hoursInDay, tasks, month, year, day, hourFormat, handleOpen, setCurrentTask, copyTask, createCopyTask, createTaskInCellHandler, modal }) {
-  const [columnDayHeight, setColumnDayHeight] = useState(0)
+
+  const [columnDaySize, setColumnDaySize] = useState({ width: 0, height: 0 })
 
   const dayColumnRef = useRef('')
   useEffect(() => {
-    setColumnDayHeight(prev => dayColumnRef.current.offsetHeight)
+    setColumnDaySize(prev => { return { height: dayColumnRef.current.offsetHeight, width: dayColumnRef.current.offsetWidth } })
   }, [hourFormat])
   
   const hours = useMemo(() => {
@@ -23,6 +25,7 @@ function CalendarColumnDayWeek({ hoursInDay, tasks, month, year, day, hourFormat
     return getAvailableTasks(tasks, year, month, day)
   }, [tasks, month, year, day])
 
+
   const sortedTasks = useMemo(() => {
     return getSortedTasks(availableTasks)
   }, [availableTasks])
@@ -32,68 +35,17 @@ function CalendarColumnDayWeek({ hoursInDay, tasks, month, year, day, hourFormat
     return getLinesInDay(availableTasks, sortedTasks, hoursInDay, hours, hourFormat)
   }, [availableTasks, hourFormat, hours, hoursInDay, sortedTasks])
 
-  const getBoxesInLine = (line, hoursInDay, sortedTasks, linesInDay) => {
-    if (line) {
-      const boxes = []
-      for (let i = 0; i < line.length; i++) {
-        if (!isNaN(line[i])) {
-        } else {
-          const task = sortedTasks[line[i].split('-')[1]]
-          const taskIsThere = boxes.find((taskFind) => {
-            if (taskFind?.task?.id === task.id) return taskFind
-            return false
-          })
-          const step = columnDayHeight / hours.length
-          if (taskIsThere) {
-            taskIsThere.lastHour = i
-            taskIsThere.height += step
-            let tasksInHour = 0
-            for (let line of linesInDay) {
-              if (isNaN(line[i])) {
-                tasksInHour++
-              }
-            }
-            if (tasksInHour > taskIsThere.tasksInHour) {
-              taskIsThere.tasksInHour = tasksInHour
-            }
-          } else {
-            let tasksInHour = 0
-            for (let line of linesInDay) {
-              if (isNaN(line[i])) {
-                tasksInHour++
-              }
-            }
-            boxes.push({
-              tasksInHour: tasksInHour,
-              top: step * i,
-              height: step,
-              firstHour: i,
-              lastHour: i,
-              task: sortedTasks[line[i].split('-')[1]]
-            })
-          }
-        }
-      }
-      return boxes
-    }
-  }
-
   return (<>
     <Grid item xs={12 / 7} ref={dayColumnRef} sx={{ position: 'relative' }}>
       {linesInDay?.map((line, i) => {
-        const boxes = getBoxesInLine(line, hoursInDay, sortedTasks, linesInDay)
+        const boxes = getTasksWithInfoForPosition(line, sortedTasks, linesInDay, columnDaySize.height, hours)
         return (<>
           {boxes.map((task, index) => {
-
-            const amount = task.tasksInHour
-            const oneTaskPrecentWidth = 100 / amount
-            const left = oneTaskPrecentWidth * dayColumnRef.current.offsetWidth / 100 * i 
-            const zIndex = 10 + i
-            const oneTaskWidth = dayColumnRef.current.offsetWidth - (oneTaskPrecentWidth * dayColumnRef.current.offsetWidth / 100) * i
+            const { width, left, zIndex } = getWidthLeftZIndex(task, columnDaySize.width, i)
             return (
               <CalendarWeekTask
                 key={index}
-                width={oneTaskWidth}
+                width={width}
                 height={task.height}
                 left={left}
                 task={task.task}
@@ -103,10 +55,7 @@ function CalendarColumnDayWeek({ hoursInDay, tasks, month, year, day, hourFormat
                 setCurrentTask={setCurrentTask}
                 modal={modal}
               >
-
               </CalendarWeekTask>
-
-
             )
           })}
         </>)

planner-front/src/components/Calendars/WeekCalendar/WeekCalendarBody/CalendarColumnDayWeek/CalendarWeekTask/CalendarWeekTask.js

 import { Box } from "@mui/material"
-import { useEffect, useState } from "react"
+import { useEffect, useState, memo, useCallback, useMemo } from "react"
+import { getColorTaskByPriority } from "../../../../../../helpers/CalendarHelpers"
 
 
-function CalendarWeekTask({ height, width, left, top, task, zIndex, handleOpen, setCurrentTask, modal}) {
+function CalendarWeekTask({ height, width, left, top, task, zIndex, handleOpen, setCurrentTask, modal }) {
   const [zIndexStyle, setZIndexStyle] = useState(10)
-  const [color, setColor] = useState('')
-  useEffect(() => {
-    if (task.priority) {
-      if (task.priority === 'A') setColor('rgb(32, 138, 250)')
-      if (task.priority === 'B') setColor('lightgreen')
-      if (task.priority === 'C') setColor('yellow')
-    } else {
-      setColor('rgb(171, 157, 157);')
-    }
-    setZIndexStyle(zIndex)
-  }, [task])
+  const color = useMemo(() => {
+    return getColorTaskByPriority(task.priority)
+  }, [task.priority])
 
   useEffect(() => {
     if (!modal) {
       setZIndexStyle(zIndex)
     }
-  }, [modal])
+  }, [modal, zIndex])
 
-  const onClickTaskHandler = (e, task) => {
+  const onClickTaskHandler = useCallback((e, task) => {
     e.stopPropagation();
     setCurrentTask((prevState) => {
       return {
@@ -35,7 +28,7 @@ function CalendarWeekTask({ height, width, left, top, task, zIndex, handleOpen,
     });
     setZIndexStyle(100)
     handleOpen(e)
-  }
+  }, [handleOpen, setCurrentTask])
 
   const styles = {
     boxSizing: 'border-box',
@@ -59,12 +52,12 @@ function CalendarWeekTask({ height, width, left, top, task, zIndex, handleOpen,
 
   return (
     <Box
-      onClick={(e)=>{onClickTaskHandler(e, task)}}
+      onClick={(e) => { onClickTaskHandler(e, task) }}
       sx={styles}>
-        <span style={{textOverflow: 'ellipsis', padding: '5px 0 0 5px'}}>
+      <span style={{ textOverflow: 'ellipsis', padding: '5px 0 0 5px' }}>
         {task.title}
       </span>
     </Box>);
 }
 
-export default CalendarWeekTask;
+export default memo(CalendarWeekTask);
\ No newline at end of file

planner-front/src/components/Calendars/WeekCalendar/WeekCalendarBody/CalendarColumnDayWeek/Helpers.js

+export const getTasksWithInfoForPosition = (line, sortedTasks, linesInDay, columnDayHeight, hours) => {
+  if (line) {
+    const boxes = []
+    for (let i = 0; i < line.length; i++) {
+      if (!isNaN(line[i])) {
+      } else {
+        const task = sortedTasks[line[i].split('-')[1]]
+        const taskIsThere = boxes.find((taskFind) => {
+          if (taskFind?.task?.id === task.id) return taskFind
+          return false
+        })
+        const step = columnDayHeight / hours.length
+        if (taskIsThere) {
+          taskIsThere.lastHour = i
+          taskIsThere.height += step
+          let tasksInHour = 0
+          for (let line of linesInDay) {
+            if (isNaN(line[i])) {
+              tasksInHour++
+            }
+          }
+          if (tasksInHour > taskIsThere.tasksInHour) {
+            taskIsThere.tasksInHour = tasksInHour
+          }
+        } else {
+          let tasksInHour = 0
+          for (let line of linesInDay) {
+            if (isNaN(line[i])) {
+              tasksInHour++
+            }
+          }
+          boxes.push({
+            tasksInHour: tasksInHour,
+            top: step * i,
+            height: step,
+            firstHour: i,
+            lastHour: i,
+            task: sortedTasks[line[i].split('-')[1]]
+          })
+        }
+      }
+    }
+    return boxes
+  }
+}
+
+
+export const getWidthLeftZIndex = (task, dayColumnWidth, i) => {
+  const amount = task.tasksInHour
+  const oneTaskPrecentWidth = 100 / amount
+  const left = oneTaskPrecentWidth * dayColumnWidth / 100 * i
+  const zIndex = 10 + i
+  const oneTaskWidth = dayColumnWidth - (oneTaskPrecentWidth * dayColumnWidth / 100) * i
+  return { width: oneTaskWidth, left: left, zIndex: zIndex }
+}
\ No newline at end of file

planner-front/src/components/Calendars/WeekCalendar/WeekCalendarBody/Helpers.js

@@ -5,3 +5,18 @@ export const getCurrentWeekDayString = (dayNumber) => {
     return null
   }
 }
+
+export const getMonthToDayColumn = (week, weekDay, month) => {
+  if (week[0] > week[6]) {
+    if (weekDay < week[0]) {
+      if (month === 11) {
+        return 0
+      }
+      return month + 1
+    } else {
+      return month
+    }
+  } else {
+    return month
+  }
+}
\ No newline at end of file

planner-front/src/components/Calendars/WeekCalendar/WeekCalendarBody/WeekCalendarBody.js

-import { FormControlLabel, Grid, Switch } from "@mui/material";
+import { Grid } from "@mui/material";
 import { Box } from "@mui/system";
-import { useState } from "react";
+import { useCallback, useState } from "react";
 import ModalTask from "../../../UI/ModalTask/ModalTask";
 import MonthCalendarModalContent from "../../CalendarModalTaskContent/CalendarModalTaskContent";
 import CalendarRow from "../../CalendarRow/CalendarRow";
 import CalendarSmallCell from "../../CalendarSmallCell/CalendarSmallCell";
 import CalendarStandartCell from "../../CalendarStandartCell/CalendarStandartCell";
+import HourFormatSwitch from "../../HourFormatSwitch/HourFormatSwitch";
 import CalendarColumnDayWeek from "./CalendarColumnDayWeek/CalendarColumnDayWeek";
-import { getCurrentWeekDayString } from "./Helpers";
+import { getCurrentWeekDayString, getMonthToDayColumn } from "./Helpers";
 
 function WeekCalendarBody({ week, hoursInDay, hourFormat, setHourFormat, date, tasks, currentTask, setCurrentTask, onChangeCurrentTaskHandler, deleteTaskHandler, sendNewTaskHandler, createTaskInCellHandler }) {
   const [modal, setModal] = useState({ open: false, y: 0, x: 0, });
-  const handleOpen = (e) => {
+  const handleOpen = useCallback((e) => {
     setModal({
       open: true,
       yClickСordinates: e.clientY,
@@ -21,12 +22,12 @@ function WeekCalendarBody({ week, hoursInDay, hourFormat, setHourFormat, date, t
       yDiv: e.target.offsetHeight,
       xDiv: e.target.offsetWidth,
     })
-  };
+  }, []);
 
-  const handleClose = () => {
+  const handleClose = useCallback(() => {
     setModal({ ...modal, open: false })
     setCurrentTask({})
-  };
+  }, [setCurrentTask, modal]);
 
   return (
     <>
@@ -35,10 +36,9 @@ function WeekCalendarBody({ week, hoursInDay, hourFormat, setHourFormat, date, t
           <CalendarRow
           >
             <CalendarSmallCell xs={1}>
-              <FormControlLabel
-                control={<Switch color="primary" checked={hourFormat} onChange={() => { setHourFormat(() => !hourFormat) }} />}
-                label="1 час"
-                labelPlacement="end"
+              <HourFormatSwitch
+                hourFormat={hourFormat}
+                setHourFormat={setHourFormat}
               />
             </CalendarSmallCell>
             {week?.map((weekDay, i) => {
@@ -71,7 +71,7 @@ function WeekCalendarBody({ week, hoursInDay, hourFormat, setHourFormat, date, t
                       key={i}
                       hoursInDay={hoursInDay}
                       tasks={tasks}
-                      month={date.month}
+                      month={getMonthToDayColumn(week, weekDay, date.month)}
                       year={date.year}
                       day={weekDay}
                       hourFormat={hourFormat}

planner-front/src/components/Calendars/WeekCalendar/WeekCalendarHeader/WeekCalendarHeader.js

 import { AppBar, Toolbar } from '@mui/material';
 import { Box } from '@mui/system';
+import { memo } from 'react';
 import WeekCalendarHeaderInfo from './WeekCalendarHeaderInfo/WeekCalendarHeaderInfo';
 
 
@@ -26,4 +27,4 @@ function WeekCalendarHeader({ decrementWeek, incrementWeek, weekInfo }) {
   );
 }
 
-export default WeekCalendarHeader;
+export default memo(WeekCalendarHeader);
\ No newline at end of file

planner-front/src/components/Calendars/WeekCalendar/WeekCalendarHeader/WeekCalendarHeaderInfo/WeekCalendarHeaderInfo.js

@@ -2,6 +2,7 @@ import ArrowDecrementButton from '../../../../UI/ArrowDecrementButton/ArrowDecre
 import ArrowIncrementButton from '../../../../UI/ArrowIncrementButton/ArrowIncrementButton';
 import { Box } from '@mui/system';
 import { Typography } from '@mui/material';
+import { memo } from 'react';
 
 
 
@@ -34,4 +35,4 @@ function WeekCalendarHeaderInfo({ decrementWeek, incrementWeek, weekInfo }) {
   );
 }
 
-export default WeekCalendarHeaderInfo;
+export default memo(WeekCalendarHeaderInfo);
\ No newline at end of file

planner-front/src/components/UI/ModalTask/ModalTask.js

 import Box from '@mui/material/Box';
 import Modal from '@mui/material/Modal';
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useState } from 'react';
 
 
 export default function ModalTask({modal, handleClose, children}) {

planner-front/src/components/WeekCalendar/WeekCalendarBody/Helpers.js

-export const getCurrentWeekDayString = (dayNumber) => {
-  if (dayNumber <= 6 && dayNumber >= 0) {
-    return ["ПН","ВТ","СР","ЧТ","ПТ","СБ","ВС"][dayNumber];
-  } else {
-    return null
-  }
-}
\ No newline at end of file

planner-front/src/components/WeekCalendar/WeekCalendarBody/WeekCalendarBody.js

-import { FormControlLabel, Grid, Switch } from "@mui/material";
-import { Box } from "@mui/system";
-import CalendarRow from "../../MonthCalendar/MonthCalendarBody/CalendarRow/CalendarRow";
-import CalendarSmallCell from "../../MonthCalendar/MonthCalendarBody/CalendarSmallCell/CalendarSmallCell";
-import CalendarStandartCell from "../../MonthCalendar/MonthCalendarBody/CalendarStandartCell.js/CalendarStandartCell";
-import { getCurrentWeekDayString } from "./Helpers";
-
-function WeekCalendarBody({week, hoursInDay, hourFormat, setHourFormat}) {
-  
-  return (
-    <>
-        <Box style={{marginBottom: '30px'}}>
-          <Box style={{position: 'sticky', top: '0px', zIndex: '10', backgroundColor: 'lightgrey'}}>
-            <CalendarRow
-                    >
-                <CalendarSmallCell xs={1}> 
-                <FormControlLabel
-                    control={<Switch color="primary" checked={hourFormat} onChange={()=>{setHourFormat(()=>!hourFormat)}}/>}
-                    label="1 час"
-                    labelPlacement="end"
-                  />
-                </CalendarSmallCell>
-                {week?.map((weekDay, i)=>{
-                  return (
-                    <CalendarStandartCell key={i} xs={11/week.length}>
-                      <span style={{display: 'block', fontWeight: "600"}}>{weekDay}</span>
-                      <span style={{marginBottom: '10px'}}>{getCurrentWeekDayString(i)}</span>
-                    </CalendarStandartCell>
-                    ) 
-                  })}
-            </CalendarRow>
-          </Box>
-
-          <Grid container>
-          <CalendarRow week={true}>
-            <Grid item xs={0.995} flexDirection='column'>
-              {hoursInDay?.map((hour, i)=>{
-                return (
-                  <CalendarSmallCell key={i} week={true}>
-                    {hour}
-                  </CalendarSmallCell>)
-              })}
-            </Grid>
-
-            <Grid item xs={11.005}>
-              <CalendarRow week={true}>
-                {week?.map((weekDay, i)=>{
-                    return (
-                      <Grid item key={i} xs={12/week.length}>
-                          {hoursInDay?.map((hour, i)=>{
-                            return (
-                              <CalendarStandartCell key={i} week={true}>
-                                
-                              </CalendarStandartCell>)
-                          })}
-                      </Grid>) 
-                    })}
-              </CalendarRow>
-            </Grid>
-          </CalendarRow>
-          </Grid>
-        </Box>
-    </>
-  );
-}
-
-export default WeekCalendarBody;
\ No newline at end of file

planner-front/src/components/WeekCalendar/WeekCalendarHeader/WeekCalendarHeader.js

-import { AppBar, Toolbar} from '@mui/material';
-import { Box } from '@mui/system';
-import WeekCalendarHeaderInfo from './WeekCalendarHeaderInfo/WeekCalendarHeaderInfo';
-
-
-
-
-function WeekCalendarHeader({decrementWeek, incrementWeek, weekInfo}) {
-  
-  return (
-    <>
-        <Box sx={{ flexGrow: 1 }}>
-          <AppBar position="static">
-            <Toolbar>
-
-                  <WeekCalendarHeaderInfo
-                    decrementWeek={decrementWeek}
-                    incrementWeek={incrementWeek}
-                    weekInfo={weekInfo}
-                  />
-
-            </Toolbar>
-          </AppBar>
-        </Box>
-    </>
-  );
-}
-
-export default WeekCalendarHeader;
\ No newline at end of file

planner-front/src/components/WeekCalendar/WeekCalendarHeader/WeekCalendarHeaderInfo/WeekCalendarHeaderInfo.js

-import ArrowDecrementButton from '../../../UI/ArrowDecrementButton/ArrowDecrementButton';
-import ArrowIncrementButton from '../../../UI/ArrowIncrementButton/ArrowIncrementButton';
-import { Box } from '@mui/system';
-import {Typography} from '@mui/material';
-
-
-
-function WeekCalendarHeaderInfo({decrementWeek, incrementWeek, weekInfo}) {
-  
-  return (
-    <>
-        <Box sx={{width: '40%', marginBottom: '15px'}}>
-          <h2>Цель недели: Наладить режим сна</h2>
-          <Box sx={{display: 'flex', alignItems: 'center'}}>
-            <ArrowDecrementButton
-              onClick={()=>{decrementWeek()}}
-            />
-              <Typography
-                variant="h6" 
-                sx={{  
-                  flexBasis: '250px',
-                  display: 'flex',
-                  justifyContent: 'center',
-                }}
-              >
-                {weekInfo}
-              </Typography>
-            <ArrowIncrementButton
-              onClick={()=>{incrementWeek()}}
-            />
-          </Box>
-        </Box>
-    </>
-  );
-}
-
-export default WeekCalendarHeaderInfo;
\ No newline at end of file

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

@@ -44,7 +44,7 @@ export default function EnhancedTable() {
     if (tasks && tasks?.length > 0) {
       setRecievedTasks(tasks);
       }
-}, [dispatch, tasks?.length]);
+}, [dispatch, tasks]);
 
   useEffect(() => {
     dispatch(fetchAllTasks());

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

@@ -2,7 +2,7 @@ import moment from 'moment';
 import { useEffect, useState, useMemo, useCallback } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import WeekCalendarBody from '../../components/Calendars/WeekCalendar/WeekCalendarBody/WeekCalendarBody';
-import WeekCalendarHeader from '../../components/Calendars/WeekCalendar/WeekCalendarHeader/WeekCalendarHeader'
+import WeekCalendarHeader from '../../components/Calendars/WeekCalendar/WeekCalendarHeader/WeekCalendarHeader';
 import { getWeekInfoString, getWeekFromCurrentDate, dateToISOLikeButLocal } from '../../helpers/CalendarHelpers';
 import { addCalendarTask, deleteCalendarTask, editCalendarTask, fetchCalendarTasks } from '../../store/actions/tasksActions';
 
@@ -23,7 +23,7 @@ function WeekCalendar() {
     setDateNow({ year: year, month: month, currentDay: currentDay })
     dispatch(fetchCalendarTasks(user.id))
     setUserId(user.id)
-  }, [])
+  }, [dispatch, user.id])
   
   const hoursInDay = useMemo(() => {
     let arr
@@ -49,14 +49,12 @@ function WeekCalendar() {
       return { year: newDate.getFullYear(), month: newDate.getMonth(), currentDay: moment(newDate).date() }
     })
   }, [])
-
   const decrementWeek = useCallback(() => {
     setDateNow((prevState) => {
       const newDate = new Date(prevState.year, prevState.month, prevState.currentDay - 7)
       return { year: newDate.getFullYear(), month: newDate.getMonth(), currentDay: moment(newDate).date() }
     })
   }, [])
-
   const onChangeCurrentTaskHandler = useCallback((e) => {
     const { name, value } = e.target;
     if (name === 'startHour' || name === 'endHour') {
@@ -79,7 +77,7 @@ function WeekCalendar() {
     }
   }, []);
 
-  const createTaskInCellHandler = (dayNumber, dayHour) => {
+  const createTaskInCellHandler = useCallback((dayNumber, dayHour) => {
     let hour
     if (!isNaN(dayHour)) {
       hour = dayHour
@@ -105,9 +103,9 @@ function WeekCalendar() {
       }
     }
     setCurrentTask((newTask))
-  }
+  },[dateNow.month, dateNow.year, hourFormat])
 
-  const sendNewTaskHandler = async () => {
+  const sendNewTaskHandler = useCallback(async () => {
     const timeEndHour = currentTask.infoForCell.endHour
     const timeStartHour = currentTask.infoForCell.startHour
     const day = currentTask.infoForCell.startDay
@@ -135,11 +133,11 @@ function WeekCalendar() {
       delete newTask.id
       await dispatch(addCalendarTask(newTask, userId))
     }
-  }
+  }, [currentTask, dateNow.month, dateNow.year, dispatch, user.id, userId])
 
-  const deleteTaskHandler = async (taskId) => {
+  const deleteTaskHandler = useCallback(async (taskId) => {
     dispatch(deleteCalendarTask(taskId, userId))
-  }
+  },[dispatch, userId])
 
   return (
     <>

planner-front/src/helpers/CalendarHelpers.js

@@ -184,3 +184,16 @@ export const getAvailableTasks = (tasks, year, month, dayNumber) => {
     })
     return tasksInDay
 }
+
+export const getColorTaskByPriority = (priority) => {
+  switch(priority) {
+    case 'A': 
+      return 'rgb(32, 138, 250)';
+    case 'B':
+      return 'lightgreen';
+    case 'C':
+      return 'orange';
+    default: 
+      return 'rgb(171, 157, 157)';
+  }
+}
\ No newline at end of file