#38 небольшие улучшения логики отображения

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

 import { Grid, TextField, Typography } from "@mui/material";
 import React, { memo, useState, useEffect, useMemo} from "react";
+import { useDispatch } from "react-redux";
+import { editCalendarTask } from "../../../store/actions/tasksActions";
 
 
 const TaskDefault = ({task, onClickTaskHandler}) => {
@@ -48,7 +50,7 @@ const TaskWithAllStartAndAllEnd = ({task, onClickTaskHandler}) => {
 
 
 const CalendarTask = ({year, month, tasks, day, hours, setCurrentTask, hourFormat, handleOpen, currentTask}) => {
-
+  const dispatch = useDispatch();
   const [thisCellCurrentTask, setThisCellCurrentTask] = useState({})
 
   const hour = parseInt(hours.split(':')[0])
@@ -72,14 +74,26 @@ const CalendarTask = ({year, month, tasks, day, hours, setCurrentTask, hourForma
       }      
     }
     })
-    tasksCell.sort(function(a,b){
+    const newSortedArr = [...tasksCell].sort(function(a,b){
       const durattionFirstDate = new Date(a.dateTimeDue).getTime() - new Date(a.dateTimeStart).getTime()
       const durattionSecondDate = new Date(b.dateTimeDue).getTime() - new Date(b.dateTimeStart).getTime()
       return durattionSecondDate - durattionFirstDate;
     });
-    return tasksCell
+    const newArrWithTypes = newSortedArr.map((task, i)=>
+      {
+        if (hourFormat && task.infoForCell.endHour > hour && task.infoForCell.startHour === hour || (!hourFormat && task.infoForCell.endHour > hour + 1 && (task.infoForCell.startHour === hour))) {
+          return {...task, type: 'TaskWithNoStartAndAllEnd', lineOrder: i+1}
+        }
+        if (hourFormat && task.infoForCell.startHour < hour && task.infoForCell.endHour > hour || ((!hourFormat && task.infoForCell.startHour  < hour && task.infoForCell.endHour  > hour + 2))) {
+          return{...task, type: 'TaskWithAllStartAndAllEnd'}
+        }
+        if (hourFormat && task.infoForCell.endMinute === 59 && task.infoForCell.startHour < hour || (!hourFormat && task.infoForCell.endMinute === 59 && task.infoForCell.startHour < hour && (task.infoForCell.endHour === hour || task.infoForCell.endHour === hour + 1 && task.infoForCell.startHour + 1 !== hour))) {
+          return {...task, type: 'TaskWithAllStartAndNoEnd'}
+        }
+        return {...task, type: 'TaskDefault'}})
+    return newArrWithTypes
   }, [hourFormat, month, tasks])
-
+  console.log(tasksCell)
   useEffect(()=>{
     if (!currentTask.title) {
       setThisCellCurrentTask({})
@@ -92,12 +106,11 @@ const CalendarTask = ({year, month, tasks, day, hours, setCurrentTask, hourForma
     handleOpen(e)
   }
 
-
   return (<> 
       {tasksCell.length ? tasksCell.map((task, i)=>
       {
 
-        if (hourFormat && task.infoForCell.endHour > hour && task.infoForCell.startHour === hour || (!hourFormat && task.infoForCell.endHour > hour + 1 && (task.infoForCell.startHour === hour))) {
+        if (task.type === 'TaskWithNoStartAndAllEnd') {
           return (
             <TaskWithNoStartAndAllEnd
               key={task.id}
@@ -106,7 +119,7 @@ const CalendarTask = ({year, month, tasks, day, hours, setCurrentTask, hourForma
             />
           )
         }
-        if (hourFormat && task.infoForCell.startHour < hour && task.infoForCell.endHour > hour || ((!hourFormat && task.infoForCell.startHour  < hour && task.infoForCell.endHour  > hour + 2))) {
+        if (task.type === 'TaskWithAllStartAndAllEnd') {
           return (
             <TaskWithAllStartAndAllEnd
               key={task.id}
@@ -115,7 +128,7 @@ const CalendarTask = ({year, month, tasks, day, hours, setCurrentTask, hourForma
             />
           )
         }
-        if (hourFormat && task.infoForCell.endMinute === 59 && task.infoForCell.startHour < hour || (!hourFormat && task.infoForCell.endMinute === 59 && task.infoForCell.startHour < hour && (task.infoForCell.endHour === hour || task.infoForCell.endHour === hour + 1 && task.infoForCell.startHour + 1 !== hour))) {
+        if (task.type === 'TaskWithAllStartAndNoEnd') {
           return (<>
             <TaskWithAllStartAndNoEnd
               key={task.id}

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

@@ -15,3 +15,5 @@ export const EDIT_TASK_FAILURE = "EDIT_TASK_FAILURE";
 export const DELETE_TASK_REQUEST = "DELETE_TASK_REQUEST";
 export const DELETE_TASK_SUCCESS = "DELETE_TASK_SUCCESS";
 export const DELETE_TASK_FAILURE = "DELETE_TASK_FAILURE";
+
+export const EDIT_CALENDAR_TASK = "EDIT_CALENDAR_TASK";
\ No newline at end of file

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

@@ -12,6 +12,7 @@ import {
   FETCH_CALENDAR_TASKS_REQUEST, 
   FETCH_CALENDAR_TASKS_SUCCESS,
   FETCH_ALL_TASKS_SUCCESS,
+  EDIT_CALENDAR_TASK,
   } from "../actionTypes/tasksTypes";
 import axios from '../../axiosPlanner'
 
@@ -73,7 +74,7 @@ export const addTask = (task) => {
       try {
         await axios.post("/tasks", task, {
           headers: {
-            'Authorization': 'IwGVRaksGTWtnKlOZd7zJ'
+            'Authorization': 'n7Bp6vrvr9uvH3M_0NHUF'
           }
         });
         dispatch(addTaskSuccess())
@@ -104,7 +105,7 @@ export const editTask = (task) => {
         console.log(task)
         const r=await axios.put("/tasks", task, {
           headers: {
-            'Authorization': 'IwGVRaksGTWtnKlOZd7zJ'
+            'Authorization': 'n7Bp6vrvr9uvH3M_0NHUF'
           }
         });
         console.log(r)
@@ -136,7 +137,7 @@ export const deleteTask = (taskId) => {
       try {
         await axios.delete(`/tasks/${taskId}`, {
           headers: {
-            'Authorization': 'IwGVRaksGTWtnKlOZd7zJ'
+            'Authorization': 'n7Bp6vrvr9uvH3M_0NHUF'
           }
         });
         dispatch(deleteTaskSuccess())
@@ -147,3 +148,7 @@ export const deleteTask = (taskId) => {
       }
   }
 }
+
+export const editCalendarTask = (id, line) => {
+  return {type: EDIT_CALENDAR_TASK, id, line}
+}
\ No newline at end of file

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

@@ -18,9 +18,7 @@ export const registerUser = (userData, navigate) => {
     return async (dispatch) => {
         dispatch(registerUserRequest());
         try {
-            console.log("register " + userData)
             const response = await axios.post("/users", userData);
-           console.log(response)
             dispatch(registerUserSuccess())
             navigate("/")
         } catch (error) {
@@ -51,9 +49,7 @@ const logoutUserFailure = (error) => {
 export const loginUser = (userData, navigate) => {
     return async (dispatch) => {
         try {
-            console.log(userData)
             const response = await axios.post("users/sessions", userData);
-            console.log(response)
             dispatch(loginUserSuccess(response.data.user));
             navigate("/")
         } catch (e) {

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

@@ -12,6 +12,7 @@ import {
   DELETE_TASK_REQUEST,
   DELETE_TASK_FAILURE,
   FETCH_ALL_TASKS_SUCCESS,
+  EDIT_CALENDAR_TASK,
 } from "../actionTypes/tasksTypes";
 
 const initialState = {
@@ -75,6 +76,14 @@ const tasksReduсer = (state = initialState, action) => {
       return {...state, loading: true};
     case DELETE_TASK_FAILURE:
       return {...state, loading: false, error: action.error};
+    case EDIT_CALENDAR_TASK:
+      const copyArr = [...state.calendarTasks]
+      const index = copyArr.findIndex(el => el.id === action.id);
+      let copyElement = copyArr[index]
+      console.log(copyElement)
+      copyElement = {...copyElement, lineOrder: action.line}
+      copyArr[index] = copyElement
+      return {...state, calendarTasks: copyArr}
     default: 
         return state;
 }