#141 Добавил функцию удаления

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 { Typography } from "@mui/material";
-import TextField from '@mui/material/TextField';
-import Autocomplete from '@mui/material/Autocomplete';
-import { useParams } from "react-router-dom";
-import PersonAddIcon from '@mui/icons-material/PersonAdd';
-import { useEffect } from "react";
-import { fetchProject } from "../../store/actions/projectsActions";
-
-const style = {
-  position: 'relative',
-  top: '50%',
-  left: '50%',
-  transform: 'translate(-50%, -50%)',
-  width: 400,
-  bgcolor: 'background.paper',
-  border: '2px solid #000',
-  boxShadow: 24,
-  p: 4,
-};
-
-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);
-  const handleClose = () => setOpen(false);
-  const [state, setState] = useState({
-    roleProject: "",
-    user: "",
-    projectId: ""
-  });
-
-
-  const submitFormHandler = (e) => {
-    e.preventDefault();
-    let members = { roleProject: state.roleProject, projectId: params.id, userId: state.user.id }
-    console.log(members);
-    onSubmit(members);
-    setOpen(false);
-  };
-
-  useEffect(() => {
-    dispatch(fetchProject(params.id))
-  }, [params]);
-
-
-  const memberChangeHandler = (e, value) => {
-    setState(() => { return { ...state, user: value, projectId: params.id } });
-    console.log("memberChangeHandler" + value)
-  }
-  const roleChangeHandler = (e, value) => {
-    setState(() => { return { ...state, roleProject: value } });
-    console.log(value)
-  }
-  return (
-    <div >
-      <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}>
-            <Grid container direction="column" spacing={2}>
-              <Typography variant="h5" style={{ margin: "5px", textAlign: "center" }} >Новый участник</Typography>
-              <Autocomplete
-                id="free-solo-demo"
-                freeSolo
-                options={users}
-                getOptionLabel={(item) => (members[0]?.user?.displayName !== item.displayName) ? (item.displayName || "") : ""}
-                onChange={memberChangeHandler}
-                name={"userId"}
-                value={state.user}
-                renderInput={(params) => <TextField
-                  style={{ margin: "5px" }}
-                  label={"Участник"}
-                  state={state}
-                  {...params} />}
-              />
-              <Autocomplete
-                id="free-solo-demo"
-                freeSolo
-                options={role?.map((role) => role.role)}
-                value={state.roleProject}
-                onChange={roleChangeHandler}
-                renderInput={(params) => <TextField
-                  style={{ margin: "5px" }}
-                  name={"roleProject"}
-                  label={"Роль в проекте"}
-                  state={state}
-                  {...params} />}
-              />
-              <Grid item>
-                <Button
-                  type="submit"
-                  color="primary"
-                  variant="contained"
-                >
-                  Create
-                </Button>
-              </Grid>
-            </Grid>
-          </form>
-        </Box>
-      </Modal>
-    </div>
-  );
-
-};
-
-export default MemberForm;
\ No newline at end of file

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

@@ -5,7 +5,7 @@ import CustomAutocomplete from "../../UI/CustomAutocomplete/CustomAutocomplete";
 
 
 
-function NewMemberModalContent({ users, onChangeNewMemberHandler, onChangeRoleHandler, newMember, handleClose, createNewUser }) {
+function NewMemberModalContent({ users, onChangeNewMemberHandler, onChangeRoleHandler, newMember, handleClose, createNewMemberHandler }) {
   return (<>
     <CustomAutocomplete
       name={'newMember'}
@@ -27,7 +27,7 @@ function NewMemberModalContent({ users, onChangeNewMemberHandler, onChangeRoleHa
       style={{ marginBottom: '15px' }}
     />
     <div style={{ display: 'flex', justifyContent: 'space-between', margin: '10px 0' }}>
-      <Button onClick={() => { createNewUser() }} >Выбрать</Button>
+      <Button onClick={() => { createNewMemberHandler() }} >Выбрать</Button>
       <Button onClick={() => handleClose()}>Отмена</Button>
     </div>
 

planner-front/src/components/ProjectComponents/ProjectUsersColumnsWrapper/ProjectUsersColumn/ProjectUsersColumn.js

@@ -13,14 +13,16 @@ const styleColumn = {
 }
 
 
-const ProjectUsersColumn = ({ role, members }) => {
+const ProjectUsersColumn = ({ role, members, deleteMemberHandler }) => {
   return (
     <Box sx={styleColumn}>
       <ColumnTitle text={role.text} />
 
       <UsersList
         role={role}
-        members={members}>
+        members={members}
+        deleteMemberHandler={deleteMemberHandler}
+      >
       </UsersList>
     </Box>
   );

planner-front/src/components/ProjectComponents/ProjectUsersColumnsWrapper/ProjectUsersColumn/UsersList/UserItem/UserItem.js

@@ -12,12 +12,14 @@ const style = {
     alignItems: 'center'
 }
 
-const ProjectMembersItem = ({ user }) => {
+const ProjectMembersItem = ({ user, deleteMemberHandler }) => {
 
     return <>
         <Grid sx={style}>
             {user?.displayName}
             <DeleteIcon
+                sx={{cursor: 'pointer'}}
+                onClick={deleteMemberHandler}
             />
         </Grid>
     </>

planner-front/src/components/ProjectComponents/ProjectUsersColumnsWrapper/ProjectUsersColumn/UsersList/UserList.js

@@ -9,7 +9,7 @@ const styleList = {
   alignItems: 'center',
 }
 
-const UsersList = ({ role, members }) => {
+const UsersList = ({ role, members, deleteMemberHandler }) => {
   return (
     <Box sx={styleList}>
       {members.map((member) => {
@@ -18,6 +18,7 @@ const UsersList = ({ role, members }) => {
             <UserItem
               key={member.id}
               user={member?.user}
+              deleteMemberHandler={() => { deleteMemberHandler(member?.user?.id) }}
             />
           )
         } else {

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

@@ -13,7 +13,7 @@ const style = {
 }
 
 
-const ProjectUsersColumnsWrapper = ({ members }) => {
+const ProjectUsersColumnsWrapper = ({ members, deleteMemberHandler }) => {
   return (
     <Box sx={style} justifyContent={'space-between'}>
       {projectRoles.map((role, i) => {
@@ -22,6 +22,7 @@ const ProjectUsersColumnsWrapper = ({ members }) => {
             key={i}
             role={role}
             members={members}
+            deleteMemberHandler={deleteMemberHandler}
           />
         )
       })}

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

@@ -2,7 +2,7 @@ import { Grid } from "@mui/material";
 import { useParams } from "react-router-dom";
 import { useSelector, useDispatch } from "react-redux";
 import { useCallback, useEffect, useMemo, useState } from "react";
-import { createMember, fetchProject } from "../../store/actions/projectsActions";
+import { createMember, deleteMember, fetchProject } from "../../store/actions/projectsActions";
 import { fetchUsers, fetchUsersAllFields } from "../../store/actions/usersActions";
 import ProjectUsersColumnsWrapper from "../../components/ProjectComponents/ProjectUsersColumnsWrapper/ProjectUsersColumnsWrapper";
 import ProjectInfo from "../../components/ProjectComponents/ProjectInfo/ProjectInfo";
@@ -29,6 +29,14 @@ const FullProject = () => {
         return project?.project?.members || []
     }, [project])
 
+    const onChangeRoleHandler = useCallback((e, value) => {
+        setNewMember((prevState) => { return { ...prevState, roleProject: value?.value } });
+    }, []);
+
+    const onChangeNewMemberHandler = useCallback((e, value) => {
+        setNewMember((prevState) => { return { ...prevState, userId: value?.id } });
+    }, []);
+
     const handleOpen = useCallback(async () => {
         setModal(true)
     }, [])
@@ -38,19 +46,14 @@ const FullProject = () => {
         setNewMember(null)
     }, [])
 
-    const createNewUser = useCallback( async ()=>{
-        await dispatch(createMember({...newMember, projectId: project?.project?.id}))
+    const createNewMemberHandler = useCallback(()=>{
+        dispatch(createMember({...newMember, projectId: project?.project?.id}))
         setModal(false)
-        await dispatch(fetchProject(params.id))
-    }, [dispatch, newMember, project?.project?.id, params.id])
+    }, [dispatch, newMember, project?.project?.id])
 
-    const onChangeRoleHandler = useCallback((e, value) => {
-        setNewMember((prevState) => { return { ...prevState, roleProject: value?.value } });
-    }, []);
-
-    const onChangeNewMemberHandler = useCallback((e, value) => {
-        setNewMember((prevState) => { return { ...prevState, userId: value?.id } });
-    }, []);
+    const deleteMemberHandler = useCallback((id)=>{
+        dispatch(deleteMember(id, project?.project?.id))
+    }, [dispatch, project?.project?.id])
 
     return <>
         <Grid>
@@ -62,6 +65,7 @@ const FullProject = () => {
 
             <ProjectUsersColumnsWrapper
                 members={members}
+                deleteMemberHandler={deleteMemberHandler}
             />
 
             <DefaultModal
@@ -74,7 +78,7 @@ const FullProject = () => {
                     onChangeRoleHandler={onChangeRoleHandler}
                     newMember={newMember}
                     handleClose={handleClose}
-                    createNewUser={createNewUser}
+                    createNewMemberHandler={createNewMemberHandler}
                 >
 
                 </NewMemberModalContent>

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

@@ -51,9 +51,9 @@ export const deleteMember = (memberId, projectId) => {
     return async (dispatch) => {
         dispatch(deleteMemberRequest());
         try {
-            await axios.delete(`/projects/remove-user/${memberId}`, { data: { projectId: projectId } });
+            await axios.delete(`/projects/remove-user/${memberId}`, {data: {projectId: projectId}});
             dispatch(deleteMemberSuccess())
-            dispatch(fetchProject(projectId))
+            await dispatch(fetchProject(projectId))
         } catch (error) {
             dispatch(deleteMemberFailure(error.response.data));
         }
@@ -118,6 +118,7 @@ export const createMember = (memberData) => {
         try {
             await axios.post("/projects/add-user", memberData);
             dispatch(createMemberSuccess());
+            await dispatch(fetchProject(memberData?.projectId))
         } catch (e) {
             dispatch(fetchProjectsError(e));
         }