From 28ed1d1f0add4c5e2d10780b01972a29ab1a1ebb Mon Sep 17 00:00:00 2001
From: JamesNg <njames15@gmail.com>
Date: Tue, 7 Oct 2025 23:08:43 -0400
Subject: [PATCH 1/2] use React context hook to replace useState for search
 queries

---
 client/src/App.jsx                            |  68 ++--
 .../components/user-admin/UserManagement.jsx  |  15 +-
 .../user-admin/UserPermissionSearch.jsx       |  19 +-
 client/src/context/searchContext.jsx          |  23 ++
 client/src/pages/UserPermissionSearch.jsx     | 314 ------------------
 5 files changed, 75 insertions(+), 364 deletions(-)
 create mode 100644 client/src/context/searchContext.jsx
 delete mode 100644 client/src/pages/UserPermissionSearch.jsx

diff --git a/client/src/App.jsx b/client/src/App.jsx
index 83248a893..09ac9e175 100644
--- a/client/src/App.jsx
+++ b/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,14 +24,11 @@ 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 OnboardOffboardVisibility from './pages/OnboardOffboardVisibility';
 
 import { Box, ThemeProvider } from '@mui/material';
 import theme from './theme';
-
 import './App.scss';
 
 /* 
@@ -45,6 +40,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 },
@@ -99,47 +95,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>
   );
diff --git a/client/src/components/user-admin/UserManagement.jsx b/client/src/components/user-admin/UserManagement.jsx
index 82673d79b..25d24947d 100644
--- a/client/src/components/user-admin/UserManagement.jsx
+++ b/client/src/components/user-admin/UserManagement.jsx
@@ -1,4 +1,3 @@
-import React, { useState } from 'react';
 import {
   Box,
   Button,
@@ -12,6 +11,7 @@ import {
 import useAuth from '../../hooks/useAuth';
 import PersonIcon from '@mui/icons-material/Person';
 import '../../sass/UserAdmin.scss';
+import { useSearchText } from '../../context/searchContext';
 
 const Buttonsx = {
   px: 2,
@@ -20,8 +20,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
   const { auth } = useAuth();
 
   // Swaps the buttons and displayed panels for the search results, by email or by name
@@ -32,10 +31,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 =
@@ -44,14 +43,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
@@ -105,7 +104,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
diff --git a/client/src/components/user-admin/UserPermissionSearch.jsx b/client/src/components/user-admin/UserPermissionSearch.jsx
index db9e92e6c..80786ca55 100644
--- a/client/src/components/user-admin/UserPermissionSearch.jsx
+++ b/client/src/components/user-admin/UserPermissionSearch.jsx
@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useEffect } from 'react';
 import {
   Box,
   Button,
@@ -11,7 +11,7 @@ import {
   ListItemButton,
 } from '@mui/material';
 import { useLocation } from 'react-router-dom';
-import useAuth from '../../hooks/useAuth';
+import { useSearchText } from '../../context/searchContext';
 import PersonIcon from '@mui/icons-material/Person';
 import '../../sass/UserAdmin.scss';
 
@@ -105,9 +105,7 @@ const DummyComponent = ({ data, isProjectLead, setUserToEdit }) => {
 };
 
 const UserPermissionSearch = ({ admins, projectLeads, setUserToEdit }) => {
-  const [userType] = useState('admin'); // Which results will display
-  const [searchText, setSearchText] = useState(''); // Search term for the admin/PM search
-  const [isProjectLead, setIsProjectLead] = useState(false);
+  const { searchText, setSearchText, userType, setUserType, isProjectLead, setIsProjectLead } = useSearchText(); // React context hook
 
   const location = useLocation();
 
@@ -125,8 +123,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) => {
diff --git a/client/src/context/searchContext.jsx b/client/src/context/searchContext.jsx
new file mode 100644
index 000000000..779ea1eb6
--- /dev/null
+++ b/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);
\ No newline at end of file
diff --git a/client/src/pages/UserPermissionSearch.jsx b/client/src/pages/UserPermissionSearch.jsx
deleted file mode 100644
index a077aa33f..000000000
--- a/client/src/pages/UserPermissionSearch.jsx
+++ /dev/null
@@ -1,314 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import {
-  Box,
-  Button,
-  ButtonGroup,
-  Grid,
-  TextField,
-  Typography,
-  List,
-  ListItem,
-  ListItemButton,
-} from '@mui/material';
-import { useLocation } from 'react-router-dom';
-
-import '../sass/UserAdmin.scss';
-
-const Buttonsx = {
-  px: 2,
-  py: 0.5,
-};
-
-const dummyData = [
-  {
-    _id: 1,
-    name: {
-      firstName: 'John',
-      lastName: 'Doe',
-    },
-    accessLevel: 'admin',
-    email: 'johndoe@hackforla.org',
-    projects: [],
-  },
-  {
-    _id: 2,
-    name: {
-      firstName: 'Vinny',
-      lastName: 'Harris',
-    },
-    accessLevel: 'admin',
-    email: 'vinnyharris@hackforla.org',
-    projects: [],
-  },
-  {
-    _id: 3,
-    name: {
-      firstName: 'Gary',
-      lastName: 'Jones',
-    },
-    accessLevel: 'admin',
-    email: 'garyjones@hackforla.org',
-    projects: [],
-  },
-  {
-    _id: 4,
-    name: {
-      firstName: 'Jane',
-      lastName: 'Smith',
-    },
-    accessLevel: 'projectLead',
-    email: 'janesmith@hackforla.org',
-    projects: ['VRMS', 'Mobile'],
-  },
-  {
-    _id: 5,
-    name: {
-      firstName: 'Bonnie',
-      lastName: 'Wolfe',
-    },
-    accessLevel: 'projectLead',
-    email: 'bonnie@hackforla.org',
-    projects: ['Home Unite Us'],
-  },
-  {
-    _id: 6,
-    name: {
-      firstName: 'Diana',
-      lastName: 'Loeb',
-    },
-    accessLevel: 'projectLead',
-    email: 'dianaloeb@hackforla.org',
-    projects: ['HackforLA Mobile', 'LA TDM Calculator'],
-  },
-  {
-    _id: 7,
-    name: {
-      firstName: 'Zack',
-      lastName: 'Cruz',
-    },
-    accessLevel: 'projectLead',
-    email: 'dianaloeb@hackforla.org',
-    projects: ['LA TDM Calculator', 'VRMS backend'],
-  },
-  {
-    _id: 8,
-    name: {
-      firstName: 'Iris',
-      lastName: 'Sosa',
-    },
-    accessLevel: 'projectLead',
-    email: 'irissosa@hackforla.org',
-    projects: ['Home Unite Us', 'VRMS Support'],
-  },
-];
-
-const DummyComponent = ({ data, type }) => {
-  return (
-    <List className="search-results disablePadding">
-      {data.map((user, index) => {
-        // Destructure user object
-        const { _id, name, email } = user;
-        return type === 'admin' ? (
-          <ListItem
-            sx={{
-              px: 2.4,
-              py: 1,
-              borderBottom: 1.6,
-              borderBottomColor: 'grey.300',
-            }}
-            key={`result_${_id}/${index}`}
-          >
-            <ListItemButton
-              sx={{
-                px: 0.25,
-                py: 0.36,
-                color: 'primary.main',
-                mx: 0.16,
-              }}
-              className="search-results-button"
-              type="button"
-              onClick={() => setUserToEdit(user)}
-            >
-              <Grid container>
-                <Grid item>
-                  <Typography style={{ fontWeight: 600 }}>
-                    {`${name.firstName.toUpperCase()} ${name.lastName.toUpperCase()} ( ${email.toUpperCase()} )`}
-                  </Typography>
-                </Grid>
-              </Grid>
-            </ListItemButton>
-          </ListItem>
-        ) : (
-          <ListItem
-            style={{ display: 'flex', justifyContent: 'flex-end' }}
-            sx={{
-              px: 2.4,
-              py: 1,
-              borderBottom: 1.6,
-              borderBottomColor: 'grey.300',
-            }}
-            key={`result_${_id}/${index}`}
-          >
-            <ListItemButton
-              sx={{
-                px: 0.25,
-                py: 0.36,
-                color: 'primary.main',
-                mx: 0.16,
-              }}
-              className="search-results-button"
-              type="button"
-              onClick={() => setUserToEdit(user)}
-            >
-              <Grid container justifyContent={'space-between'}>
-                <Grid item>
-                  <Typography style={{ fontWeight: 600 }}>
-                    {name.firstName.toUpperCase() +
-                      ' ' +
-                      name.lastName.toUpperCase()}
-                  </Typography>
-                </Grid>
-                <Grid item>
-                  <Typography style={{ fontWeight: 600 }} color="black">
-                    {user.project}
-                  </Typography>
-                </Grid>
-              </Grid>
-            </ListItemButton>
-          </ListItem>
-        );
-      })}
-    </List>
-  );
-};
-
-const UserPermissionSearch = ({ users, setUserToEdit }) => {
-  const [userType, setUserType] = useState('admin'); // Which results will display
-  const [searchText, setSearchText] = useState(''); // Search term for the admin/PM search
-
-  const location = useLocation();
-
-  useEffect(() => {
-    // Edits url by adding '/admin' upon loading
-    let editURL = '';
-    if (userType === 'admin') {
-      editURL = location.pathname + '/admin';
-    } else {
-      editURL = location.pathname + '/projects';
-    }
-    window.history.replaceState({}, '', editURL);
-  }, [userType]);
-
-  // Swaps the buttons and displayed panels for the search results, by email or by name
-  const buttonSwap = () =>
-    userType === 'projectLead'
-      ? setUserType('admin')
-      : setUserType('projectLead');
-
-  // Handle change on input in search form
-  const handleChange = (event) => {
-    setSearchText(event.target.value);
-  };
-
-  // Filtering logic
-  let filteredData;
-  if (!searchText) {
-    filteredData = dummyData.filter((user) => user.accessLevel === userType);
-    if (userType === 'admin') {
-      // Default display for admins, sorted ASC based on first name
-      filteredData.sort((u1, u2) =>
-        u1.name?.firstName.localeCompare(u2.name?.firstName)
-      );
-    } else {
-      // Default display of all PMs, sorted ASC based on project name, then first name
-      let tempFilter = [];
-      filteredData.forEach((user) => {
-        user.projects.forEach((project) => {
-          tempFilter.push({ ...user, project });
-        });
-      });
-      tempFilter.sort(
-        (u1, u2) =>
-          u1.project.localeCompare(u2.project) ||
-          u1.name?.firstName.localeCompare(u2.name?.firstName)
-      );
-      filteredData = [...tempFilter];
-    }
-  }
-
-  return (
-    <Box className="container--usermanagement" sx={{ px: '1.8rem', mb: 0 }}>
-      <Box
-        sx={{
-          display: 'flex',
-          flexDirection: 'column',
-          alignItems: 'center',
-          pt: 5,
-          height: '100%',
-          width: 1 / 1,
-        }}
-      >
-        <Typography
-          variant="h4"
-          style={{ marginBottom: 20, fontWeight: 'bold' }}
-        >
-          User Permission Search
-        </Typography>
-        <Box className="tab-buttons">
-          <ButtonGroup
-            fullWidth
-            sx={{
-              display: 'flex',
-              flexDirection: 'row',
-              justifyContent: 'center',
-              whiteSpace: 'nowrap',
-              mx: 1,
-            }}
-          >
-            <Button
-              sx={Buttonsx}
-              type="button"
-              variant={userType === 'admin' ? 'contained' : 'secondary'}
-              onClick={buttonSwap}
-            >
-              Admins
-            </Button>
-            <Button
-              sx={Buttonsx}
-              type="button"
-              variant={userType === 'projectLead' ? 'contained' : 'secondary'}
-              onClick={buttonSwap}
-            >
-              Project Members
-            </Button>
-          </ButtonGroup>
-        </Box>
-        <TextField
-          type="text"
-          placeholder={
-            userType === 'admin' ? 'Search name' : 'Search name or project'
-          }
-          variant="standard"
-          value={searchText}
-          onChange={handleChange}
-        />
-        <Box
-          sx={{
-            bgcolor: dummyData.length > 0 ? '#F5F5F5' : 'transparent',
-            my: 1.2,
-            borderRadius: 1,
-            flexGrow: 1,
-            width: 1 / 1,
-          }}
-        >
-          <Box>
-            {/*Component to render admins and PMs*/}
-            <DummyComponent data={filteredData} type={userType} />
-          </Box>
-        </Box>
-      </Box>
-    </Box>
-  );
-};
-
-export default UserPermissionSearch;

From 69d9ac48b4ad26dc3cb29a99a2b8799db361a40e Mon Sep 17 00:00:00 2001
From: JamesNg <njames15@gmail.com>
Date: Wed, 29 Oct 2025 17:19:47 -0400
Subject: [PATCH 2/2] fix bugs preventing proper updating of user profile
 during search nav

---
 client/src/App.jsx                                 |  2 +-
 client/src/components/user-admin/EditUsers.jsx     |  4 ++--
 .../components/user-admin/UserPermissionSearch.jsx |  9 ++++-----
 client/src/pages/UserPermission.jsx                | 14 +++++++-------
 4 files changed, 14 insertions(+), 15 deletions(-)

diff --git a/client/src/App.jsx b/client/src/App.jsx
index 09ac9e175..e08c00304 100644
--- a/client/src/App.jsx
+++ b/client/src/App.jsx
@@ -65,7 +65,7 @@ const routes = [
   {
     path: '/users/permission-search',
     name: 'useradmin',
-    Component: UserPermission,
+    Component: withAuth(UserPermission),
   },
   {
     path: '/projects/visibility',
diff --git a/client/src/components/user-admin/EditUsers.jsx b/client/src/components/user-admin/EditUsers.jsx
index 5dfa731a7..65ed08a2c 100644
--- a/client/src/components/user-admin/EditUsers.jsx
+++ b/client/src/components/user-admin/EditUsers.jsx
@@ -18,7 +18,7 @@ import {
 import '../../sass/UserAdmin.scss';
 import useAuth from '../../hooks/useAuth';
 
-
+// child of UserAdmin. Displays form to update users.
 const EditUsers = ({
   userToEdit,
   backToSearch,
@@ -80,7 +80,7 @@ const EditUsers = ({
       setUserManagedProjects(newProjects);
     }
   };
-
+  
   const handleSetIsActive = () => {
     if (!isSuperAdmin) {
       setIsActive(!isActive);
diff --git a/client/src/components/user-admin/UserPermissionSearch.jsx b/client/src/components/user-admin/UserPermissionSearch.jsx
index 80786ca55..d91f3675f 100644
--- a/client/src/components/user-admin/UserPermissionSearch.jsx
+++ b/client/src/components/user-admin/UserPermissionSearch.jsx
@@ -20,8 +20,7 @@ const Buttonsx = {
   py: 0.5,
 };
 
-const DummyComponent = ({ data, isProjectLead, setUserToEdit }) => {
-  const { auth } = useAuth();
+const ListComponent = ({ data, isProjectLead, setUserToEdit }) => {
   return (
     <List className="search-results disablePadding">
       {data.map((u, idx) => {
@@ -104,12 +103,12 @@ const DummyComponent = ({ data, isProjectLead, setUserToEdit }) => {
   );
 };
 
-const UserPermissionSearch = ({ admins, projectLeads, setUserToEdit }) => {
+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
@@ -328,7 +327,7 @@ const UserPermissionSearch = ({ admins, projectLeads, setUserToEdit }) => {
         >
           <Box>
             {/*Component to render admins and PMs*/}
-            <DummyComponent
+            <ListComponent
               data={filteredData}
               isProjectLead={isProjectLead}
               setUserToEdit={setUserToEdit}
diff --git a/client/src/pages/UserPermission.jsx b/client/src/pages/UserPermission.jsx
index af38752a6..1aeea1b6f 100644
--- a/client/src/pages/UserPermission.jsx
+++ b/client/src/pages/UserPermission.jsx
@@ -29,8 +29,8 @@ 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]
@@ -38,7 +38,7 @@ const UserPermission = () => {
 
   const updateUserActiveStatus = useCallback(
     async (user, isActive) => {
-      await userApiService.updateUserDbIsActive(admins, isActive);
+      await userApiService.updateUserDbIsActive(user, isActive);
       fetchAdmins();
     },
     [userApiService, fetchAdmins]
@@ -46,8 +46,8 @@ const UserPermission = () => {
 
   // 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}
       />
     );