SCE Context Provider (#1849)

Funsize1234 · web-flow · commit b0086c1e104c · 2025-07-28T21:45:53.000-07:00
* consolidated useUser and useAuth into useSCE

* frontend test changes
diff --git a/src/Components/Navbar/AdminNavbar.js b/src/Components/Navbar/AdminNavbar.js
@@ -1,10 +1,8 @@
 import React from 'react';
-import { useUser } from '../context/UserContext';
-import { useAuth } from '../context/AuthContext';
+import { useSCE } from '../context/SceContext';
 
 export default function UserNavBar(props) {
-  const { user } = useUser();
-  const { setAuthenticated } = useAuth();
+  const { user, setAuthenticated } = useSCE();
   const getLinkClassName = (path) => {
     const weAreAtGivenPath = path === window.location.pathname;
     let className = 'flex items-center p-2 text-gray-900 rounded-lg dark:text-white';
diff --git a/src/Components/Navbar/NavBarWrapper.js b/src/Components/Navbar/NavBarWrapper.js
@@ -1,16 +1,14 @@
 import React from 'react';
 import UserNavbar from './UserNavbar';
 import AdminNavbar from './AdminNavbar';
-import { useUser } from '../context/UserContext';
-import { useAuth } from '../context/AuthContext';
+import { useSCE } from '../context/SceContext';
 
 function NavBarWrapper({
   enableAdminNavbar = false,
   component: Component,
   ...appProps
 }) {
-  const { user, setUser } = useUser();
-  const { setAuthenticated } = useAuth();
+  const { user, setUser, setAuthenticated } = useSCE();
 
   function handleLogout() {
     setAuthenticated(false);
diff --git a/src/Components/Navbar/UserNavbar.js b/src/Components/Navbar/UserNavbar.js
@@ -1,11 +1,9 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { membershipState } from '../../Enums';
-import { useUser } from '../context/UserContext';
-import { useAuth } from '../context/AuthContext';
+import { useSCE } from '../context/SceContext';
 
 export default function UserNavbar(props) {
-  const { user } = useUser();
-  const { authenticated } = useAuth();
+  const { user, authenticated } = useSCE();
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
   const dropdownRef = useRef(null);
   let initials = '';
diff --git a/src/Components/Routing/PrivateRoute.js b/src/Components/Routing/PrivateRoute.js
@@ -2,16 +2,14 @@ import React from 'react';
 import { Route, Redirect } from 'react-router-dom';
 import { membershipState } from '../../Enums';
 import { allowedIf } from '../../Routes';
-import { useUser } from '../../Components/context/UserContext';
-import { useAuth } from '../../Components/context/AuthContext';
+import { useSCE } from '../context/SceContext';
 
 export default function PrivateRoute({
   component: Component,
   appProps,
   ...params
 }) {
-  const { user } = useUser();
-  const { authenticated } = useAuth();
+  const { user, authenticated } = useSCE();
 
   // Check if the user's access level matches with route's access grant
   const PERMISSION_LOOKUP_TABLE = {
diff --git a/src/Components/ShortcutKeyModal/SearchModal.js b/src/Components/ShortcutKeyModal/SearchModal.js
@@ -2,8 +2,7 @@ import React, { useRef, useEffect, useState, useCallback, useMemo } from 'react'
 import './SearchModal.css';
 import { officerOrAdminRoutes, signedOutRoutes, memberRoutes, notAuthenticatedRoutes } from '../../Routes';
 import { membershipState } from '../../Enums';
-import { useUser } from '../context/UserContext';
-import { useAuth } from '../context/AuthContext';
+import { useSCE } from '../context/SceContext';
 import { searchUsersAndCleezyUrls } from '../../APIFunctions/ShortcutSearch';
 
 export default function SearchModal() {
@@ -14,9 +13,8 @@ export default function SearchModal() {
   const [keyword, setKeyword] = useState('');
   const [suggestions, setSuggestions] = useState([...filteredSignedOutRoutes]);
   const [selectItem, setSelectItem] = useState(0);
-  const { user } = useUser();
+  const { user, authenticated } = useSCE();
   const [errorMsg, setErrorMsg] = useState('');
-  const { authenticated } = useAuth();
   // Maximum number of suggestions to display in the search dropdown
   const SHORTCUT_MAX_RESULT = 5;
   const DEBOUNCE_TIME = 400;
diff --git a/src/Components/context/AuthContext.js b/src/Components/context/AuthContext.js
diff --git a/src/Components/context/SceContext.js b/src/Components/context/SceContext.js
@@ -0,0 +1,12 @@
+import React, { createContext, useContext } from 'react';
+
+export const SceContext = createContext({
+  user: {},
+  setUser: () => {},
+  authenticated: false,
+  setAuthenticated: () => {},
+});
+
+export function useSCE() {
+  return useContext(SceContext);
+}
diff --git a/src/Components/context/UserContext.js b/src/Components/context/UserContext.js
diff --git a/src/Pages/2DPrinting/2DPrinting.js b/src/Pages/2DPrinting/2DPrinting.js
@@ -12,10 +12,10 @@ import { healthCheck } from '../../APIFunctions/2DPrinting';
 import ConfirmationModal from
   '../../Components/DecisionModal/ConfirmationModal.js';
 
-import { useUser } from '../../Components/context/UserContext';
+import { useSCE } from '../../Components/context/SceContext.js';
 
 export default function Printing() {
-  const { user, setUser } = useUser();
+  const { user, setUser } = useSCE();
   const [dragActive, setDragActive] = useState(false);
   const [confirmModal, setConfirmModal] = useState(false);
   const [numberOfPagesInPdfPreview, setNumberOfPagesInPdfPreview] = useState(0);
diff --git a/src/Pages/Advertisement/AdvertisementAdmin.js b/src/Pages/Advertisement/AdvertisementAdmin.js
@@ -1,10 +1,10 @@
 import React from 'react';
 import { createAd, getAds, deleteAd } from '../../APIFunctions/Advertisement.js';
 import { useState, useEffect } from 'react';
-import { useUser } from '../../Components/context/UserContext';
+import { useSCE } from '../../Components/context/SceContext.js';
 
 export default function AdvertisementAdmin() {
-  const { user } = useUser();
+  const { user } = useSCE();
 
   const [ads, setAds] = useState([]);
   const [message, setMessage] = useState('');
diff --git a/src/Pages/AuditLog/AuditLog.js b/src/Pages/AuditLog/AuditLog.js
@@ -1,7 +1,7 @@
 import { useState, useEffect } from 'react';
 import { getAllLogs } from '../../APIFunctions/AuditLog';
 import Pagination from './Components/Pagination';
-import { useUser } from '../../Components/context/UserContext';
+import { useSCE } from '../../Components/context/SceContext';
 import AuditLogCard from './Components/AuditLogCard';
 
 export default function AuditLogPage() {
@@ -17,7 +17,7 @@ export default function AuditLogPage() {
   const [currentPage, setCurrentPage] = useState(0);
   const [applyingFilters, setApplyingFilters] = useState(false);
 
-  const user = useUser();
+  const user = useSCE();
 
   const toggleActivityFilter = activity => {
     setActivityFilters(prev => (prev.includes(activity) ? prev.filter(a => a !== activity) : [...prev, activity]));
diff --git a/src/Pages/CardReader/CardReader.js b/src/Pages/CardReader/CardReader.js
@@ -1,6 +1,6 @@
 import { useState, useEffect, useMemo } from 'react';
 import { BASE_API_URL } from '../../Enums';
-import { useUser } from '../../Components/context/UserContext';
+import { useSCE } from '../../Components/context/SceContext';
 import { getAllCardsFromDb, deleteCardFromDb } from '../../APIFunctions/CardReader';
 import ConfirmationModal from '../../Components/DecisionModal/ConfirmationModal';
 import { trashcanSymbol } from '../Overview/SVG';
@@ -15,7 +15,7 @@ const header = [
 ].join('');
 
 export default function CardReader() {
-  const { user } = useUser();
+  const { user } = useSCE();
   const token = user.token;
   const [logs, setLogs] = useState([]);
   const [cards, setCards] = useState([]);
diff --git a/src/Pages/LedSign/LedSign.js b/src/Pages/LedSign/LedSign.js
@@ -1,11 +1,10 @@
 import React, { useState, useEffect } from 'react';
 import { healthCheck, updateSignText } from '../../APIFunctions/LedSign';
-import { useUser } from '../../Components/context/UserContext';
-
+import { useSCE } from '../../Components/context/SceContext';
 import './ledsign.css';
 
 function LedSign() {
-  const { user } = useUser();
+  const { user } = useSCE();
   const [signHealthy, setSignHealthy] = useState(false);
   const [loading, setLoading] = useState(true);
   const [text, setText] = useState('');
diff --git a/src/Pages/Login/Login.js b/src/Pages/Login/Login.js
@@ -1,9 +1,9 @@
 import React, { useState } from 'react';
 import { loginUser } from '../../APIFunctions/Auth';
-import { useAuth } from '../../Components/context/AuthContext';
+import { useSCE } from '../../Components/context/SceContext';
 
 export default function Login() {
-  const { setAuthenticated } = useAuth();
+  const { setAuthenticated } = useSCE();
   const queryParams = new URLSearchParams(window.location.search);
   const [errorMsg, setErrorMsg] = useState('');
 
diff --git a/src/Pages/Messaging/Messaging.js b/src/Pages/Messaging/Messaging.js
@@ -1,12 +1,12 @@
 import React, { useState, useEffect } from 'react';
 import { sendMessage, connectToRoom } from '../../APIFunctions/Messaging';
 import { useParams, useHistory } from 'react-router-dom/cjs/react-router-dom.min';
-import { useUser } from '../../Components/context/UserContext';
+import { useSCE } from '../../Components/context/SceContext';
 
 export default function Messaging() {
   const { id } = useParams();
   const history = useHistory();
-  const { user } = useUser();
+  const { user } = useSCE();
   const [roomIdInput, setRoomIdInput] = useState(id || '');
   const [roomIdSubmit, setRoomIdSubmit] = useState(id || 'general');
 
diff --git a/src/Pages/Overview/Overview.js b/src/Pages/Overview/Overview.js
@@ -8,10 +8,10 @@ import { getAllUsersValidVerifiedAndSubscribed } from '../../APIFunctions/User';
 import ConfirmationModal from
   '../../Components/DecisionModal/ConfirmationModal.js';
 const enums = require('../../Enums.js');
-import { useUser } from '../../Components/context/UserContext';
+import { useSCE } from '../../Components/context/SceContext.js';
 
 export default function Overview() {
-  const { user } = useUser();
+  const { user } = useSCE();
   const [toggleDelete, setToggleDelete] = useState(false);
   const [loading, setLoading] = useState(false);
   const [paginationText, setPaginationText] = useState('');
diff --git a/src/Pages/Profile/MemberView/ChangePassword.js b/src/Pages/Profile/MemberView/ChangePassword.js
@@ -1,10 +1,10 @@
 import React, { useEffect, useState } from 'react';
 import { editUser } from '../../../APIFunctions/User';
-import { useUser } from '../../../Components/context/UserContext';
+import { useSCE } from '../../../Components/context/SceContext';
 
 export default function ChangePasswordModal(props) {
   const { bannerCallback = (message, color) => { }, confirmClassAddons } = props;
-  const { user } = useUser();
+  const { user } = useSCE();
   const [password, setPassword] = useState('');
   const [confirmPassword, setConfirmPassword] = useState('');
   const [showPassword, setShowPassword] = useState(false);
diff --git a/src/Pages/Profile/MemberView/DeleteAccountModal.js b/src/Pages/Profile/MemberView/DeleteAccountModal.js
@@ -1,10 +1,10 @@
 import React from 'react';
 import { deleteUserByID } from '../../../APIFunctions/User';
-import { useUser } from '../../../Components/context/UserContext';
+import { useSCE } from '../../../Components/context/SceContext';
 
 export default function DeleteAccountModal(props) {
   const { bannerCallback = () => {} } = props;
-  const { user } = useUser();
+  const { user } = useSCE();
 
   async function deleteAccount() {
     const apiResponse = await deleteUserByID(
diff --git a/src/Pages/Profile/MemberView/GetApiKeyModal.js b/src/Pages/Profile/MemberView/GetApiKeyModal.js
@@ -1,10 +1,10 @@
 import React, {useState, useEffect} from 'react';
 import { getApiKey } from '../../../APIFunctions/User';
-import { useUser } from '../../../Components/context/UserContext';
+import { useSCE } from '../../../Components/context/SceContext';
 
 const GetApiKeyModal = (props) => {
   const { bannerCallback = () => {} } = props;
-  const { user } = useUser();
+  const { user } = useSCE();
   const [apiKey, setApiKey] = useState('');
 
   async function generateKey() {
diff --git a/src/Pages/Profile/MemberView/Profile.js b/src/Pages/Profile/MemberView/Profile.js
@@ -4,10 +4,10 @@ import ChangePasswordModal from './ChangePassword';
 import DeleteAccountModal from './DeleteAccountModal';
 import GetApiKeyModal from './GetApiKeyModal';
 import { membershipState, membershipStateToString } from '../../../Enums';
-import { useUser } from '../../../Components/context/UserContext';
+import { useSCE } from '../../../Components/context/SceContext';
 
 export default function Profile() {
-  const { user } = useUser();
+  const { user } = useSCE();
   const [response, setResponse] = useState({});
   const [bannerMessage, setBannerMessage] = useState('');
   const [bannerColor, setBannerColor] = useState('');
diff --git a/src/Pages/Profile/admin/SendUnsubscribeEmail.js b/src/Pages/Profile/admin/SendUnsubscribeEmail.js
@@ -1,9 +1,9 @@
 import React, { useState } from 'react';
 import { getAllUserSubscribedAndVerified } from '../../../APIFunctions/User';
-import { useUser } from '../../../Components/context/UserContext';
+import { useSCE } from '../../../Components/context/SceContext';
 
 function AdminDashboard() {
-  const { user } = useUser();
+  const { user } = useSCE();
   const [buttonText, setButtonText] = useState('Send Unsubscribe Email to All');
   const [buttonColor, setButtonColor] = useState('');
 
diff --git a/src/Pages/URLShortener/URLShortener.js b/src/Pages/URLShortener/URLShortener.js
@@ -4,10 +4,10 @@ import React, { useEffect, useState } from 'react';
 import { getAllUrls, createUrl, deleteUrl } from '../../APIFunctions/Cleezy';
 import { trashcanSymbol } from '../Overview/SVG';
 import ConfirmationModal from '../../Components/DecisionModal/ConfirmationModal.js';
-import { useUser } from '../../Components/context/UserContext';
+import { useSCE } from '../../Components/context/SceContext.js';
 
 export default function URLShortenerPage() {
-  const { user } = useUser();
+  const { user } = useSCE();
   const [isCleezyDisabled, setIsCleezyDisabled] = useState(false);
   const [url, setUrl] = useState('');
   const [invalidUrl, setInvalidUrl] = useState();
diff --git a/src/Pages/UserManager/EditUserInfo.js b/src/Pages/UserManager/EditUserInfo.js
@@ -3,8 +3,7 @@ import {
   getUserById,
   editUser,
 } from '../../APIFunctions/User';
-import { useUser } from '../../Components/context/UserContext';
-
+import { useSCE } from '../../Components/context/SceContext';
 import MajorDropdown from '../MembershipApplication/MajorDropdown';
 import RoleDropdown from './RoleDropdown';
 import ExpirationDropdown from './ExpirationDropdown';
@@ -13,7 +12,7 @@ import { sendVerificationEmail } from '../../APIFunctions/Mailer';
 
 
 export default function EditUserInfo(props) {
-  const { user } = useUser();
+  const { user } = useSCE();
   const [firstName, setFirstName] = useState('');
   const [lastName, setLastName] = useState('');
   const [password, setPassword] = useState(null);
diff --git a/src/Routing.js b/src/Routing.js
@@ -6,14 +6,9 @@ import NavBarWrapper from './Components/Navbar/NavBarWrapper';
 
 import NotFoundPage from './Pages/NotFoundPage/NotFoundPage';
 
-import { useUser } from './Components/context/UserContext';
-import { useAuth } from './Components/context/AuthContext';
-
 import { officerOrAdminRoutes, notAuthenticatedRoutes, signedOutRoutes } from './Routes.js';
 
 export default function Routing({ appProps }) {
-  const { user, setUser } = useUser();
-  const { authenticated } = useAuth();
 
   const signedInRoutes = [...officerOrAdminRoutes, ...notAuthenticatedRoutes];
 
diff --git a/src/index.js b/src/index.js
@@ -5,9 +5,8 @@ import './index.css';
 
 import Routing from './Routing';
 import { checkIfUserIsSignedIn } from './APIFunctions/Auth';
-import { UserContext } from './Components/context/UserContext';
+import { SceContext } from './Components/context/SceContext';
 import SearchModal from './Components/ShortcutKeyModal/SearchModal';
-import { AuthContext } from './Components/context/AuthContext';
 
 function App() {
   const [authenticated, setAuthenticated] = useState(false);
@@ -31,14 +30,12 @@ function App() {
 
   return (
     !isAuthenticating && (
-      <UserContext.Provider value={{ user, setUser }}>
-        <AuthContext.Provider value={{ authenticated, setAuthenticated }}>
-          <BrowserRouter>
-            <SearchModal/>
-            <Routing/>
-          </BrowserRouter>
-        </AuthContext.Provider>
-      </UserContext.Provider>
+      <SceContext.Provider value={{user, setUser, authenticated, setAuthenticated}}>
+        <BrowserRouter>
+          <SearchModal/>
+          <Routing/>
+        </BrowserRouter>
+      </SceContext.Provider>
     )
   );
 }
diff --git a/test/frontend/Routing.test.js b/test/frontend/Routing.test.js
