Skip to content

Commit df26aff

Browse files
trilliumtrillium
authored
Merge pull request #2019 from jng34/userSearchQueryHook
User search query hook
2 parents ae3d5f3 + 69d9ac4 commit df26aff

7 files changed

Lines changed: 89 additions & 379 deletions

File tree

‎client/src/App.jsx‎

Lines changed: 34 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
1-
import React from 'react';
21
import { AuthProvider } from './context/authContext';
32
import { Route, Redirect, Switch } from 'react-router-dom';
4-
53
import Home from './pages/Home';
64
import Navbar from './components/Navbar';
75
import Footer from './components/Footer';
@@ -26,14 +24,11 @@ import addProject from './components/manageProjects/addProject';
2624
import HealthCheck from './pages/HealthCheck';
2725
import SecretPassword from './pages/SecretPassword';
2826
import UserWelcome from './pages/UserWelcome';
29-
// Added User Permission Search component
30-
import UserPermissionSearch from './pages/UserPermissionSearch';
3127
import UserPermission from './pages/UserPermission';
3228
import OnboardOffboardVisibility from './pages/OnboardOffboardVisibility';
3329

3430
import { Box, ThemeProvider } from '@mui/material';
3531
import theme from './theme';
36-
3732
import './App.scss';
3833

3934
/*
@@ -45,6 +40,7 @@ import './App.scss';
4540
Return <ComponentName {...props} auth={auth} /> if user is logged in
4641
*/
4742
import withAuth from './hooks/withAuth';
43+
import { SearchTextProvider } from './context/searchContext';
4844

4945
const routes = [
5046
{ path: '/', name: 'home', Component: Home },
@@ -69,7 +65,7 @@ const routes = [
6965
{
7066
path: '/users/permission-search',
7167
name: 'useradmin',
72-
Component: UserPermission,
68+
Component: withAuth(UserPermission),
7369
},
7470
{
7571
path: '/projects/visibility',
@@ -99,47 +95,49 @@ const App = () => {
9995
return (
10096
<ThemeProvider theme={theme}>
10197
<AuthProvider>
102-
<Box
103-
sx={{
104-
height: '100%',
105-
width: '100vw',
106-
display: 'flex',
107-
justifyContent: 'center',
108-
alignItems: 'center',
109-
overflow: 'hidden',
110-
maxHeight: '90vh',
111-
margin: '5vh 0',
112-
}}
113-
>
98+
<SearchTextProvider>
11499
<Box
115100
sx={{
116-
position: 'relative',
117-
maxWidth: '500px',
118-
width: '100%',
119-
backgroundColor: 'white',
101+
height: '100%',
102+
width: '100vw',
103+
display: 'flex',
104+
justifyContent: 'center',
105+
alignItems: 'center',
120106
overflow: 'hidden',
121-
borderRadius: '10px',
122-
padding: '15px',
107+
maxHeight: '90vh',
108+
margin: '5vh 0',
123109
}}
124110
>
125-
<Navbar />
126111
<Box
127-
component="main"
128112
sx={{
129-
height: 'calc(90vh - 160px)',
130-
overflowY: 'scroll',
113+
position: 'relative',
114+
maxWidth: '500px',
115+
width: '100%',
116+
backgroundColor: 'white',
117+
overflow: 'hidden',
118+
borderRadius: '10px',
119+
padding: '15px',
131120
}}
132121
>
133-
<Switch>
134-
{routes.map(({ path, Component }) => (
135-
<Route key={path} exact path={path} component={Component} />
136-
))}
137-
<Redirect to="/" />
138-
</Switch>
122+
<Navbar />
123+
<Box
124+
component="main"
125+
sx={{
126+
height: 'calc(90vh - 160px)',
127+
overflowY: 'scroll',
128+
}}
129+
>
130+
<Switch>
131+
{routes.map(({ path, Component }) => (
132+
<Route key={path} exact path={path} component={Component} />
133+
))}
134+
<Redirect to="/" />
135+
</Switch>
136+
</Box>
137+
<Footer />
139138
</Box>
140-
<Footer />
141139
</Box>
142-
</Box>
140+
</SearchTextProvider>
143141
</AuthProvider>
144142
</ThemeProvider>
145143
);

‎client/src/components/user-admin/EditUsers.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ import {
1818
import '../../sass/UserAdmin.scss';
1919
import useAuth from '../../hooks/useAuth';
2020

21-
21+
// child of UserAdmin. Displays form to update users.
2222
const EditUsers = ({
2323
userToEdit,
2424
backToSearch,
@@ -80,7 +80,7 @@ const EditUsers = ({
8080
setUserManagedProjects(newProjects);
8181
}
8282
};
83-
83+
8484
const handleSetIsActive = () => {
8585
if (!isSuperAdmin) {
8686
setIsActive(!isActive);

‎client/src/components/user-admin/UserManagement.jsx‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import React, { useState } from 'react';
21
import {
32
Box,
43
Button,
@@ -12,6 +11,7 @@ import {
1211
import useAuth from '../../hooks/useAuth';
1312
import PersonIcon from '@mui/icons-material/Person';
1413
import '../../sass/UserAdmin.scss';
14+
import { useSearchText } from '../../context/searchContext';
1515

1616
const Buttonsx = {
1717
px: 2,
@@ -20,8 +20,7 @@ const Buttonsx = {
2020

2121
const UserManagement = ({ users, setUserToEdit }) => {
2222
let searchResults = [];
23-
const [searchResultType, setSearchResultType] = useState('name'); // Which results will diplay
24-
const [searchTerm, setSearchTerm] = useState(''); // Serch term for the user/email search
23+
const { searchText, setSearchText, searchResultType, setSearchResultType } = useSearchText(); // React context hook
2524
const { auth } = useAuth();
2625

2726
// Swaps the buttons and displayed panels for the search results, by email or by name
@@ -32,10 +31,10 @@ const UserManagement = ({ users, setUserToEdit }) => {
3231

3332
// Handle change on input in search form
3433
const handleChange = (event) => {
35-
setSearchTerm(event.target.value);
34+
setSearchText(event.target.value);
3635
};
3736

38-
if (!searchTerm) {
37+
if (!searchText) {
3938
searchResults = [];
4039
} else {
4140
searchResults =
@@ -44,14 +43,14 @@ const UserManagement = ({ users, setUserToEdit }) => {
4443
.filter((user) =>
4544
user.email
4645
?.toLowerCase()
47-
.includes(searchTerm.toLowerCase().trim())
46+
.includes(searchText.toLowerCase().trim())
4847
)
4948
.sort((a, b) => a.email.localeCompare(b.email))
5049
: Object.values(users)
5150
.filter((user) =>
5251
`${user.name?.firstName} ${user.name?.lastName}`
5352
.toLowerCase()
54-
.includes(searchTerm.toLowerCase().trim())
53+
.includes(searchText.toLowerCase().trim())
5554
)
5655
.sort((a, b) =>
5756
a.name?.firstName
@@ -105,7 +104,7 @@ const UserManagement = ({ users, setUserToEdit }) => {
105104
type="text"
106105
placeholder="Enter name and / or email to find a user."
107106
variant="standard"
108-
value={searchTerm}
107+
value={searchText}
109108
onChange={handleChange}
110109
/>
111110
<Box

‎client/src/components/user-admin/UserPermissionSearch.jsx‎

Lines changed: 16 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { useState, useEffect } from 'react';
1+
import { useEffect } from 'react';
22
import {
33
Box,
44
Button,
@@ -11,7 +11,7 @@ import {
1111
ListItemButton,
1212
} from '@mui/material';
1313
import { useLocation } from 'react-router-dom';
14-
import useAuth from '../../hooks/useAuth';
14+
import { useSearchText } from '../../context/searchContext';
1515
import PersonIcon from '@mui/icons-material/Person';
1616
import '../../sass/UserAdmin.scss';
1717

@@ -20,8 +20,7 @@ const Buttonsx = {
2020
py: 0.5,
2121
};
2222

23-
const DummyComponent = ({ data, isProjectLead, setUserToEdit }) => {
24-
const { auth } = useAuth();
23+
const ListComponent = ({ data, isProjectLead, setUserToEdit }) => {
2524
return (
2625
<List className="search-results disablePadding">
2726
{data.map((u, idx) => {
@@ -104,14 +103,12 @@ const DummyComponent = ({ data, isProjectLead, setUserToEdit }) => {
104103
);
105104
};
106105

107-
const UserPermissionSearch = ({ admins, projectLeads, setUserToEdit }) => {
108-
const [userType] = useState('admin'); // Which results will display
109-
const [searchText, setSearchText] = useState(''); // Search term for the admin/PM search
110-
const [isProjectLead, setIsProjectLead] = useState(false);
106+
const UserPermissionSearch = ({ admins, projectManagers, setUserToEdit }) => {
107+
const { searchText, setSearchText, userType, setUserType, isProjectLead, setIsProjectLead } = useSearchText(); // React context hook
111108

112109
const location = useLocation();
113110

114-
const resultData = [...admins, ...projectLeads];
111+
const resultData = [...admins, ...projectManagers];
115112

116113
useEffect(() => {
117114
// Edit url by adding '/admin' upon loading
@@ -125,8 +122,15 @@ const UserPermissionSearch = ({ admins, projectLeads, setUserToEdit }) => {
125122
}, [userType]);
126123

127124
// Swaps the buttons and displayed panels for the search results, by email or by name
128-
const buttonSwap = () =>
129-
isProjectLead ? setIsProjectLead(false) : setIsProjectLead(true);
125+
const buttonSwap = () => {
126+
if (isProjectLead) {
127+
setIsProjectLead(false);
128+
setUserType('admin');
129+
} else {
130+
setIsProjectLead(true);
131+
setUserType('projectLead');
132+
}
133+
}
130134

131135
// Handle change on input in search form
132136
const handleChange = (event) => {
@@ -323,7 +327,7 @@ const UserPermissionSearch = ({ admins, projectLeads, setUserToEdit }) => {
323327
>
324328
<Box>
325329
{/*Component to render admins and PMs*/}
326-
<DummyComponent
330+
<ListComponent
327331
data={filteredData}
328332
isProjectLead={isProjectLead}
329333
setUserToEdit={setUserToEdit}

‎client/src/context/searchContext.jsx‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { createContext, useContext, useState } from 'react';
2+
3+
const SearchTextContext = createContext();
4+
5+
export const SearchTextProvider = ({ children }) => {
6+
const [searchText, setSearchText] = useState('');
7+
const [searchResultType, setSearchResultType] = useState('name');
8+
const [userType, setUserType] = useState('admin');
9+
const [isProjectLead, setIsProjectLead] = useState(false);
10+
11+
return (
12+
<SearchTextContext.Provider value={{
13+
searchText, setSearchText,
14+
searchResultType, setSearchResultType,
15+
userType, setUserType,
16+
isProjectLead, setIsProjectLead
17+
}}>
18+
{children}
19+
</SearchTextContext.Provider>
20+
);
21+
};
22+
23+
export const useSearchText = () => useContext(SearchTextContext);

‎client/src/pages/UserPermission.jsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -29,25 +29,25 @@ const UserPermission = () => {
2929
}, [userApiService]);
3030

3131
const updateUserDb = useCallback(
32-
async (user, managedProjects) => {
33-
await userApiService.updateUserDbProjects(user, managedProjects);
32+
async (user, managedProjects, action) => {
33+
await userApiService.updateUserDbProjects(user, managedProjects, action);
3434
fetchAdmins();
3535
},
3636
[userApiService, fetchAdmins]
3737
);
3838

3939
const updateUserActiveStatus = useCallback(
4040
async (user, isActive) => {
41-
await userApiService.updateUserDbIsActive(admins, isActive);
41+
await userApiService.updateUserDbIsActive(user, isActive);
4242
fetchAdmins();
4343
},
4444
[userApiService, fetchAdmins]
4545
);
4646

4747
// Update user's access level (admin/user)
4848
const updateUserAccessLevel = useCallback(
49-
async (admin, newAccessLevel) => {
50-
await userApiService.updateUserAccessLevel(admin, newAccessLevel);
49+
async (user, newAccessLevel) => {
50+
await userApiService.updateUserAccessLevel(user, newAccessLevel);
5151
fetchAdmins();
5252
},
5353
[userApiService, fetchAdmins]
@@ -62,7 +62,7 @@ const UserPermission = () => {
6262
fetchAdmins();
6363
fetchProjects();
6464
fetchProjectsManagers();
65-
}, [fetchAdmins, fetchProjects, fetchProjectsManagers]);
65+
}, [userToEdit, fetchAdmins, fetchProjects, fetchProjectsManagers]);
6666

6767
const backToSearch = () => {
6868
setUserToEdit({});
@@ -76,7 +76,7 @@ const UserPermission = () => {
7676
return (
7777
<UserPermissionSearch
7878
admins={admins}
79-
projectLeads={projectManagers}
79+
projectManagers={projectManagers}
8080
setUserToEdit={setUserToEdit}
8181
/>
8282
);

0 commit comments

Comments
 (0)