#142 Вывел список проектов без логики

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

-import { Button, Card, CardActions, CardContent, Grid, IconButton } from "@mui/material";
+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 { useEffect } from "react";
+import { memo, useEffect, useMemo } from "react";
+import { Box } from "@mui/system";
+import DeleteButton from "../../../../UI/DeleteButton/DeleteButton";
+import ArrowIncrementButton from "../../../../UI/ArrowIncrementButton/ArrowIncrementButton";
 
-const ProjectItem = ({ title, tasks, projectId, onClickProjectHandler }) => {
-    const user = useSelector(state => state.users.user);
-    const dispatch = useDispatch();
+const styleBlock = {
+    border: '2px solid black',
+    borderRadius: '5px',
+    width: '100%',
+    padding: '15px',
+}
 
-    console.log(user)
+const styleText = {
+    fontSize: '15px',
+    fontWeight: '600',
+}
 
-    const deleteHandle = (projectId) => {
-        console.log("project id", projectId)
-        dispatch(deleteProject(projectId))
-    };
-    const fullInfo = (projectId) => {
-        console.log("full project info", projectId)
-        dispatch(fetchProject(projectId))
-    };
+const ProjectItem = ({ title, members, onClickProjectHandler }) => {
 
-    
-    
-    return <>
-        <Grid item xs={12} sm={12} md={6} lg={4} onClick={onClickProjectHandler}>
-            <Card>
-                <CardContent onClick={() => {fullInfo(projectId)}} >
-                    <strong>
-                        <br></br>
-                        Название проекта: {title}
-                    </strong>
-                    <strong>
-                        <br></br>
-                        {/* Задачи: {tasks} */}
-                    </strong>
-                </CardContent>
-                <CardActions>
-                    {(title !== "Личные дела") ? <Button onClick={() => {
-                        deleteHandle(projectId);
-                    }} variant="outlined" startIcon={<DeleteIcon />}>
-                        Delete
-                    </Button> : null}
+    const { user } = useSelector(state => state.users);
+    const currentRoleInProject = useMemo(() => {
+        return members.find((member) => member.user.id === user.id)?.roleProject
+    }, [members, user.id])
 
-                </CardActions>
-            </Card>
+    return <>
+        <Grid item container xs={12} onClick={onClickProjectHandler} sx={styleBlock} justifyContent={'space-between'} alignItems={'center'}>
+            <Grid item>
+                <Typography sx={styleText}>
+                    Проект: {title}
+                </Typography>
+                <Typography sx={styleText}>
+                    Роль в проекте: {currentRoleInProject}
+                </Typography>
+            </Grid>
+            <Grid item>
+                <DeleteButton />
+                <ArrowIncrementButton />
+            </Grid>
         </Grid>
     </>
 };
 
-export default ProjectItem;
+export default memo(ProjectItem);

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

 import {Grid} from "@mui/material";
+import { memo } from "react";
 import ProjectItem from "./ProjectItem/ProjectItem";
 
 const ProjectsList = ({projects, onClickProjectHandler}) => {
     return (
-        <Grid item container direction="column" spacing={1}>
+        <Grid item container gap={3}>
             {projects?.map(project => {
                 return <ProjectItem
                     title={project.title}
-                    createdAt={project.createdAt}
-                    projectId={project.id}
+                    members={project.members}
                     key={project.id}
                     onClickProjectHandler={()=>{onClickProjectHandler(project)}}
                 />
@@ -17,4 +17,4 @@ const ProjectsList = ({projects, onClickProjectHandler}) => {
     );
 };
 
-export default ProjectsList;
+export default memo(ProjectsList);
\ No newline at end of file

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

 import { Grid, Typography, Button, Card, CardContent } from "@mui/material";
+import { memo } from "react";
 import ProjectsList from "./ProjectsList/ProjectsList";
 
 
-const ProjectsWrapper = ({onClickProjectHandler, projects}) => {
+const style = {
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  marginBottom: '10px'
+}
+
+const ProjectsWrapper = ({ onClickProjectHandler, projects }) => {
 
 
   return <>
 
     <Grid item xs={4}>
-      <Typography variant="h4">
+      <Typography variant="h2" sx={style}>
         Проекты
+        <Button variant="outlined">Создать</Button>
       </Typography>
-      <Typography>
-        <ProjectsList projects={projects} onClickProjectHandler={onClickProjectHandler} />
-      </Typography>
+      <ProjectsList projects={projects} onClickProjectHandler={onClickProjectHandler} />
     </Grid>
 
   </>
 };
 
-export default ProjectsWrapper;
+export default memo(ProjectsWrapper);
\ No newline at end of file

planner-front/src/components/UI/ArrowDecrementButton/ArrowDecrementButton.js

@@ -6,7 +6,6 @@ const arrowClass = {
   transition: '0.5s',
   "&:hover": { 
   
-  background: 'rgb(48, 154, 252, 0.65)',
   transition: '0.5s',
   transform: 'scale(1.2)'
   }

planner-front/src/components/UI/ArrowIncrementButton/ArrowIncrementButton.js

@@ -6,7 +6,6 @@ const arrowClass = {
   transition: '0.5s',
   "&:hover": { 
   
-  background: 'rgb(48, 154, 252, 0.65)',
   transition: '0.5s',
   transform: 'scale(1.2)'
   }

planner-front/src/components/UI/DeleteButton/DeleteButton.js

+import DeleteIcon from "@mui/icons-material/Delete";
+import { memo } from 'react';
+const arrowClass = {
+  cursor: 'pointer',
+  transition: '0.5s',
+  "&:hover": { 
+  
+  transition: '0.5s',
+  transform: 'scale(1.2)'
+  }
+}
+
+
+function DeleteButton({onClick}) {
+  
+  return ( 
+  <>
+    <DeleteIcon
+      sx={arrowClass}
+      onClick={onClick}
+    />  
+  </> );
+}
+
+export default memo(DeleteButton);
\ No newline at end of file

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

@@ -30,7 +30,7 @@ const FullProject = ({projectId}) => {
             dispatch(fetchProject(params.id))
         }
         dispatch(fetchUsers())
-    }, [params.id, dispatch]);
+    }, [params.id, dispatch, projectId]);
 
     const members = useMemo(() => {
         return project?.project?.members || []

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

@@ -10,9 +10,8 @@ import ProjectsWrapper from "../../components/ProjectsComponents/ProjectsWrapper
 const Projects = () => {
     const dispatch = useDispatch();
     const { projects, project, loading } = useSelector(state => state.projects.projects);
-    const members = useSelector(state => state.projects.projects)
     const [currentProject, setCurrentProject] = useState(null)
-    console.log(projects)
+
     useEffect(() => {
         dispatch(fetchProjects())
     }, [dispatch]);
@@ -30,9 +29,9 @@ const Projects = () => {
                     direction="row"
                     justifyContent="space-between"
                 >
-                    <Grid item xs={4}>
-                        <ProjectsWrapper projects={projects} onClickProjectHandler={onClickProjectHandler}/>
-                    </Grid>
+
+                    <ProjectsWrapper projects={projects} onClickProjectHandler={onClickProjectHandler}/>
+
                     <Grid item xs={7}  >
                         {currentProject ? <FullProject projectId={currentProject?.id}/> : null}
                     </Grid>