User search query hook

client/src/App.jsx

@@ -1,7 +1,5 @@
-import React from 'react';
 import { AuthProvider } from './context/authContext';
 import { Route, Redirect, Switch } from 'react-router-dom';
-
 import Home from './pages/Home';
 import Navbar from './components/Navbar';
 import Footer from './components/Footer';
@@ -26,13 +24,9 @@ import addProject from './components/manageProjects/addProject';
 import HealthCheck from './pages/HealthCheck';
 import SecretPassword from './pages/SecretPassword';
 import UserWelcome from './pages/UserWelcome';
-// Added User Permission Search component
-import UserPermissionSearch from './pages/UserPermissionSearch';
 import UserPermission from './pages/UserPermission';
-
 import { Box, ThemeProvider } from '@mui/material';
 import theme from './theme';
-
 import './App.scss';
 
 /* 
@@ -44,6 +38,7 @@ import './App.scss';
    Return <ComponentName {...props} auth={auth} /> if user is logged in
 */
 import withAuth from './hooks/withAuth';
+import { SearchTextProvider } from './context/searchContext';
 
 const routes = [
   { path: '/', name: 'home', Component: Home },
@@ -68,7 +63,7 @@ const routes = [
   {
     path: '/users/permission-search',
     name: 'useradmin',
-    Component: UserPermission,
+    Component: withAuth(UserPermission),
   },
   {
     path: '/projects/:projectId',
@@ -93,47 +88,49 @@ const App = () => {
   return (
     <ThemeProvider theme={theme}>
       <AuthProvider>
-        <Box
-          sx={{
-            height: '100%',
-            width: '100vw',
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-            overflow: 'hidden',
-            maxHeight: '90vh',
-            margin: '5vh 0',
-          }}
-        >
+        <SearchTextProvider>
           <Box
             sx={{
-              position: 'relative',
-              maxWidth: '500px',
-              width: '100%',
-              backgroundColor: 'white',
+              height: '100%',
+              width: '100vw',
+              display: 'flex',
+              justifyContent: 'center',
+              alignItems: 'center',
               overflow: 'hidden',
-              borderRadius: '10px',
-              padding: '15px',
+              maxHeight: '90vh',
+              margin: '5vh 0',
             }}
           >
-            <Navbar />
             <Box
-              component="main"
               sx={{
-                height: 'calc(90vh - 160px)',
-                overflowY: 'scroll',
+                position: 'relative',
+                maxWidth: '500px',
+                width: '100%',
+                backgroundColor: 'white',
+                overflow: 'hidden',
+                borderRadius: '10px',
+                padding: '15px',
               }}
             >
-              <Switch>
-                {routes.map(({ path, Component }) => (
-                  <Route key={path} exact path={path} component={Component} />
-                ))}
-                <Redirect to="/" />
-              </Switch>
+              <Navbar />
+              <Box
+                component="main"
+                sx={{
+                  height: 'calc(90vh - 160px)',
+                  overflowY: 'scroll',
+                }}
+              >
+                <Switch>
+                  {routes.map(({ path, Component }) => (
+                    <Route key={path} exact path={path} component={Component} />
+                  ))}
+                  <Redirect to="/" />
+                </Switch>
+              </Box>
+              <Footer />
             </Box>
-            <Footer />
           </Box>
-        </Box>
+        </SearchTextProvider>
       </AuthProvider>
     </ThemeProvider>
   );

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

@@ -17,6 +17,7 @@ import {
 } from '@mui/material';
 import '../../sass/UserAdmin.scss';
 
+
 // child of UserAdmin. Displays form to update users.
 const EditUsers = ({
   userToEdit,
@@ -47,8 +48,6 @@ const EditUsers = ({
     setUserManagedProjects(userToEdit.managedProjects);
   }, [userToEdit]);
 
-  console.log(userManagedProjects)
-
   const userProjectsToDisplay = activeProjects.filter((item) =>
     userProjects.includes(item[0])
   );
@@ -64,7 +63,6 @@ const EditUsers = ({
     ) {
       const newProjects = [...userManagedProjects, projectValue];
       updateUserDb(userToEdit, projectValue, 'add');
-      // updateUserDb(userToEdit, newProjects);
       setUserManagedProjects(newProjects);
       setProjectValue('');
     } else {
@@ -78,11 +76,10 @@ const EditUsers = ({
         (p) => p !== projectToRemove
       );
       updateUserDb(userToEdit, projectToRemove, 'remove');
-      // updateUserDb(userToEdit, newProjects);
       setUserManagedProjects(newProjects);
     }
   };
-
+  
   const handleSetIsActive = () => {
     if (!isSuperAdmin) {
       setIsActive(!isActive);

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

@@ -1,4 +1,3 @@
-import React, { useState } from 'react';
 import {
   Box,
   Button,
@@ -11,6 +10,7 @@ import {
 } from '@mui/material';
 
 import '../../sass/UserAdmin.scss';
+import { useSearchText } from '../../context/searchContext';
 
 const Buttonsx = {
   px: 2,
@@ -19,8 +19,7 @@ const Buttonsx = {
 
 const UserManagement = ({ users, setUserToEdit }) => {
   let searchResults = [];
-  const [searchResultType, setSearchResultType] = useState('name'); // Which results will diplay
-  const [searchTerm, setSearchTerm] = useState(''); // Serch term for the user/email search
+  const { searchText, setSearchText, searchResultType, setSearchResultType } = useSearchText(); // React context hook
 
   // Swaps the buttons and displayed panels for the search results, by email or by name
   const buttonSwap = () =>
@@ -30,10 +29,10 @@ const UserManagement = ({ users, setUserToEdit }) => {
 
   // Handle change on input in search form
   const handleChange = (event) => {
-    setSearchTerm(event.target.value);
+    setSearchText(event.target.value);
   };
 
-  if (!searchTerm) {
+  if (!searchText) {
     searchResults = [];
   } else {
     searchResults =
@@ -42,14 +41,14 @@ const UserManagement = ({ users, setUserToEdit }) => {
             .filter((user) =>
               user.email
                 ?.toLowerCase()
-                .includes(searchTerm.toLowerCase().trim())
+                .includes(searchText.toLowerCase().trim())
             )
             .sort((a, b) => a.email.localeCompare(b.email))
         : Object.values(users)
             .filter((user) =>
               `${user.name?.firstName} ${user.name?.lastName}`
                 .toLowerCase()
-                .includes(searchTerm.toLowerCase().trim())
+                .includes(searchText.toLowerCase().trim())
             )
             .sort((a, b) =>
               a.name?.firstName
@@ -103,7 +102,7 @@ const UserManagement = ({ users, setUserToEdit }) => {
           type="text"
           placeholder="Enter name and / or email to find a user."
           variant="standard"
-          value={searchTerm}
+          value={searchText}
           onChange={handleChange}
         />
         <Box

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

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import { useEffect } from 'react';
 import {
   Box,
   Button,
@@ -11,6 +11,7 @@ import {
   ListItemButton,
 } from '@mui/material';
 import { useLocation } from 'react-router-dom';
+import { useSearchText } from '../../context/searchContext';
 
 import '../../sass/UserAdmin.scss';
 
@@ -19,7 +20,7 @@ const Buttonsx = {
   py: 0.5,
 };
 
-const DummyComponent = ({ data, isProjectLead, setUserToEdit }) => {
+const ListComponent = ({ data, isProjectLead, setUserToEdit }) => {
   return (
     <List className="search-results disablePadding">
       {data.map((u, idx) => {
@@ -100,14 +101,12 @@ const DummyComponent = ({ data, isProjectLead, setUserToEdit }) => {
   );
 };
 
-const UserPermissionSearch = ({ admins, projectLeads, setUserToEdit }) => {
-  const [userType, setUserType] = useState('admin'); // Which results will display
-  const [searchText, setSearchText] = useState(''); // Search term for the admin/PM search
-  const [isProjectLead, setIsProjectLead] = useState(false);
+const UserPermissionSearch = ({ admins, projectManagers, setUserToEdit }) => {
+  const { searchText, setSearchText, userType, setUserType, isProjectLead, setIsProjectLead } = useSearchText(); // React context hook
 
   const location = useLocation();
 
-  const resultData = [...admins, ...projectLeads];
+  const resultData = [...admins, ...projectManagers];
 
   useEffect(() => {
     // Edit url by adding '/admin' upon loading
@@ -121,8 +120,15 @@ const UserPermissionSearch = ({ admins, projectLeads, setUserToEdit }) => {
   }, [userType]);
 
   // Swaps the buttons and displayed panels for the search results, by email or by name
-  const buttonSwap = () =>
-    isProjectLead ? setIsProjectLead(false) : setIsProjectLead(true);
+  const buttonSwap = () => {
+    if (isProjectLead) {
+      setIsProjectLead(false);
+      setUserType('admin');
+    } else {
+      setIsProjectLead(true);
+      setUserType('projectLead');
+    }
+  }
 
   // Handle change on input in search form
   const handleChange = (event) => {
@@ -268,7 +274,7 @@ const UserPermissionSearch = ({ admins, projectLeads, setUserToEdit }) => {
         >
           <Box>
             {/*Component to render admins and PMs*/}
-            <DummyComponent
+            <ListComponent
               data={filteredData}
               isProjectLead={isProjectLead}
               setUserToEdit={setUserToEdit}

client/src/context/searchContext.jsx

@@ -0,0 +1,23 @@
+import { createContext, useContext, useState } from 'react';
+
+const SearchTextContext = createContext();
+
+export const SearchTextProvider = ({ children }) => {
+  const [searchText, setSearchText] = useState('');
+  const [searchResultType, setSearchResultType] = useState('name');
+  const [userType, setUserType] = useState('admin');
+  const [isProjectLead, setIsProjectLead] = useState(false);
+
+  return (
+    <SearchTextContext.Provider value={{ 
+      searchText, setSearchText, 
+      searchResultType, setSearchResultType,
+      userType, setUserType,
+      isProjectLead, setIsProjectLead
+    }}>
+      {children}
+    </SearchTextContext.Provider>
+  );
+};
+
+export const useSearchText = () => useContext(SearchTextContext);

client/src/pages/UserPermission.jsx

@@ -29,25 +29,25 @@ const UserPermission = () => {
   }, [userApiService]);
 
   const updateUserDb = useCallback(
-    async (user, managedProjects) => {
-      await userApiService.updateUserDbProjects(user, managedProjects);
+    async (user, managedProjects, action) => {
+      await userApiService.updateUserDbProjects(user, managedProjects, action);
       fetchAdmins();
     },
     [userApiService, fetchAdmins]
   );
 
   const updateUserActiveStatus = useCallback(
     async (user, isActive) => {
-      await userApiService.updateUserDbIsActive(admins, isActive);
+      await userApiService.updateUserDbIsActive(user, isActive);
       fetchAdmins();
     },
     [userApiService, fetchAdmins]
   );
 
   // Update user's access level (admin/user)
   const updateUserAccessLevel = useCallback(
-    async (admin, newAccessLevel) => {
-      await userApiService.updateUserAccessLevel(admin, newAccessLevel);
+    async (user, newAccessLevel) => {
+      await userApiService.updateUserAccessLevel(user, newAccessLevel);
       fetchAdmins();
     },
     [userApiService, fetchAdmins]
@@ -62,7 +62,7 @@ const UserPermission = () => {
     fetchAdmins();
     fetchProjects();
     fetchProjectsManagers();
-  }, [fetchAdmins, fetchProjects, fetchProjectsManagers]);
+  }, [userToEdit, fetchAdmins, fetchProjects, fetchProjectsManagers]);
 
   const backToSearch = () => {
     setUserToEdit({});
@@ -76,7 +76,7 @@ const UserPermission = () => {
     return (
       <UserPermissionSearch
         admins={admins}
-        projectLeads={projectManagers}
+        projectManagers={projectManagers}
         setUserToEdit={setUserToEdit}
       />
     );