diff --git a/client/src/App.jsx b/client/src/App.jsx index 82fdf5baa..3bd00d106 100644 --- a/client/src/App.jsx +++ b/client/src/App.jsx @@ -18,6 +18,7 @@ import HandleAuth from './components/auth/HandleAuth'; import EmailSent from './pages/EmailSent'; import Events from './pages/Events'; import ProjectLeaderDashboard from './pages/ProjectLeaderDashboard'; +import Users from './pages/Users'; import UserAdmin from './pages/UserAdmin'; import ProjectList from './pages/ProjectList'; import ManageProjects from './pages/ManageProjects'; @@ -46,9 +47,11 @@ const routes = [ { path: '/handleauth', name: 'handleauth', Component: HandleAuth }, { path: '/emailsent', name: 'emailsent', Component: EmailSent }, { path: '/events', name: 'events', Component: Events }, - { path: '/useradmin', name: 'useradmin', Component: UserAdmin }, + { path: '/users', name: 'users', Component: Users }, + + { path: '/users/user-search', name: 'useradmin', Component: UserAdmin }, { path: '/projects', name: 'projects', Component: ProjectList }, - { path: '/projects/create', name: 'projectform', Component: addProject}, + { path: '/projects/create', name: 'projectform', Component: addProject }, { path: '/projects/:projectId', name: 'project', diff --git a/client/src/components/Navbar.jsx b/client/src/components/Navbar.jsx index 08ba4dc62..68d39e454 100644 --- a/client/src/components/Navbar.jsx +++ b/client/src/components/Navbar.jsx @@ -61,7 +61,7 @@ const Navbar = (props) => { {/* Admin auth -> Displays 2 links -> 'Users' and 'Projects'. */} {auth?.user?.accessLevel === 'admin' && ( <> - + USERS diff --git a/client/src/components/user-admin/UserManagement.jsx b/client/src/components/user-admin/UserManagement.jsx index e3681928a..1ead7238c 100644 --- a/client/src/components/user-admin/UserManagement.jsx +++ b/client/src/components/user-admin/UserManagement.jsx @@ -1,13 +1,21 @@ import React, { useState } from 'react'; -import {Box, Button, ButtonGroup, TextField, Typography, List, ListItem, ListItemButton} from '@mui/material'; - +import { + Box, + Button, + ButtonGroup, + TextField, + Typography, + List, + ListItem, + ListItemButton, +} from '@mui/material'; import '../../sass/UserAdmin.scss'; const Buttonsx = { px: 2, py: 0.5, -} +}; const UserManagement = ({ users, setUserToEdit }) => { let searchResults = []; @@ -50,97 +58,96 @@ const UserManagement = ({ users, setUserToEdit }) => { ); } return ( - - - User Management - + + + User Search + - - - + + + - 0? '#F5F5F5': 'transparent', - my: 1.2, - borderRadius: 1, - flexGrow: 1, - width: 1/1, - }}> + 0 ? '#F5F5F5' : 'transparent', + my: 1.2, + borderRadius: 1, + flexGrow: 1, + width: 1 / 1, + }} + > - - {searchResults.map((u) => { - return ( - // eslint-disable-next-line no-underscore-dangle - + {searchResults.map((u) => { + return ( + // eslint-disable-next-line no-underscore-dangle + - setUserToEdit(u)} - > - {searchResultType === 'name' - ? `${u.name?.firstName} ${u.name?.lastName} ( ${u.email} )` - : `${u.email} ( ${u.name?.firstName} ${u.name?.lastName} )`} - - - ); - })} - + }} + key={`result_${u._id}`} + > + setUserToEdit(u)} + > + {searchResultType === 'name' + ? `${u.name?.firstName} ${u.name?.lastName} ( ${u.email} )` + : `${u.email} ( ${u.name?.firstName} ${u.name?.lastName} )`} + + + ); + })} + diff --git a/client/src/pages/UserAdmin.jsx b/client/src/pages/UserAdmin.jsx index 6271a374d..b8d6df07b 100644 --- a/client/src/pages/UserAdmin.jsx +++ b/client/src/pages/UserAdmin.jsx @@ -33,9 +33,10 @@ const UserAdmin = () => { const updateUserActiveStatus = useCallback( async (user, isActive) => { await userApiService.updateUserDbIsActive(user, isActive); - fetchUsers() - }, [userApiService, fetchUsers] - ) + fetchUsers(); + }, + [userApiService, fetchUsers] + ); // Update user's access level (admin/user) const updateUserAccessLevel = useCallback( diff --git a/client/src/pages/Users.jsx b/client/src/pages/Users.jsx new file mode 100644 index 000000000..2ec4aad01 --- /dev/null +++ b/client/src/pages/Users.jsx @@ -0,0 +1,34 @@ +import React, { useState } from 'react'; +import { Link } from 'react-router-dom'; +import { Button, Box, Container } from '@mui/material'; + +import '../sass/Users.scss'; + +const Users = () => { + return ( + + + + + + + + + ); +}; + +export default Users; diff --git a/client/src/sass/Users.scss b/client/src/sass/Users.scss new file mode 100644 index 000000000..aa69313ef --- /dev/null +++ b/client/src/sass/Users.scss @@ -0,0 +1,21 @@ +.container--users { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + margin-top: 50px; +} + +.center { + display: flex; + justify-content: center; +} + +.button { + width: 250px; + border-radius: 8px; +} + +.margin-bottom { + margin-bottom: 15px; +}