Merge branch 'task-118-feature/delete_project_front' into 'development'

Task 118 feature/delete project front

See merge request !96

planner-api/src/routers/projects.ts

@@ -92,8 +92,8 @@ router.get("/:id",async (req:Request, res:Response): Promise<Response> => {
 })
 
 /** Delete project by project ID*/
-router.delete('/:projectId',authAdminProject,async (req: Request, res: Response):Promise<Response>=>{
-    const projectId = req.params.projectId;
+router.delete('/',authAdminProject,async (req: Request, res: Response):Promise<Response>=>{
+    const {projectId} = req.body; 
     await myDataSource
     .createQueryBuilder()
     .delete()

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

-import { Card, CardActions, CardContent, Grid, IconButton } from "@mui/material";
+import { Button, Card, CardActions, CardContent, Grid, IconButton } from "@mui/material";
 import { Link } from "react-router-dom";
 import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
 import { useDispatch, useSelector } from "react-redux";
 import DeleteIcon from "@mui/icons-material/Delete";
+import { deleteProject } from "../../../store/actions/projectsActions";
 
-const ProjectItem = ({ title, tasks, id }) => {
+const ProjectItem = ({ title, tasks, projectId }) => {
     const user = useSelector(state => state.users.user);
     const dispatch = useDispatch();
+
     console.log(user)
 
+    const deleteHandle = (projectId) => {
+        console.log("project id", projectId)
+        dispatch(deleteProject(projectId))
+    };
+
     return <>
         <Grid item xs={12} sm={12} md={6} lg={4}>
             <Card>
@@ -23,17 +30,15 @@ const ProjectItem = ({ title, tasks, id }) => {
                     </strong>
                 </CardContent>
                 <CardActions>
-                    <IconButton component={Link} to={"/projects/" + id}>
+                    {(title !== "Личные дела") ? <Button onClick={() => {
+                        deleteHandle(projectId);
+                    }} variant="outlined" startIcon={<DeleteIcon />}>
+                        Delete
+                    </Button> : null}
+                    <IconButton component={Link} to={"/projects/" + projectId}>
                         <ArrowForwardIcon />
                     </IconButton>
-                    <IconButton
-                        onClick={(id) => {
-                            // deleteHandle(userId);
-                        }}
-                    > 
-                    {(title !== "Личные дела") ? 
-                    <DeleteIcon /> : null}
-                    </IconButton>
+
                 </CardActions>
             </Card>
         </Grid>

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

-import { Card, CardActions, CardContent, Grid, IconButton, Tooltip } from "@mui/material";
-import { Link, useParams } from "react-router-dom";
-import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
-import { useDispatch, useSelector } from "react-redux";
+import { Card, CardContent, Grid, IconButton, Tooltip } from "@mui/material";
+import { useParams } from "react-router-dom";
+import { useDispatch } from "react-redux";
 import DeleteIcon from "@mui/icons-material/Delete";
 import { deleteMember } from "../../../store/actions/projectsActions";
 
 const ProjectMembersItem = ({ displayName, roleProject, id, roleProjectOfAuthor, userId, members, authorOfProject }) => {
     console.log(displayName)
     const dispatch = useDispatch();
-    const user = useSelector(state => state.users)
     let params = useParams()
     console.log(members)
     console.log(userId)
-    const { projects, project } = useSelector(state => state.projects);
 
     const deleteHandle = (userId, projectId) => {
-        if (members.length > 1) {
         dispatch(deleteMember(userId, params.id))
-        } else {
-            alert("Нельзя удалить автора проекта")
-        }
     };
 
     return <>

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

@@ -13,7 +13,7 @@ const ProjectsList = ({projects}) => {
                     createdAt={project.createdAt}
                     dateDue={project.dateDue}
                     admin={project.admin}
-                    id={project.id}
+                    projectId={project.id}
                     key={project.id}
                 />
             })}

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

@@ -8,6 +8,7 @@ import { fetchUsers } from "../../store/actions/usersActions";
 import ProjectMembersList from "../../components/ProjectComponents/ProjectMembersList/ProjectMembersList";
 import NewMember from "../NewMember/NewMember";
 
+
 const FullProject = () => {
 
     const { projects, project } = useSelector(state => state.projects);
@@ -34,7 +35,7 @@ const FullProject = () => {
     return <>
         <Grid item xs={12} sm={12} md={6} lg={4}>
             <Card>
-                <h2>Проект - {project?.project?.title}</h2>
+                <h2>Проект - {project?.project?.title} </h2>
                 <CardContent>
                     <strong>
                         <br></br>
@@ -54,13 +55,11 @@ const FullProject = () => {
                     </strong>
                     <strong>
                         <br></br>
-                        <div style={{display: 'flex', direction: 'column'}}>
+                        <div style={{ display: 'flex', direction: 'column' }}>
                             Участники проекта:  {(project?.project?.members[0]?.user.displayName === user.displayName) ? <NewMember members={project?.project?.members} /> : null}
-                        
-                        
                         </div>
 
-                        <ProjectMembersList users={users} project={project} members={project?.project?.members} roleProjectOfAuthor={project?.project?.members[0]?.roleProject} authorOfProject={project?.project?.members[0]?.user.displayName}/>
+                        <ProjectMembersList users={users} project={project} members={project?.project?.members} roleProjectOfAuthor={project?.project?.members[0]?.roleProject} authorOfProject={project?.project?.members[0]?.user.displayName} />
                     </strong>
                     <strong>
                         <br></br>

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

@@ -12,3 +12,7 @@ export const DELETE_MEMBER_SUCCESS = "DELETE_MEMBER_SUCCESS";
 export const DELETE_MEMBER_FAILURE = "DELETE_MEMBER_FAILURE";
 
 export const FETCH_ALL_USER_PROJECTS_SUCCESS = "FETCH_ALL_USER_PROJECTS_SUCCESS";
+
+export const DELETE_PROJECT_REQUEST = "DELETE_PROJECT_REQUEST";
+export const DELETE_PROJECT_SUCCESS = "DELETE_PROJECT_SUCCESS";
+export const DELETE_PROJECT_FAILURE = "DELETE_PROJECT_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, DELETE_MEMBER_FAILURE, DELETE_MEMBER_REQUEST, DELETE_MEMBER_SUCCESS, FETCH_ALL_USER_PROJECTS_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, DELETE_PROJECT_FAILURE, DELETE_PROJECT_REQUEST, DELETE_PROJECT_SUCCESS, FETCH_ALL_USER_PROJECTS_SUCCESS, FETCH_PROJECTS_ERROR, FETCH_PROJECTS_REQUEST, FETCH_PROJECTS_SUCCESS, FETCH_PROJECT_SUCCESS } from "../actionTypes/projectsActionTypes";
 import { showNotification } from "./commonActions";
 
 const fetchProjectsRequest = () => {
-    return {type: FETCH_PROJECTS_REQUEST}
+    return { type: FETCH_PROJECTS_REQUEST }
 };
 const fetchProjectsSuccess = (projects) => {
-    return {type: FETCH_PROJECTS_SUCCESS, projects};
+    return { type: FETCH_PROJECTS_SUCCESS, projects };
 };
 const fetchProjectsError = (error) => {
-    return {type: FETCH_PROJECTS_ERROR, error};
+    return { type: FETCH_PROJECTS_ERROR, error };
 }
 const fetchProjectSuccess = (project) => {
-    return {type: FETCH_PROJECT_SUCCESS, project};
+    return { type: FETCH_PROJECT_SUCCESS, project };
 };
 
 const createProjectSuccess = () => {
-    return {type: CREATE_PROJECT_SUCCESS};
+    return { type: CREATE_PROJECT_SUCCESS };
 };
 
 const createMemberSuccess = (member) => {
-    return {type: CREATE_MEMBER_SUCCESS, member};
+    return { type: CREATE_MEMBER_SUCCESS, member };
 };
 
 const deleteMemberRequest = () => {
-    return {type: DELETE_MEMBER_REQUEST}
-  };
+    return { type: DELETE_MEMBER_REQUEST }
+};
 
-  const deleteMemberSuccess = () => {
-    return {type: DELETE_MEMBER_SUCCESS}
-  };
+const deleteMemberSuccess = () => {
+    return { type: DELETE_MEMBER_SUCCESS }
+};
 
-  const deleteMemberFailure = (error) => {
-    return {type: DELETE_MEMBER_FAILURE, error}
-  };
+const deleteMemberFailure = (error) => {
+    return { type: DELETE_MEMBER_FAILURE, error }
+};
 
-  export const deleteMember = (memberId, projectId) => {
+const deleteProjectRequest = () => {
+    return { type: DELETE_PROJECT_REQUEST }
+};
+
+const deleteProjectSuccess = () => {
+    return { type: DELETE_PROJECT_SUCCESS }
+};
+
+const deleteProjectFailure = (error) => {
+    return { type: DELETE_PROJECT_FAILURE, error }
+};
+export const deleteMember = (memberId, projectId) => {
     return async (dispatch) => {
         dispatch(deleteMemberRequest());
         try {
-          const response = await axios.delete(`/projects/remove-user/${memberId}`, { data: { projectId: projectId}});
+            const response = await axios.delete(`/projects/remove-user/${memberId}`, { data: { projectId: projectId } });
             console.log("deleteMember ", response.data)
             dispatch(deleteMemberSuccess())
             dispatch(fetchProject(projectId))
@@ -48,15 +59,28 @@ const deleteMemberRequest = () => {
             dispatch(deleteMemberFailure(error.response.data));
         }
     }
-  }
+}
 
+export const deleteProject = (projectId, projects) => {
+    return async (dispatch) => {
+        dispatch(deleteProjectRequest());
+        try {
+            const response = await axios.delete('/projects', { data: { projectId: projectId } });
+            console.log("deleteMember ", response.data)
+            dispatch(deleteProjectSuccess())
+            dispatch(fetchProjects(projects))
+        } catch (error) {
+            dispatch(deleteProjectFailure(error.response.data));
+        }
+    }
+}
 export const fetchProjects = () => {
     return async dispatch => {
         dispatch(fetchProjectsRequest());
         try {
             const response = await axios.get("/projects/my");
             dispatch(fetchProjectsSuccess(response.data));
-        } catch(e) {
+        } catch (e) {
             dispatch(fetchProjectsError(e));
         }
     };
@@ -94,7 +118,7 @@ export const createMember = (memberData, navigate) => {
     return async (dispatch) => {
         try {
             console.log(memberData)
-           const response = await axios.post("/projects/add-user", memberData);
+            await axios.post("/projects/add-user", memberData);
             dispatch(createMemberSuccess());
             console.log(memberData)
             navigate("/projects/")
@@ -107,7 +131,7 @@ export const createMember = (memberData, navigate) => {
 }
 
 const fetchAllUserProjectsSuccess = (projects) => {
-    return {type: FETCH_ALL_USER_PROJECTS_SUCCESS, projects};
+    return { type: FETCH_ALL_USER_PROJECTS_SUCCESS, projects };
 };
 
 export const fetchAllUserProjects = () => {

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

-import {DELETE_MEMBER_FAILURE, DELETE_MEMBER_REQUEST, DELETE_MEMBER_SUCCESS, FETCH_ALL_USER_PROJECTS_SUCCESS, 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, DELETE_PROJECT_FAILURE, DELETE_PROJECT_REQUEST, DELETE_PROJECT_SUCCESS, FETCH_ALL_USER_PROJECTS_SUCCESS, FETCH_PROJECTS_ERROR, FETCH_PROJECTS_REQUEST, FETCH_PROJECTS_SUCCESS, FETCH_PROJECT_SUCCESS } from "../actionTypes/projectsActionTypes";
 
 const initialState = {
     allUserProjects: [],
@@ -24,6 +24,12 @@ const initialState = {
           return {...state, loading: true};
       case DELETE_MEMBER_FAILURE:
           return {...state, loading: false, error: action.error};
+      case DELETE_PROJECT_SUCCESS:
+          return {...state, loading: false};
+      case DELETE_PROJECT_REQUEST:
+          return {...state, loading: true};
+      case DELETE_PROJECT_FAILURE:
+          return {...state, loading: false, error: action.error};
       case FETCH_ALL_USER_PROJECTS_SUCCESS:
           return {...state, loading: false, allUserProjects: action.projects}
       default: