Merge branch 'task-99-fix/add_members_correct' into 'development'

Task 99 fix/add members correct

See merge request !72

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,38 +24,36 @@ 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()
-  console.log(users)
+  const dispatch = useDispatch();
+
   const [open, setOpen] = useState(false);
   const handleOpen = () => setOpen(true);
   const handleClose = () => setOpen(false);
   const [state, setState] = useState({
-    displayName: "",
+    // displayName: "",
     roleProject: "",
-    userId: "",
+    user: "",
     projectId: ""
   });
 
  
   const submitFormHandler = (e) => {
     e.preventDefault();
-    let idOfUser = users?.map((user) => (user.displayName === state.displayName) ? user.id : null)
-    let idOfUser1 = users?.map((user) => {
-    console.log(user)
-      return null
-    })
-    console.log(idOfUser1)
-    console.log(idOfUser)
-    console.log("state of submit " + state);
-    let members = {roleProject: state.roleProject, projectId: params.id, userId: idOfUser }
+    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;
   //   const name = e.target.name;
@@ -64,7 +65,7 @@ const MemberForm = ({ onSubmit }) => {
   // };
 
   const memberChangeHandler = (e, value) => {
-    setState(() => { return { ...state, member: value, userId: state.userId} });
+    setState(() => { return { ...state, user: value, projectId: params.id} });
     console.log("memberChangeHandler" + value)
   }
   const roleChangeHandler = (e, value) => {
@@ -73,7 +74,7 @@ const MemberForm = ({ onSubmit }) => {
   }
   return (
     <div >
-      <PersonAddIcon onClick={handleOpen} style={{marginLeft: "30px", marginTop: "-3px"}} >Добавить участника</PersonAddIcon>
+      <PersonAddIcon onClick={handleOpen} style={{marginLeft: "30px", marginTop: "-3px", cursor: 'pointer'}} >Добавить участника</PersonAddIcon>
       <Modal
         open={open}
         onClose={handleClose}
@@ -88,15 +89,13 @@ const MemberForm = ({ onSubmit }) => {
               <Autocomplete
                 id="free-solo-demo"
                 freeSolo
-                options={users?.map((user) => user.displayName)}
+                options={users}
+                getOptionLabel={(item) => item.displayName || ""}
                 onChange={memberChangeHandler}
                 name={"userId"}
-                value={state.userId}
+                value={state.user}
                 renderInput={(params) => <TextField
                   style={{margin: "5px"}}
-                  
-                 
-  
                   label={"Участник"}
                   state={state}
                   {...params} />}
@@ -110,7 +109,6 @@ const MemberForm = ({ onSubmit }) => {
                 renderInput={(params) => <TextField
                   style={{margin: "5px"}}
                   name={"roleProject"}
-                  
                   label={"Роль в проекте"}
                   state={state}
                   {...params} />}

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

@@ -13,7 +13,7 @@ const NewMember = ({members}) => {
 
     const onSubmit = async (memberData) => {
         await dispatch(createMember(memberData, navigate));
-        // navigate("/projects/" + memberData.id)
+        navigate("/projects/" + memberData.projectId)
         console.log("memberData ", memberData)
 
     };

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

@@ -5,4 +5,8 @@ export const FETCH_PROJECTS_ERROR = "FETCH_PROJECTS_ERROR";
 export const FETCH_PROJECT_SUCCESS = "FETCH_PROJECT_SUCCESS";
 export const CREATE_PROJECT_SUCCESS = "CREATE_PROJECT_SUCCESS";
 
-export const CREATE_MEMBER_SUCCESS = "CREATE_MEMBER_SUCCESS";
\ No newline at end of file
+export const CREATE_MEMBER_SUCCESS = "CREATE_MEMBER_SUCCESS";
+
+export const DELETE_MEMBER_REQUEST = "DELETE_MEMBER_REQUEST";
+export const DELETE_MEMBER_SUCCESS = "DELETE_MEMBER_SUCCESS";
+export const DELETE_MEMBER_FAILURE = "DELETE_MEMBER_FAILURE";
\ No newline at end of file

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

 import axios from "../../axiosPlanner";
-import { CREATE_MEMBER_SUCCESS, CREATE_PROJECT_SUCCESS, FETCH_MEMBERS_ERROR, FETCH_MEMBERS_REQUEST, FETCH_MEMBERS_SUCCESS, FETCH_PROJECTS_ERROR, FETCH_PROJECTS_REQUEST, FETCH_PROJECTS_SUCCESS, FETCH_PROJECT_SUCCESS } from "../actionTypes/projectsActionTypes";
+import { CREATE_MEMBER_SUCCESS, CREATE_PROJECT_SUCCESS, DELETE_MEMBER_FAILURE, DELETE_MEMBER_REQUEST, DELETE_MEMBER_SUCCESS, FETCH_MEMBERS_ERROR, FETCH_MEMBERS_REQUEST, FETCH_MEMBERS_SUCCESS, FETCH_PROJECTS_ERROR, FETCH_PROJECTS_REQUEST, FETCH_PROJECTS_SUCCESS, FETCH_PROJECT_SUCCESS } from "../actionTypes/projectsActionTypes";
 import { showNotification } from "./commonActions";
 
 const fetchProjectsRequest = () => {
@@ -23,6 +23,31 @@ const createMemberSuccess = (member) => {
     return {type: CREATE_MEMBER_SUCCESS, member};
 };
 
+const deleteMemberRequest = () => {
+    return {type: DELETE_MEMBER_REQUEST}
+  };
+   
+  const deleteMemberSuccess = () => {
+    return {type: DELETE_MEMBER_SUCCESS}
+  };
+  
+  const deleteMemberFailure = (error) => {
+    return {type: DELETE_MEMBER_FAILURE, error}
+  };
+  
+  export const deleteMember = (memberId) => {
+    return async (dispatch) => {
+        dispatch(deleteMemberRequest());
+        try {
+          await axios.delete(`/tasks/${memberId}`);
+          dispatch(deleteMemberSuccess())
+          dispatch(fetchProject())
+        } catch (error) {
+          dispatch(deleteMemberFailure(error.response.data));
+        }
+    }
+  }
+
 export const fetchProjects = () => {
     return async dispatch => {
         dispatch(fetchProjectsRequest());
@@ -41,7 +66,7 @@ export const fetchProject = (id) => {
         try {
             const response = await axios.get("/projects/" + id);
             dispatch(fetchProjectSuccess(response.data));
-            console.log("fetch project "+response.data)
+            console.log("fetch project ", response.data)
         } catch (e) {
             dispatch(fetchProjectsError(e));
         }

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

-import {FETCH_PROJECTS_ERROR, FETCH_PROJECTS_REQUEST, FETCH_PROJECTS_SUCCESS, FETCH_PROJECT_SUCCESS } from "../actionTypes/projectsActionTypes";
+import {DELETE_MEMBER_FAILURE, DELETE_MEMBER_REQUEST, DELETE_MEMBER_SUCCESS, FETCH_PROJECTS_ERROR, FETCH_PROJECTS_REQUEST, FETCH_PROJECTS_SUCCESS, FETCH_PROJECT_SUCCESS } from "../actionTypes/projectsActionTypes";
 
 const initialState = {
     projects: [],
@@ -17,6 +17,12 @@ const initialState = {
         return {...state, loading: false, error: action.error};
       case FETCH_PROJECT_SUCCESS:
           return {...state, loading: false, project: action.project}
+      case DELETE_MEMBER_SUCCESS:
+          return {...state, loading: false};
+      case DELETE_MEMBER_REQUEST:
+          return {...state, loading: true};
+      case DELETE_MEMBER_FAILURE:
+          return {...state, loading: false, error: action.error};
       default:
         return state;
     }