#28 Начал распределять логику по разным местам

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

 import { Grid, TextField } from "@mui/material";
 import { useEffect, useState } from "react";
+import { useDispatch } from "react-redux";
+import { setNewTasksForCells } from "../../store/actions/tasksActions";
 
-const exampleTasks=[
-  {
-    user:"first",
-    title:"задача1",
-    description:"описание задачи11111",
-    priority:"A",
-    author:"Ivan",
-    executor:"Arman",
-    dateTimeStart:"26.12.2022 20:00:00",
-    dateTimeDue:"27.10.2022 14:20:00",
-    id:1,
-    dateCreated:"26.10.2022"
-  }, {
-    user:"first",
-    title:"задача2",
-    description:"описание задачи11111",
-    priority:"A",
-    author:"Ivan",
-    executor:"Arman",
-    dateTimeStart:"1.12.2022 9:00:00",
-    dateTimeDue:"27.10.2022 15:20:00",
-    id:1,
-    dateCreated:"26.10.2022"
-  },{
-    user:"first",
-    title:"first",
-    description:"описание задачи11111",
-    priority:"A",
-    author:"Ivan",
-    executor:"Arman",
-    dateTimeStart:"5.11.2022 16:00:00",
-    dateTimeDue:"5.11.2022 17:00:00",
-    id:1,
-    dateCreated:"26.10.2022"
-  },{
-    user:"first",
-    title:"second",
-    description:"описание задачи11111",
-    priority:"A",
-    author:"Ivan",
-    executor:"Arman",
-    dateTimeStart:"5.11.2022 16:00:00",
-    dateTimeDue:"5.11.2022 17:00:00",
-    id:1,
-    dateCreated:"26.10.2022"
-  }
-]
-
-
-function MonthCalendarBody({month, year}) {
+function MonthCalendarBody({month, year, tasks}) {
   
   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 [tasksForCell, setTasksForCell] = useState([])
 
   useEffect(()=>{
-    setNewMonthDays(month, year)
-    setNewTasksWithInfoForCell(exampleTasks, month, year)
+    setNewMonthDays()
   }, [month, year])
 
   const getDaysInMonth = () => { 
@@ -69,53 +20,29 @@ function MonthCalendarBody({month, year}) {
     return ["ВС","ПН","ВТ","СР","ЧТ","ПТ","СБ"][day];
   }
 
-  const getDayOfWeekNumber = (month, year, day) => {
+  const getDayOfWeekNumber = (day) => {
     return new Date(year, month, day).getDay()
   }
 
-  const setNewTasksWithInfoForCell = (tasks, month, year) => {
-    const newArr = tasks.map((task)=>{
-      const dateStart = task.dateTimeStart.split(' ')[0]
-      const timeStart = task.dateTimeStart.split(' ')[1]
-      const timeEnd = task.dateTimeDue.split(' ')[1]
-      const dayStart = parseInt(dateStart.split('.')[0])
-      const dayOfWeekStartNumber = getDayOfWeekNumber(month, year, dayStart)
-      const dayOfWeekStartString = getDayOfWeekString(dayOfWeekStartNumber)
-      const monthStartNumber =  parseInt(dateStart.split('.')[1])
-      const yearStartNumber =  parseInt(dateStart.split('.')[2])
-      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,
-      } 
-    })
-    setTasksForCell(newArr)
-  }
-
-  const createTaskInCellHandler = (month, year, 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 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 getTaskInDayCell = (tasks, day, hours, month, year) => {
+  const getTaskInDayCell = (tasks, day, hours) => {
     const task = tasks.find(task=> {
     if (year === task.startYear) {
       if (month + 1 === task.startMonth) {
@@ -131,7 +58,7 @@ function MonthCalendarBody({month, year}) {
   }
   
 
-  const setNewMonthDays = (month, year) => {
+  const setNewMonthDays = () => {
     const newDaysInMonth = []
     for (let i = 1; i <= getDaysInMonth(month, year); i++) {
       const dayOfWeekNumber = getDayOfWeekNumber(month, year, i)
@@ -144,14 +71,13 @@ function MonthCalendarBody({month, year}) {
     const value = e.target.value;
     const name = e.target.name;
     const { id } = task;
-    const newTasks = tasksForCell.map(task => {
+    const newTasks =  tasks.map(task => {
       if (task.id === id) {
         return { ...task, [name]: value };
       }
       return task;
     });
-    setTasksForCell(newTasks);
-    exampleTasks = [...newTasks]
+    setNewTasksForCells(newTasks)
   }
 
   return (
@@ -190,13 +116,13 @@ function MonthCalendarBody({month, year}) {
               {day.dayOfWeek}
             </Grid>
             {hoursInDay.map((hours, i)=>{
-              const task = getTaskInDayCell(tasksForCell, day, hours, month, year)
+              const task = getTaskInDayCell(tasks, day, hours)
               return (
                 <Grid  
                   key={i} 
                   item xs={1.2222} 
                   sx={{borderRight: '1px solid black'}} 
-                  onClick={()=>{createTaskInCellHandler(month, year, day.dayOfWeek, day.dayNumber, hours)}}>
+                  onClick={()=>{createTaskInCellHandler(day.dayOfWeek, day.dayNumber, hours)}}>
                   { task ? 
                     <Grid  key={i} sx={{backgroundColor: 'lightgreen'}}>
                         <TextField 

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 } from '../../store/actions/tasksActions';
+import { fetchTasks, setNewTasksForCells } from '../../store/actions/tasksActions';
 
 function MonthCalendar() {
   const dispatch = useDispatch();
@@ -13,7 +13,6 @@ function MonthCalendar() {
   const [year, setYear] = useState('')
   const [worker, setWorker] = useState('');
   const [calendarType, setCalendarType] = useState('Месяц');
-
   
   useEffect(()=>{
     setMonth(new Date().getMonth())
@@ -33,6 +32,40 @@ 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 ) { 
@@ -70,6 +103,7 @@ function MonthCalendar() {
       <MonthCalendarBody
         month={month}
         year={year}
+        tasks={tasks}
       />
     </Container>
     </>

planner-front/src/store/actionTypes/tasksTypes.js

 export const FETCH_TASKS_REQUEST = "FETCH_TASKS_REQUEST";
 export const FETCH_TASKS_SUCCESS = "FETCH_TASKS_SUCCESS";
-export const FETCH_TASKS_FAILURE = "FETCH_TASKS_FAILURE";
+export const FETCH_TASKS_FAILURE = "FETCH_TASKS_FAILURE";
\ No newline at end of file
+
+export const SET_NEW_TASKS_FOR_CELLS = "SET_NEW_TASKS_FOR_CELLS";
\ No newline at end of file

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

-import { FETCH_TASKS_FAILURE, FETCH_TASKS_REQUEST, FETCH_TASKS_SUCCESS } from "../actionTypes/tasksTypes";
+import { FETCH_TASKS_FAILURE, FETCH_TASKS_REQUEST, FETCH_TASKS_SUCCESS, SET_NEW_TASKS_FOR_CELLS } from "../actionTypes/tasksTypes";
 import axios from '../../axiosPlanner'
 
 const fetchTasksRequest = () => {
@@ -12,16 +12,40 @@ const fetchTasksSuccess = (tasks) => {
 const fetchTasksFailure = (error) => {
   return {type: FETCH_TASKS_FAILURE, error}
 };
+export const setNewTasksForCells = (tasks) => {
+  return {type: SET_NEW_TASKS_FOR_CELLS, tasks}
+}
 
 export const fetchTasks = () => {
   return async (dispatch) => {
       dispatch(fetchTasksRequest());
       try {
         const response = await axios.get("/tasks");
-        console.log(response.data)
-        dispatch(fetchTasksSuccess(response.data))
+        const arr = [
+          {
+              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-11T14:35:30.937Z", 
+              dateTimeStart: "2022-11-11T11:35:30.937Z", 
+              description: "lol", 
+              id: "2fd828a2-3778-45fd-a11a-00d799db9142",
+              title : "task",
+          }, {
+              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", 
+              description: "lol", 
+              id: "2fd828a2-3778-45fd-a11a-00d799db9142",
+              title : "task",
+          },
+        ]
+        dispatch(fetchTasksSuccess(arr))
+        setNewTasksForCells()
       } catch (error) {
         dispatch(fetchTasksFailure(error.response.data));
       }
   }
-}
+}
\ No newline at end of file

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

-import { FETCH_TASKS_FAILURE, FETCH_TASKS_REQUEST, FETCH_TASKS_SUCCESS } from "../actionTypes/tasksTypes";
+import { FETCH_TASKS_FAILURE, FETCH_TASKS_REQUEST, FETCH_TASKS_SUCCESS, SET_NEW_TASKS_FOR_CELLS } from "../actionTypes/tasksTypes";
 
 const initialState = {
     tasks: [],
@@ -11,9 +11,33 @@ const tasksReduсer = (state = initialState, action) => {
     case FETCH_TASKS_REQUEST:
         return {...state, loading: true};
     case FETCH_TASKS_SUCCESS:
-        return {...state, loading: false, tasks: action.tasks};
+        const newArr = action.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 = 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])
+              return {...task, 
+                startDay: dayStart, 
+                startDayOfWeek: dayOfWeekStartString, 
+                startHour: timeStartHour, 
+                startMonth: monthStartNumber,
+                startYear: yearStartNumber,
+                endHour: timeEndHour,
+              } 
+            } 
+          })
+        return {...state, loading: false, tasks: newArr};
     case FETCH_TASKS_FAILURE:
         return {...state, loading: false, error: action.error};
+    case SET_NEW_TASKS_FOR_CELLS: 
+        return {...state, tasks: action.tasks}
     default: 
         return state;
 }