#142 Реализовал удаление, добавил валидации

planner-front/src/components/ProjectsComponents/NewProjectModalContent/NewProjectModalContent.js

@@ -2,6 +2,7 @@ import { Button } from "@mui/material";
 import { Box } from "@mui/system";
 import { memo } from "react";
 import FormElement from "../../UI/Form/FormElement/FormElement"
+import { isValidate } from "./helpers";
 
 
 const NewProjectModalContent = ({ inputChangeHandler, projectTitle, createNewProjectHandler, handleClose }) => {
@@ -20,6 +21,7 @@ const NewProjectModalContent = ({ inputChangeHandler, projectTitle, createNewPro
         color="primary"
         variant="outlined"
         onClick={()=>{createNewProjectHandler()}}
+        disabled={!isValidate(projectTitle)}
       >
         Создать
       </Button>

planner-front/src/components/ProjectsComponents/NewProjectModalContent/helpers.js

+export const isValidate = (title) => {
+  if (!title) return false
+  return true
+}
\ No newline at end of file

planner-front/src/components/ProjectsComponents/ProjectsWrapper/ProjectsList/ProjectItem/ProjectItem.js

-import {Grid, Typography } from "@mui/material";
+import {Box, Grid, Typography } from "@mui/material";
 import { useSelector } from "react-redux";
 import { memo, useMemo } from "react";
 import DeleteButton from "../../../../UI/DeleteButton/DeleteButton";
@@ -7,9 +7,11 @@ import ArrowIncrementButton from "../../../../UI/ArrowIncrementButton/ArrowIncre
 const styleBlock = {
     border: '2px solid black',
     borderRadius: '5px',
-    width: '100%',
-    padding: '15px',
-    height: '10%',
+    width: '92%',
+    padding: '10px',
+    display: 'flex', 
+    justifyContent: 'space-between',
+    alignItems: 'center'
 }
 
 const styleText = {
@@ -17,7 +19,7 @@ const styleText = {
     fontWeight: '600',
 }
 
-const ProjectItem = ({ title, members, onClickProjectHandler, onClickGoToSpecificProjectHandler }) => {
+const ProjectItem = ({ title, members, onClickProjectHandler, onClickGoToSpecificProjectHandler, deleteProjectHandler }) => {
 
     const { user } = useSelector(state => state.users);
     const currentRoleInProject = useMemo(() => {
@@ -25,20 +27,20 @@ const ProjectItem = ({ title, members, onClickProjectHandler, onClickGoToSpecifi
     }, [members, user.id])
 
     return <>
-        <Grid item container xs={12} onClick={onClickProjectHandler} sx={styleBlock} justifyContent={'space-between'} alignItems={'center'}>
-            <Grid item>
+        <Box onClick={onClickProjectHandler} sx={styleBlock}>
+            <Box>
                 <Typography sx={styleText}>
                     Проект: {title}
                 </Typography>
                 <Typography sx={styleText}>
                     Роль в проекте: {currentRoleInProject}
                 </Typography>
-            </Grid>
-            <Grid item>
-                <DeleteButton />
+            </Box>
+            <Box>
+                {currentRoleInProject === 'admin' ? <DeleteButton onClick={deleteProjectHandler}/> : null}
                 <ArrowIncrementButton onClick={onClickGoToSpecificProjectHandler}/>
-            </Grid>
-        </Grid>
+            </Box>
+        </Box>
     </>
 };
 

planner-front/src/components/ProjectsComponents/ProjectsWrapper/ProjectsList/ProjectsList.js

-import {Grid} from "@mui/material";
+import {Box} from "@mui/material";
 import { memo } from "react";
 import ProjectItem from "./ProjectItem/ProjectItem";
 
-const ProjectsList = ({projects, onClickProjectHandler, onClickGoToSpecificProjectHandler}) => {
+const style = {height: '79vh', overflow: 'auto', overflowX: 'hidden', display: 'flex', flexDirection: 'column', gap: '10px'}
+
+const ProjectsList = ({projects, onClickProjectHandler, onClickGoToSpecificProjectHandler, deleteProjectHandler}) => {
     return (
-        <Grid item container gap={3} sx={{ height: '79vh', overflow: 'auto', overflowX: 'hidden'}}>
+        <Box sx={style}>
             {projects?.map(project => {
                 return <ProjectItem
                     title={project.title}
@@ -12,9 +14,10 @@ const ProjectsList = ({projects, onClickProjectHandler, onClickGoToSpecificProje
                     key={project.id}
                     onClickProjectHandler={()=>{onClickProjectHandler(project)}}
                     onClickGoToSpecificProjectHandler={(e)=>{onClickGoToSpecificProjectHandler(e, project.id)}}
+                    deleteProjectHandler={(e)=>{deleteProjectHandler(e, project.id)}}
                 />
             })}
-        </Grid>
+        </Box>
     );
 };
 

planner-front/src/components/ProjectsComponents/ProjectsWrapper/ProjectsWrapper.js

@@ -10,7 +10,7 @@ const style = {
   marginBottom: '10px',
 }
 
-const ProjectsWrapper = ({ onClickProjectHandler, projects, onClickGoToSpecificProjectHandler, handleOpen }) => {
+const ProjectsWrapper = ({ onClickProjectHandler, projects, onClickGoToSpecificProjectHandler, handleOpen, deleteProjectHandler }) => {
 
 
   return <>
@@ -24,6 +24,7 @@ const ProjectsWrapper = ({ onClickProjectHandler, projects, onClickGoToSpecificP
         projects={projects} 
         onClickProjectHandler={onClickProjectHandler} 
         onClickGoToSpecificProjectHandler={onClickGoToSpecificProjectHandler}
+        deleteProjectHandler={deleteProjectHandler}
       />
     </Grid>
 

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

 import { Grid } from "@mui/material";
 import { useCallback, useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
-import { createProject, fetchProjects } from "../../store/actions/projectsActions";
+import { createProject, deleteProject, fetchProjects } from "../../store/actions/projectsActions";
 import FullProject from "../FullProject/FullProject";
 import ProjectsWrapper from "../../components/ProjectsComponents/ProjectsWrapper/ProjectsWrapper";
 import { useNavigate } from "react-router-dom";
@@ -37,10 +37,14 @@ const Projects = () => {
     }, [navigate])
 
     const createNewProjectHandler = useCallback(() => {
-        console.log({ title: projectTitle, user: user.id })
         dispatch(createProject({ title: projectTitle, user: user.id }, navigate))
     }, [dispatch, projectTitle, user.id, navigate])
 
+    const deleteProjectHandler = useCallback((e, projectId) => {
+        e.stopPropagation();
+        dispatch(deleteProject(projectId))
+    }, [dispatch])
+
     const handleOpen = useCallback(async () => {
         setModal(true)
     }, [])
@@ -60,6 +64,7 @@ const Projects = () => {
                 onClickProjectHandler={onClickProjectHandler}
                 onClickGoToSpecificProjectHandler={onClickGoToSpecificProjectHandler}
                 handleOpen={handleOpen}
+                deleteProjectHandler={deleteProjectHandler}
             />
 
             <Grid item xs={7}  >

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

@@ -60,14 +60,13 @@ export const deleteMember = (memberId, projectId) => {
     }
 }
 
-export const deleteProject = (projectId, projects) => {
+export const deleteProject = (projectId) => {
     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))
+            dispatch(fetchProjects())
         } catch (error) {
             dispatch(deleteProjectFailure(error.response.data));
         }