Commit 492adeee authored by Ermolaev Timur's avatar Ermolaev Timur

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

parent 196709fe
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
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);
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>
);
};
......
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);
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
......@@ -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}
/>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment