#142 Реализовал создание проекта, переход на конкретный проект

planner-api/src/routers/projects.ts

@@ -51,7 +51,6 @@ router.get('/my',auth, async (req:Request, res:Response): Promise<Response>=> {
 router.post('/',auth, async (req:Request, res:Response): Promise<Response> => {
     if (!req.body) return res.status(400).send({Message:'problem in incoming req.body'})
     const {user, title,color}= req.body;
-   
     const member:Member = new Member;
     member.user= user;
     member.roleProject= MemberRole.ADMIN;

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

@@ -17,7 +17,6 @@ function NewMemberModalContent({ members, users, onChangeNewMemberHandler, onCha
       getOptionLabel={(item) => item.displayName || ""}
       style={{ marginBottom: '15px' }}
     />
-
     <CustomAutocomplete
       name={'role'}
       label={'Роль'}

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

+import { Button } from "@mui/material";
+import { Box } from "@mui/system";
+import { memo } from "react";
+import FormElement from "../../UI/Form/FormElement/FormElement"
+
+
+const NewProjectModalContent = ({ inputChangeHandler, projectTitle, createNewProjectHandler, handleClose }) => {
+
+
+  return <>
+    <FormElement
+      onChange={(e)=>{inputChangeHandler(e)}}
+      name={"title"}
+      label={"Название"}
+      state={projectTitle}
+    />
+    <Box sx={{ display: 'flex', justifyContent: 'space-between', marginTop: '10px'}}>
+      <Button
+        type="submit"
+        color="primary"
+        variant="outlined"
+        onClick={()=>{createNewProjectHandler()}}
+      >
+        Создать
+      </Button>
+      <Button
+        type="submit"
+        color="primary"
+        variant="outlined"
+        onClick={()=>{handleClose()}}
+      >
+        Отмена
+      </Button>
+    </Box>
+  </>
+};
+
+export default memo(NewProjectModalContent);
\ No newline at end of file

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

-import { Box, Button, Grid, Modal } from "@mui/material";
-import { useState } from "react";
-import { useSelector } from "react-redux";
-import FormElement from "../../UI/Form/FormElement/FormElement";
-import { Typography } from "@mui/material";
-import AddCircleIcon from '@mui/icons-material/AddCircle';
-
-const style = {
-  position: 'absolute',
-  top: '50%',
-  left: '50%',
-  transform: 'translate(-50%, -50%)',
-  width: 400,
-  bgcolor: 'background.paper',
-  border: '2px solid #000',
-  boxShadow: 24,
-  p: 4,
-};
-
-const ProjectForm = ({ onSubmit }) => {
-  const users = useSelector(state => state.users)
-  console.log(users)
-  const [open, setOpen] = useState(false);
-  const handleOpen = () => setOpen(true);
-  const handleClose = () => setOpen(false);
-  const [state, setState] = useState({
-    title: ""
-  });
-
-
-  const submitFormHandler = (e) => {
-    e.preventDefault();
-    let project = { title: state.title }
-    console.log(project);
-    if (project.title === "") {
-      alert("Нельзя создать проект без названия")
-    } else {
-      onSubmit(project);
-    }
-  };
-
-  const inputChangeHandler = (e) => {
-    const { name, value } = e.target;
-    setState(prevState => {
-      return { ...prevState, [name]: value };
-    });
-  };
-
-  return (
-    <div >
-      <AddCircleIcon onClick={handleOpen} />
-      <Modal
-        open={open}
-        onClose={handleClose}
-        aria-labelledby="modal-modal-title"
-        aria-describedby="modal-modal-description"
-        onSubmit={submitFormHandler}
-      >
-        <Box sx={style}>
-          <form >
-            <Grid container direction="column" spacing={2}>
-              <Typography variant="h4">Новый проект</Typography>
-              <FormElement
-                onChange={inputChangeHandler}
-                name={"title"}
-                label={"Title"}
-                state={state}
-              />
-              <Grid item>
-                <Button
-                  type="submit"
-                  color="primary"
-                  variant="contained"
-
-                >
-                  Создать
-                </Button>
-              </Grid>
-            </Grid>
-          </form>
-        </Box>
-      </Modal>
-    </div>
-  );
-
-};
-
-export default ProjectForm;
\ No newline at end of file

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

-import { Button, Card, CardActions, CardContent, Grid, IconButton, Typography } 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, fetchProject } from "../../../../../store/actions/projectsActions";
-import { memo, useEffect, useMemo } from "react";
-import { Box } from "@mui/system";
+import {Grid, Typography } from "@mui/material";
+import { useSelector } from "react-redux";
+import { memo, useMemo } from "react";
 import DeleteButton from "../../../../UI/DeleteButton/DeleteButton";
 import ArrowIncrementButton from "../../../../UI/ArrowIncrementButton/ArrowIncrementButton";
 
@@ -14,6 +9,7 @@ const styleBlock = {
     borderRadius: '5px',
     width: '100%',
     padding: '15px',
+    height: '10%',
 }
 
 const styleText = {
@@ -21,7 +17,7 @@ const styleText = {
     fontWeight: '600',
 }
 
-const ProjectItem = ({ title, members, onClickProjectHandler }) => {
+const ProjectItem = ({ title, members, onClickProjectHandler, onClickGoToSpecificProjectHandler }) => {
 
     const { user } = useSelector(state => state.users);
     const currentRoleInProject = useMemo(() => {
@@ -40,7 +36,7 @@ const ProjectItem = ({ title, members, onClickProjectHandler }) => {
             </Grid>
             <Grid item>
                 <DeleteButton />
-                <ArrowIncrementButton />
+                <ArrowIncrementButton onClick={onClickGoToSpecificProjectHandler}/>
             </Grid>
         </Grid>
     </>

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

@@ -2,15 +2,16 @@ import {Grid} from "@mui/material";
 import { memo } from "react";
 import ProjectItem from "./ProjectItem/ProjectItem";
 
-const ProjectsList = ({projects, onClickProjectHandler}) => {
+const ProjectsList = ({projects, onClickProjectHandler, onClickGoToSpecificProjectHandler}) => {
     return (
-        <Grid item container gap={3}>
+        <Grid item container gap={3} sx={{ height: '79vh', overflow: 'auto', overflowX: 'hidden'}}>
             {projects?.map(project => {
                 return <ProjectItem
                     title={project.title}
                     members={project.members}
                     key={project.id}
                     onClickProjectHandler={()=>{onClickProjectHandler(project)}}
+                    onClickGoToSpecificProjectHandler={(e)=>{onClickGoToSpecificProjectHandler(e, project.id)}}
                 />
             })}
         </Grid>

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

@@ -7,10 +7,10 @@ const style = {
   display: 'flex',
   justifyContent: 'space-between',
   alignItems: 'center',
-  marginBottom: '10px'
+  marginBottom: '10px',
 }
 
-const ProjectsWrapper = ({ onClickProjectHandler, projects }) => {
+const ProjectsWrapper = ({ onClickProjectHandler, projects, onClickGoToSpecificProjectHandler, handleOpen }) => {
 
 
   return <>
@@ -18,9 +18,13 @@ const ProjectsWrapper = ({ onClickProjectHandler, projects }) => {
     <Grid item xs={4}>
       <Typography variant="h2" sx={style}>
         Проекты
-        <Button variant="outlined">Создать</Button>
+        <Button variant="outlined" onClick={()=>{handleOpen()}}>Создать</Button>
       </Typography>
-      <ProjectsList projects={projects} onClickProjectHandler={onClickProjectHandler} />
+      <ProjectsList 
+        projects={projects} 
+        onClickProjectHandler={onClickProjectHandler} 
+        onClickGoToSpecificProjectHandler={onClickGoToSpecificProjectHandler}
+      />
     </Grid>
 
   </>

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

@@ -11,18 +11,20 @@ import NewMemberModalContent from "../../components/ProjectComponents/NewMemberM
 
 
 
-const FullProject = ({projectId}) => {
+const FullProject = ({ projectId }) => {
 
     const { project } = useSelector(state => state.projects);
-    const [modal, setModal] = useState(false)
-    const [newMember, setNewMember] = useState(null)
-    const [currentMember, setCurrentMember] = useState(null)
     const { user, users } = useSelector(state => state.users);
 
     const dispatch = useDispatch();
     const params = useParams()
     const navigate = useNavigate()
 
+    const [modal, setModal] = useState(false)
+    const [newMember, setNewMember] = useState(null)
+    const [currentMember, setCurrentMember] = useState(null)
+
+
     useEffect(() => {
         if (projectId) {
             dispatch(fetchProject(projectId))
@@ -73,13 +75,11 @@ const FullProject = ({projectId}) => {
         dispatch(deleteMember(id, project?.project?.id))
     }, [dispatch, project?.project?.id])
 
-    const onClickTasksHandler = useCallback((id) => {
+    const onClickTasksHandler = useCallback(() => {
         navigate('/workers-tasks')
     }, [navigate])
 
     return <>
-        <Grid>
-
         <ProjectInfo
             project={project.project}
             handleOpen={handleOpen}
@@ -111,8 +111,6 @@ const FullProject = ({projectId}) => {
 
             </NewMemberModalContent>
         </DefaultModal>
-
-        </Grid>
     </>
 };
 

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

-import { Grid, Typography } from "@mui/material";
+import { Grid } from "@mui/material";
 import { useCallback, useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
-import HasAccess from "../../components/UI/HasAccess/HasAccess";
-import { fetchProjects } from "../../store/actions/projectsActions";
-import ProjectsList from "../../components/ProjectsComponents/ProjectsWrapper/ProjectsList/ProjectsList";
+import { createProject, fetchProjects } from "../../store/actions/projectsActions";
 import FullProject from "../FullProject/FullProject";
 import ProjectsWrapper from "../../components/ProjectsComponents/ProjectsWrapper/ProjectsWrapper";
+import { useNavigate } from "react-router-dom";
+import DefaultModal from "../../components/UI/DefaultModal/DefaultModal";
+import NewProjectModalContent from "../../components/ProjectsComponents/NewProjectModalContent/NewProjectModalContent";
 
 const Projects = () => {
+    const { projects } = useSelector(state => state.projects.projects);
+    const { user } = useSelector(state => state.users)
+
     const dispatch = useDispatch();
-    const { projects, project, loading } = useSelector(state => state.projects.projects);
+    const navigate = useNavigate()
+
     const [currentProject, setCurrentProject] = useState(null)
+    const [projectTitle, setProjectTitle] = useState('');
+    const [modal, setModal] = useState(false)
 
     useEffect(() => {
         dispatch(fetchProjects())
     }, [dispatch]);
 
-    const onClickProjectHandler = useCallback((project)=>{
+    const inputChangeHandler = (e) => {
+        setProjectTitle(e.target.value)
+    };
+
+    const onClickProjectHandler = useCallback((project) => {
         setCurrentProject(project)
     }, [])
 
+    const onClickGoToSpecificProjectHandler = useCallback((e, projectId) => {
+        e.stopPropagation();
+        navigate(`/projects/${projectId}`)
+    }, [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 handleOpen = useCallback(async () => {
+        setModal(true)
+    }, [])
+
+    const handleClose = useCallback(() => {
+        setModal(false)
+    }, [])
+
+
+
+
     return <>
-        {projects?.length > 0 || project?.length > 0 ? (<>
-            <Grid container spacing={1}>
-                <Grid
-                    container
-                    item
-                    direction="row"
-                    justifyContent="space-between"
-                >
+        <Grid container justifyContent='space-between'>
 
-                    <ProjectsWrapper projects={projects} onClickProjectHandler={onClickProjectHandler}/>
+            <ProjectsWrapper
+                projects={projects}
+                onClickProjectHandler={onClickProjectHandler}
+                onClickGoToSpecificProjectHandler={onClickGoToSpecificProjectHandler}
+                handleOpen={handleOpen}
+            />
 
             <Grid item xs={7}  >
-                        {currentProject ? <FullProject projectId={currentProject?.id}/> : null}
-                    </Grid>
+                {currentProject ? <FullProject projectId={currentProject?.id} /> : null}
             </Grid>
 
         </Grid>
-        </>) :
-            <h1>Созданных проектов нет</h1>
-        }
+
+        <DefaultModal
+            modal={modal}
+            handleClose={() => { handleClose() }}
+        >
+            <NewProjectModalContent
+                handleClose={handleClose}
+                projectTitle={projectTitle}
+                inputChangeHandler={inputChangeHandler}
+                createNewProjectHandler={createNewProjectHandler}
+            />
+        </DefaultModal>
     </>
 };
 

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

@@ -264,7 +264,6 @@ function WeekCalendar() {
   }, [currentTask, dispatch, hoursInDay, userId])
 
   const deleteTaskHandler = useCallback(async (e, taskId) => {
-    console.log(e)
     e.stopPropagation();
     await dispatch(deleteCalendarTask(taskId, userId))
   }, [dispatch, userId])

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

@@ -102,7 +102,6 @@ export const createProject = (projectData, navigate) => {
         try {
             const response = await axios.post("/projects", projectData);
             dispatch(createProjectSuccess());
-            console.log(response.data)
             navigate("/projects/" + response.data.project.id)
             dispatch(showNotification("Проект успешно создан"))
         } catch (e) {
@@ -157,8 +156,7 @@ export const changeMemberRole = (userId, data) => {
     return async (dispatch) => {
         dispatch(changeMemberRoleSuccess());
         try {
-            const response = await axios.put(`/projects/change-project-role/${userId}`, data);
-            console.log(response.data)
+            await axios.put(`/projects/change-project-role/${userId}`, data);
             dispatch(changeMemberRoleRequest());
             await dispatch(fetchProject(data?.projectId))
         } catch (e) {