#112 Оптимизировал действия с месячным календарем, а также обновил логику…

#112 Оптимизировал действия с месячным календарем, а также обновил логику перехода на другой календарь

planner-front/src/App.js

@@ -71,15 +71,6 @@ const App = () => {
             </ProtectedRoute>
           } />
 
-          <Route path={"/week/:id"} element={
-            <ProtectedRoute
-              isAllowed={user}
-              redirectUrl={"/sign-in"}
-            >
-              <WeekCalendar />
-            </ProtectedRoute>
-          } />
-
           <Route path={"/month"} element={
             <ProtectedRoute
               isAllowed={user}
@@ -89,15 +80,6 @@ const App = () => {
             </ProtectedRoute>
           } />
 
-          <Route path={"/month/:id"} element={
-            <ProtectedRoute
-              isAllowed={user}
-              redirectUrl={"/sign-in"}
-            >
-              <MonthCalendar></MonthCalendar>
-            </ProtectedRoute>
-          } />
-
           <Route path={"/my-tasks"} element={
             <ProtectedRoute
               isAllowed={user}

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

@@ -2,26 +2,11 @@ import { Button, TextField } from "@mui/material";
 import { memo } from "react";
 import { priorities } from "../../../constants";
 import CustomSelect from '../../UI/СustomSelect/СustomSelect'
+import { isValidate } from "./Helpers";
 
 
 function CalendarModalTaskContent({ title, onChangeCurrentTaskHandler, description, priority, sendNewTaskHandler, deleteTaskHandler, startHour, endHour, id }) {
 
-  const isValidate = () => {
-    if (title) {
-      const startHourInt = parseInt(startHour)
-      const endHourInt = parseInt(endHour)
-      if (startHourInt >= 8 && startHourInt <= 24) {
-        if (endHourInt >= 8 && endHourInt <= 24) {
-          if (startHourInt < endHourInt) {
-            return true
-          }
-        }
-      } else {
-        return false
-      }
-    }
-  }
-
   return (<>
     <TextField
       id="task-description-title"
@@ -72,7 +57,7 @@ function CalendarModalTaskContent({ title, onChangeCurrentTaskHandler, descripti
       />
     </div>
     <div style={{ display: 'flex', gap: '20px', margin: '10px 0' }}>
-      <Button id='test_button_save_task' onClick={sendNewTaskHandler} disabled={!isValidate()}>Сохранить</Button>
+      <Button id='test_button_save_task' onClick={sendNewTaskHandler} disabled={!isValidate(title, startHour, endHour)}>Сохранить</Button>
       <Button onClick={deleteTaskHandler} disabled={!id}>Удалить</Button>
     </div>
   </>);

planner-front/src/components/Calendars/CalendarModalTaskContent/Helpers.js

+export const isValidate = (title, startHour, endHour) => {
+  if (title) {
+    const startHourInt = parseInt(startHour)
+    const endHourInt = parseInt(endHour)
+    if (startHourInt >= 8 && startHourInt <= 24) {
+      if (endHourInt >= 8 && endHourInt <= 24) {
+        if (startHourInt < endHourInt) {
+          return true
+        }
+      }
+    } else {
+      return false
+    }
+  }
+}
\ No newline at end of file

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

 import { Autocomplete, Button, TextField } from "@mui/material";
 import { memo } from "react";
+import CustomAutocomplete from "../../UI/CustomAutocomplete/CustomAutocomplete";
 
 
-function CalendarModalWorkerContent({ allUserProjects, onChangeProjectHandler, onChangeWorkerHandler, workerInfo, workers, handleClose, onChangeCalendarUser}) {
+function CalendarModalWorkerContent({ allUserProjects, onChangeProjectHandler, onChangeWorkerHandler, workerInfo, workers, handleClose, onChangeCalendarUser }) {
   return (<>
-    <Autocomplete
-      id="choose-project"
-      freeSolo
+    <CustomAutocomplete
+      name={'project'}
+      label={'Проекты'}
       options={allUserProjects}
-      getOptionLabel={(item) => item.title || ""}
       onChange={onChangeProjectHandler}
-      name={"project"}
       value={workerInfo.project}
-      renderInput={(params) => <TextField
-        style={{ marginBottom: "15px" }}
-        label={"Проект"}
-        state={workerInfo.project}
-        {...params} />}
+      getOptionLabel={(item) => item.title || ""}
+      style={{ marginBottom: '15px' }}
     />
     {workerInfo.project ?
       <>
-        <Autocomplete
-          id="choose-worker"
-          freeSolo
+        <CustomAutocomplete
+          name={'worker'}
+          label={'Участник'}
           options={workers}
-          getOptionLabel={(item) => item?.user?.displayName || ""}
-          onChange={(e, value) => { onChangeWorkerHandler(e, value) }}
-          name={"worker"}
+          onChange={onChangeWorkerHandler}
           value={workerInfo.worker}
-          renderInput={(params) => <TextField
-            label={"Участник"}
-            state={workerInfo.worker}
-            {...params} />}
+          getOptionLabel={(item) => item?.user?.displayName || ""}
+          style={{ marginBottom: '15px' }}
         />
         <div style={{ display: 'flex', justifyContent: 'space-between', margin: '10px 0' }}>
-          <Button onClick={()=>{onChangeCalendarUser()}} >Выбрать</Button>
+          <Button onClick={() => { onChangeCalendarUser() }} >Выбрать</Button>
           <Button onClick={() => handleClose()}>Отмена</Button>
         </div>
       </>

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

 import { Box, FormControlLabel, Switch } from "@mui/material";
-import { useState } from "react";
+import { useCallback, useState } from "react";
 import CalendarRow from "../../CalendarRow/CalendarRow";
 import CalendarSmallCell from "../../CalendarSmallCell/CalendarSmallCell";
 import CalendarStandartCell from "../../CalendarStandartCell/CalendarStandartCell";
@@ -12,7 +12,7 @@ function MonthCalendarBody({ month, year, tasks, createTaskInCellHandler, curren
 
   const [currentLine, setCurrentLine] = useState('')
   const [modal, setModal] = useState({ open: false, y: 0, x: 0, });
-  const handleOpen = (e) => {
+  const handleOpen = useCallback((e) => {
     setModal({
       open: true,
       yClickСordinates: e.clientY,
@@ -22,12 +22,12 @@ function MonthCalendarBody({ month, year, tasks, createTaskInCellHandler, curren
       yDiv: e.target.offsetHeight,
       xDiv: e.target.offsetWidth,
     })
-  };
+  },[])
 
-  const handleClose = () => {
+  const handleClose = useCallback(() => {
     setModal({ ...modal, open: false })
     setCurrentTask({})
-  };
+  }, [modal, setCurrentTask])
 
   return (
     <Box style={{ marginBottom: '30px' }}>

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

@@ -40,11 +40,11 @@ function CalendarColumnDayWeek({ hoursInDay, tasks, month, year, day, hourFormat
       {linesInDay?.map((line, i) => {
         const boxes = getTasksWithInfoForPosition(line, sortedTasks, linesInDay, columnDaySize.height, hours)
         return (<>
-          {boxes.map((task, index) => {
+          {boxes.map((task) => {
             const { width, left, zIndex } = getWidthLeftZIndex(task, columnDaySize.width, i)
             return (
               <CalendarWeekTask
-                key={index}
+                key={task.task.id}
                 width={width}
                 height={task.height}
                 left={left}

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

@@ -11,7 +11,6 @@ export const getTasksWithInfoForPosition = (line, sortedTasks, linesInDay, colum
         })
         const step = columnDayHeight / hours.length
         if (taskIsThere) {
-          taskIsThere.lastHour = i
           taskIsThere.height += step
           let tasksInHour = 0
           for (let line of linesInDay) {
@@ -33,8 +32,6 @@ export const getTasksWithInfoForPosition = (line, sortedTasks, linesInDay, colum
             tasksInHour: tasksInHour,
             top: step * i,
             height: step,
-            firstHour: i,
-            lastHour: i,
             task: sortedTasks[line[i].split('-')[1]]
           })
         }

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

+import { Autocomplete, TextField } from "@mui/material";
+import { memo } from "react";
+
+function CustomAutocomplete({ options, onChange, value, name, label, style, getOptionLabel }) {
+  return (<>
+    <Autocomplete
+      id={name}
+      freeSolo
+      options={options}
+      getOptionLabel={getOptionLabel}
+      onChange={(e, value) => { onChange(e, value) }}
+      name={name}
+      value={value}
+      renderInput={(params) => <TextField
+        style={style}
+        label={label}
+        state={value}
+        {...params} />}
+    />
+  </>);
+}
+
+export default memo(CustomAutocomplete);
\ No newline at end of file

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

 import { useEffect, useCallback, useState, useMemo } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { useNavigate, useParams } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import CalendarModalWorkerContent from '../../components/Calendars/CalendarModalWorkerContent/CalendarModalWorkerContent';
 import MonthCalendarBody from '../../components/Calendars/MonthCalendar/MonthCalendarBody/MonthCalendarBody';
 import MonthCalendarHeader from '../../components/Calendars/MonthCalendar/MonthCalendarHeader/MonthCalendarHeader';
@@ -12,11 +12,10 @@ import { fetchCurrentCalendarDisplayName } from '../../store/actions/usersAction
 
 function MonthCalendar() {
   const dispatch = useDispatch();
-  const navigate = useNavigate()
+
   const { calendarTasks } = useSelector(state => state.tasks);
   const { user, currentCalendarDisplayName } = useSelector(state => state.users);
   const { allUserProjects, project } = useSelector(state => state.projects)
-  const params = useParams()
 
   const [hourFormat, setHourFormat] = useState(false);
   const [dateNow, setDateNow] = useState({ month: '', year: '' })
@@ -25,6 +24,7 @@ function MonthCalendar() {
   const [copyTask, setCopyTask] = useState(null)
   const [cellSizes, setCellSizes] = useState({})
   const [userId, setUserId] = useState('')
+  const [userCalendarId, setUserCalendarId] = useState(null)
   const [modal, setModal] = useState(false)
 
   useEffect(() => {
@@ -32,22 +32,25 @@ function MonthCalendar() {
       month: new Date().getMonth(),
       year: new Date().getFullYear(),
     })
-    if (params.id) {
-      setUserId(params.id)
-      dispatch(fetchCalendarTasks(params.id))
-      dispatch(fetchCurrentCalendarDisplayName(params.id))
+  }, [dispatch])
+
+  useEffect(() => {
+    if (userCalendarId) {
+      setUserId(userCalendarId)
+      dispatch(fetchCalendarTasks(userCalendarId))
+      dispatch(fetchCurrentCalendarDisplayName(userCalendarId))
     } else {
       setUserId(user.id)
       dispatch(fetchCalendarTasks(user.id))
       dispatch(fetchCurrentCalendarDisplayName(user.id))
     }
-  }, [dispatch])
+  }, [userCalendarId, dispatch, user.id])
 
   useEffect(() => {
     if (workerInfo.project) {
       dispatch(fetchProject(workerInfo.project.id))
     }
-  }, [workerInfo.project])
+  }, [workerInfo.project, dispatch])
 
   const hoursInDay = useMemo(() => {
     let arr
@@ -120,7 +123,7 @@ function MonthCalendar() {
     }
   }, []);
 
-  const createTaskInCellHandler = (dayNumber, dayHour) => {
+  const createTaskInCellHandler = useCallback((dayNumber, dayHour) => {
     let hour
     if (!isNaN(dayHour)) {
       hour = dayHour
@@ -146,9 +149,9 @@ function MonthCalendar() {
       }
     }
     setCurrentTask((newTask))
-  }
+  }, [dateNow.month, dateNow.year, hourFormat])
 
-  const dragTaskHandler = async (dayNumber, hour) => {
+  const dragTaskHandler = useCallback(async (dayNumber, hour) => {
     const hourDiff = currentTask.infoForCell.endHour - currentTask.infoForCell.startHour
     const lastHour = hoursInDay[hoursInDay.length - 1].split(':')[0]
     let due
@@ -168,9 +171,9 @@ function MonthCalendar() {
     delete newTask.infoForCell
     await dispatch(editCalendarTask(newTask, currentTask.id, userId))
     setCurrentTask({})
-  }
+  }, [currentTask, dateNow.month, dateNow.year, dispatch, hoursInDay, userId])
 
-  const sendNewTaskHandler = async () => {
+  const sendNewTaskHandler = useCallback(async () => {
     const timeEndHour = currentTask.infoForCell.endHour
     const timeStartHour = currentTask.infoForCell.startHour
     const day = currentTask.infoForCell.startDay
@@ -198,9 +201,9 @@ function MonthCalendar() {
       delete newTask.id
       await dispatch(addCalendarTask(newTask, userId))
     }
-  }
+  }, [currentTask, dateNow.month, dateNow.year, dispatch, user.id, userId])
 
-  const createCopyTask = async (dayNumber, hour) => {
+  const createCopyTask = useCallback(async (dayNumber, hour) => {
     const hourDiff = copyTask.infoForCell.endHour - copyTask.infoForCell.startHour
     const lastHour = hoursInDay[hoursInDay.length - 1].split(':')[0]
     let due
@@ -220,35 +223,31 @@ function MonthCalendar() {
     delete newTask.id
     await dispatch(addCopyCalendarTask(newTask, userId))
     setCopyTask(null)
-  }
+  }, [copyTask, dateNow.month, dateNow.year, dispatch, hoursInDay, userId])
 
-  const deleteTaskHandler = async (taskId) => {
+  const deleteTaskHandler = useCallback(async (taskId) => {
     dispatch(deleteCalendarTask(taskId, userId))
-  }
+  }, [dispatch, userId])
 
-  const handleClose = () => {
+  const handleClose = useCallback(() => {
     setModal(false)
     setWorkerInfo({ project: '', worker: '' })
-  }
-  const handleOpen = async () => {
+  }, [])
+
+  const handleOpen = useCallback(async () => {
     if (user.id === userId) {
       await dispatch(fetchAllUserProjects())
       setModal(true)
     } else {
-      navigate("/month")
-      setWorkerInfo({ project: '', worker: '' })
-      setUserId(user.id)
-      dispatch(fetchCalendarTasks(user.id))
-      dispatch(fetchCurrentCalendarDisplayName(user.id))
+      dispatch(setUserCalendarId(null))
     }
-  }
-  const onChangeCalendarUser = () => {
-    navigate(`/month/${workerInfo.worker.user.id}`)
+  }, [dispatch, user.id, userId])
+
+  const onChangeCalendarUser = useCallback(() => {
     setModal(false)
-    setUserId(workerInfo.worker.user.id)
-    dispatch(fetchCalendarTasks(workerInfo.worker.user.id))
-    dispatch(fetchCurrentCalendarDisplayName(workerInfo.worker.user.id))
-  }
+    dispatch(setUserCalendarId(workerInfo.worker.user.id))
+    setWorkerInfo({ project: '', worker: '' })
+  }, [dispatch, workerInfo?.worker?.user?.id])
 
   return (
     <>