Merge branch 'task-82-feature/members_list_front' into 'development'

временно реализован вывод участников проекта

See merge request !54

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

+import { Card, CardActions, CardContent, Grid, IconButton } from "@mui/material";
+import { Link } from "react-router-dom";
+import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
+import { useDispatch, useSelector } from "react-redux";
+
+
+const ProjectMembersItem = ({ displayName, id }) => {
+    const dispatch = useDispatch();
+    const { projects, project } = useSelector(state => state.projects);
+    
+    return <>      
+            <Grid item xs={12} sm={12} md={6} lg={4}>
+                <Card>
+                    <CardContent>
+                        <strong>
+                            <br></br>
+                             {displayName}
+                        </strong>
+                        <strong>
+                            <br></br>
+                        роль:     {project?.project?.members[0]?.roleProject}
+                        </strong>
+                        <strong>
+                            <br></br>
+                        <button>delete</button>
+                        </strong>
+                    </CardContent>
+                </Card>
+            </Grid>         
+    </>
+};
+
+export default ProjectMembersItem;

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

+import {Grid} from "@mui/material";
+import ProjectMembersItem from "../ProjectMembersItem/ProjectMembersItem";
+
+const ProjectMembersList = ({users}) => {
+    console.log(users)
+    return (
+        <Grid item container direction="row" spacing={1}>
+            {users?.map(user => {
+                return <ProjectMembersItem
+                    displayName={user.displayName}
+                    id={user.id}
+                    key={user.id}
+                />
+            })}
+        </Grid>
+    );
+};
+
+export default ProjectMembersList;
\ No newline at end of file

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

@@ -4,16 +4,27 @@ import { useSelector, useDispatch } from "react-redux";
 import { useEffect } from "react";
 import { fetchProject } from "../../store/actions/projectsActions";
 import ProjectTasksBody from "../../components/ProjectTasks/ProjectTasksBody";
+import { fetchUsers } from "../../store/actions/usersActions";
+import ProjectMembersList from "../../components/ProjectMembersList/ProjectMembersList";
 
 const FullProject = () => {
 
     const { projects, project } = useSelector(state => state.projects);
+    const users = useSelector(state => state.users.users);
+    
+    
     const dispatch = useDispatch();
     const params = useParams()
     const tasks = project.tasks;
     console.log(projects);
     console.log(tasks);
 
+    useEffect(() => {
+        dispatch(fetchUsers())
+    }, [dispatch]);
+    
+    console.log(users)
+
     useEffect(() => {
         dispatch(fetchProject(params.id))
     }, [params.id, dispatch]);
@@ -34,7 +45,17 @@ const FullProject = () => {
                     </strong>
                     <strong>
                         <br></br>
-                        {/* Админ проекта: {project?.project?.members} */}
+                        Автор проекта: {project?.project?.members[0]?.user.displayName}
+                    </strong>
+                    <strong>
+                        <br></br>
+                        Роль в проекте: {project?.project?.members[0]?.roleProject}
+                    </strong>
+                    <strong>
+                        <br></br>
+                        Участники проекта: 
+                        
+                        <ProjectMembersList users={users} project={project}/>
                     </strong>
                     <strong>
                         <br></br>

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

@@ -9,12 +9,11 @@ const NewProject = () => {
     const dispatch = useDispatch();
     const projects = useSelector(state => state.projects.projects);
     const navigate = useNavigate();
-    let lastProject = projects.projects[projects.projects.length - 1];
 
     const onSubmit = async (projectData) => {
         await dispatch(createProject(projectData, navigate));
         console.log(projectData)
-        console.log(lastProject)
+
     };
 
     useEffect(()=> {

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

@@ -11,8 +11,10 @@ import NewProject from "../NewProject/NewProject";
 const Projects = () => {
     const dispatch = useDispatch();
     const { projects, loading } = useSelector(state => state.projects.projects);
+    const {users} = useSelector(state => state.users);
+
     console.log(projects)
-    console.log(loading)
+    console.log(users)
     useEffect(() => {
         dispatch(fetchProjects())
     }, [dispatch]);

planner-front/src/store/actionTypes/userActionTypes.js

@@ -6,4 +6,8 @@ export const LOGIN_USER_SUCCESS = "LOGIN_USER_SUCCESS";
 export const LOGIN_USER_FAILURE = "LOGIN_USER_FAILURE";
 
 export const LOGOUT_USER_SUCCESS = "LOGOUT_USER_SUCCESS";
-export const LOGOUT_USER_FAILURE = "LOGOUT_USER_FAILURE";
+export const LOGOUT_USER_FAILURE = "LOGOUT_USER_FAILURE";
\ No newline at end of file
+
+export const FETCH_USERS_REQUEST = "FETCH_USERS_REQUEST";
+export const FETCH_USERS_SUCCESS = "FETCH_USERS_SUCCESS";
+export const FETCH_USERS_FAILURE = "FETCH_USERS_FAILURE";
\ No newline at end of file

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

 import axios from "../../axiosPlanner";
-import { LOGIN_USER_FAILURE, LOGIN_USER_SUCCESS, LOGOUT_USER_FAILURE, LOGOUT_USER_SUCCESS, REGISTER_USER_FAILURE, REGISTER_USER_REQUEST, REGISTER_USER_SUCCESS } from "../actionTypes/userActionTypes"
+import { FETCH_USERS_FAILURE, FETCH_USERS_REQUEST, FETCH_USERS_SUCCESS, LOGIN_USER_FAILURE, LOGIN_USER_SUCCESS, LOGOUT_USER_FAILURE, LOGOUT_USER_SUCCESS, REGISTER_USER_FAILURE, REGISTER_USER_REQUEST, REGISTER_USER_SUCCESS } from "../actionTypes/userActionTypes"
 import { showNotification } from "./commonActions";
 
 const registerUserRequest = () => {
@@ -14,6 +14,16 @@ const registerUserFailure = (error) => {
     return {type: REGISTER_USER_FAILURE, error}
 };
 
+const fetchUsersRequest = () => {
+    return {type: FETCH_USERS_REQUEST}
+};
+const fetchUsersSuccess = (users) => {
+    return {type: FETCH_USERS_SUCCESS, users}
+};
+const fetchUsersFailure = () => {
+    return {type: FETCH_USERS_FAILURE}
+};
+
 export const registerUser = (userData, navigate) => {
     return async (dispatch) => {
         dispatch(registerUserRequest());
@@ -90,4 +100,17 @@ export const logoutUser = (navigate) => {
             dispatch(showNotification("Не удалось выйти", "error"));
         }
     } 
-}
+}
\ No newline at end of file
+
+export const fetchUsers = () => {
+    return async dispatch => {
+        dispatch(fetchUsersRequest());
+        try {
+            const response = await axios.get("/users");
+            dispatch(fetchUsersSuccess(response.data.users));
+            console.log(response.data.users)
+        } catch (e) {
+            dispatch(fetchUsersFailure(e));
+        }
+    }
+};
\ No newline at end of file

planner-front/src/store/reducers/usersReducer.js

-import { REGISTER_USER_REQUEST, REGISTER_USER_SUCCESS, REGISTER_USER_FAILURE, LOGIN_USER_SUCCESS, LOGIN_USER_FAILURE, LOGOUT_USER_SUCCESS } from "../actionTypes/userActionTypes";
+import { REGISTER_USER_REQUEST, REGISTER_USER_SUCCESS, REGISTER_USER_FAILURE, LOGIN_USER_SUCCESS, LOGIN_USER_FAILURE, LOGOUT_USER_SUCCESS, FETCH_USERS_SUCCESS } from "../actionTypes/userActionTypes";
 
 const initialState = {
     user: null,
+    users: [],
     registerError: null,
     loginError: null,
     loading: false
@@ -24,6 +25,8 @@ const usersReducer = (state = initialState, action) => {
             return {...state, loginError: action.error};
         case LOGOUT_USER_SUCCESS:
             return {...state, user: null};
+        case FETCH_USERS_SUCCESS:
+        return {...state, loading: false, users: action.users};
         default: 
             return state;
     }