use React context hook to replace useState for search queries

Author: jng34

VRMS

@@ -0,0 +1 @@
+Subproject commit 7042af0f43f0b034977c7f64c613e9d8b7199edb

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 },
@@ -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/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';
 
@@ -101,9 +102,7 @@ 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 { searchText, setSearchText, userType, setUserType, isProjectLead, setIsProjectLead } = useSearchText(); // React context hook
 
   const location = useLocation();
 
@@ -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) => {

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);