#141 Добавил отображение юзеров в колонках ролей

planner-front/src/App.js

@@ -9,7 +9,6 @@ import MonthCalendar from './containers/MonthCalendar/MonthCalendar';
 import ForgottenPassword from "./containers/ForgottenPassword/ForgottenPassword";
 import Projects from "./containers/Projects/Projects";
 import FullProject from "./containers/FullProject/FullProject";
-import NewProject from "./containers/NewProject/NewProject";
 import WeekCalendar from "./containers/WeekCalendar/WeekCalendar";
 import UsersTasks from "./containers/UsersTasks/UsersTasks";
 

planner-front/src/components/MemberForm/MemberForm.js

@@ -44,7 +44,6 @@ const MemberForm = ({ onSubmit, members }) => {
     onSubmit(members);
     setOpen(false);
   };
-  console.log(state);
 
   useEffect(() => {
     dispatch(fetchProject(params.id))

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

-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();
-    let params = useParams()
-    console.log(members)
-    console.log(userId)
-
-    const deleteHandle = (userId, projectId) => {
-        dispatch(deleteMember(userId, params.id))
-    };
-
-    return <>
-        <Grid item xs={12} sm={12} md={6} lg={4}>
-            <Card>
-                <CardContent>
-                    <strong>
-                        <br></br>
-                        {displayName}
-                    </strong>
-                    <strong>
-                        <br></br>
-                        роль: {roleProject}
-                    </strong>
-                    <strong>
-
-                        {(members.filter(e => e.user.displayName === authorOfProject).length > 0) ?
-                            (<strong>
-                                <Tooltip title="Удалить">
-                                    <IconButton
-                                        onClick={(id) => {
-                                            deleteHandle(userId);
-                                        }}
-                                    > {(displayName !== authorOfProject) ? <DeleteIcon style={{ marginTop: "-5px" }} /> : null}
-                                    </IconButton>
-                                </Tooltip>
-                            </strong>) : null}
-                    </strong>
-                </CardContent>
-            </Card>
-        </Grid>
-    </>
-};
-
-export default ProjectMembersItem;

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

 import {Grid} from "@mui/material";
-import ProjectMembersItem from "../ProjectMembersItem/ProjectMembersItem";
+import ProjectMembersItem from "../ProjectUserItem/ProjectUserItem";
 
 const ProjectMembersList = ({members, roleProjectOfAuthor, authorOfProject}) => {
     console.log("members ", members)

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

+import { Grid } from "@mui/material";
+import DeleteIcon from "@mui/icons-material/Delete";
+import { deleteMember } from "../../../store/actions/projectsActions";
+import { memo } from "react";
+
+const ProjectMembersItem = ({ user }) => {
+
+    const style = {
+        width: '90%', 
+        border: '1px solid black', 
+        borderRadius: '5px', 
+        padding: '15px 15px', 
+        display: 'flex', 
+        justifyContent: 'space-between', 
+        alignItems: 'center'
+    }
+    return <>
+        <Grid sx={style}>
+            {user?.displayName}
+            <DeleteIcon
+            />
+        </Grid>
+    </>
+};
+
+export default memo(ProjectMembersItem);

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

 import { Box, Typography } from "@mui/material";
+import { memo } from "react";
+import ProjectUserItem from "../../ProjectUserItem/ProjectUserItem";
 
-const style = {
+const styleColumn = {
   border: '3px solid black',
   borderRadius: '10px',
   height: '60vh',
   flexBasis: 60 / 3 + '%',
-  overflow: 'scroll',
+  overflow: 'auto',
   overflowX: 'hidden',
 }
 
-const ProjectUsersColumn = ({ role }) => {
+const styleList = {
+  display: 'flex',
+  gap: '10px',
+  flexDirection: 'column',
+  alignItems: 'center',
+}
+
+const ProjectUsersColumn = ({ role, members }) => {
   return (
-    <Box sx={style}>
-      <Typography variant="h4" textAlign={'center'}>
+    <Box sx={styleColumn}>
+      <Typography variant="h4" textAlign={'center'} sx={{marginBottom: '20px'}}>
         {role.text}
       </Typography>
+
+      <Box sx={styleList}>
+        {members.map((member) => {
+          if (member.roleProject === role.value) {
+            return (
+            <ProjectUserItem
+              key={member.id}
+              user={member?.user}
+            />
+            )
+          } else {
+            return null
+          }
+        })}
+      </Box>
     </Box>
   );
 };
 
-export default ProjectUsersColumn;
+export default memo(ProjectUsersColumn);
\ No newline at end of file

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

 import {Box} from "@mui/material";
+import { memo } from "react";
 import ProjectUsersColumn from "./ProjectUsersColumn/ProjectUsersColumn";
 
 
@@ -12,7 +13,7 @@ const style = {
 }
 
 
-const ProjectUsersColumnsWrapper = ({}) => {
+const ProjectUsersColumnsWrapper = ({members}) => {
     return (
         <Box sx={style} justifyContent={'space-between'}>
             {projectRoles.map((role, i)=>{
@@ -20,6 +21,7 @@ const ProjectUsersColumnsWrapper = ({}) => {
                 <ProjectUsersColumn
                   key={i}
                   role={role}
+                  members={members}
                 />
               )
             })}
@@ -27,4 +29,4 @@ const ProjectUsersColumnsWrapper = ({}) => {
     );
 };
 
-export default ProjectUsersColumnsWrapper;
+export default memo(ProjectUsersColumnsWrapper);
\ No newline at end of file

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

 import { Box, Grid } from "@mui/material";
 import { useParams } from "react-router-dom";
 import { useSelector, useDispatch } from "react-redux";
-import { useEffect } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { fetchProject } from "../../store/actions/projectsActions";
-import { fetchUsers } from "../../store/actions/usersActions";
+import { fetchUsers, fetchUsersAllFields } from "../../store/actions/usersActions";
 import ProjectMembersList from "../../components/ProjectComponents/ProjectMembersList/ProjectMembersList";
 import NewMember from "../NewMember/NewMember";
 import ProjectUsersColumnsWrapper from "../../components/ProjectComponents/ProjectUsersColumnsWrapper/ProjectUsersColumnsWrapper";
@@ -11,56 +11,60 @@ import ProjectUsersColumnsWrapper from "../../components/ProjectComponents/Proje
 
 const FullProject = () => {
 
-    const { projects, project } = useSelector(state => state.projects);
-    const users = useSelector(state => state.users.users);
+    const { project } = useSelector(state => state.projects);
+
+
     const user = useSelector(state => state.users.user);
 
     const dispatch = useDispatch();
     const params = useParams()
 
-    useEffect(() => {
-        dispatch(fetchUsers())
-    }, [dispatch]);
     useEffect(() => {
         dispatch(fetchProject(params.id))
     }, [params.id, dispatch]);
 
+    const members = useMemo(()=>{
+        return project?.project?.members || []
+    },[project])
+    console.log(members)
     return <>
         <Grid item xs={12} sm={12} md={6} lg={4}>
             <Box>
                 <h2>Проект - {project?.project?.title} </h2>
-                
-                    <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>
-                        Задачи:
-                        <br></br>
-                    </strong>
-                    <strong>
-                        <br></br>
-                        <div style={{ display: 'flex', direction: 'column' }}>
-                            Участники проекта:  <NewMember members={project?.project?.members} />
-                        </div>
 
-                        {/* <ProjectMembersList users={users} project={project} members={project?.project?.members} roleProjectOfAuthor={project?.project?.members[0]?.roleProject} authorOfProject={project?.project?.members[0]?.user.displayName} /> */}
+                <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>
+                    Задачи:
+                    <br></br>
+                </strong>
+                <strong>
+                    <br></br>
+                    <div style={{ display: 'flex', direction: 'column' }}>
+                        Участники проекта:  <NewMember members={project?.project?.members} />
+                    </div>
+
+                    {/* <ProjectMembersList users={users} project={project} members={project?.project?.members} roleProjectOfAuthor={project?.project?.members[0]?.roleProject} authorOfProject={project?.project?.members[0]?.user.displayName} /> */}
 
-                        <ProjectUsersColumnsWrapper/>
-                    </strong>
+                    <ProjectUsersColumnsWrapper
+                        members={members}
+                    />
+                </strong>
 
             </Box>
         </Grid>

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

@@ -14,7 +14,6 @@ const NewMember = ({members}) => {
     const onSubmit = async (memberData) => {
         await dispatch(createMember(memberData, navigate));
         navigate("/projects/" + memberData.projectId)
-        console.log("memberData ", memberData)
 
     };
 

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

@@ -51,8 +51,7 @@ export const deleteMember = (memberId, projectId) => {
     return async (dispatch) => {
         dispatch(deleteMemberRequest());
         try {
-            const response = await axios.delete(`/projects/remove-user/${memberId}`, { data: { projectId: projectId } });
-            console.log("deleteMember ", response.data)
+            await axios.delete(`/projects/remove-user/${memberId}`, { data: { projectId: projectId } });
             dispatch(deleteMemberSuccess())
             dispatch(fetchProject(projectId))
         } catch (error) {
@@ -92,7 +91,6 @@ export const fetchProject = (id) => {
         try {
             const response = await axios.get("/projects/" + id);
             dispatch(fetchProjectSuccess(response.data));
-            console.log("fetch project ", response.data)
         } catch (e) {
             dispatch(fetchProjectsError(e));
         }

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

@@ -118,7 +118,6 @@ export const fetchUsers = () => {
         try {
             const response = await axios.get("/users");
             dispatch(fetchUsersSuccess(response.data.users));
-            console.log(response.data.users)
         } catch (e) {
             dispatch(fetchUsersFailure(e));
         }