#28 Разделил части таблицы на разные компоненты

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

+import { Grid } from "@mui/material";
+
+const CalendarRow = ({children}) => {
+    return <>
+        <Grid 
+          container 
+          align='center'
+          sx={{borderBottom: '1px solid black', borderRight: '1px solid black', borderLeft: '1px solid black'}}
+          >
+            {children}
+          </Grid>
+    </>
+};
+
+export default CalendarRow;
+
+

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

+import { Grid } from "@mui/material";
+
+const CalendarSmallCell = ({children, xs}) => {
+    return <>
+        <Grid align='center' item xs={xs} sx={{borderRight: '1px solid black'}}>
+          {children}
+        </Grid>
+    </>
+};
+
+export default CalendarSmallCell;
\ No newline at end of file

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

+import { Grid } from "@mui/material";
+
+const CalendarStandartCell = ({children, xs, onClick}) => {
+    return <>
+        <Grid  
+            item xs={xs} 
+            sx={{borderRight: '1px solid black'}} 
+            onClick={onClick}>
+            {children}
+        </Grid>
+    </>
+};
+
+export default CalendarStandartCell;
\ No newline at end of file

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

+import { Grid, TextField } from "@mui/material";
+import { useEffect, useState } from "react";
+
+const CalendarTask = ({year, month, tasks, day, hours, setCurrentTask, onChange}) => {
+
+  const getTaskInDayCell = (tasks, day, hours) => {
+    const task = tasks.find(task=> {
+    if (year === task.infoForCell.startYear) {
+      if (month + 1 === task.infoForCell.startMonth) {
+        if (day.dayNumber === task.infoForCell.startDay) {
+          if ((task.infoForCell.endHour <= parseInt(hours.split(':')[0]) || task.infoForCell.startHour <= parseInt(hours.split(':')[0])) && (task.infoForCell.endHour > parseInt(hours.split(':')[0]))) {
+            return task
+          }
+        }
+      }      
+    }
+    })
+    return task
+  }
+  
+  let task = getTaskInDayCell(tasks, day, hours)
+
+  return (<> 
+      {task ? 
+      <Grid  sx={{backgroundColor: 'lightgreen'}}>
+        <TextField 
+        id={task.title} 
+        variant="standard" 
+        value={task.title} 
+        name='title' 
+        onClick={(e)=>{e.stopPropagation(); setCurrentTask(task)}}
+        onChange={onChange}>
+        </TextField>
+      </Grid>
+      : null }
+  </>)
+};
+
+export default CalendarTask;
\ No newline at end of file

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

-import { Grid, TextField } from "@mui/material";
 import { useEffect, useState } from "react";
+import CalendarRow from "./CalendarRow/CalendarRow";
+import CalendarSmallCell from "./CalendarSmallCell/CalendarSmallCell";
+import CalendarStandartCell from "./CalendarStandartCell.js/CalendarStandartCell";
+import CalendarTask from "./CalendarTask/CalendarTask";
 
 function MonthCalendarBody({month, year, tasks, createTaskInCellHandler, onChangeCellTaskTitle, setCurrentTask}) {
   
   const [hoursInDay, setHoursInDay] = useState(['8:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00', '6:00'])
   const [daysInMonth, setDaysInMonth] = useState([])
+  const [cellSizes, setCellSizes] = useState({})
+
+  useEffect(()=>{
+    const cells = hoursInDay.length
+    const xs = 11/cells
+    setCellSizes(()=>{
+      return {smallCell: 0.5, standarCell: xs}
+    })
+  }, [])
 
   useEffect(()=>{
     setNewMonthDays()
-  }, [month, year])
+  }, [month])
 
   const getDaysInMonth = () => { 
     return new Date(year, month + 1, 0).getDate();
@@ -28,81 +40,50 @@ function MonthCalendarBody({month, year, tasks, createTaskInCellHandler, onChang
       const dayOfWeekNumber = getDayOfWeekNumber(i)
       newDaysInMonth.push({dayNumber: i, dayOfWeek: getDayOfWeekString(dayOfWeekNumber)})
     }
-    setDaysInMonth(newDaysInMonth)
-  }
-
-  const getTaskInDayCell = (tasks, day, hours) => {
-    const task = tasks.find(task=> {
-    if (year === task.infoForCell.startYear) {
-      if (month + 1 === task.infoForCell.startMonth) {
-        if (day.dayNumber === task.infoForCell.startDay && task.infoForCell.startDayOfWeek === day.dayOfWeek ) {
-          if ((task.infoForCell.endHour <= parseInt(hours.split(':')[0]) || task.infoForCell.startHour <= parseInt(hours.split(':')[0])) && (task.infoForCell.endHour > parseInt(hours.split(':')[0]))) {
-            return task
-          }
-        }
-      }      
-    }
-    })
-    return task
+    setDaysInMonth(prevState=>newDaysInMonth)
   }
 
   return (
     <>
-    <Grid
-      container
-      align='center'
-      sx={{borderBottom: '1px solid black', borderRight: '1px solid black', borderLeft: '1px solid black'}}
+    <CalendarRow
       >
-        <Grid align='center' item xs={0.5} sx={{borderRight: '1px solid black'}}>
-          {' '}
-        </Grid>
-        <Grid align='center' item xs={0.5} sx={{borderRight: '1px solid black'}}>
-          {' '}
-        </Grid>
+        <CalendarSmallCell xs={cellSizes.smallCell} />
+        <CalendarSmallCell xs={cellSizes.smallCell}/>
         {hoursInDay.map((hours, i)=>{
           return (
-            <Grid key={i} item xs={1.2222} sx={{borderRight: '1px solid black'}}>
+            <CalendarStandartCell key={i} xs={cellSizes.standarCell}>
               {hours}
-            </Grid>
+            </CalendarStandartCell>
             ) 
           })}
-    </Grid>
+    </CalendarRow>
     {daysInMonth.map((day, i)=>{
       return (
-        <Grid 
+        <CalendarRow
           key={i}
-          container 
-          align='center'
-          sx={{borderBottom: '1px solid black', borderRight: '1px solid black', borderLeft: '1px solid black'}}
           >
-            <Grid align='center' item xs={0.5} sx={{borderRight: '1px solid black'}}>
-              {day.dayNumber}
-            </Grid>
-            <Grid align='center' item xs={0.5} sx={{borderRight: '1px solid black'}}>
-              {day.dayOfWeek}
-            </Grid>
+            <CalendarSmallCell xs={cellSizes.smallCell}>{day.dayNumber}</CalendarSmallCell>
+            <CalendarSmallCell xs={cellSizes.smallCell}>{day.dayOfWeek}</CalendarSmallCell>
             {hoursInDay.map((hours, i)=>{
-              const task = getTaskInDayCell(tasks, day, hours)
               return (
-                <Grid  
+                <CalendarStandartCell 
                   key={i} 
-                  item xs={1.2222} 
-                  sx={{borderRight: '1px solid black'}} 
-                  onClick={()=>{createTaskInCellHandler(day.dayNumber, hours)}}>
-                  { task ? 
-                    <Grid  key={i} sx={{backgroundColor: 'lightgreen'}}>
-                        <TextField 
-                        id={task.title} 
-                        variant="standard" 
-                        value={task.title} 
-                        name='title' 
-                        onClick={(e)=>{e.stopPropagation(); setCurrentTask(task)}}
-                        onChange={(e)=>{onChangeCellTaskTitle(e)}}></TextField>
-                    </Grid> : null}
-                </Grid>
+                  item xs={cellSizes.standarCell}
+                  onClick={()=>{createTaskInCellHandler(day.dayNumber, hours)}}
+                  >
+                    <CalendarTask
+                      setCurrentTask={setCurrentTask}
+                      onChange={(e)=>{onChangeCellTaskTitle(e)}}
+                      year={year}
+                      month={month} 
+                      tasks={tasks}
+                      day={day}
+                      hours={hours}
+                    />
+                </CalendarStandartCell>
                 ) 
               })}
-        </Grid>
+        </CalendarRow>
       )
     })}
     </>

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

 import { Container } from '@mui/material';
-import moment from 'moment';
 import { useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import MonthCalendarBody from '../../components/MonthCalendarBody/MonthCalendarBody';
@@ -76,7 +75,7 @@ function MonthCalendar() {
     const name = e.target.name;
     setCurrentTask({ ...currentTask, [name]: value })
   }
-  console.log(tasks)
+
   return (
     <>
     <Container>

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

@@ -18,15 +18,12 @@ const tasksReduсer = (state = initialState, action) => {
               const timeStart = task.dateTimeStart.split('T')[1]
               const timeEnd = task.dateTimeDue.split('T')[1]
               const dayStart = parseInt(dateStart.split('-')[2])
-              const dayOfWeekStartNumber = new Date(new Date().getFullYear(), new Date().getMonth(), dayStart).getDay()
-              const dayOfWeekStartString = ["ВС","ПН","ВТ","СР","ЧТ","ПТ","СБ"][dayOfWeekStartNumber]
               const monthStartNumber =  parseInt(dateStart.split('-')[1])
               const yearStartNumber =  parseInt(dateStart.split('-')[0])
               const timeStartHour = parseInt(timeStart.split(':')[0])
               const timeEndHour = parseInt(timeEnd.split(':')[0])
               newArr.push({...task, infoForCell: { 
                 startDay: dayStart, 
-                startDayOfWeek: dayOfWeekStartString, 
                 startHour: timeStartHour, 
                 startMonth: monthStartNumber,
                 startYear: yearStartNumber,