#61 Чуть улучшил код, добавил запросы для страницы календаря

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

 import { Box } from "@mui/material";
 import { memo } from "react";
 
+const DefaultTaskStyles = {
+  position: 'relative', 
+  height: '30px', 
+  backgroundColor: 'lightgreen', 
+  whiteSpace: 'nowrap', 
+  overflow: 'hidden', 
+  textOverflow: 'ellipsis', 
+  borderRadius: '10px', 
+  margin: '5px 10px', 
+  display: 'flex', 
+  justifyContent: 'flex-start', 
+  alignItems: 'center', 
+  paddingLeft: '5px', 
+  zIndex: '5'
+}
+
 const DefaultTask = ({}) => {
 
-  
   return (<>
     <Box  
-        sx={{ position: 'relative', height: '30px', backgroundColor: 'lightgreen', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', borderRadius: '10px', margin: '5px 10px', display: 'flex', justifyContent: 'flex-start', alignItems: 'center', paddingLeft: '5px', zIndex: '5'}} 
+        sx={DefaultTaskStyles} 
       >
       <span>
         Задача

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

@@ -3,7 +3,7 @@ import { Box } from '@mui/system';
 import MonthAndYearInfo from './MonthAndYearInfo/MonthAndYearInfo';
 import СustomSelect from '../UI/СustomSelect/СustomSelect'
 
-const workers = [{value: '', text: '--выберите сотрудника'}, {value: 'Василий', text: 'Василий'}, {value: 'Никита', text: 'Никита'}]
+const workers = [{value: '', text: '--выберите сотрудника--'}, {value: 'Василий', text: 'Василий'}, {value: 'Никита', text: 'Никита'}]
 const types = [{value: 'Месяц', text: 'Месяц'}, {value: 'Неделя', text: 'Неделя'}]
 
 function MonthCalendarHeader({ currentMonthString, decrementMonth, incrementMonth, calendarType, onChangeWorkerHandler, onChangeCalendarTypeHandler, worker, year}) {

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

 import { Button, FormControl, InputLabel, MenuItem, Select, TextField } from "@mui/material";
+import { memo } from "react";
+import CustomSelect from '../UI/СustomSelect/СustomSelect'
+
+const priorities = [{value: '', text: '--Приоритет--'}, {value: 'A', text: 'A'}, {value: 'B', text: 'B'}, {value: 'C', text: 'C'}]
+
 
 function MonthCalendarModalContent({title, onChangeCurrentTaskHandler, description, priority, sendNewTaskHandler, deleteTaskHandler}) {
   return (<>
-  <TextField 
-    id="task-description-title" 
-    value={title}
-    label="Название" 
-    variant="outlined" 
-    sx={{marginBottom: '30px'}}
-    name='title'
-    onChange={(e)=>{onChangeCurrentTaskHandler(e)}}
-  />
-  <TextField 
-    id="task-description" 
-    multiline
-    rows={4}
-    value={description}
-    label="Описание" 
-    variant="outlined" 
-    sx={{marginBottom: '30px'}} 
-    name='description'
-    onChange={(e)=>{onChangeCurrentTaskHandler(e)}}
-  />
-  <FormControl variant="outlined" sx={{width: '160px', marginBottom: '30px'}}>
-    <InputLabel id="priority-type-label">Приоритет</InputLabel>
-      <Select
-        labelId="priority-type-label"
-        id="priority-type"
-        label="Приоритет"
-        sx={{width: '160px'}}
-        value={priority}
-        name='priority'
-        onChange={onChangeCurrentTaskHandler}
-      >
-        <MenuItem value={null}>
-                <em>-- Выберите Приоритет --</em>
-        </MenuItem>
-        <MenuItem value={"A"}>A</MenuItem>
-        <MenuItem value={"B"}>B</MenuItem>
-        <MenuItem value={"C"}>C</MenuItem>
-      </Select>
-  </FormControl>
+    <TextField 
+      id="task-description-title" 
+      value={title}
+      label="Название" 
+      variant="outlined" 
+      sx={{marginBottom: '30px'}}
+      name='title'
+      onChange={(e)=>{onChangeCurrentTaskHandler(e)}}
+    />
+    <TextField 
+      id="task-description" 
+      multiline
+      rows={4}
+      value={description}
+      label="Описание" 
+      variant="outlined" 
+      sx={{marginBottom: '30px'}} 
+      name='description'
+      onChange={(e)=>{onChangeCurrentTaskHandler(e)}}
+    />
+
+    <CustomSelect
+      defaultValue={''}
+      value={priority}
+      name={'priority'}
+      variant={'outlined'}
+      onChange={(e)=>{onChangeCurrentTaskHandler(e)}}
+      label={'Приоритет'}
+      id={'priority-type'}
+      items={priorities}
+    />
   <Button sx={{marginRight: '40px'}} onClick={sendNewTaskHandler}>Сохранить</Button>
   <Button onClick={deleteTaskHandler}>Удалить</Button>
   </>);
 }
 
-export default MonthCalendarModalContent;
\ No newline at end of file
+export default memo(MonthCalendarModalContent);
\ No newline at end of file

planner-front/src/components/UI/СustomSelect/СustomSelect.js

 import { FormControl, InputLabel, MenuItem, Select} from '@mui/material';
 import { memo } from 'react';
 
-function СustomSelect({value, onChange, label, variant='standard', items, id}) {
+function СustomSelect({value, onChange, label, variant='standard', items, id,  defaultValue,  name}) {
   
   return ( 
   <>
@@ -13,6 +13,8 @@ function СustomSelect({value, onChange, label, variant='standard', items, id})
           value={value}
           onChange={onChange}
           label={label}
+          name={name}
+          defaultValue={defaultValue}
         >
           {items.map((item, i)=>{
             return (

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

@@ -3,7 +3,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import MonthCalendarBody from '../../components/MonthCalendarBody/MonthCalendarBody';
 import MonthCalendarHeader from '../../components/MonthCalendarHeader/MonthCalendarHeader';
 import { dateToISOLikeButLocal, getCurrentMonthString, getDaysInMonth } from '../../helpers/CalendarHelpers';
-import { addTask, deleteTask, editTask, fetchCalendarTasks} from '../../store/actions/tasksActions';
+import { addCalendarTask, deleteCalendarTask, editCalendarTask, fetchCalendarTasks} from '../../store/actions/tasksActions';
 
 function MonthCalendar() {
   const dispatch = useDispatch();
@@ -124,7 +124,7 @@ function MonthCalendar() {
       dateTimeDue: due
     }
     delete newObj.infoForCell
-    await dispatch(editTask(newObj))
+    await dispatch(editCalendarTask(newObj))
     setCurrentTask({})
   }
 
@@ -152,7 +152,7 @@ function MonthCalendar() {
       dateTimeDue: due
     }
     delete newObj.infoForCell
-    await dispatch(editTask(newObj))
+    await dispatch(editCalendarTask(newObj))
     setCurrentTask({})
 
   }
@@ -185,7 +185,7 @@ function MonthCalendar() {
         dateTimeDue: due
       }
       delete newObj.infoForCell
-      await dispatch(editTask(newObj))
+      await dispatch(editCalendarTask(newObj))
       setCurrentTask({})
     }
   }
@@ -198,7 +198,7 @@ function MonthCalendar() {
         ...currentTask,
       }}
       )
-      await dispatch(editTask(currentTask))
+      await dispatch(editCalendarTask(currentTask))
     } else {
       setCurrentTask(() => {
         return{
@@ -206,7 +206,7 @@ function MonthCalendar() {
       }}
       )
       delete currentTask.infoForCell
-      await dispatch(addTask(currentTask))
+      await dispatch(addCalendarTask(currentTask))
     }
   }
 
@@ -227,12 +227,12 @@ function MonthCalendar() {
     }
     delete newTask.infoForCell
     delete newTask.id
-    await dispatch(addTask(newTask))
+    await dispatch(addCalendarTask(newTask))
     setCopyTask(null)
   }
 
   const deleteTaskHandler = async (taskId) => {
-    dispatch(deleteTask(taskId))
+    dispatch(deleteCalendarTask(taskId))
   }
 
   return (

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

@@ -46,6 +46,7 @@ export const fetchCalendarTasks = () => {
       }
   }
 };
+
 export const fetchAllTasks = () => {
   return async (dispatch) => {
       dispatch(fetchCalendarTasksRequest());
@@ -69,34 +70,26 @@ 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: token,
-//         },
-//       });
-//       dispatch(addTaskSuccess());
-//       dispatch(fetchCalendarTasks());
-//     } catch (error) {
-//       dispatch(addTaskFailure(error.response.data));
-//     }
-//   };
-// };
-
+export const addCalendarTask = (task) => {
+  return async (dispatch, getState) => {
+      dispatch(addTaskRequest());
+      try {
+        await axios.post("/tasks", task);
+        dispatch(addTaskSuccess())
+        dispatch(fetchCalendarTasks())
+      } catch (error) {
+        dispatch(addTaskFailure(error.response.data));
+      }
+  }
+}
 
 export const addTask = (task) => {
   return async (dispatch, getState) => {
       dispatch(addTaskRequest());
-      // const token = getState().users?.user?.token;
       try {
         await axios.post("/tasks", task);
         dispatch(addTaskSuccess())
         dispatch(fetchAllTasks())
-        dispatch(fetchCalendarTasks())
       } catch (error) {
         dispatch(addTaskFailure(error.response.data));
       }
@@ -122,6 +115,18 @@ export const editTask = (task) => {
         await axios.put("/tasks", task);
         dispatch(editTaskSuccess())
         dispatch(fetchAllTasks())
+      } catch (error) {
+        dispatch(editTaskFailure(error.response.data));
+      }
+  }
+}
+
+export const editCalendarTask = (task) => {
+  return async (dispatch, getState) => {
+      dispatch(editTaskRequest());
+      try {
+        await axios.put("/tasks", task);
+        dispatch(editTaskSuccess())
         dispatch(fetchCalendarTasks())
       } catch (error) {
         dispatch(editTaskFailure(error.response.data));
@@ -144,11 +149,9 @@ const deleteTaskFailure = (error) => {
 export const deleteTask = (taskId) => {
   return async (dispatch, getState) => {
       dispatch(deleteTaskRequest());
-      // const token = getState().users?.user?.token;
       try {
         await axios.delete(`/tasks/${taskId}`);
         dispatch(deleteTaskSuccess())
-        dispatch(fetchCalendarTasks())
         dispatch(fetchAllTasks())
       } catch (error) {
         dispatch(deleteTaskFailure(error.response.data));
@@ -156,6 +159,20 @@ export const deleteTask = (taskId) => {
   }
 }
 
+export const deleteCalendarTask = (taskId) => {
+  return async (dispatch, getState) => {
+      dispatch(deleteTaskRequest());
+      try {
+        await axios.delete(`/tasks/${taskId}`);
+        dispatch(deleteTaskSuccess())
+        dispatch(fetchCalendarTasks())
+      } catch (error) {
+        dispatch(deleteTaskFailure(error.response.data));
+      }
+  }
+}
+
+
 
 const fetchTasksByProjectRequest = () => {
   return {type: FETCH_TASKS_BY_PROJECT_REQUEST}