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

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

 import { Box, Button, Grid, Modal } from "@mui/material";
 import { useState } from "react";
-import { useSelector } from "react-redux";
+import { useSelector, useDispatch } from "react-redux";
 import FormElement from "../UI/Form/FormElement/FormElement";
 import { Typography } from "@mui/material";
 import TextField from '@mui/material/TextField';
@@ -8,6 +8,9 @@ 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";
 
 const style = {
   position: 'relative',
@@ -21,10 +24,11 @@ const style = {
   p: 4,
 };
 
-const MemberForm = ({ onSubmit }) => {
+const MemberForm = ({ onSubmit, members }) => {
   const users = useSelector(state => state.users.users)
   const [role, setRole] = useState([{ role: "user" }, { role: "admin" }, { role: "watcher" }])
   const params = useParams()
+  const dispatch = useDispatch();
 
   const [open, setOpen] = useState(false);
   const handleOpen = () => setOpen(true);
@@ -39,21 +43,16 @@ const MemberForm = ({ onSubmit }) => {
  
   const submitFormHandler = (e) => {
     e.preventDefault();
-    // let idOfUser = users?.map((user) => (user.displayName === state.displayName) ? user.id : null)
-    // let idOfUser = users?.map((user) => {
-    // console.log(user)
-    //   return (user.id === state.displayName.id) ? user.id : null
-    // })
-    // console.log(idOfUser)
-    // console.log(idOfUser)
-    console.log("state of submit " + state);
     let members = {roleProject: state.roleProject, projectId: params.id, userId: state.user.id}
     console.log(members);
     onSubmit(members);
     setOpen(false);
-
   };
   console.log(state);
+
+  useEffect(() => {
+    dispatch(fetchProject(params.id))
+}, [members, dispatch, params]);
   // console.log(user)
   // const onChange = (e) => {
   //   const value = e.target.value;