#28 Продолжаю распределять логику

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

@@ -3,7 +3,7 @@ import { useEffect, useState } from "react";
 import { useDispatch } from "react-redux";
 import { setNewTasksForCells } from "../../store/actions/tasksActions";
 
-function MonthCalendarBody({month, year, tasks}) {
+function MonthCalendarBody({month, year, tasks, createTaskInCellHandler}) {
   
   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([])
@@ -16,7 +16,7 @@ function MonthCalendarBody({month, year, tasks}) {
     return new Date(year, month + 1, 0).getDate();
   }
 
-   const getDayOfWeekString = (day) => {
+  const getDayOfWeekString = (day) => {
     return ["ВС","ПН","ВТ","СР","ЧТ","ПТ","СБ"][day];
   }
 
@@ -24,30 +24,21 @@ function MonthCalendarBody({month, year, tasks}) {
     return new Date(year, month, day).getDay()
   }
 
-  const createTaskInCellHandler = (dayOfWeek, dayNumber, dayHour) => {
-    // const newTasks = [...tasksForCell]
-    // const newTask = {
-    //   id: Date.now(),
-    //   user:"first",
-    //   title:"Новая",
-    //   description:"описание задачи11111",
-    //   priority:"A",
-    //   author:"Ivan",
-    //   executor:"Arman",
-    //   dateTimeStart:`${dayNumber}.${month+1}.${year} ${parseInt(dayHour.split(':')[0])}:00:00`,
-    //   dateTimeDue:`${dayNumber}.${month+1}.${year} ${parseInt(dayHour.split(':')[0]) + 1}:00:00`,
-    // }
-    // newTasks.push(newTask)
-    // exampleTasks.push(newTask)
-    // setNewTasksWithInfoForCell(newTasks, month, year)
+  const setNewMonthDays = () => {
+    const newDaysInMonth = []
+    for (let i = 1; i <= getDaysInMonth(); i++) {
+      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.startYear) {
-      if (month + 1 === task.startMonth) {
-        if (day.dayNumber === task.startDay && task.startDayOfWeek === day.dayOfWeek ) {
-          if ((task.endHour <= parseInt(hours.split(':')[0]) || task.startHour <= parseInt(hours.split(':')[0])) && (task.endHour >= parseInt(hours.split(':')[0]))) {
+    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
           }
         }
@@ -57,16 +48,6 @@ function MonthCalendarBody({month, year, tasks}) {
     return task
   }
   
-
-  const setNewMonthDays = () => {
-    const newDaysInMonth = []
-    for (let i = 1; i <= getDaysInMonth(month, year); i++) {
-      const dayOfWeekNumber = getDayOfWeekNumber(month, year, i)
-      newDaysInMonth.push({dayNumber: i, dayOfWeek: getDayOfWeekString(dayOfWeekNumber)})
-    }
-    setDaysInMonth(newDaysInMonth)
-  }
-  
   const onChangeCellTaskTitle = (e, task) => {
     const value = e.target.value;
     const name = e.target.name;

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

@@ -3,7 +3,7 @@ import { useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import MonthCalendarBody from '../../components/MonthCalendarBody/MonthCalendarBody';
 import MonthCalendarHeader from '../../components/MonthCalendarHeader/MonthCalendarHeader';
-import { fetchTasks, setNewTasksForCells } from '../../store/actions/tasksActions';
+import { fetchTasks} from '../../store/actions/tasksActions';
 
 function MonthCalendar() {
   const dispatch = useDispatch();
@@ -32,40 +32,6 @@ function MonthCalendar() {
     return ["Январь","Февраль","Март","Апрель","Май","Июнь","Июль","Август","Сентябрь","Октябрь","Ноябрь", "Декабрь"][month];
   }
 
-  const getDayOfWeekString = (day) => {
-    return ["ВС","ПН","ВТ","СР","ЧТ","ПТ","СБ"][day];
-  }
-
-  const getDayOfWeekNumber = (day) => {
-    return new Date(year, month, day).getDay()
-  }
-
-  const setNewTasksWithInfoForCell = (tasks) => {
-    const newArr = tasks.map((task)=>{
-      if (task.dateTimeStart && task.dateTimeDue) {
-        const dateStart = task.dateTimeStart.split('T')[0]
-        const timeStart = task.dateTimeStart.split('T')[1]
-        const timeEnd = task.dateTimeDue.split('T')[1]
-        const dayStart = parseInt(dateStart.split('-')[2])
-        const dayOfWeekStartNumber = getDayOfWeekNumber(dayStart)
-        const dayOfWeekStartString = getDayOfWeekString(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])
-        return {...task, 
-          startDay: dayStart, 
-          startDayOfWeek: dayOfWeekStartString, 
-          startHour: timeStartHour, 
-          startMonth: monthStartNumber,
-          startYear: yearStartNumber,
-          endHour: timeEndHour,
-        } 
-      } 
-    })
-    dispatch(setNewTasksForCells(newArr))
-  }
-
   const incrementMonth = () => {
     setMonth((prevState)=>{
       if (prevState + 1 === 12 ) { 
@@ -86,6 +52,24 @@ function MonthCalendar() {
     })
   }
 
+  const createTaskInCellHandler = (dayOfWeek, dayNumber, dayHour) => {
+    // const newTasks = [...tasksForCell]
+    // const newTask = {
+    //   id: Date.now(),
+    //   user:"first",
+    //   title:"Новая",
+    //   description:"описание задачи11111",
+    //   priority:"A",
+    //   author:"Ivan",
+    //   executor:"Arman",
+    //   dateTimeStart:`${dayNumber}.${month+1}.${year} ${parseInt(dayHour.split(':')[0])}:00:00`,
+    //   dateTimeDue:`${dayNumber}.${month+1}.${year} ${parseInt(dayHour.split(':')[0]) + 1}:00:00`,
+    // }
+    // newTasks.push(newTask)
+    // exampleTasks.push(newTask)
+    // setNewTasksWithInfoForCell(newTasks)
+  }
+
   return (
     <>
     <Container>
@@ -104,6 +88,7 @@ function MonthCalendar() {
         month={month}
         year={year}
         tasks={tasks}
+        createTaskInCellHandler={createTaskInCellHandler}
       />
     </Container>
     </>

planner-front/src/store/actions/tasksActions.js

@@ -30,16 +30,16 @@ export const fetchTasks = () => {
               dateTimeStart: "2022-11-11T11:35:30.937Z", 
               description: "lol", 
               id: "2fd828a2-3778-45fd-a11a-00d799db9142",
-              title : "task",
+              title : "task1",
           }, {
               accomplish: "opened",
               author: {id: 'f0e4a3bf-78fb-465b-9f28-620790750418', name: 'timur', surname: 'ermolaev', displayName: 'ermolaev t.', email: 'loool@mail.ru'}, 
               createdAt: "2022-11-07T11:35:30.937Z", 
-              dateTimeDue: "2022-11-25T14:35:30.937Z", 
-              dateTimeStart: "2022-11-25T11:35:30.937Z", 
+              dateTimeDue: "2022-11-25T16:00:00.937Z", 
+              dateTimeStart: "2022-11-25T15:35:30.937Z", 
               description: "lol", 
               id: "2fd828a2-3778-45fd-a11a-00d799db9142",
-              title : "task",
+              title : "task2",
           },
         ]
         dispatch(fetchTasksSuccess(arr))

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

@@ -23,15 +23,18 @@ const tasksReduсer = (state = initialState, action) => {
               const yearStartNumber =  parseInt(dateStart.split('-')[0])
               const timeStartHour = parseInt(timeStart.split(':')[0])
               const timeEndHour = parseInt(timeEnd.split(':')[0])
-              return {...task, 
+              return {...task, infoForCell: { 
                 startDay: dayStart, 
                 startDayOfWeek: dayOfWeekStartString, 
                 startHour: timeStartHour, 
                 startMonth: monthStartNumber,
                 startYear: yearStartNumber,
                 endHour: timeEndHour,
+                }
               } 
-            } 
+            } else {
+                return null
+            }
           })
         return {...state, loading: false, tasks: newArr};
     case FETCH_TASKS_FAILURE: