#100 Разделил логику более в правильном виде, чуть поправил красоту кода

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

@@ -2,24 +2,16 @@ import { Grid } from "@mui/material";
 import CalendarRow from "../../../MonthCalendar/MonthCalendarBody/CalendarRow/CalendarRow";
 import CalendarStandartCell from "../../../MonthCalendar/MonthCalendarBody/CalendarStandartCell.js/CalendarStandartCell";
 
-function CalendarRowDayWeek({week, hoursInDay}) {
-  return ( <>
-  <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>
-  </> );
+function CalendarRowDayWeek({ week, hoursInDay }) {
+  return (<>
+    {hoursInDay?.map((hour, i) => {
+      return (
+        <CalendarStandartCell key={i} week={true}>
+
+        </CalendarStandartCell>)
+    })}
+
+  </>);
 }
 
 export default CalendarRowDayWeek;
\ No newline at end of file

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

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

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

@@ -6,36 +6,36 @@ import CalendarStandartCell from "../../MonthCalendar/MonthCalendarBody/Calendar
 import CalendarRowDayWeek from "./CalendarRowDayWeek/CalendarRowDayWeek";
 import { getCurrentWeekDayString } from "./Helpers";
 
-function WeekCalendarBody({week, hoursInDay, hourFormat, setHourFormat,}) {
-  
+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>
+      <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>
+        <Grid container>
           <CalendarRow week={true}>
             <Grid item xs={0.995} flexDirection='column'>
-              {hoursInDay?.map((hour, i)=>{
+              {hoursInDay?.map((hour, i) => {
                 return (
                   <CalendarSmallCell key={i} week={true}>
                     {hour}
@@ -43,14 +43,23 @@ function WeekCalendarBody({week, hoursInDay, hourFormat, setHourFormat,}) {
               })}
             </Grid>
 
-            <CalendarRowDayWeek
-              week={week}
-              hoursInDay={hoursInDay}
-            />
+            <Grid item xs={11.005}>
+              <CalendarRow week={true}>
+                {week?.map((weekDay, i) => {
+                  return (
+                    <Grid item key={i} xs={12 / week.length}>
+                      <CalendarRowDayWeek
+                        hoursInDay={hoursInDay}
+                      />
+                    </Grid>
+                  )
+                })}
+              </CalendarRow>
+            </Grid>
 
           </CalendarRow>
-          </Grid>
-        </Box>
+        </Grid>
+      </Box>
     </>
   );
 }

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

-import { AppBar, Toolbar} from '@mui/material';
+import { AppBar, Toolbar } from '@mui/material';
 import { Box } from '@mui/system';
 import WeekCalendarHeaderInfo from './WeekCalendarHeaderInfo/WeekCalendarHeaderInfo';
 
 
 
 
-function WeekCalendarHeader({decrementWeek, incrementWeek, weekInfo}) {
-  
+function WeekCalendarHeader({ decrementWeek, incrementWeek, weekInfo }) {
+
   return (
     <>
-        <Box sx={{ flexGrow: 1 }}>
-          <AppBar position="static">
-            <Toolbar>
-
-                  <WeekCalendarHeaderInfo
-                    decrementWeek={decrementWeek}
-                    incrementWeek={incrementWeek}
-                    weekInfo={weekInfo}
-                  />
-
-            </Toolbar>
-          </AppBar>
-        </Box>
+      <Box sx={{ flexGrow: 1 }}>
+        <AppBar position="static">
+          <Toolbar>
+
+            <WeekCalendarHeaderInfo
+              decrementWeek={decrementWeek}
+              incrementWeek={incrementWeek}
+              weekInfo={weekInfo}
+            />
+
+          </Toolbar>
+        </AppBar>
+      </Box>
     </>
   );
 }

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';
+import { Typography } from '@mui/material';
 
 
 
-function WeekCalendarHeaderInfo({decrementWeek, incrementWeek, weekInfo}) {
-  
+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 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>
     </>
   );
 }

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

 import moment from 'moment';
-import { useEffect, useState, useMemo, useCallback  } from 'react';
+import { useEffect, useState, useMemo, useCallback } from 'react';
 import WeekCalendarBody from '../../components/WeekCalendar/WeekCalendarBody/WeekCalendarBody';
 import WeekCalendarHeader from '../../components/WeekCalendar/WeekCalendarHeader/WeekCalendarHeader'
 import { getWeekInfoString, getWeekFromCurrentDate } from '../../helpers/CalendarHelpers';
@@ -7,48 +7,48 @@ import { getWeekInfoString, getWeekFromCurrentDate } from '../../helpers/Calenda
 
 function WeekCalendar() {
 
-  const [date, setDate] = useState({year: '', month: '', currentDay: ''})
+  const [date, setDate] = useState({ year: '', month: '', currentDay: '' })
   const [hourFormat, setHourFormat] = useState(false);
 
-  useEffect(()=>{
+  useEffect(() => {
     const year = new Date().getFullYear()
     const month = new Date().getMonth()
     const currentDay = moment().date()
-    setDate({year: year, month: month, currentDay: currentDay})
+    setDate({ year: year, month: month, currentDay: currentDay })
   }, [])
 
-  const hoursInDay = useMemo(()=>{
+  const hoursInDay = useMemo(() => {
     let arr
     if (hourFormat) {
-      arr = ['8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00','21:00','22:00']
+      arr = ['8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00']
     } else {
       arr = ['8:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00']
     }
     return arr
   }, [hourFormat])
 
-  const week = useMemo(()=>{
+  const week = useMemo(() => {
     return getWeekFromCurrentDate(date.year, date.month, date.currentDay)
   }, [date])
 
   const incrementWeek = useCallback(() => {
-    setDate((prevState)=>{
+    setDate((prevState) => {
       const newDate = new Date(prevState.year, prevState.month, prevState.currentDay + 7)
-      return {year: newDate.getFullYear(), month: newDate.getMonth(), currentDay: moment(newDate).date()}
+      return { year: newDate.getFullYear(), month: newDate.getMonth(), currentDay: moment(newDate).date() }
     })
   }, [])
 
   const decrementWeek = useCallback(() => {
-    setDate((prevState)=>{
+    setDate((prevState) => {
       const newDate = new Date(prevState.year, prevState.month, prevState.currentDay - 7)
-      return {year: newDate.getFullYear(), month: newDate.getMonth(), currentDay: moment(newDate).date()}
+      return { year: newDate.getFullYear(), month: newDate.getMonth(), currentDay: moment(newDate).date() }
     })
   }, [])
 
-  const weekInfo = useMemo(()=>{
+  const weekInfo = useMemo(() => {
     return getWeekInfoString(week, date)
   }, [date, week])
-  
+
   return (
     <>
       <WeekCalendarHeader