#35 Оптимизировал хедер

planner-front/src/components/MonthCalendarHeader/MonthAndYearInfo/MonthAndYearInfo.js

+
+import { Box, Typography } from '@mui/material';
+import { memo } from 'react';
+import MonthDecrementButton from './MonthDecrementButton/MonthDecrementButton';
+import MonthIncrementButton from './MonthIncrementButton/MonthIncrementButton';
+function MonthAndYearInfo({getCurrentMonthString, year, incrementMonth, decrementMonth}) {
+  
+  return ( 
+  <>
+    <Box
+        sx={{ 
+          flexGrow: 1, 
+          display: 'flex',
+          alignItems: 'center',
+          gap: '10px'
+        }}
+        >
+          <MonthDecrementButton
+            decrementMonth={decrementMonth}
+          />
+          <Box sx={{ flexBasis: '150px' }}>
+            <Typography
+              variant="h6" 
+              sx={{  
+                display: 'flex',
+                justifyContent: 'center',
+              }}
+            >
+              {getCurrentMonthString}
+            </Typography>
+            <Typography align='center'>{year}</Typography>
+          </Box>
+          <MonthIncrementButton
+            incrementMonth={incrementMonth}
+          />   
+      </Box>
+  </> );
+}
+
+export default memo(MonthAndYearInfo);
\ No newline at end of file

planner-front/src/components/MonthCalendarHeader/MonthAndYearInfo/MonthDecrementButton/MonthDecrementButton.js

+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+import { memo } from 'react';
+const arrowClass = {
+  borderRadius: '50%',
+  cursor: 'pointer',
+  transition: '0.5s',
+  "&:hover": { 
+  
+  background: 'rgb(48, 154, 252, 0.65)',
+  transition: '0.5s',
+  transform: 'scale(1.2)'
+  }
+}
+
+
+function MonthDecrementButton({decrementMonth}) {
+  
+  return ( 
+  <>
+    <ArrowBackIcon
+      sx={arrowClass}
+      onClick={decrementMonth}
+    />  
+  </> );
+}
+
+export default memo(MonthDecrementButton);
\ No newline at end of file

planner-front/src/components/MonthCalendarHeader/MonthAndYearInfo/MonthIncrementButton/MonthIncrementButton.js

+import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
+import { memo } from 'react';
+const arrowClass = {
+  borderRadius: '50%',
+  cursor: 'pointer',
+  transition: '0.5s',
+  "&:hover": { 
+  
+  background: 'rgb(48, 154, 252, 0.65)',
+  transition: '0.5s',
+  transform: 'scale(1.2)'
+  }
+}
+
+
+function MonthIncrementButton({incrementMonth}) {
+  
+  return ( 
+  <>
+    <ArrowForwardIcon
+      sx={arrowClass}
+      onClick={incrementMonth}
+    />  
+  </> );
+}
+
+export default memo(MonthIncrementButton);
\ No newline at end of file

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

-import { AppBar, FormControl, InputLabel, MenuItem, Select, Toolbar, Typography } from '@mui/material';
-import ArrowBackIcon from '@mui/icons-material/ArrowBack';
-import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
+import { AppBar, Toolbar} from '@mui/material';
 import { Box } from '@mui/system';
+import MonthAndYearInfo from './MonthAndYearInfo/MonthAndYearInfo';
+import СustomSelect from '../UI/СustomSelect/СustomSelect'
 
-const arrowClass = {
-  borderRadius: '50%',
-  cursor: 'pointer',
-  transition: '0.5s',
-  "&:hover": { 
-  
-  background: 'rgb(48, 154, 252, 0.65)',
-  transition: '0.5s',
-  transform: 'scale(1.2)'
-  }
-}
-
+const workers = [{value: '', text: '--выберите сотрудника'}, {value: 'Василий', text: 'Василий'}, {value: 'Никита', text: 'Никита'}]
+const types = [{value: 'Месяц', text: 'Месяц'}, {value: 'Неделя', text: 'Неделя'}]
 
-function MonthCalendarHeader({month, getCurrentMonthString, decrementMonth, incrementMonth, calendarType, onChangeWorkerHandler, onChangeCalendarTypeHandler, worker, year}) {
+function MonthCalendarHeader({ getCurrentMonthString, decrementMonth, incrementMonth, calendarType, onChangeWorkerHandler, onChangeCalendarTypeHandler, worker, year}) {
   
   return (
     <>
         <Box sx={{ flexGrow: 1 }}>
           <AppBar position="static">
             <Toolbar>
-              <Box
-                sx={{ 
-                  flexGrow: 1, 
-                  display: 'flex',
-                  alignItems: 'center',
-                  gap: '10px'
-                }}
-                >
-                  <ArrowBackIcon
-                    onClick={()=>{decrementMonth()}}
-                    sx={arrowClass}
-                  />
-                  <Box sx={{ flexBasis: '150px' }}>
-                  <Typography
-                    variant="h6" 
-                    sx={{  
-                      display: 'flex',
-                      justifyContent: 'center',
-                    }}
-                  >
-                    {getCurrentMonthString(month)}
-                  </Typography>
-                  <Typography align='center'>{year}</Typography>
-                  </Box>
-                  <ArrowForwardIcon
-                    sx={arrowClass}
-                    onClick={()=>{incrementMonth()}}
-                  />     
-              </Box>
-
-              <FormControl variant="standard" sx={{ m: 1, minWidth: 120 }}>
-                <InputLabel id="worker-select-label">Сотрудник</InputLabel>
-                <Select
-                  labelId="worker-select-label"
-                  id="worker-select"
-                  value={worker}
-                  onChange={(e)=>{onChangeWorkerHandler(e)}}
-                  label="Worker"
-                >
-                  <MenuItem value="">
-                    <em>-- Выберите сотрудника --</em>
-                  </MenuItem>
-                  <MenuItem value={"Василий"}>Василий</MenuItem>
-                  <MenuItem value={"Никита"}>Никита</MenuItem>
-                  <MenuItem value={"Артем"}>Артем</MenuItem>
-                </Select>
-              </FormControl>
-
-              <FormControl variant="standard" sx={{ m: 1, minWidth: 120 }}>
-                <InputLabel id="calendar-type-label">Календарь</InputLabel>
-                <Select
-                  labelId="calendar-type-label"
-                  id="calendar-type"
-                  value={calendarType}
-                  onChange={(e)=>{onChangeCalendarTypeHandler(e)}}
-                  label="Type"
-                >
-                  <MenuItem value={"Месяц"}>Месяц</MenuItem>
-                  <MenuItem value={"Неделя"}>Неделя</MenuItem>
-                </Select>
-              </FormControl>
+              
+              <MonthAndYearInfo
+                getCurrentMonthString={getCurrentMonthString}
+                decrementMonth={decrementMonth}
+                incrementMonth={incrementMonth}
+                year={year}
+              />
+              <СustomSelect
+                value={worker}
+                onChange={(e)=>{onChangeWorkerHandler(e)}}
+                label={'Сотрудник'}
+                id={'worker'}
+                items={workers}
+              />
 
+              <СustomSelect
+                value={calendarType}
+                onChange={(e)=>{onChangeCalendarTypeHandler(e)}}
+                label={'Календарь'}
+                id={'calendar-type'}
+                items={types}
+              />
             </Toolbar>
           </AppBar>
         </Box>

planner-front/src/components/UI/СustomSelect/СustomSelect.js

+import { FormControl, InputLabel, MenuItem, Select} from '@mui/material';
+import { memo } from 'react';
+function СustomSelect({value, onChange, label, variant='standard', items, id}) {
+  
+  return ( 
+  <>
+    <FormControl variant={variant} sx={{ m: 1, minWidth: 120 }}>
+        <InputLabel id={id + '-select' + '-label'}>{label}</InputLabel>
+        <Select
+          labelId={id + '-select'+ '-label'}
+          id={id + '-select'}
+          value={value}
+          onChange={onChange}
+          label={label}
+        >
+          {items.map((item, i)=>{
+            return (
+              <MenuItem
+                key={i}
+                value={item?.value}
+              >{item?.text}</MenuItem>
+            )
+          })}
+        </Select>
+      </FormControl>
+  </> );
+}
+
+export default memo(СustomSelect, (prevProps, nextProps)=>{
+  if(prevProps.value !== nextProps.value) {
+    return false
+  } else {
+    return true
+  }
+});
\ No newline at end of file

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

-import { useEffect, useState } from 'react';
+import { useEffect, useCallback, useState, useMemo  } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import MonthCalendarBody from '../../components/MonthCalendarBody/MonthCalendarBody';
 import MonthCalendarHeader from '../../components/MonthCalendarHeader/MonthCalendarHeader';
 import { addTask, deleteTask, editTask, fetchCalendarTasks} from '../../store/actions/tasksActions';
 
+function dateToISOLikeButLocal(date) {
+  const offsetMs = date.getTimezoneOffset() * 60 * 1000;
+  const msLocal =  date.getTime() - offsetMs;
+  const dateLocal = new Date(msLocal);
+  const iso = dateLocal.toISOString();
+  return iso;
+}
+
 function MonthCalendar() {
   const dispatch = useDispatch();
   const { calendarTasks } = useSelector(state => state.tasks);
 
   const [hourFormat, setHourFormat] = useState(false);
-  const [month, setMonth] = useState('')
-  const [year, setYear] = useState('')
+  const [dateNow, setDateNow] = useState({month: '', year: ''})
   const [worker, setWorker] = useState('');
   const [calendarType, setCalendarType] = useState('Месяц');
-  const [currentTask, setCurrentTask] = useState({title: '', description: '', priority: null, dateTimeStart: '', dateTimeDue:''})
+  const [currentTask, setCurrentTask] = useState({})
+
   useEffect(()=>{
-    setMonth(new Date().getMonth())
-    setYear(new Date().getFullYear())
+    setDateNow({
+      month: new Date().getMonth(),
+      year: new Date().getFullYear(),
+    })
     dispatch(fetchCalendarTasks())
   }, [dispatch])
 
-  const onChangeWorkerHandler = (event) => {
+  const onChangeWorkerHandler = useCallback((event) => {
     setWorker(event.target.value);
-  };
+  }, []);
 
-  const onChangeCalendarTypeHandler = (event) => {
+  const onChangeCalendarTypeHandler = useCallback((event) => {
     setCalendarType(event.target.value);
-  };
+  }, []);
 
-  const getCurrentMonthString = (month) => {
-    return ["Январь","Февраль","Март","Апрель","Май","Июнь","Июль","Август","Сентябрь","Октябрь","Ноябрь", "Декабрь"][month];
-  }
+  const getCurrentMonthString = useMemo(() => {
+    return ["Январь","Февраль","Март","Апрель","Май","Июнь","Июль","Август","Сентябрь","Октябрь","Ноябрь", "Декабрь"][dateNow.month];
+  }, [dateNow.month])
 
-  const incrementMonth = () => {
-    setMonth((prevState)=>{
-      if (prevState + 1 === 12 ) { 
-        setYear(prevState=>prevState+1)
-        return 0 
+  const incrementMonth = useCallback(() => {
+    setDateNow((prevState)=>{
+      if (prevState.month + 1 === 12 ) { 
+        return { month: 0, year: prevState.year + 1}
       }
-      return prevState + 1
+      return {...prevState, month: prevState.month + 1}
     })
-  }
+  }, [])
 
-  const decrementMonth = () => {
-    setMonth((prevState)=>{
-      if (prevState - 1 === -1) {
-        setYear(prevState=>prevState-1)
-        return 11
+  const decrementMonth = useCallback(() => {
+    setDateNow((prevState)=>{
+      if (prevState.month - 1 === -1) {
+        return  { month: 11, year: prevState.year - 1}
       }
-      return prevState - 1 
+      return {...prevState, month: prevState.month - 1}
     })
-  }
+  }, [])
 
-  function dateToISOLikeButLocal(date) {
-    const offsetMs = date.getTimezoneOffset() * 60 * 1000;
-    const msLocal =  date.getTime() - offsetMs;
-    const dateLocal = new Date(msLocal);
-    const iso = dateLocal.toISOString();
-    return iso;
-  }
-
-  const onChangeCurrentTaskHandler = (e) => {
+  const onChangeCurrentTaskHandler = useCallback((e) => {
     const {name, value} = e.target;
     setCurrentTask((prevState) => {
         return {
@@ -68,9 +68,9 @@ function MonthCalendar() {
             [name]: value
         }
     });
-  };
+  }, []);
 
-  const createTaskInCellHandler = (dayNumber, dayHour) => {
+  const createTaskInCellHandler = useCallback((dayNumber, dayHour) => {
     const hour = parseInt(dayHour.split(':')[0])
     let hourDue
     if (hourFormat) {
@@ -82,11 +82,11 @@ function MonthCalendar() {
       title:"Задача",
       description:"описание",
       priority: null,
-      dateTimeStart: dateToISOLikeButLocal(new Date(year, month, dayNumber, hour, 0)),
-      dateTimeDue: dateToISOLikeButLocal(new Date(year, month, dayNumber, hourDue, 59)),
+      dateTimeStart: dateToISOLikeButLocal(new Date(dateNow.year, dateNow.month, dayNumber, hour, 0)),
+      dateTimeDue: dateToISOLikeButLocal(new Date(dateNow.year, dateNow.month, dayNumber, hourDue, 59)),
     }
     setCurrentTask((newTask))
-  }
+  }, [])
 
   const sendNewTaskHandler = async () => {
     
@@ -116,8 +116,7 @@ function MonthCalendar() {
   return (
     <>
       <MonthCalendarHeader
-        month={month}
-        year={year}
+        year={dateNow.year}
         getCurrentMonthString={getCurrentMonthString} 
         decrementMonth={decrementMonth}
         incrementMonth={incrementMonth}
@@ -127,8 +126,8 @@ function MonthCalendar() {
         calendarType={calendarType}
       />
       <MonthCalendarBody
-        month={month}
-        year={year}
+        month={dateNow.month}
+        year={dateNow.year}
         tasks={calendarTasks}
         createTaskInCellHandler={createTaskInCellHandler}
         setCurrentTask={setCurrentTask}