сохранение для проверки функции редактирования задачи

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

+import * as React from "react";
+import {
+  Box,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableRow,
+  Paper,
+  IconButton,
+  Tooltip,
+  Input,
+} from "@mui/material";
+import { useState, useEffect } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { Done, Edit, NavigateNextOutlined } from "@mui/icons-material";
+import DeleteIcon from "@mui/icons-material/Delete";
+import TaskModal from "../../components/MyTasksCompoments/TaskModal/TaskModal";
+import moment from "moment";
+import CustomTableCell from "../../components/MyTasksCompoments/CustomTableCell";
+import MaterialUIPickers from "../../components/MyTasksCompoments/DateTimePicker/DateTimePicker";
+import BasicSelect from "../../components/UI/Select/Select";
+import { fetchAllTasks, deleteTask,editTask,addTask } from "../../store/actions/tasksActions";
+
+
+export default function NewTaskForm (props) {
+
+   
+    //   const onToggleEditModeDone = (id) => {
+    //     const newTasks = recievedTasks.map((task) => {
+    //       if (task.id === id) {
+    //         return {
+    //           ...task,
+    //           isEditMode: false,
+    //           readOnly: true,
+    //         };
+    //       }
+    //       return task;
+    //     });
+    //     setRecievedTasks(newTasks);
+    //   };
+   
+    
+    const task={
+      id:0,
+      title: "",
+      description: "",
+      createdAt: "",
+      dateTimeStart: null,
+      dateTimeDue: null,
+      accomplish: "",
+      priority: "",
+      author: {
+         name: "",
+         },
+      executors: [
+        { name: "" }
+      ],
+      isEditMode:false,
+      readOnly: true
+    };
+
+    const onToggleEditMode = (id) => {
+        console.log(task)
+            return {
+              ...task,
+              isEditMode: true,
+              readOnly: false,
+              
+            };
+        
+          
+      };
+      console.log(task)
+
+    return (
+        <TableRow hover key={task.id}>
+        <TableCell
+          component="th"
+          scope="row"
+          padding="none"
+        ></TableCell>
+        <CustomTableCell
+          {...{
+            task,
+            name: "priority",
+            value: task.priority,
+            onChange:props.onChange,
+          }}
+        />
+        <CustomTableCell
+          {...{
+            task,
+            name: "createdAt",
+            value: task.createdAt,
+          }}
+        />
+
+        <CustomTableCell
+          {...{
+            task,
+            name: "title",
+            value: task.title,
+            onChange:props.onChange,
+            onModalOpen:props.onModalOpen,
+          }}
+        />
+       
+         {task.isEditMode ? (
+          <BasicSelect
+            items={["project1", "project2", "project3"]}
+            task={task}
+            onChange={props.onChange}
+          />
+        ) : (
+          <CustomTableCell
+          {...{
+            task,
+            name: "project",
+            value: task.project?.title,
+            onChange: props.onChange,
+          }}
+        />
+        )}
+        <CustomTableCell
+          {...{
+            task,
+            name: "author",
+            value: task.author.displayName,
+            onChange: props.onAuthorChange,
+          }}
+        />
+
+        <TableCell>
+          <MaterialUIPickers
+            task={task}
+            name="dateTimeStart"
+            onChange={props.onDateChange}
+          />
+        </TableCell>
+
+        <TableCell>
+          <MaterialUIPickers
+            task={task}
+            name="dateTimeDue"
+            onChange={props.onDateChange}
+          />
+        </TableCell>
+
+        {task.isEditMode ? (
+          <BasicSelect
+            items={["opened", "done", "failed"]}
+            task={task}
+            onChange={props.onChange}
+          />
+        ) : (
+          <CustomTableCell
+            {...{
+              task,
+              name: "accomplish",
+              value: task.accomplish,
+            }}
+          />
+        )}
+
+        <TableCell>
+          {task.isEditMode ? (
+            <IconButton
+              aria-label="done"
+              onClick={() => {props.onToggleEditModeDone(task.id); props.HandleEditTask(task) }}
+            >
+              <Done />
+            </IconButton>
+          ) : (
+            <IconButton
+              aria-label="edit"
+              onClick={() => onToggleEditMode(task.id)}
+            >
+              <Edit />
+            </IconButton>
+          )}
+        </TableCell>
+        <TableCell>
+          <Tooltip title="Delete">
+            <IconButton
+              onClick={(id) => {
+                props.deleteHandle(task.id);
+              }}
+            >
+              <DeleteIcon />
+            </IconButton>
+          </Tooltip>
+        </TableCell>
+      </TableRow>
+    );
+  
+}

planner-front/src/constants.js

-export const apiUrl = "http://localhost:8000";
+export const apiUrl = "http://localhost:8001";
 export const uploadsUrl = `${apiUrl}/uploads`;

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

@@ -24,6 +24,7 @@ import CustomTableCell from "../../components/MyTasksCompoments/CustomTableCell"
 import MaterialUIPickers from "../../components/MyTasksCompoments/DateTimePicker/DateTimePicker";
 import BasicSelect from "../../components/UI/Select/Select";
 import { fetchAllTasks, deleteTask,editTask,addTask } from "../../store/actions/tasksActions";
+import NewTaskForm from "../../components/MyTasksCompoments/NewTaskForm";
 
 
 function descendingComparator(a, b, orderBy) {
@@ -149,6 +150,7 @@ console.log(tasks)
   };
 
   const onToggleEditMode = (id) => {
+    console.log(id)
     const newTasks = recievedTasks.map((task) => {
       if (task.id === id) {
         return {
@@ -162,6 +164,20 @@ console.log(tasks)
     setRecievedTasks(newTasks);
   };
 
+  const onToggleEditModeDone = (id) => {
+    const newTasks = recievedTasks.map((task) => {
+      if (task.id === id) {
+        return {
+          ...task,
+          isEditMode: false,
+          readOnly: true,
+        };
+      }
+      return task;
+    });
+    setRecievedTasks(newTasks);
+  };
+
   const HandleEditTask=(task)=>{
     dispatch(editTask(task))
   }
@@ -264,10 +280,22 @@ console.log(tasks)
                   </TableCell>
                 </TableRow> */}
 
+                 {/* <NewTaskForm
+                 onChange={onChange}
+                 onModalOpen={onModalOpen}
+                 onAuthorChange={onAuthorChange}
+                 onDateChange={onDateChange}
+                 onToggleEditMode={onToggleEditMode}
+                 onToggleEditModeDone={onToggleEditModeDone}
+                 HandleEditTask={HandleEditTask}
+                 deleteHandle={deleteHandle}
+                 /> */}
+
                 {stableSort(recievedTasks, getComparator(order, orderBy))
                   .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
                   .map((task, index) => {
                     return (
+
                       <TableRow hover key={task.id}>
                         <TableCell
                           component="th"
@@ -311,7 +339,7 @@ console.log(tasks)
                           {...{
                             task,
                             name: "project",
-                            value: task.project,
+                            value: task.project?.title,
                             onChange: onChange,
                           }}
                         />
@@ -361,7 +389,7 @@ console.log(tasks)
                           {task.isEditMode ? (
                             <IconButton
                               aria-label="done"
-                              onClick={() => {onToggleEditMode(task.id); HandleEditTask(task) }}
+                              onClick={() => {onToggleEditModeDone(task.id); HandleEditTask(task) }}
                             >
                               <Done />
                             </IconButton>