#142 Вывел конкретный проект справа, начал менять список проектов слева

planner-front/src/components/ProjectComponents/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/ProjectComponents/ProjectUsersColumnsWrapper/ProjectUsersColumn/ColumnTitle/ColumnTitle.js

@@ -5,7 +5,7 @@ import { memo } from "react";
 const ColumnTitle = ({ text }) => {
 
   return <>
-    <Typography variant="h4" textAlign={'center'} sx={{ height: '10%' }}>
+    <Typography variant="h5" textAlign={'center'} sx={{ height: '10%' }}>
       {text}
     </Typography>
   </>

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

@@ -7,7 +7,7 @@ const styleColumn = {
   border: '3px solid black',
   borderRadius: '10px',
   height: '60vh',
-  flexBasis: 60 / 3 + '%',
+  flexBasis: 70 / 3 + '%',
   overflow: 'auto',
   overflowX: 'hidden',
 }

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

@@ -6,10 +6,9 @@ import ProjectUsersColumn from "./ProjectUsersColumn/ProjectUsersColumn";
 
 const style = {
   display: 'flex',
-  gap: '150px',
   width: '100%',
   marginTop: '20px',
-  justifyContent: 'space-evenly'
+  justifyContent: 'space-between'
 }
 
 

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/ProjectComponents/ProjectItem/ProjectItem.js → planner-front/src/components/ProjectsComponents/ProjectsWrapper/ProjectsList/ProjectItem/ProjectItem.js

@@ -3,10 +3,10 @@ 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 { deleteProject, fetchProject } from "../../../../../store/actions/projectsActions";
 import { useEffect } from "react";
 
-const ProjectItem = ({ title, tasks, projectId }) => {
+const ProjectItem = ({ title, tasks, projectId, onClickProjectHandler }) => {
     const user = useSelector(state => state.users.user);
     const dispatch = useDispatch();
 
@@ -24,7 +24,7 @@ const ProjectItem = ({ title, tasks, projectId }) => {
     
     
     return <>
-        <Grid item xs={12} sm={12} md={6} lg={4}>
+        <Grid item xs={12} sm={12} md={6} lg={4} onClick={onClickProjectHandler}>
             <Card>
                 <CardContent onClick={() => {fullInfo(projectId)}} >
                     <strong>

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

 import {Grid} from "@mui/material";
-import ProjectItem from "../ProjectItem/ProjectItem";
+import ProjectItem from "./ProjectItem/ProjectItem";
 
-const ProjectsList = ({projects}) => {
-    console.log(projects)
+const ProjectsList = ({projects, onClickProjectHandler}) => {
     return (
         <Grid item container direction="column" spacing={1}>
             {projects?.map(project => {
                 return <ProjectItem
-                    tasks={project.tasks}
-                    workers={project.workers}
                     title={project.title}
                     createdAt={project.createdAt}
-                    dateDue={project.dateDue}
-                    admin={project.admin}
                     projectId={project.id}
                     key={project.id}
+                    onClickProjectHandler={()=>{onClickProjectHandler(project)}}
                 />
             })}
         </Grid>

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

+import { Grid, Typography, Button, Card, CardContent } from "@mui/material";
+import ProjectsList from "./ProjectsList/ProjectsList";
+
+
+const ProjectsWrapper = ({onClickProjectHandler, projects}) => {
+
+
+  return <>
+
+    <Grid item xs={4}>
+      <Typography variant="h4">
+        Проекты
+      </Typography>
+      <Typography>
+        <ProjectsList projects={projects} onClickProjectHandler={onClickProjectHandler} />
+      </Typography>
+    </Grid>
+
+  </>
+};
+
+export default ProjectsWrapper;
\ No newline at end of file

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

@@ -11,7 +11,7 @@ import NewMemberModalContent from "../../components/ProjectComponents/NewMemberM
 
 
 
-const FullProject = () => {
+const FullProject = ({projectId}) => {
 
     const { project } = useSelector(state => state.projects);
     const [modal, setModal] = useState(false)
@@ -24,7 +24,11 @@ const FullProject = () => {
     const navigate = useNavigate()
 
     useEffect(() => {
+        if (projectId) {
+            dispatch(fetchProject(projectId))
+        } else {
             dispatch(fetchProject(params.id))
+        }
         dispatch(fetchUsers())
     }, [params.id, dispatch]);
 

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

-import {useNavigate} from "react-router-dom";
-import {useDispatch, useSelector} from "react-redux";
-
-import { useEffect } from "react";
-import ProjectForm from "../../components/ProjectComponents/ProjectForm/ProjectForm";
-import { createProject, fetchProjects } from "../../store/actions/projectsActions";
-
-const NewProject = () => {
-    const dispatch = useDispatch();
-    const projects = useSelector(state => state.projects.projects);
-    const navigate = useNavigate();
-
-    const onSubmit = async (projectData) => {
-        await dispatch(createProject(projectData, navigate));
-        console.log(projectData)
-    };
-
-    useEffect(()=> {
-        dispatch(fetchProjects());
-    }, [dispatch])
-
-    return (
-        <>
-            <ProjectForm projects={projects} onSubmit={onSubmit} />
-        </>
-    );
-};
-
-export default NewProject;
\ No newline at end of file

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

-import { Grid, Typography, Button, Card, CardContent } from "@mui/material";
-import { Link } from "react-router-dom";
-import { useEffect } from "react";
+import { Grid, Typography } from "@mui/material";
+import { useCallback, useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
-import Loader from "../../components/UI/Loader/Loader";
 import HasAccess from "../../components/UI/HasAccess/HasAccess";
-import { fetchProject, fetchProjects } from "../../store/actions/projectsActions";
-import ProjectsList from "../../components/ProjectComponents/ProjectsList/ProjectsList";
-import NewProject from "../NewProject/NewProject";
-import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
+import { fetchProjects } from "../../store/actions/projectsActions";
+import ProjectsList from "../../components/ProjectsComponents/ProjectsWrapper/ProjectsList/ProjectsList";
+import FullProject from "../FullProject/FullProject";
+import ProjectsWrapper from "../../components/ProjectsComponents/ProjectsWrapper/ProjectsWrapper";
 
 const Projects = () => {
     const dispatch = useDispatch();
     const { projects, project, loading } = useSelector(state => state.projects.projects);
-    const { users, user} = useSelector(state => state.users);
     const members = useSelector(state => state.projects.projects)
-
+    const [currentProject, setCurrentProject] = useState(null)
     console.log(projects)
-    console.log(project)
-    console.log(users)
-
     useEffect(() => {
         dispatch(fetchProjects())
     }, [dispatch]);
 
-    // useEffect(() => {
-    //     dispatch(fetchProject())
-    // }, [dispatch]);
-    // console.log("project ", project);
+    const onClickProjectHandler = useCallback((project)=>{
+        setCurrentProject(project)
+    }, [])
 
     return <>
         {projects?.length > 0 || project?.length > 0 ? (<>
-            <Grid container columns={16} spacing={2}>
+            <Grid container spacing={1}>
                 <Grid
                     container
                     item
                     direction="row"
                     justifyContent="space-between"
-                    alignItems="center"
                 >
                     <Grid item xs={4}>
-                        <Typography variant="h4">
-                            Проекты
-                        </Typography>
-                            <HasAccess roles={["superuser", "admin", "user"]} >
-                                <NewProject />
-                            </HasAccess>
-                        <Typography>
-                            <Loader loading={loading} />
-                            <ProjectsList projects={projects} members={members} />
-                        </Typography>
+                        <ProjectsWrapper projects={projects} onClickProjectHandler={onClickProjectHandler}/>
                     </Grid>
                     <Grid item xs={7}  >
-                    <Card>
-                <h2>Проект - {project?.project?.title} </h2>
-                <CardContent>
-                    <strong>
-                        <br></br>
-                        Дата создания проекта: {project?.project?.createdAt}
-                    </strong>
-                    <strong>
-                        <br></br>
-                        Цвет: {project?.project?.color}
-                    </strong>
-                    <strong>
-                        <br></br>
-                        Автор проекта: {project?.project?.members[0]?.user.displayName}
-                    </strong>
-                    <strong>
-                        <br></br>
-                        Роль в проекте: {project?.project?.members[0]?.roleProject}
-                    </strong>
-                    <strong>
-                        <br></br>
-                        {/* <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} /> */}
-                    </strong>
-                    <strong>
-                        <br></br>
-                        Задачи:
-                        <br></br>
-                    </strong>
-                    {/* <strong>
-                        <br></br>
-                        <ProjectTasksBody
-                            tasks={tasks}
-                        />
-                    </strong> */}
-                </CardContent>
-            </Card>
+                        {currentProject ? <FullProject projectId={currentProject?.id}/> : null}
                     </Grid>
                 </Grid>