доработалла селект по проектам при редактировании, написала компонент NewTask и…

доработалла селект по проектам при редактировании, написала компонент NewTask и функцию добавления задачи, расшифровала пропсы во всех компонентах, поправила формат дат, добавила плейсхолдеры

planner-api/src/routers/projects.ts

@@ -16,6 +16,7 @@ router.get('/',async (req:Request, res:Response): Promise<Response>=> {
 router.post('/', async (req:Request, res:Response): Promise<Response> => {
     if (!req.body) return res.status(400).send({Message:'problem in incoming req.body'})
     const token = req.get('Authorization');
+    console.log("token:" + token)
     const {title, dateDue,color,department,workers,tasks}= req.body;
     const user = await dataSource
     .createQueryBuilder()
@@ -36,7 +37,7 @@ router.post('/', async (req:Request, res:Response): Promise<Response> => {
     return res.send({project})
 })
 
-router.get("/id/:id",async (req:Request, res:Response): Promise<Response> => {
+router.get("/:id",async (req:Request, res:Response): Promise<Response> => {
     const project = await dataSource
     .createQueryBuilder()
     .select("project")

planner-api/src/routers/tasks.ts

@@ -2,6 +2,7 @@ import express,{Router, Request, Response} from 'express';
 import {Task} from '../models/Task';
 import {myDataSource} from '../app-data-source';
 import { User } from '../models/User';
+import { Project } from '../models/Project';
 const router:Router = express.Router();
 const dataSource = myDataSource;
 
@@ -37,7 +38,7 @@ router.post('/', async(req:Request, res:Response):Promise<Response>=>{
     return res.send({newTask})
 })
 
-router.get('/userId/:userId', async (req: Request, res: Response):Promise<Response>=>{   
+router.get('/:userId', async (req: Request, res: Response):Promise<Response>=>{   
     const userId = req.params.userId;
     const tasks = await dataSource
     .getRepository(Task)
@@ -111,4 +112,53 @@ router.put('/',async(req:Request, res:Response)=> {
 })
 
 
+router.post('/project',async (req: Request, res: Response):Promise<Response>=>{
+    let projectArray :string[]= req.body;
+        console.log('projectArray ', projectArray)
+    if (projectArray.length===0) {
+        const rawTasks = await
+        dataSource
+       .getRepository(Task)
+        .find({
+            relations:{
+                executors:true,
+                author:true,
+                project:true
+            }
+        })
+    const tasks:object[]= rawTasks.filter(task=>task.project===null)
+       return res.send({tasks})
+    } 
+    const tasks = await
+     dataSource
+    .getRepository(Task)
+    .createQueryBuilder('task')
+    .innerJoinAndSelect( 'task.project', 'project')
+    .where('task.project IN(:...projects)', {projects:projectArray})
+    .getMany()
+    return res.send({tasks})
+}) 
+
+
+
+// router.post('/projects',async (req: Request, res: Response):Promise<Response>=>{
+//     let projectArray :string[]= req.body;
+//         console.log('projectArray ', projectArray)
+//     if (projectArray.length===0) {
+//         const tasks = await
+//         dataSource
+//        .getRepository(Task)
+//        .createQueryBuilder('task')
+//     //    .innerJoinAndSelect('task.executors', 'user')
+//         .innerJoinAndSelect('task.executors AND task.author', 'user')
+//        .where('task.project IS NULL')
+//        .getMany()
+//        return res.send({tasks})
+//     } 
+
+//     ///ssome code 
+//     return res.send({message:"some other staff"})
+// })
+
+
 export default router;

planner-front/src/App.js

@@ -7,6 +7,9 @@ import Login from './containers/Login/Login';
 import Register from './containers/Register/Register';
 import MonthCalendar from './containers/MonthCalendar/MonthCalendar';
 import ForgottenPassword from "./containers/ForgottenPassword/ForgottenPassword";
+import Projects from "./containers/Projects/Projects";
+import FullProject from "./containers/FullProject/FullProject";
+import NewProject from "./containers/NewProject/NewProject";
 
 const ProtectedRoute = ({isAllowed, roles, redirectUrl, children}) => {
   const user = useSelector(state => state.users?.user);
@@ -18,6 +21,7 @@ const ProtectedRoute = ({isAllowed, roles, redirectUrl, children}) => {
 
 const App = () => {
     const user = useSelector(state => state.users?.user);
+   
     return (
     <BrowserRouter>
       <Routes>
@@ -31,7 +35,30 @@ const App = () => {
               </main>
             </>
           }>
-
+            <Route path={"/projects"} element={
+              <ProtectedRoute
+                  isAllowed={user}
+                  redirectUrl={"/sign-in"}
+              >
+                <Projects/>
+              </ProtectedRoute>
+            }/>
+             <Route path={"/projects/:id"} element={
+              <ProtectedRoute
+                  isAllowed={user}
+                  redirectUrl={"/sign-in"}
+              >
+                  <FullProject/>
+              </ProtectedRoute>
+            }/>
+            <Route path={"/projects/add"} element={
+              <ProtectedRoute
+                  isAllowed={user}
+                  redirectUrl={"/sign-in"}
+              >
+                  <NewProject/>
+              </ProtectedRoute>
+            }/>
             <Route path={"/"} element={
               <ProtectedRoute
                   isAllowed={user}

planner-front/src/components/Menus/AdminMenu/AdminMenu.js

@@ -10,7 +10,7 @@ const AdminMenu = () => {
     const [anchorEl, setAnchorEl] = useState(null);
     const open = Boolean(anchorEl);
     const user = useSelector(state => state.users.user)
-    console.log(user)
+ 
     const handleClick = (event) => {
         setAnchorEl(event.currentTarget);
     };
@@ -23,6 +23,14 @@ const AdminMenu = () => {
         handleClose()
     }
     return <>
+     <Button
+            component={NavLink}
+            to="/projects"
+            color="inherit"
+            size="large"
+        >
+            Проекты
+        </Button>
         <Button
             component={NavLink}
             to="/week"

planner-front/src/components/Menus/UserMenu/UserMenu.js

-import { Button, Menu, MenuItem } from "@mui/material";
-import { useState } from "react";
-import { useDispatch } from "react-redux";
-import { NavLink, useNavigate } from "react-router-dom";
-import { logoutUser } from "../../../store/actions/usersActions";
-import HasAccess from "../../UI/HasAccess/HasAccess";
-
-const UserMenu = ({ user }) => {
-    const dispatch = useDispatch();
-    const navigate = useNavigate()
-    const [anchorEl, setAnchorEl] = useState(null);
-    const open = Boolean(anchorEl);
-    const handleClick = (event) => {
-        setAnchorEl(event.currentTarget);
-    };
-    const handleClose = () => {
-        setAnchorEl(null);
-    };
-
-    const logout = () => {
-        dispatch(logoutUser(navigate));
-        handleClose()
-    }
-    return <>
-        <Button
-            color="inherit"
-            onClick={handleClick}
-        >
-            Hello, {user?.displayName}
-        </Button>
-        {/* <HasAccess roles={["admin"]}>
-            <Button
-                component={NavLink}
-                color="inherit"
-                to="/admin"
-            >
-                Admin panel
-            </Button>
-        </HasAccess> */}
-
-        <Menu
-            anchorEl={anchorEl}
-            open={open}
-            onClose={handleClose}
-
-        >
-            <MenuItem onClick={handleClose}>Profile</MenuItem>
-            <MenuItem onClick={handleClose}>My account</MenuItem>
-            <MenuItem onClick={logout}>Logout</MenuItem>
-        </Menu>
-    </>
-};
-
-export default UserMenu;
\ No newline at end of file

planner-front/src/components/Menus/WorkerMenu/WorkerMenu.js

@@ -23,6 +23,14 @@ const WorkerMenu = () => {
         handleClose()
     }
     return <>
+        <Button
+            component={NavLink}
+            to="/projects"
+            color="inherit"
+            size="large"
+        >
+            Проекты
+        </Button>
         <Button
             component={NavLink}
             to="/week"

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

 import { Grid } from "@mui/material";
-import { memo } from "react";
 
 const CalendarRow = ({children}) => {
     return <>
@@ -13,6 +12,6 @@ const CalendarRow = ({children}) => {
     </>
 };
 
-export default memo(CalendarRow);
+export default CalendarRow;
 
 

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

+import { Grid } from "@mui/material";
+import { memo, useMemo } from "react";
+import CalendarStandartCell from "../CalendarStandartCell.js/CalendarStandartCell";
+import CalendarTask from "../CalendarTask/CalendarTask";
+
+const CalendarRowDay = ({xs, hoursInDay, createTaskInCellHandler, currentTask, handleOpen, modal, setCurrentTask, year, month, tasks, day, hourFormat}) => {
+
+  const hours = useMemo(()=>{ 
+    return hoursInDay.map((hour)=>parseInt(hour.split(':')[0]))},
+  [hoursInDay])
+
+  const availableTasks = useMemo(() => {
+    const tasksInDay = tasks.filter((task)=> {
+    if (year === task.infoForCell.startYear) {
+      if (month + 1 === task.infoForCell.startMonth) {
+        if (day.dayNumber === task.infoForCell.startDay) {
+              return task
+          } else {return false}   
+        } else {return false}   
+      } else {return false}      
+    })
+    return tasksInDay
+  }, [tasks, month, year, day.dayNumber])
+
+  const sortedTasks = useMemo(() => {
+    if (availableTasks.length) {
+      const newSortedArr = [...availableTasks].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 newSortedArr
+    }
+  }, [availableTasks])
+
+  const linesInDay = useMemo(() => {
+    let hourDiff
+    let hourDiffEnd
+    const lines = []
+    if (hourFormat) {
+      hourDiff = 1
+      hourDiffEnd = 0
+    } else {
+      hourDiff = 2
+      hourDiffEnd = 1
+    }
+    if (availableTasks.length) {
+      lines.push(hoursInDay.map((hour)=>parseInt(hour.split(':')[0])))
+      for (let k = 0; k < sortedTasks.length; k++) {
+        let skipLine = false
+          for (let j = 0; j < lines.length; j++) {
+            const line = lines[j]
+            const task = sortedTasks[k]
+            if (skipLine) {
+              skipLine = false
+              break;
+            }
+            for (let i = 0; i < line.length; i++) {
+              const hour = hours[i]
+              let havePlace = true
+              if (((task.infoForCell.endHour <= hour || task.infoForCell.startHour  <= hour) && (task.infoForCell.endHour > hour))  
+              || (!hourFormat && task.infoForCell.startHour >= hour  && task.infoForCell.endHour < hour + hourDiff)
+              || (!hourFormat && task.infoForCell.startHour === hour + hourDiffEnd && task.infoForCell.endHour > hour)
+              || (task.infoForCell.endMinute <= 59 && task.infoForCell.endHour === hour)) {
+                if (!isNaN(line[i])) {
+                  for (let a = 0; a < hours.length; a++) {
+                    const hour = hours[a]
+                    if ((task.infoForCell.endMinute === 59 && task.infoForCell.endHour === hour + hourDiffEnd) || (!hourFormat && task.infoForCell.endMinute === 59 && task.infoForCell.endHour === hour)) {
+                      if (isNaN(line[a])) {
+                        havePlace = false
+                        break;
+                      }
+                    }
+                  }
+                  if (!havePlace) {
+                    havePlace = true  
+                    break;
+                  }
+                  line[i] += `-${k}`
+                  if ((task.infoForCell.endMinute === 59 && task.infoForCell.endHour === hour + hourDiffEnd) || (!hourFormat && task.infoForCell.endMinute === 59 && task.infoForCell.endHour === hour)) {
+                    skipLine = true
+                    break;
+                  }
+                } else {
+                    if (j + 1 === lines.length) {
+                      lines.push(hoursInDay.map((hour)=>parseInt(hour.split(':')[0])))
+                    }
+                    break;
+                }
+              } 
+            }
+          }
+      }
+    }
+    return lines
+  }, [availableTasks.length, hourFormat, hours, hoursInDay, sortedTasks])
+
+  const getBoxesInLine = (line) => {
+    if (line) {
+      let xs = 12/hoursInDay.length
+      const boxes = []
+      for (let i = 0; i < line.length; i++) {
+        if (!isNaN(line[i])) {
+          if (boxes[boxes.length -1]?.task === null) {
+            boxes[boxes.length -1].xs += xs
+          } else {
+            boxes.push({xs: xs, task: null})
+          }
+        } else {
+          const task = sortedTasks[line[i].split('-')[1]]
+          const taskIsThere = boxes.find((taskFind)=>{
+            if (taskFind?.task?.id === task.id) return taskFind
+          })
+          if (taskIsThere) {
+            taskIsThere.xs +=xs
+          } else {
+            boxes.push({xs: xs, task: sortedTasks[line[i].split('-')[1]]})
+          }
+        }
+      }
+      return boxes
+    }
+  }
+
+  return <>
+      <Grid 
+        container
+        item
+        xs={10.8}
+        align='center'
+        >
+          {hoursInDay.map((hour, i)=>{
+            return (
+              <CalendarStandartCell
+                key={i} 
+                item xs={xs}
+                createTaskInCellHandler={createTaskInCellHandler}
+                hours={hour}
+                dayNumber={day.dayNumber}
+                currentTask={currentTask}
+                handleOpen={handleOpen}
+                modal={modal}
+                >
+              </CalendarStandartCell>
+              ) 
+            })}
+
+            {linesInDay?.map((line, i)=>{
+              const boxes = getBoxesInLine(line)
+              return(
+              <Grid key={i} container sx={{height: '35px', backgroundColor: 'rgb(0,0,0,0)', marginTop: i === 0 ? '-35px' : 0, marginBottom: '5px'}}>
+                {boxes.map((box)=>{
+                  if (box.task) {
+                    return (<Grid item xs={box.xs} sx={{height: '35px', marginBottom: '5px'}}>
+                      <CalendarTask
+                       task={box.task}
+                       setCurrentTask={setCurrentTask} 
+                       handleOpen={handleOpen}
+                       />
+                    </Grid>)
+                  } else {
+                    return (<Grid item xs={box.xs} sx={{height: '35px', backgroundColor: 'rgb(0,0,0,0)'}}>
+                      
+                    </Grid>)
+                  }
+                })}
+              </Grid>)
+            })}
+        </Grid>
+    </>
+};
+
+export default memo(CalendarRowDay);
\ No newline at end of file

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

-import { Grid, TextField, Typography } from "@mui/material";
+import { Grid} from "@mui/material";
 import { memo, useEffect, useState } from "react";
 
-const CalendarStandartCell = ({children, xs, hours, dayNumber,  createTaskInCellHandler, handleOpen, modal}) => {
+const CalendarStandartCell = ({children, xs, hours, dayNumber,  createTaskInCellHandler, handleOpen, modal, divRef }) => {
     const [isThisCell, setIsThisCell] = useState(false)
     useEffect(()=>{
         if(!modal) {
             setIsThisCell(false);
         }
     }, [modal])
+
     return <>
         <Grid  
             item xs={xs} 
-            sx={{borderRight: '1px solid black'}} 
-            onClick={(e)=>{createTaskInCellHandler(dayNumber, hours); setIsThisCell(true); handleOpen(e)}}>
+            sx={{position: 'relative', height: '35px'}} 
+            onClick={(e)=>{createTaskInCellHandler(dayNumber, hours); setIsThisCell(true); handleOpen(e)}}
+        >
             {children}
         {isThisCell ?  
         <Grid  
-            sx={{backgroundColor: 'lightgreen', padding: '10px', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis'}} 
+            sx={{ position: 'relative', height: '29px', backgroundColor: 'lightgreen', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', borderRadius: '10px', margin: '3px 10px', display: 'flex', justifyContent: 'flex-start', alignItems: 'center', paddingLeft: '5px', zIndex: '5'}}  
             >
             <span>
                 Задача
             </span>
         </Grid> : null}
+        <div style={{position: 'absolute', height: children ? divRef : 0, width: '1px', backgroundColor: 'black', right: '0', top: '0', zIndex: '3'}}>
+
+        </div>
         </Grid>
     </>
 };

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

-import { Grid, TextField, Typography } from "@mui/material";
-import React, { memo, useState, useEffect} from "react";
+import { Grid} from "@mui/material";
+import React, { memo} from "react";
 
-const CalendarTask = ({year, month, tasks, day, hours, setCurrentTask, hourFormat, handleOpen, currentTask}) => {
-  const [thisCellCurrentTask, setThisCellCurrentTask] = useState({})
-  const getTaskInDayCell = (tasks, day, hours) => {
-    const hour = parseInt(hours.split(':')[0])
-    let hourDiffEnd
-    if (hourFormat) {
-      hourDiffEnd = hour + 1
-    } else {
-      hourDiffEnd = hour + 2
-    }
-    const tasksCell = tasks.filter(task=> {
-    if (year === task.infoForCell.startYear) {
-      if (month + 1 === task.infoForCell.startMonth) {
-        if (day.dayNumber === task.infoForCell.startDay) {
-          if (((task.infoForCell.endHour <= hour || task.infoForCell.startHour <= hour) && (task.infoForCell.endHour > hour))  
-          || (task.infoForCell.startHour >= hour  && task.infoForCell.endHour < hourDiffEnd)
-          || (task.infoForCell.endMinute <= 59 && task.infoForCell.endHour === hour)) {
-              return task
-          }
-        }
-      }      
-    }
-    })
-    return tasksCell
-  }
-  const tasksCell = getTaskInDayCell(tasks, day, hours)
 
-  useEffect(()=>{
-    if (!currentTask.title) {
-      setThisCellCurrentTask({})
-    }
-  }, [currentTask])
 
+const CalendarTask = ({setCurrentTask, handleOpen, task}) => {
+
+
+  const onClickTaskHandler = (e, task) => {
+    e.stopPropagation(); 
+    setCurrentTask(task); 
+    handleOpen(e)
+  }
 
   return (<> 
-      {tasksCell.length ? tasksCell.map((task, i)=>
-      {
-      return (
     <Grid  
-        key={task.id} 
-        sx={{backgroundColor: 'lightgreen', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', padding: '10px',  borderBottom: '1px solid rgb(29, 161, 51);;'}} 
-        onClick={(e)=>{e.stopPropagation(); setCurrentTask(task); handleOpen(e)}}
+          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'}} 
+          onClick={(e)=>{onClickTaskHandler(e, task)}}
       >
+      <span>
         {task.title}
+      </span>
     </Grid>
-      )}
-      ) 
-      : null}
   </>)
 };
 

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

 import { FormControlLabel, Switch} from "@mui/material";
-import { memo, useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import CalendarRow from "./CalendarRow/CalendarRow";
 import CalendarSmallCell from "./CalendarSmallCell/CalendarSmallCell";
 import CalendarStandartCell from "./CalendarStandartCell.js/CalendarStandartCell";
-import CalendarTask from "./CalendarTask/CalendarTask";
 import ModalTask from "../UI/ModalTask/ModalTask";
 import MonthCalendarModalContent from "../MonthCalendarModalContent/MonthCalendarModalContent";
+import CalendarRowDay from "./CalendarRowDay/CalendarRowDay";
 
 function MonthCalendarBody({month, year, tasks, createTaskInCellHandler, currentTask, setCurrentTask, hourFormat, setHourFormat, onChangeCurrentTaskHandler, sendNewTaskHandler, deleteTaskHandler, cellSizes, hoursInDay, daysInMonth}) {
 
@@ -25,11 +25,18 @@ function MonthCalendarBody({month, year, tasks, createTaskInCellHandler, current
     setModal({...modal, open: false})
     setCurrentTask({})
   };
-
-
+  const divRef = useRef(null)
+  const [divHeight, setDivHeight] = useState('')
+  useEffect(() => {
+    if (divRef) {
+        setDivHeight(()=>{
+          return divRef.current?.offsetHeight
+        })
+    }
+}, [divRef.current?.offsetHeight, hourFormat, month, tasks]);
 
   return (
-    <>
+    <div ref={divRef} style={{marginBottom: '30px'}}>
     <CalendarRow
             >
         <CalendarSmallCell xs={1.2}> 
@@ -41,7 +48,7 @@ function MonthCalendarBody({month, year, tasks, createTaskInCellHandler, current
         </CalendarSmallCell>
         {hoursInDay?.map((hours, i)=>{
           return (
-            <CalendarStandartCell key={i} xs={cellSizes.standarCell}>
+            <CalendarStandartCell key={i} xs={cellSizes.standarCell} divRef={divHeight}>
               {hours}
             </CalendarStandartCell>
             ) 
@@ -54,32 +61,20 @@ function MonthCalendarBody({month, year, tasks, createTaskInCellHandler, current
           >
             <CalendarSmallCell xs={cellSizes.smallCell}>{day.dayNumber}</CalendarSmallCell>
             <CalendarSmallCell xs={cellSizes.smallCell}>{day.dayOfWeek}</CalendarSmallCell>
-            {hoursInDay.map((hours, i)=>{
-              return (
-                <CalendarStandartCell 
-                  key={i} 
-                  item xs={cellSizes.standarCell}
+            <CalendarRowDay
+              xs={cellSizes.dayCell}
               createTaskInCellHandler={createTaskInCellHandler}
-                  hours={hours}
-                  dayNumber={day.dayNumber}
+              hoursInDay={hoursInDay}
               currentTask={currentTask}
               handleOpen={handleOpen}
               modal={modal.open}
-                  >
-                    <CalendarTask
               setCurrentTask={setCurrentTask}
               year={year}
               month={month} 
               tasks={tasks}
               day={day}
-                      hours={hours}
               hourFormat={hourFormat}
-                      handleOpen={handleOpen}
-                      currentTask={currentTask}
             />
-                </CalendarStandartCell>
-                ) 
-              })}
         </CalendarRow>
       )
     })}
@@ -96,7 +91,7 @@ function MonthCalendarBody({month, year, tasks, createTaskInCellHandler, current
         deleteTaskHandler={()=>{deleteTaskHandler(currentTask.id); handleClose()}}
       />
     </ModalTask>
-    </>
+    </div>
   );
 }
 

planner-front/src/components/MyTasksCompoments/CustomTableCell.js

@@ -2,7 +2,13 @@ import * as React from "react";
 import TableCell from "@mui/material/TableCell";
 import Input from "@mui/material/Input";
 
-const CustomTableCell = ({ task, name, value, onChange, onModalOpen }) => {
+const CustomTableCell = ({task,
+  name,
+  value,
+  onChange,
+  onModalOpen,
+  placeholder,
+ }) => {
   const styles = { width: "auto", height: "10px"};
 
   if (task) {
@@ -15,6 +21,7 @@ const CustomTableCell = ({ task, name, value, onChange, onModalOpen }) => {
         >
           {task.isEditMode && onChange ? (
             <Input
+              placeholder={placeholder}
               value={value}
               name={name}
               onChange={(e) => onChange(e, task)}

planner-front/src/components/MyTasksCompoments/DateTimePicker/DateTimePicker.js

@@ -4,6 +4,7 @@ import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
 import { DateTimePicker } from "@mui/x-date-pickers/DateTimePicker";
 import { AdapterMoment } from "@mui/x-date-pickers/AdapterMoment";
 
+
 export default function MaterialUIPickers(props) {
   return (
     <LocalizationProvider
@@ -11,6 +12,7 @@ export default function MaterialUIPickers(props) {
       sx={{ width: "auto", fontSize: 5, fontWeight: "200" }}
     >
       <DateTimePicker
+        inputFormat="DD-MM-YYYY hh:mm A"
         disabled={props.task.readOnly}
         renderInput={(params) => (
           <TextField

planner-front/src/components/MyTasksCompoments/MyTaskToolBar.js

@@ -5,25 +5,58 @@ import Toolbar from '@mui/material/Toolbar';
 import Typography from '@mui/material/Typography';
 import Button from '@mui/material/Button';
 import MultipleSelect from '../../components/UI/MultipleSelect/MultipleSelect';
+import Add from "@mui/icons-material/Add";
+import Close from "@mui/icons-material/Close";
 
-export default function MyTaskToolBar(props) {
+export default function MyTaskToolBar({projects,onClose,projectName,setProjectName,formStatus,onClick}) {
+  
+   let projectsFilter =
+    <></>
+   
+    if (projects)  {
+      projectsFilter=   
+      <MultipleSelect
+      projects={projects}
+      onClose={onClose}
+      projectName={projectName}
+      setProjectName={setProjectName}
+      />
+    }
 
   return (
+    
     <Box sx={{ flexGrow: 1 }}>
       <AppBar position="static">
         <Toolbar>
          <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
             Мои задачи
           </Typography>
-          <MultipleSelect
-          projects={props.projects}
-          onClose={props.onClose}
-          projectName={props.projectName}
-          setProjectName={props.setProjectName}
-          />
-          <Button color="inherit" onClick={props.onClick} >Добавить задачу</Button>
+          {projectsFilter}
+
+          <Button
+            color={formStatus === true ? "info" : "inherit"}
+            style={{
+              backgroundColor: formStatus === true ? "white" : "inherit",
+            }}
+            onClick={onClick}
+          >
+            {formStatus === true ? (
+              <>
+                <Close />
+                <span style={{ lineHeight: "16px" }}>Скрыть задачу</span>
+              </>
+            ) : (
+              <>
+                <Add />
+                <span style={{ lineHeight: "16px" }}>Добавить задачу</span>
+              </>
+            )}
+          </Button>
+        
         </Toolbar>
       </AppBar>
     </Box>
+
+    
   );
 }

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

+import {Button, Grid} from "@mui/material";
+import {useState} from "react";
+import { useSelector } from "react-redux";
+import FormElement from "../UI/Form/FormElement/FormElement";
+
+const ProjectForm = ({onSubmit}) => {
+    const users = useSelector(state => state.users)
+    console.log(users)
+    const [state, setState] = useState({
+        title: "",
+        color: ""
+    });
+
+
+    const submitFormHandler = (e) => {
+        e.preventDefault();
+        let project = {title: state.title, color: state.color}
+        console.log(project);
+        onSubmit(project);
+    };
+
+    const inputChangeHandler = (e) => {
+        const {name, value} = e.target;
+        setState(prevState => {
+            return {...prevState, [name]: value};
+        });
+    };
+
+    return <form onSubmit={submitFormHandler}>
+        <Grid container direction="column" spacing={2}>
+            <FormElement 
+            onChange={inputChangeHandler} 
+            name={"title"} 
+            label={"Title"} 
+            state={state}  
+            />
+              <FormElement 
+            onChange={inputChangeHandler} 
+            name={"color"} 
+            label={"Color"} 
+            state={state}  
+            />
+            <Grid item>
+                <Button
+                    type="submit"
+                    color="primary"
+                    variant="contained"
+                >
+                    Create
+                </Button>
+            </Grid>
+        </Grid>
+    </form>
+};
+
+export default ProjectForm;
\ No newline at end of file

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

+import { Card, CardActions, CardContent, Grid, IconButton } from "@mui/material";
+import { Link } from "react-router-dom";
+import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
+import { useDispatch, useSelector } from "react-redux";
+
+
+const ProjectItem = ({ title, tasks, id }) => {
+    const user = useSelector(state => state.users.user);
+    const dispatch = useDispatch();
+    console.log(tasks)
+
+    return <>      
+            <Grid item xs={12} sm={12} md={6} lg={4}>
+                <Card>
+                    <CardContent>
+                        <strong>
+                            <br></br>
+                            Название проекта: {title}
+                        </strong>
+                        <strong>
+                            <br></br>
+                            {/* Задачи: {tasks} */}
+                        </strong>
+                    </CardContent>
+                    <CardActions>
+                    <IconButton component={Link} to={"/projects/" + id}>
+             <ArrowForwardIcon />
+         </IconButton>
+                    </CardActions>
+                </Card>
+            </Grid>         
+    </>
+};
+
+export default ProjectItem;

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

+import {Grid} from "@mui/material";
+import ProjectItem from "../ProjectItem/ProjectItem";
+
+const ProjectsList = ({projects}) => {
+    return (
+        <Grid item container direction="row" spacing={1}>
+            {projects?.map(project => {
+                return <ProjectItem
+                    tasks={project.tasks}
+                    workers={project.workers}
+                    title={project.title}
+                    createdAt={project.createdAt}
+                    dateDue={project.dateDue}
+                    admin={project.admin}
+                    id={project.id}
+                    key={project.id}
+                />
+            })}
+        </Grid>
+    );
+};
+
+export default ProjectsList;
\ No newline at end of file

planner-front/src/components/UI/Form/FormElement/FormElement.js

@@ -5,7 +5,7 @@ const FormElement = ({ name, label, state, error, onChange, select, options, typ
     let inputChildren = null
 
     if (select) {
-        inputChildren = options.map(option => {
+        inputChildren = options?.map(option => {
             return <MenuItem key={option._id} value={option._id}>
             {option.name}
             </MenuItem>

planner-front/src/components/UI/MultipleSelect/MultipleSelect.js

@@ -28,16 +28,15 @@ function getStyles(name, personName, theme) {
   };
 }
 
-export default function MultipleSelect(props) {
+export default function MultipleSelect({projects,projectName,onClose,setProjectName}) {
 
   const theme = useTheme();
 
-
   const handleChange = (event) => {
     const {
       target: { value },
     } = event;
-    props.setProjectName(
+    setProjectName(
       // On autofill we get a stringified value.
       typeof value === 'string' ? value.split(',') : value,
     );
@@ -46,23 +45,25 @@ export default function MultipleSelect(props) {
   return (
     <div>
       <FormControl sx={{ m: 1, width: 250,borderColor:'white' }}>
-        <InputLabel id="demo-multiple-name-label" sx={{color:'white' }}>Project</InputLabel>
+        <InputLabel placeholder='Choose Project' label='I am a really really long green TextField label' id="demo-multiple-name-label" sx={{color:'white', padding:'1' }}>Project</InputLabel>
         <Select
           labelId="demo-multiple-name-label"
+          label='Choose Project'
+          name='Choose Project'
           id="demo-multiple-name"
           multiple
-          value={props.projectName}
+          value={projectName}
           onChange={handleChange}
           input={<OutlinedInput label="Name" />}
           MenuProps={MenuProps}
           sx={{color:'white' }}
-          onClose={(e)=>{props.onClose(props.projectName)}}
+          onClose={(e)=>{onClose(projectName)}}
         >
-          {props.projects.map((project) => (
+          {projects?.map((project) => (
             <MenuItem
               key={project}
               value={project}
-              style={getStyles(project, props.projectName, theme)}
+              style={getStyles(project, projectName, theme)}
             >
               {project}
             </MenuItem>

planner-front/src/components/UI/Select/Select.js

@@ -5,7 +5,8 @@ import MenuItem from "@mui/material/MenuItem";
 import FormControl from "@mui/material/FormControl";
 import Select from "@mui/material/Select";
 
-export default function BasicSelect(props) {
+export default function BasicSelect({value,label,name,onChange,task,items}) {
+
   return (
     <Box sx={{ minWidth: 60 }}>
       <FormControl fullWidth>
@@ -13,17 +14,19 @@ export default function BasicSelect(props) {
         <Select
           labelId="demo-simple-select-label"
           id="demo-simple-select"
-          value={props.task.accomplish}
-          label=""
-          name={"accomplish"}
-          onChange={(e) => props.onChange(e, props.task)}
-          sx={{ marginTop: 2 }}
+          value={value}
+          label={label}
+          name={name}
+          onChange={(e) => onChange(e, task)}
         >
-          {props.items.map((item) => (
-            <MenuItem value={item}>{item}</MenuItem>
+          {items.map((item) => (
+            <MenuItem key={item.value} value={item.value}>
+              {item.title}
+            </MenuItem>
           ))}
         </Select>
       </FormControl>
     </Box>
   );
 }
+

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

@@ -6,10 +6,10 @@ function СustomSelect({value, onChange, label, variant='standard', items, id})
   return ( 
   <>
     <FormControl variant={variant} sx={{ m: 1, minWidth: 120 }}>
-        <InputLabel id={id + '-select' + '-label'}>{label}</InputLabel>
+        <InputLabel id={`${id}-select-label`}>{label}</InputLabel>
         <Select
-          labelId={id + '-select'+ '-label'}
-          id={id + '-select'}
+          labelId={`${id}-select-label`}
+          id={`${id}-select`}
           value={value}
           onChange={onChange}
           label={label}

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

+import { Card, CardActions, CardContent, Grid } from "@mui/material";
+import { useLocation, useParams } from "react-router-dom";
+import { useSelector, useDispatch } from "react-redux";
+import { useEffect } from "react";
+import { fetchProject } from "../../store/actions/projectsActions";
+
+const FullProject = () => {
+    const { projects, project } = useSelector(state => state.projects);
+
+    const dispatch = useDispatch();
+    console.log(projects);
+    let location = useLocation();
+    let point = location.pathname
+    console.log(point.includes("admin"))
+    const params = useParams()
+
+    useEffect(() => {
+        dispatch(fetchProject(params.id))
+    }, [params.id, dispatch]);
+    console.log(project)
+
+    return <>
+        <Grid item xs={12} sm={12} md={6} lg={4}>
+            <Card>
+                <h2>Проект - {project?.project?.title}</h2>
+                <CardContent>
+                    <strong>
+                        <br></br>
+                        Дата создания проекта: {project?.project?.createdAt}
+                    </strong>
+                    <strong>
+                        <br></br>
+                        Цвет: {project?.project?.color}
+                    </strong>
+                    <strong>
+                        <br></br>
+                        Админ проекта: {project?.project?.admin.name}
+                    </strong>
+                    <strong>
+                        <br></br>
+                        Задачи: {projects?.projects?.tasks?.map(task => {
+                            return <>
+                                <strong><br></br>Задача проекта: {task.title} </strong>
+                            </>
+                        })}
+                    </strong>
+                </CardContent>
+                <CardActions>
+
+                </CardActions>
+            </Card>
+        </Grid>
+
+    </>
+};
+
+export default FullProject;

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

@@ -13,7 +13,6 @@ function MonthCalendar() {
   const [worker, setWorker] = useState('');
   const [calendarType, setCalendarType] = useState('Месяц');
   const [currentTask, setCurrentTask] = useState({title: '', description: '', priority: ''})
-
   const [cellSizes, setCellSizes] = useState({})
 
   useEffect(()=>{
@@ -31,7 +30,7 @@ function MonthCalendar() {
       const cells = arr.length
       const xs = 10.8/cells
       setCellSizes(()=>{
-        return {smallCell: 0.6, standarCell: xs}
+        return {smallCell: 0.6, standarCell: xs, dayCell: 12/cells}
       })
       return arr
     } else {
@@ -39,7 +38,7 @@ function MonthCalendar() {
       const cells = arr.length
       const xs = 10.8/cells
       setCellSizes(()=>{
-        return {smallCell: 0.6, standarCell: xs}
+        return {smallCell: 0.6, standarCell: xs, dayCell: 12/cells}
       })
       return arr
     }
@@ -122,12 +121,13 @@ function MonthCalendar() {
 
   const sendNewTaskHandler = async () => {
     if (currentTask.id) {
+      delete currentTask.infoForCell
+      console.log(currentTask)
       setCurrentTask(() => {
         return{
         ...currentTask,
       }}
       )
-      delete currentTask.infoForCell
       await dispatch(editTask(currentTask))
     } else {
       setCurrentTask(() => {
@@ -135,7 +135,6 @@ function MonthCalendar() {
         ...currentTask,
       }}
       )
-      console.log(currentTask)
       delete currentTask.infoForCell
       await dispatch(addTask(currentTask))
     }

planner-front/src/containers/MyTasks/MyTasksHeader/MyTasksHeader.js

-import * as React from 'react';
-import PropTypes from 'prop-types';
-import Box from '@mui/material/Box';
-import TableCell from '@mui/material/TableCell';
-import TableHead from '@mui/material/TableHead';
-import TableRow from '@mui/material/TableRow';
-import TableSortLabel from '@mui/material/TableSortLabel';
-import { visuallyHidden } from '@mui/utils';
-
+import * as React from "react";
+import PropTypes from "prop-types";
+import Box from "@mui/material/Box";
+import TableCell from "@mui/material/TableCell";
+import TableHead from "@mui/material/TableHead";
+import TableRow from "@mui/material/TableRow";
+import TableSortLabel from "@mui/material/TableSortLabel";
+import { visuallyHidden } from "@mui/utils";
 
 const headCells = [
   {
-    id: 'id',
+    id: "id",
     numeric: true,
     disablePadding: true,
-    label: '',
+    label: "",
   },
   {
-    id: 'priority',
+    id: "priority",
     numeric: false,
     disablePadding: true,
-    label: 'Приоритет',
+    label: "Приоритет",
   },
   {
-    id: 'createdAt',
+    id: "createdAt",
     numeric: true,
     disablePadding: false,
-    label: 'Дата создания',
+    label: "Дата создания",
   },
   {
-    id: 'title',
+    id: "title",
     numeric: true,
     disablePadding: false,
-    label: 'Заголовок',
+    label: "Заголовок",
   },
   {
-    id: 'project',
+    id: "projectName",
     numeric: true,
     disablePadding: false,
-    label: 'Проект',
+    label: "Проект",
   },
   {
-    id: 'authorDisplayName',
+    id: "authorDisplayName",
     numeric: true,
     disablePadding: false,
-    label: 'Автор',
+    label: "Автор",
   },
 
   {
-    id: 'dateTimeStart',
+    id: "dateTimeStart",
     numeric: true,
     disablePadding: false,
-    label: 'Дата начала',
+    label: "Дата начала",
   },
   {
-    id: 'dateTimeDue',
+    id: "dateTimeDue",
     numeric: true,
     disablePadding: false,
-    label: 'Дата завершения',
+    label: "Дата завершения",
   },
   {
-    id: 'accomplish',
+    id: "accomplish",
     numeric: true,
     disablePadding: false,
-    label: 'Статус',
+    label: "Статус",
   },
   {
-    id: 'change',
+    id: "change",
     numeric: false,
     disablePadding: false,
-    label: '',
+    label: "",
   },
   {
-    id: 'delete',
+    id: "delete",
     numeric: false,
     disablePadding: false,
-    label: '',
+    label: "",
   },
 ];
 
-export default function EnhancedTableHead(props) {
-  const {  order, orderBy, rowCount, onRequestSort } =
-    props;
+export default function EnhancedTableHead({ order, orderBy, rowCount, onRequestSort }) {
+  
   const createSortHandler = (property) => (event) => {
     onRequestSort(event, property);
   };
@@ -88,23 +86,22 @@ export default function EnhancedTableHead(props) {
   return (
     <TableHead>
       <TableRow>
-       
         {headCells.map((headCell) => (
           <TableCell
             key={headCell.id}
-            align={'center'}
-            padding={headCell.disablePadding ? 'none' : 'normal'}
+            align={"center"}
+            padding={headCell.disablePadding ? "none" : "normal"}
             sortDirection={orderBy === headCell.id ? order : false}
           >
             <TableSortLabel
               active={orderBy === headCell.id}
-              direction={orderBy === headCell.id ? order : 'asc'}
+              direction={orderBy === headCell.id ? order : "asc"}
               onClick={createSortHandler(headCell.id)}
             >
               {headCell.label}
               {orderBy === headCell.id ? (
                 <Box component="span" sx={visuallyHidden}>
-                  {order === 'desc' ? 'sorted descending' : 'sorted ascending'}
+                  {order === "desc" ? "sorted descending" : "sorted ascending"}
                 </Box>
               ) : null}
             </TableSortLabel>
@@ -117,7 +114,7 @@ export default function EnhancedTableHead(props) {
 
 EnhancedTableHead.propTypes = {
   onRequestSort: PropTypes.func.isRequired,
-  order: PropTypes.oneOf(['asc', 'desc']).isRequired,
+  order: PropTypes.oneOf(["asc", "desc"]).isRequired,
   orderBy: PropTypes.string.isRequired,
   rowCount: PropTypes.number.isRequired,
 };

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

+import {useNavigate} from "react-router-dom";
+import {useDispatch, useSelector} from "react-redux";
+import {Typography} from "@mui/material";
+import { useEffect } from "react";
+import ProjectForm from "../../components/ProjectForm/ProjectForm";
+import { createProject, fetchProjects } from "../../store/actions/projectsActions";
+
+const NewProject = () => {
+    const dispatch = useDispatch();
+    const projects = useSelector(state => state.projects.projects);
+    const navigate = useNavigate();
+    const onSubmit = async (projectData) => {
+        await dispatch(createProject(projectData, navigate));
+    };
+
+    useEffect(()=> {
+        dispatch(fetchProjects());
+    }, [dispatch])
+
+    return (
+        <>
+            <Typography variant="h2">New project</Typography>
+            <ProjectForm projects={projects} onSubmit={onSubmit} />
+        </>
+    );
+};
+
+export default NewProject;
\ No newline at end of file

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

+import { Grid, Typography, Button } from "@mui/material";
+import { Link } from "react-router-dom";
+import { useEffect } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import Loader from "../../components/UI/Loader/Loader";
+import HasAccess from "../../components/UI/HasAccess/HasAccess";
+import { fetchProjects } from "../../store/actions/projectsActions";
+import ProjectsList from "../../components/ProjectsList/ProjectsList";
+
+const Projects = () => {
+    const dispatch = useDispatch();
+    const { projects, loading } = useSelector(state => state.projects.projects);
+    console.log(projects)
+    console.log(loading)
+    useEffect(() => {
+        dispatch(fetchProjects())
+    }, [dispatch]);
+
+
+    return <>
+        {projects?.length > 0 ? (<>
+            <Grid container direction="column" spacing={2}>
+                <Grid
+                    container
+                    item
+                    direction="row"
+                    justifyContent="space-between"
+                    alignItems="center"
+                >
+                    <Grid item>
+                        <Typography variant="h4">
+                            Projects
+                        </Typography>
+                    </Grid>
+                    <HasAccess roles={["superuser", "admin", "user"]} >
+                        <Grid item>
+                            <Button component={Link} to="/projects/add">
+                                Add project
+                            </Button>
+                        </Grid>
+                    </HasAccess>
+                </Grid>
+                <Loader loading={loading} />
+                <ProjectsList projects={projects} />
+            </Grid>
+        </>) :
+            <h1>Созданных проектов нет</h1>
+        }
+    </>
+};
+
+export default Projects;
\ No newline at end of file

planner-front/src/index.js

@@ -7,6 +7,7 @@ import { Provider } from 'react-redux';
 import usersReducer from './store/reducers/usersReducer';
 import tasksReducer from './store/reducers/tasksReducer';
 import axios from './axiosPlanner';
+import projectsReducer from './store/reducers/projectsReducer';
 
 const localStorageMiddleware = ({getState}) => (next) => (action) => {
   const result = next(action);
@@ -25,7 +26,8 @@ const loadFromLocalStorage = () => {
 const store = configureStore({
   reducer: {
     users: usersReducer,
-    tasks: tasksReducer
+    tasks: tasksReducer,
+    projects: projectsReducer
   },
   preloadedState: loadFromLocalStorage(),
   middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(localStorageMiddleware)

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

+export const FETCH_PROJECTS_REQUEST = "FETCH_PROJECTS_REQUEST";
+export const FETCH_PROJECTS_SUCCESS = "FETCH_PROJECTS_SUCCESS";
+export const FETCH_PROJECTS_ERROR = "FETCH_PROJECTS_ERROR";
+export const FETCH_PROJECT_SUCCESS = "FETCH_PROJECT_SUCCESS";
+export const CREATE_PROJECT_SUCCESS = "CREATE_PROJECT_SUCCESS";

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

@@ -8,6 +8,10 @@ export const ADD_NEW_TASK_REQUEST = "ADD_NEW_TASK_REQUEST";
 export const ADD_NEW_TASK_SUCCESS = "ADD_NEW_TASK_SUCCESS";
 export const ADD_NEW_TASK_FAILURE = "ADD_NEW_TASK_FAILURE";
 
+export const FETCH_TASKS_BY_PROJECT_REQUEST = "FETCH_TASKS_BY_PROJECT_REQUEST";
+export const FETCH_TASKS_BY_PROJECT_SUCCESS = "FETCH_TASKS_BY_PROJECT_SUCCESS";
+export const FETCH_TASKS_BY_PROJECT_FAILURE = "FETCH_TASKS_BY_PROJECT_FAILURE";
+
 export const EDIT_TASK_REQUEST = "EDIT_TASK_REQUEST";
 export const EDIT_TASK_SUCCESS = "EDIT_TASK_SUCCESS";
 export const EDIT_TASK_FAILURE = "EDIT_TASK_FAILURE";
@@ -15,3 +19,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/projectsActions.js

+import axios from "../../axiosPlanner";
+import { CREATE_PROJECT_SUCCESS, FETCH_PROJECTS_ERROR, FETCH_PROJECTS_REQUEST, FETCH_PROJECTS_SUCCESS, FETCH_PROJECT_SUCCESS } from "../actionTypes/projectsActionTypes";
+import { showNotification } from "./commonActions";
+
+const fetchProjectsRequest = () => {
+    return {type: FETCH_PROJECTS_REQUEST}
+};
+const fetchProjectsSuccess = (projects) => {
+    return {type: FETCH_PROJECTS_SUCCESS, projects};
+};
+const fetchProjectSuccess = (project) => {
+    return {type: FETCH_PROJECT_SUCCESS, project};
+};
+const fetchProjectsError = (error) => {
+    return {type: FETCH_PROJECTS_ERROR, error};
+}
+
+const createProjectSuccess = () => {
+    return {type: CREATE_PROJECT_SUCCESS};
+};
+
+export const fetchProjects = () => {
+    return async dispatch => {
+        dispatch(fetchProjectsRequest());
+        try {
+            const response = await axios.get("/projects");
+                dispatch(fetchProjectsSuccess(response.data));
+        } catch(e) {
+            dispatch(fetchProjectsError(e));
+        }
+    };
+};
+
+export const fetchProject = (id) => {
+    return async dispatch => {
+        dispatch(fetchProjectsRequest());
+        try {
+            const response = await axios.get("/projects/" + id);
+            dispatch(fetchProjectSuccess(response.data));
+        } catch (e) {
+            dispatch(fetchProjectsError(e));
+        }
+    }
+};
+
+export const createProject = (projectData, navigate) => {
+    return async (dispatch) => {
+        try {
+            await axios.post("/projects", projectData);
+            dispatch(createProjectSuccess());
+            navigate("/");
+            dispatch(showNotification("Проект успешно создан"))
+        } catch (e) {
+            console.log(e);
+            dispatch(showNotification("Не удалось создать проект", "error"))
+        }
+    };
+}
\ No newline at end of file

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

@@ -11,7 +11,11 @@ import {
   FETCH_CALENDAR_TASKS_FAILURE, 
   FETCH_CALENDAR_TASKS_REQUEST, 
   FETCH_CALENDAR_TASKS_SUCCESS,
-  FETCH_ALL_TASKS_SUCCESS} from "../actionTypes/tasksTypes";
+  FETCH_ALL_TASKS_SUCCESS,
+  FETCH_TASKS_BY_PROJECT_SUCCESS,
+  FETCH_TASKS_BY_PROJECT_FAILURE,
+  FETCH_TASKS_BY_PROJECT_REQUEST
+  } from "../actionTypes/tasksTypes";
 import axios from '../../axiosPlanner'
 
 const fetchCalendarTasksRequest = () => {
@@ -65,13 +69,33 @@ 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 addTask = (task) => {
   return async (dispatch, getState) => {
       dispatch(addTaskRequest());
-      const token = getState().users?.user?.token;
+      // 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));
@@ -96,9 +120,7 @@ export const editTask = (task) => {
       dispatch(editTaskRequest());
       // const token = getState().users?.user?.token;
       try {
-        console.log('task' , task)
-        const r=await axios.put("/tasks/", task);
-        console.log(r)
+        await axios.put("/tasks/", task);
         dispatch(editTaskSuccess())
         dispatch(fetchAllTasks())
         dispatch(fetchCalendarTasks())
@@ -134,3 +156,28 @@ export const deleteTask = (taskId) => {
       }
   }
 }
+
+
+const fetchTasksByProjectRequest = () => {
+  return {type: FETCH_TASKS_BY_PROJECT_REQUEST}
+};
+
+const fetchTasksByProjectSuccess = () => {
+  return {type: FETCH_TASKS_BY_PROJECT_SUCCESS}
+};
+
+const fetchTasksByProjectFailure = (error) => {
+  return {type: FETCH_TASKS_BY_PROJECT_FAILURE, error}
+};
+
+export const fetchTasksByProject = (projects) => {
+  return async (dispatch) => {
+      dispatch(fetchTasksByProjectRequest());
+      try {
+        const response =await axios.post("/tasks/project", projects);
+        dispatch(fetchTasksByProjectSuccess(response.data.tasks))
+      } catch (error) {
+        dispatch(fetchTasksByProjectFailure(error.response.data));
+      }
+  }
+}
\ No newline at end of file

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

 import axios from "../../axiosPlanner";
-import { LOGIN_USER_FAILURE, LOGIN_USER_SUCCESS, LOGOUT_USER_FAILURE, LOGOUT_USER_SUCCESS, REGISTER_USER_FAILURE, REGISTER_USER_REQUEST, REGISTER_USER_SUCCESS } from "../actionTypes/actionTypes"
+import { LOGIN_USER_FAILURE, LOGIN_USER_SUCCESS, LOGOUT_USER_FAILURE, LOGOUT_USER_SUCCESS, REGISTER_USER_FAILURE, REGISTER_USER_REQUEST, REGISTER_USER_SUCCESS } from "../actionTypes/userActionTypes"
 import { showNotification } from "./commonActions";
 
 const registerUserRequest = () => {
@@ -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/projectsReducer.js

+import {FETCH_PROJECTS_ERROR, FETCH_PROJECTS_REQUEST, FETCH_PROJECTS_SUCCESS, FETCH_PROJECT_SUCCESS } from "../actionTypes/projectsActionTypes";
+
+const initialState = {
+    projects: [],
+    project: "",
+    loading: false, 
+    error: null
+  };
+  
+  const projectsReducer = (state = initialState, action) => {
+    switch (action.type) {
+      case FETCH_PROJECTS_REQUEST:
+        return {...state, loading: true};
+      case FETCH_PROJECTS_SUCCESS:
+        return {...state, loading: false, projects: action.projects};
+      case FETCH_PROJECTS_ERROR:
+        return {...state, loading: false, error: action.error};
+      case FETCH_PROJECT_SUCCESS:
+          return {...state, loading: false, project: action.project}
+      default:
+        return state;
+    }
+  };
+  
+  export default projectsReducer;
\ No newline at end of file

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

@@ -11,7 +11,12 @@ import {
   DELETE_TASK_SUCCESS,
   DELETE_TASK_REQUEST,
   DELETE_TASK_FAILURE,
-  FETCH_ALL_TASKS_SUCCESS} from "../actionTypes/tasksTypes";
+  FETCH_ALL_TASKS_SUCCESS,
+  EDIT_CALENDAR_TASK,
+  FETCH_TASKS_BY_PROJECT_REQUEST,
+  FETCH_TASKS_BY_PROJECT_SUCCESS,
+  FETCH_TASKS_BY_PROJECT_FAILURE 
+} from "../actionTypes/tasksTypes";
 
 const initialState = {
     calendarTasks: [],
@@ -38,7 +43,8 @@ const tasksReduсer = (state = initialState, action) => {
               const timeEndHour = parseInt(timeEnd.split(':')[0])
               const timeStartMinute = parseInt(timeStart.split(':')[1])
               const timeEndMinute = parseInt(timeEnd.split(':')[1])
-              newArr.push({...task, infoForCell: { 
+              const newObj = {...task, 
+                infoForCell: { 
                 startDay: dayStart, 
                 startHour: timeStartHour, 
                 startMonth: monthStartNumber,
@@ -47,7 +53,8 @@ const tasksReduсer = (state = initialState, action) => {
                 endHour: timeEndHour,
                 endMinute: timeEndMinute,
               }
-              } )
+              }
+              newArr.push(newObj)
               }
             }
           })
@@ -62,6 +69,12 @@ const tasksReduсer = (state = initialState, action) => {
       return {...state, loading: true};
     case ADD_NEW_TASK_FAILURE:
       return {...state, loading: false, error: action.error};
+      case FETCH_TASKS_BY_PROJECT_SUCCESS:
+        return {...state, loading: false, tasks: action.tasks};
+      case FETCH_TASKS_BY_PROJECT_REQUEST:
+        return {...state, loading: true};
+      case FETCH_TASKS_BY_PROJECT_FAILURE:
+        return {...state, loading: false, error: action.error};
     case EDIT_TASK_SUCCESS:
       return {...state, loading: false};
     case EDIT_TASK_REQUEST:

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

-import { REGISTER_USER_REQUEST, REGISTER_USER_SUCCESS, REGISTER_USER_FAILURE, LOGIN_USER_SUCCESS, LOGIN_USER_FAILURE, LOGOUT_USER_SUCCESS } from "../actionTypes/actionTypes";
+import { REGISTER_USER_REQUEST, REGISTER_USER_SUCCESS, REGISTER_USER_FAILURE, LOGIN_USER_SUCCESS, LOGIN_USER_FAILURE, LOGOUT_USER_SUCCESS } from "../actionTypes/userActionTypes";
 
 const initialState = {
     user: null,