#28 реализовал создание таска через бекенд

planner-api/src/models/Task.ts

@@ -36,9 +36,9 @@ import {
     description!: string
     @CreateDateColumn({ name: 'created_at', type: Date, default: new Date() })
     createdAt!: Date;
-    @Column({ name: 'dateTimeStart', type: Date,nullable: true })
+    @Column({ name: 'dateTimeStart', type: 'varchar',nullable: true })
     dateTimeStart!: Date | null;
-    @Column({ name: 'dateTimeDue', type: Date,nullable: true })
+    @Column({ name: 'dateTimeDue', type: 'varchar',nullable: true })
     dateTimeDue!: Date | null;
     @Column({
         type: "enum",

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";
 
-function MonthCalendarBody({month, year, tasks, createTaskInCellHandler}) {
+function MonthCalendarBody({month, year, tasks, createTaskInCellHandler, onChangeCellTaskTitle, setCurrentTask}) {
   
   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([])
@@ -38,7 +36,7 @@ function MonthCalendarBody({month, year, tasks, createTaskInCellHandler}) {
     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]))) {
+          if ((task.infoForCell.endHour <= parseInt(hours.split(':')[0]) || task.infoForCell.startHour <= parseInt(hours.split(':')[0])) && (task.infoForCell.endHour > parseInt(hours.split(':')[0]))) {
             return task
           }
         }
@@ -48,19 +46,6 @@ function MonthCalendarBody({month, year, tasks, createTaskInCellHandler}) {
     return task
   }
 
-  const onChangeCellTaskTitle = (e, task) => {
-    const value = e.target.value;
-    const name = e.target.name;
-    const { id } = task;
-    const newTasks =  tasks.map(task => {
-      if (task.id === id) {
-        return { ...task, [name]: value };
-      }
-      return task;
-    });
-    setNewTasksForCells(newTasks)
-  }
-
   return (
     <>
     <Grid
@@ -103,7 +88,7 @@ function MonthCalendarBody({month, year, tasks, createTaskInCellHandler}) {
                   key={i} 
                   item xs={1.2222} 
                   sx={{borderRight: '1px solid black'}} 
-                  onClick={()=>{createTaskInCellHandler(day.dayOfWeek, day.dayNumber, hours)}}>
+                  onClick={()=>{createTaskInCellHandler(day.dayNumber, hours)}}>
                   { task ? 
                     <Grid  key={i} sx={{backgroundColor: 'lightgreen'}}>
                         <TextField 
@@ -111,7 +96,8 @@ function MonthCalendarBody({month, year, tasks, createTaskInCellHandler}) {
                         variant="standard" 
                         value={task.title} 
                         name='title' 
-                        onChange={(e)=>{onChangeCellTaskTitle(e, task)}}></TextField>
+                        onClick={(e)=>{e.stopPropagation(); setCurrentTask(task)}}
+                        onChange={(e)=>{onChangeCellTaskTitle(e)}}></TextField>
                     </Grid> : null}
                 </Grid>
                 ) 

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

 import { Container } from '@mui/material';
+import moment from 'moment';
 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 { addTask, fetchTasks} from '../../store/actions/tasksActions';
 
 function MonthCalendar() {
   const dispatch = useDispatch();
@@ -13,13 +14,14 @@ function MonthCalendar() {
   const [year, setYear] = useState('')
   const [worker, setWorker] = useState('');
   const [calendarType, setCalendarType] = useState('Месяц');
+  const [currentTask, setCurrentTask] = useState({})
   
   useEffect(()=>{
     setMonth(new Date().getMonth())
     setYear(new Date().getFullYear())
     dispatch(fetchTasks())
   }, [dispatch])
-  console.log(tasks)
+
   const onChangeWorkerHandler = (event) => {
     setWorker(event.target.value);
   };
@@ -52,24 +54,29 @@ 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)
+  function dateToISOButLocal(date) {
+    return date.toLocaleString('sv').replace(' ', 'T');
+}
+
+  const createTaskInCellHandler = (dayNumber, dayHour) => {
+    const hour = parseInt(dayHour.split(':')[0])
+    const newTask = {
+      title:"Задача",
+      description:"описание",
+      dateTimeStart: dateToISOButLocal(new Date(year, month, dayNumber, hour)),
+      dateTimeDue: dateToISOButLocal(new Date(year, month, dayNumber, hour + 2)),
+    }
+    dispatch(addTask(newTask))
+    setCurrentTask((newTask))
   }
 
+  const onChangeCellTaskTitle = (e) => {
+    e.stopPropagation()
+    const value = e.target.value;
+    const name = e.target.name;
+    setCurrentTask({ ...currentTask, [name]: value })
+  }
+  console.log(tasks)
   return (
     <>
     <Container>
@@ -89,6 +96,8 @@ function MonthCalendar() {
         year={year}
         tasks={tasks}
         createTaskInCellHandler={createTaskInCellHandler}
+        onChangeCellTaskTitle={onChangeCellTaskTitle}
+        setCurrentTask={setCurrentTask}
       />
     </Container>
     </>

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

@@ -2,4 +2,6 @@ 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 SET_NEW_TASKS_FOR_CELLS = "SET_NEW_TASKS_FOR_CELLS";
+export const ADD_NEW_TASK_REQUEST = "ADD_NEW_TASK_REQUEST";
\ No newline at end of file
+export const ADD_NEW_TASK_SUCCESS = "ADD_NEW_TASK_SUCCESS";
+export const ADD_NEW_TASK_FAILURE = "ADD_NEW_TASK_FAILURE";
\ No newline at end of file

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

-import { FETCH_TASKS_FAILURE, FETCH_TASKS_REQUEST, FETCH_TASKS_SUCCESS, SET_NEW_TASKS_FOR_CELLS } from "../actionTypes/tasksTypes";
+import { ADD_NEW_TASK_FAILURE, ADD_NEW_TASK_REQUEST, ADD_NEW_TASK_SUCCESS, FETCH_TASKS_FAILURE, FETCH_TASKS_REQUEST, FETCH_TASKS_SUCCESS} from "../actionTypes/tasksTypes";
 import axios from '../../axiosPlanner'
 
 const fetchTasksRequest = () => {
@@ -12,40 +12,45 @@ 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");
-        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 : "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-25T16:00:00.937Z", 
-              dateTimeStart: "2022-11-25T15:35:30.937Z", 
-              description: "lol", 
-              id: "2fd828a2-3778-45fd-a11a-00d799db9142",
-              title : "task2",
-          },
-        ]
-        dispatch(fetchTasksSuccess(arr))
-        setNewTasksForCells()
+        dispatch(fetchTasksSuccess(response.data.tasks))
       } catch (error) {
         dispatch(fetchTasksFailure(error.response.data));
       }
   }
 }
+
+const addTaskRequest = () => {
+  return {type: ADD_NEW_TASK_REQUEST}
+};
+
+const addTaskSuccess = () => {
+  return {type: ADD_NEW_TASK_SUCCESS}
+};
+
+const addTaskFailure = (error) => {
+  return {type: ADD_NEW_TASK_FAILURE, error}
+};
+
+export const addTask = (task) => {
+  return async (dispatch, getState) => {
+      dispatch(addTaskRequest());
+      const token = getState().users?.user?.token;
+      try {
+        await axios.post("/tasks", task, {
+          headers: {
+            'Authorization': 'aBhHYW8kXUUzjXlxOwGmg'
+          }
+        });
+        dispatch(addTaskSuccess())
+        dispatch(fetchTasks())
+      } catch (error) {
+        dispatch(addTaskFailure(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, SET_NEW_TASKS_FOR_CELLS } from "../actionTypes/tasksTypes";
+import { FETCH_TASKS_FAILURE, FETCH_TASKS_REQUEST, FETCH_TASKS_SUCCESS} from "../actionTypes/tasksTypes";
 
 const initialState = {
     tasks: [],
@@ -11,7 +11,8 @@ const tasksReduсer = (state = initialState, action) => {
     case FETCH_TASKS_REQUEST:
         return {...state, loading: true};
     case FETCH_TASKS_SUCCESS:
-        const newArr = action.tasks.map((task)=>{
+        const newArr = []
+        action.tasks.forEach((task)=>{
             if (task.dateTimeStart && task.dateTimeDue) {
               const dateStart = task.dateTimeStart.split('T')[0]
               const timeStart = task.dateTimeStart.split('T')[1]
@@ -23,7 +24,7 @@ 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, infoForCell: { 
+              newArr.push({...task, infoForCell: { 
                 startDay: dayStart, 
                 startDayOfWeek: dayOfWeekStartString, 
                 startHour: timeStartHour, 
@@ -31,16 +32,12 @@ const tasksReduсer = (state = initialState, action) => {
                 startYear: yearStartNumber,
                 endHour: timeEndHour,
                 }
-              } 
-            } else {
-                return null
+              } )
             }
           })
         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;
 }