#85 чуть перенес компоненты календаря, вывел информацию о недели, и смену недели

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

@@ -3,7 +3,7 @@ import { useState } from "react";
 import CalendarRow from "./CalendarRow/CalendarRow";
 import CalendarSmallCell from "./CalendarSmallCell/CalendarSmallCell";
 import CalendarStandartCell from "./CalendarStandartCell.js/CalendarStandartCell";
-import ModalTask from "../UI/ModalTask/ModalTask";
+import ModalTask from "../../UI/ModalTask/ModalTask";
 import MonthCalendarModalContent from "../MonthCalendarModalContent/MonthCalendarModalContent";
 import CalendarRowDay from "./CalendarRowDay/CalendarRowDay";
 

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

 
 import { Box, Typography } from '@mui/material';
 import { memo } from 'react';
-import MonthDecrementButton from './MonthDecrementButton/MonthDecrementButton';
-import MonthIncrementButton from './MonthIncrementButton/MonthIncrementButton';
+import ArrowDecrementButton from '../../../UI/ArrowDecrementButton/ArrowDecrementButton';
+import ArrowIncrementButton from '../../../UI/ArrowIncrementButton/ArrowIncrementButton';
 function MonthAndYearInfo({currentMonthString, year, incrementMonth, decrementMonth}) {
   
   return ( 
@@ -15,8 +15,8 @@ function MonthAndYearInfo({currentMonthString, year, incrementMonth, decrementMo
           gap: '10px'
         }}
         >
-          <MonthDecrementButton
-            decrementMonth={decrementMonth}
+          <ArrowDecrementButton
+            onClick={decrementMonth}
           />
           <Box sx={{ flexBasis: '150px' }}>
             <Typography
@@ -30,8 +30,8 @@ function MonthAndYearInfo({currentMonthString, year, incrementMonth, decrementMo
             </Typography>
             <Typography align='center'>{year}</Typography>
           </Box>
-          <MonthIncrementButton
-            incrementMonth={incrementMonth}
+          <ArrowIncrementButton
+            onClick={incrementMonth}
           />   
       </Box>
   </> );

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

 import { AppBar, Toolbar} from '@mui/material';
 import { Box } from '@mui/system';
 import MonthAndYearInfo from './MonthAndYearInfo/MonthAndYearInfo';
-import СustomSelect from '../UI/СustomSelect/СustomSelect'
+import СustomSelect from '../../UI/СustomSelect/СustomSelect'
 
 const workers = [{value: '', text: '--выберите сотрудника--'}, {value: 'Василий', text: 'Василий'}, {value: 'Никита', text: 'Никита'}]
 const types = [{value: 'Месяц', text: 'Месяц'}, {value: 'Неделя', text: 'Неделя'}]

planner-front/src/components/MonthCalendarModalContent/MonthCalendarModalContent.js → planner-front/src/components/MonthCalendar/MonthCalendarModalContent/MonthCalendarModalContent.js

 import { Button, TextField } from "@mui/material";
 import { memo } from "react";
-import CustomSelect from '../UI/СustomSelect/СustomSelect'
+import CustomSelect from '../../UI/СustomSelect/СustomSelect'
 
 const priorities = [{value: null, text: '--Приоритет--'}, {value: 'A', text: 'A'}, {value: 'B', text: 'B'}, {value: 'C', text: 'C'}]
 

planner-front/src/components/MonthCalendarHeader/MonthAndYearInfo/MonthDecrementButton/MonthDecrementButton.js → planner-front/src/components/UI/ArrowDecrementButton/ArrowDecrementButton.js

@@ -13,15 +13,15 @@ const arrowClass = {
 }
 
 
-function MonthDecrementButton({decrementMonth}) {
+function ArrowDecrementButton({onClick}) {
   
   return ( 
   <>
     <ArrowBackIcon
       sx={arrowClass}
-      onClick={decrementMonth}
+      onClick={onClick}
     />  
   </> );
 }
 
-export default memo(MonthDecrementButton);
\ No newline at end of file
+export default memo(ArrowDecrementButton);
\ No newline at end of file

planner-front/src/components/MonthCalendarHeader/MonthAndYearInfo/MonthIncrementButton/MonthIncrementButton.js → planner-front/src/components/UI/ArrowIncrementButton/ArrowIncrementButton.js

@@ -13,15 +13,15 @@ const arrowClass = {
 }
 
 
-function MonthIncrementButton({incrementMonth}) {
+function ArrowIncrementButton({onClick}) {
   
   return ( 
   <>
     <ArrowForwardIcon
       sx={arrowClass}
-      onClick={incrementMonth}
+      onClick={onClick}
     />  
   </> );
 }
 
-export default memo(MonthIncrementButton);
\ No newline at end of file
+export default memo(ArrowIncrementButton);
\ No newline at end of file

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

+import { AppBar, Toolbar, Typography} from '@mui/material';
+import { Box } from '@mui/system';
+import ArrowDecrementButton from '../UI/ArrowDecrementButton/ArrowDecrementButton';
+import ArrowIncrementButton from '../UI/ArrowIncrementButton/ArrowIncrementButton';
+
+
+
+
+function WeekCalendarHeader({decrementWeek, incrementWeek, weekInfo}) {
+  
+  return (
+    <>
+        <Box sx={{ flexGrow: 1 }}>
+          <AppBar position="static">
+            <Toolbar>
+              <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>
+              
+
+            </Toolbar>
+          </AppBar>
+        </Box>
+    </>
+  );
+}
+
+export default WeekCalendarHeader;
\ 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 MonthCalendarBody from '../../components/MonthCalendarBody/MonthCalendarBody';
-import MonthCalendarHeader from '../../components/MonthCalendarHeader/MonthCalendarHeader';
+import MonthCalendarBody from '../../components/MonthCalendar/MonthCalendarBody/MonthCalendarBody';
+import MonthCalendarHeader from '../../components/MonthCalendar/MonthCalendarHeader/MonthCalendarHeader';
 import { dateToISOLikeButLocal, getCurrentMonthString, getDaysInMonth } from '../../helpers/CalendarHelpers';
 import { addCalendarTask, addCopyCalendarTask, deleteCalendarTask, editCalendarTask, fetchCalendarTasks} from '../../store/actions/tasksActions';
 
@@ -47,8 +47,8 @@ function MonthCalendar() {
   }, [dateNow])
 
   const currentMonthString = useMemo(() => {
-    return getCurrentMonthString(dateNow)
-  }, [dateNow])
+    return getCurrentMonthString(dateNow.month)
+  }, [dateNow.month])
 
   const onChangeWorkerHandler = useCallback((event) => {
     setWorker(event.target.value);

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

 import moment from 'moment';
-import { useEffect, useState, useMemo  } from 'react';
-import { getWeekFromCurrentDate } from '../../helpers/CalendarHelpers';
+import { useEffect, useState, useMemo, useCallback  } from 'react';
+import WeekCalendarHeader from '../../components/WeekCalendarHeader/WeekCalendarHeader';
+import { getWeekInfoString, getWeekFromCurrentDate } from '../../helpers/CalendarHelpers';
 
 
 function WeekCalendar() {
@@ -18,10 +19,32 @@ function WeekCalendar() {
     return getWeekFromCurrentDate(date.year, date.month, date.currentDay)
   }, [date])
 
+  const incrementWeek = useCallback(() => {
+    setDate((prevState)=>{
+      const newDate = new Date(prevState.year, prevState.month, prevState.currentDay + 7)
+      return {year: newDate.getFullYear(), month: newDate.getMonth(), currentDay: moment(newDate).date()}
+    })
+  }, [])
+
+  const decrementWeek = useCallback(() => {
+    setDate((prevState)=>{
+      const newDate = new Date(prevState.year, prevState.month, prevState.currentDay - 7)
+      return {year: newDate.getFullYear(), month: newDate.getMonth(), currentDay: moment(newDate).date()}
+    })
+  }, [])
+
+  const weekInfo = useMemo(()=>{
+    return getWeekInfoString(week, date)
+  }, [date])
   
   return (
     <>
-      {'dasd'}
+      <WeekCalendarHeader
+        incrementWeek={incrementWeek}
+        decrementWeek={decrementWeek}
+        weekInfo={weekInfo}
+      />
+      {week.join(' ')}
     </>
   );
 }

planner-front/src/helpers/CalendarHelpers.js

@@ -15,9 +15,9 @@ export const getDaysInMonth = (dateNow) => {
   }
 }
 
-export const getCurrentMonthString = (dateNow) => {
-  if (dateNow.month <= 11 && dateNow.month >= 0) {
-    return ["Январь","Февраль","Март","Апрель","Май","Июнь","Июль","Август","Сентябрь","Октябрь","Ноябрь", "Декабрь"][dateNow.month];
+export const getCurrentMonthString = (month) => {
+  if (month <= 11 && month >= 0) {
+    return ["Январь","Февраль","Март","Апрель","Май","Июнь","Июль","Август","Сентябрь","Октябрь","Ноябрь", "Декабрь"][month];
   } else {
     return null
   }
@@ -55,3 +55,14 @@ export const getWeekFromCurrentDate = (year, month, curDay) => {
     }
     return week
 }
+
+export const getWeekInfoString = (week, date) => {
+  if (week[0] > week[6]) {
+    if (date.month === 0) {
+      return getCurrentMonthString(11) + ' - ' + getCurrentMonthString(date.month) + ' ' + date.year
+    }
+    return getCurrentMonthString(date.month - 1) + ' - ' + getCurrentMonthString(date.month) +  ' ' + date.year
+  } else {
+    return getCurrentMonthString(date.month) +  ' ' + date.year
+  }
+}
\ No newline at end of file