#141 Сделал побольше разделение компонентов

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

-import {Grid} from "@mui/material";
-import ProjectMembersItem from "../ProjectUserItem/ProjectUserItem";
-
-const ProjectMembersList = ({members, roleProjectOfAuthor, authorOfProject}) => {
-    console.log("members ", members)
-    return (
-        <Grid item container direction="column" spacing={1}>
-            {members?.map(member => {
-                return <ProjectMembersItem
-                    displayName={member?.user?.displayName}
-                    roleProject={member?.roleProject}
-                    id={member.id}
-                    key={member.id}
-                    roleProjectOfAuthor={roleProjectOfAuthor}
-                    userId={member?.user?.id}
-                    members={members}
-                    authorOfProject={authorOfProject}
-                />
-            })}
-        </Grid>
-    );
-};
-
-export default ProjectMembersList;
\ No newline at end of file

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

+
+import { Typography } from "@mui/material";
+import { memo } from "react";
+
+const ColumnTitle = ({ text }) => {
+
+    return <>
+        <Typography variant="h4" textAlign={'center'} sx={{ marginBottom: '20px' }}>
+        {text}
+      </Typography>
+    </>
+};
+
+export default memo(ColumnTitle);

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

 import { Box, Typography } from "@mui/material";
 import { memo } from "react";
-import ProjectUserItem from "../../ProjectUserItem/ProjectUserItem";
+import ColumnTitle from "./ColumnTitle/ColumnTitle";
+import UsersList from "./UsersList/UserList";
 
 const styleColumn = {
   border: '3px solid black',
@@ -11,34 +12,16 @@ const styleColumn = {
   overflowX: 'hidden',
 }
 
-const styleList = {
-  display: 'flex',
-  gap: '10px',
-  flexDirection: 'column',
-  alignItems: 'center',
-}
 
 const ProjectUsersColumn = ({ role, members }) => {
   return (
     <Box sx={styleColumn}>
-      <Typography variant="h4" textAlign={'center'} sx={{marginBottom: '20px'}}>
-        {role.text}
-      </Typography>
+      <ColumnTitle text={role.text}/>
 
-      <Box sx={styleList}>
-        {members.map((member) => {
-          if (member.roleProject === role.value) {
-            return (
-            <ProjectUserItem
-              key={member.id}
-              user={member?.user}
-            />
-            )
-          } else {
-            return null
-          }
-        })}
-      </Box>
+      <UsersList
+        role={role}
+        members={members}>
+      </UsersList>
     </Box>
   );
 };

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

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

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

+import { Box} from "@mui/material";
+import { memo } from "react";
+import UserItem from "./UserItem/UserItem";
+
+const styleList = {
+  display: 'flex',
+  gap: '10px',
+  flexDirection: 'column',
+  alignItems: 'center',
+}
+
+const UsersList = ({ role, members }) => {
+  return (
+      <Box sx={styleList}>
+        {members.map((member) => {
+          if (member.roleProject === role.value) {
+            return (
+            <UserItem
+              key={member.id}
+              user={member?.user}
+            />
+            )
+          } else {
+            return null
+          }
+        })}
+    </Box>
+  );
+};
+
+export default memo(UsersList);
\ No newline at end of file

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

@@ -4,7 +4,6 @@ import { useSelector, useDispatch } from "react-redux";
 import { useEffect, useMemo, useState } from "react";
 import { fetchProject } from "../../store/actions/projectsActions";
 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";
 
@@ -23,10 +22,10 @@ const FullProject = () => {
         dispatch(fetchProject(params.id))
     }, [params.id, dispatch]);
 
-    const members = useMemo(()=>{
+    const members = useMemo(() => {
         return project?.project?.members || []
-    },[project])
-    console.log(members)
+    }, [project])
+
     return <>
         <Grid item xs={12} sm={12} md={6} lg={4}>
             <Box>
@@ -59,8 +58,6 @@ const FullProject = () => {
                         Участники проекта:  <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
                         members={members}
                     />