Реализовано удаление участника проекта

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

 import { Box, Button, Grid, Modal } from "@mui/material";
 import { useState } from "react";
 import { useSelector, useDispatch } from "react-redux";
-import FormElement from "../UI/Form/FormElement/FormElement";
 import { Typography } from "@mui/material";
 import TextField from '@mui/material/TextField';
-import Stack from '@mui/material/Stack';
 import Autocomplete from '@mui/material/Autocomplete';
 import { useParams } from "react-router-dom";
 import PersonAddIcon from '@mui/icons-material/PersonAdd';
-import { fetchUsers } from "../../store/actions/usersActions";
 import { useEffect } from "react";
 import { fetchProject } from "../../store/actions/projectsActions";
 
@@ -34,16 +31,15 @@ const MemberForm = ({ onSubmit, members }) => {
   const handleOpen = () => setOpen(true);
   const handleClose = () => setOpen(false);
   const [state, setState] = useState({
-    // displayName: "",
     roleProject: "",
     user: "",
     projectId: ""
   });
 
- 
+
   const submitFormHandler = (e) => {
     e.preventDefault();
-    let members = {roleProject: state.roleProject, projectId: params.id, userId: state.user.id}
+    let members = { roleProject: state.roleProject, projectId: params.id, userId: state.user.id }
     console.log(members);
     onSubmit(members);
     setOpen(false);
@@ -52,20 +48,11 @@ const MemberForm = ({ onSubmit, members }) => {
 
   useEffect(() => {
     dispatch(fetchProject(params.id))
-}, []);
-  // console.log(user)
-  // const onChange = (e) => {
-  //   const value = e.target.value;
-  //   const name = e.target.name;
-  // const newState= { ...state, [name]: value };
-  //   console.log("newState " + newState)
-  //   console.log("e.target " + e.target)
-  //   console.log("e " + e)
-  //   setState(newState);
-  // };
+  }, [params]);
+
 
   const memberChangeHandler = (e, value) => {
-    setState(() => { return { ...state, user: value, projectId: params.id} });
+    setState(() => { return { ...state, user: value, projectId: params.id } });
     console.log("memberChangeHandler" + value)
   }
   const roleChangeHandler = (e, value) => {
@@ -74,18 +61,18 @@ const MemberForm = ({ onSubmit, members }) => {
   }
   return (
     <div >
-      <PersonAddIcon onClick={handleOpen} style={{marginLeft: "30px", marginTop: "-3px", cursor: 'pointer'}} >Добавить участника</PersonAddIcon>
+      <PersonAddIcon onClick={handleOpen} style={{ marginLeft: "30px", marginTop: "-3px", cursor: 'pointer' }} >Добавить участника</PersonAddIcon>
       <Modal
         open={open}
         onClose={handleClose}
         aria-labelledby="modal-modal-title"
         aria-describedby="modal-modal-description"
-       
+
       >
         <Box sx={style}>
-          <form  onSubmit={submitFormHandler}>
+          <form onSubmit={submitFormHandler}>
             <Grid container direction="column" spacing={2}>
-              <Typography variant="h5" style={{margin: "5px", textAlign: "center"}} >Новый участник</Typography>
+              <Typography variant="h5" style={{ margin: "5px", textAlign: "center" }} >Новый участник</Typography>
               <Autocomplete
                 id="free-solo-demo"
                 freeSolo
@@ -95,7 +82,7 @@ const MemberForm = ({ onSubmit, members }) => {
                 name={"userId"}
                 value={state.user}
                 renderInput={(params) => <TextField
-                  style={{margin: "5px"}}
+                  style={{ margin: "5px" }}
                   label={"Участник"}
                   state={state}
                   {...params} />}
@@ -107,7 +94,7 @@ const MemberForm = ({ onSubmit, members }) => {
                 value={state.roleProject}
                 onChange={roleChangeHandler}
                 renderInput={(params) => <TextField
-                  style={{margin: "5px"}}
+                  style={{ margin: "5px" }}
                   name={"roleProject"}
                   label={"Роль в проекте"}
                   state={state}
@@ -118,7 +105,6 @@ const MemberForm = ({ onSubmit, members }) => {
                   type="submit"
                   color="primary"
                   variant="contained"
-
                 >
                   Create
                 </Button>

planner-front/src/components/ProjectComponents/ProjectMembersList/ProjectMembersList.js

@@ -12,7 +12,7 @@ const ProjectMembersList = ({members, roleProjectOfAuthor}) => {
                     id={member.id}
                     key={member.id}
                     roleProjectOfAuthor={roleProjectOfAuthor}
-                    userId={member.user.id}
+                    userId={member?.user?.id}
                 />
             })}
         </Grid>