From 3f8ef8f9bf6dd34b37e9c6220703aed42856eb2f Mon Sep 17 00:00:00 2001
From: Dev Singh <dev@devksingh.com>
Date: Wed, 5 Nov 2025 10:12:16 -0600
Subject: [PATCH 1/3] Fix crash when clicking back on room requests

---
 .../roomRequest/RoomRequestLanding.page.tsx   | 74 +++++++++----------
 1 file changed, 37 insertions(+), 37 deletions(-)

diff --git a/src/ui/pages/roomRequest/RoomRequestLanding.page.tsx b/src/ui/pages/roomRequest/RoomRequestLanding.page.tsx
index 83d0dbe2..17c58f4b 100644
--- a/src/ui/pages/roomRequest/RoomRequestLanding.page.tsx
+++ b/src/ui/pages/roomRequest/RoomRequestLanding.page.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { Container, Title, Tabs, Select, Loader } from "@mantine/core";
+import { Container, Title, Tabs, Select } from "@mantine/core";
 import { AuthGuard } from "@ui/components/AuthGuard";
 import { AppRoles } from "@common/roles";
 import { useApi } from "@ui/util/api";
@@ -19,16 +19,17 @@ import { useSearchParams } from "react-router-dom";
 export const ManageRoomRequestsPage: React.FC = () => {
   const api = useApi("core");
   const [semester, setSemesterState] = useState<string | null>(null);
-  const [isLoading, setIsLoading] = useState(false);
   const nextSemesters = getSemesters();
   const semesterOptions = [...getPreviousSemesters(), ...nextSemesters];
   const [searchParams, setSearchParams] = useSearchParams();
-  const setSemester = (semester: string | null) => {
-    setSemesterState(semester);
-    if (semester) {
-      setSearchParams({ semester });
+
+  const setSemester = (newSemester: string | null) => {
+    if (newSemester && newSemester !== semester) {
+      setSemesterState(newSemester);
+      setSearchParams({ semester: newSemester });
     }
   };
+
   const createRoomRequest = async (
     payload: RoomRequestFormValues,
   ): Promise<RoomRequestPostResponse> => {
@@ -53,16 +54,23 @@ export const ManageRoomRequestsPage: React.FC = () => {
   };
 
   useEffect(() => {
-    const semeseterFromUrl = searchParams.get("semester") as string | null;
+    const semesterFromUrl = searchParams.get("semester");
     if (
-      semeseterFromUrl &&
-      semesterOptions.map((x) => x.value).includes(semeseterFromUrl)
+      semesterFromUrl &&
+      semesterOptions.map((x) => x.value).includes(semesterFromUrl)
     ) {
-      setSemester(semeseterFromUrl);
+      if (semesterFromUrl !== semester) {
+        setSemesterState(semesterFromUrl);
+      }
     } else {
-      setSemester(nextSemesters[0].value);
+      const defaultSemester = nextSemesters[0].value;
+      if (defaultSemester !== semester) {
+        setSemesterState(defaultSemester);
+        setSearchParams({ semester: defaultSemester });
+      }
     }
-  }, [searchParams, semesterOptions, nextSemesters]);
+  }, [searchParams, semester, semesterOptions, nextSemesters, setSearchParams]);
+
   return (
     <AuthGuard
       resourceDef={{
@@ -82,32 +90,24 @@ export const ManageRoomRequestsPage: React.FC = () => {
             <Tabs.Tab value="new_requests">New Request</Tabs.Tab>
           </Tabs.List>
 
-          {isLoading ? (
-            <Loader size={16} />
-          ) : (
-            <Tabs.Panel value="existing_requests">
-              <Select
-                label="Select Semester"
-                placeholder="Select semester to view room requests"
-                searchable
-                value={semester}
-                onChange={(val) => {
-                  setIsLoading(true);
-                  setSemester(val);
-                  setIsLoading(false);
-                }}
-                data={semesterOptions}
-                mt="sm"
-                mb="sm"
+          <Tabs.Panel value="existing_requests">
+            <Select
+              label="Select Semester"
+              placeholder="Select semester to view room requests"
+              searchable
+              value={semester}
+              onChange={setSemester}
+              data={semesterOptions}
+              mt="sm"
+              mb="sm"
+            />
+            {semester && (
+              <ExistingRoomRequests
+                getRoomRequests={getRoomRequests}
+                semester={semester}
               />
-              {semester && (
-                <ExistingRoomRequests
-                  getRoomRequests={getRoomRequests}
-                  semester={semester}
-                />
-              )}
-            </Tabs.Panel>
-          )}
+            )}
+          </Tabs.Panel>
 
           <Tabs.Panel value="new_requests">
             <br />

From bffb9da89dfe8d1f159a3ed8797c7a7767ae2115 Mon Sep 17 00:00:00 2001
From: Dev Singh <dev@devksingh.com>
Date: Wed, 5 Nov 2025 10:20:22 -0600
Subject: [PATCH 2/3] Add an error boundary for react errors

---
 src/ui/Router.tsx           | 280 +++++++++++++++++-------------------
 src/ui/pages/Error.page.tsx |  35 +++++
 2 files changed, 164 insertions(+), 151 deletions(-)
 create mode 100644 src/ui/pages/Error.page.tsx

diff --git a/src/ui/Router.tsx b/src/ui/Router.tsx
index fad72141..134fa913 100644
--- a/src/ui/Router.tsx
+++ b/src/ui/Router.tsx
@@ -1,15 +1,14 @@
-import React, { useState, useEffect, ReactNode } from "react";
+import React from "react";
 import {
   createBrowserRouter,
   Navigate,
   RouterProvider,
   useLocation,
 } from "react-router-dom";
-import { AcmAppShell } from "./components/AppShell";
 import { useAuth } from "./components/AuthContext";
 import AuthCallback from "./components/AuthContext/AuthCallbackHandler.page";
 import { Error404Page } from "./pages/Error404.page";
-import { Error500Page } from "./pages/Error500.page";
+import { ErrorPage } from "./pages/Error.page";
 import { HomePage } from "./pages/Home.page";
 import { LoginPage } from "./pages/Login.page";
 import { LogoutPage } from "./pages/Logout.page";
@@ -96,165 +95,148 @@ const commonRoutes = [
 ];
 
 const profileRouter = createBrowserRouter([
-  ...commonRoutes,
   {
-    path: "/profile",
-    element: <ManageProfilePage />,
-  },
-  {
-    path: "*",
-    element: <ProfileRediect />,
+    path: "/",
+    errorElement: <ErrorPage />,
+    children: [
+      ...commonRoutes,
+      {
+        path: "/profile",
+        element: <ManageProfilePage />,
+      },
+      {
+        path: "*",
+        element: <ProfileRediect />,
+      },
+    ],
   },
 ]);
 
 const unauthenticatedRouter = createBrowserRouter([
-  ...commonRoutes,
   {
     path: "/",
-    element: <Navigate to="/login" replace />,
-  },
-  {
-    path: "/login",
-    element: <LoginPage />,
-  },
-  {
-    path: "*",
-    element: <LoginRedirect />,
+    errorElement: <ErrorPage />,
+    children: [
+      ...commonRoutes,
+      {
+        path: "/",
+        element: <Navigate to="/login" replace />,
+      },
+      {
+        path: "/login",
+        element: <LoginPage />,
+      },
+      {
+        path: "*",
+        element: <LoginRedirect />,
+      },
+    ],
   },
 ]);
 
 const authenticatedRouter = createBrowserRouter([
-  ...commonRoutes,
   {
     path: "/",
-    element: <Navigate to="/home" replace />,
-  },
-  {
-    path: "/login",
-    element: <LoginPage />,
-  },
-  {
-    path: "/logout",
-    element: <LogoutPage />,
-  },
-  {
-    path: "/profile",
-    element: <ManageProfilePage />,
-  },
-  {
-    path: "/home",
-    element: <HomePage />,
-  },
-  {
-    path: "/events/add",
-    element: <ManageEventPage />,
-  },
-  {
-    path: "/events/edit/:eventId",
-    element: <ManageEventPage />,
-  },
-  {
-    path: "/events/manage",
-    element: <ViewEventsPage />,
-  },
-  {
-    path: "/linkry",
-    element: <LinkShortener />,
-  },
-  {
-    path: "/linkry/add",
-    element: <ManageLinkPage />,
-  },
-  {
-    path: "/linkry/edit/:slug",
-    element: <ManageLinkPage />,
-  },
-  {
-    path: "/tickets/scan",
-    element: <ScanTicketsPage />,
-  },
-  {
-    path: "/tickets",
-    element: <SelectTicketsPage />,
-  },
-  {
-    path: "/iam",
-    element: <ManageIamPage />,
-  },
-  {
-    path: "/membershipLists",
-    element: <ManageExternalMembershipPage />,
-  },
-  {
-    path: "/tickets/manage/:eventId",
-    element: <ViewTicketsPage />,
-  },
-  {
-    path: "/stripe",
-    element: <ManageStripeLinksPage />,
-  },
-  {
-    path: "/roomRequests",
-    element: <ManageRoomRequestsPage />,
-  },
-  {
-    path: "/roomRequests/:semesterId/:requestId",
-    element: <ViewRoomRequest />,
-  },
-  {
-    path: "/logs",
-    element: <ViewLogsPage />,
-  },
-  {
-    path: "/apiKeys",
-    element: <ManageApiKeysPage />,
-  },
-  {
-    path: "/orgInfo",
-    element: <OrgInfoPage />,
-  },
-  // Catch-all route for authenticated users shows 404 page
-  {
-    path: "*",
-    element: <Error404Page />,
+    errorElement: <ErrorPage />,
+    children: [
+      ...commonRoutes,
+      {
+        path: "/",
+        element: <Navigate to="/home" replace />,
+      },
+      {
+        path: "/login",
+        element: <LoginPage />,
+      },
+      {
+        path: "/logout",
+        element: <LogoutPage />,
+      },
+      {
+        path: "/profile",
+        element: <ManageProfilePage />,
+      },
+      {
+        path: "/home",
+        element: <HomePage />,
+      },
+      {
+        path: "/events/add",
+        element: <ManageEventPage />,
+      },
+      {
+        path: "/events/edit/:eventId",
+        element: <ManageEventPage />,
+      },
+      {
+        path: "/events/manage",
+        element: <ViewEventsPage />,
+      },
+      {
+        path: "/linkry",
+        element: <LinkShortener />,
+      },
+      {
+        path: "/linkry/add",
+        element: <ManageLinkPage />,
+      },
+      {
+        path: "/linkry/edit/:slug",
+        element: <ManageLinkPage />,
+      },
+      {
+        path: "/tickets/scan",
+        element: <ScanTicketsPage />,
+      },
+      {
+        path: "/tickets",
+        element: <SelectTicketsPage />,
+      },
+      {
+        path: "/iam",
+        element: <ManageIamPage />,
+      },
+      {
+        path: "/membershipLists",
+        element: <ManageExternalMembershipPage />,
+      },
+      {
+        path: "/tickets/manage/:eventId",
+        element: <ViewTicketsPage />,
+      },
+      {
+        path: "/stripe",
+        element: <ManageStripeLinksPage />,
+      },
+      {
+        path: "/roomRequests",
+        element: <ManageRoomRequestsPage />,
+      },
+      {
+        path: "/roomRequests/:semesterId/:requestId",
+        element: <ViewRoomRequest />,
+      },
+      {
+        path: "/logs",
+        element: <ViewLogsPage />,
+      },
+      {
+        path: "/apiKeys",
+        element: <ManageApiKeysPage />,
+      },
+      {
+        path: "/orgInfo",
+        element: <OrgInfoPage />,
+      },
+      // Catch-all route for authenticated users shows 404 page
+      {
+        path: "*",
+        element: <Error404Page />,
+      },
+    ],
   },
 ]);
 
-interface ErrorBoundaryProps {
-  children: ReactNode;
-}
-
-const ErrorBoundary: React.FC<ErrorBoundaryProps> = ({ children }) => {
-  const [hasError, setHasError] = useState(false);
-  const [error, setError] = useState<Error | null>(null);
-  const { isLoggedIn } = useAuth();
-
-  const onError = (errorObj: Error) => {
-    setHasError(true);
-    setError(errorObj);
-  };
-
-  useEffect(() => {
-    const errorHandler = (event: ErrorEvent) => {
-      onError(event.error);
-    };
-
-    window.addEventListener("error", errorHandler);
-    return () => {
-      window.removeEventListener("error", errorHandler);
-    };
-  }, []);
-
-  if (hasError && error) {
-    if (error.message === "404") {
-      return isLoggedIn ? <Error404Page /> : <LoginRedirect />;
-    }
-    return <Error500Page />;
-  }
-
-  return <>{children}</>;
-};
-
 export const Router: React.FC = () => {
   const { isLoggedIn } = useAuth();
   const router = isLoggedIn
@@ -263,9 +245,5 @@ export const Router: React.FC = () => {
       ? profileRouter
       : unauthenticatedRouter;
 
-  return (
-    <ErrorBoundary>
-      <RouterProvider router={router} />
-    </ErrorBoundary>
-  );
+  return <RouterProvider router={router} />;
 };
diff --git a/src/ui/pages/Error.page.tsx b/src/ui/pages/Error.page.tsx
new file mode 100644
index 00000000..776a7675
--- /dev/null
+++ b/src/ui/pages/Error.page.tsx
@@ -0,0 +1,35 @@
+import React from "react";
+import { useRouteError } from "react-router-dom";
+import { Container, Title, Text, Card, Accordion } from "@mantine/core";
+import { AcmAppShell } from "@ui/components/AppShell";
+
+export const ErrorPage: React.FC = () => {
+  const error = useRouteError() as Error;
+
+  return (
+    <AcmAppShell>
+      <Container>
+        <Card shadow="sm" p="lg" radius="md" withBorder>
+          <Title order={2}>Oops! Something went wrong.</Title>
+          <Text size="lg" c="dimmed" mt="md">
+            We're sorry, but an unexpected error has occurred. Please contact
+            support if this error persists.
+          </Text>
+
+          <Accordion mt="md">
+            <Accordion.Item value="error-details">
+              <Accordion.Control>Error Details</Accordion.Control>
+              <Accordion.Panel>
+                <Card withBorder p="md" mt="md">
+                  <Text c="red">
+                    <pre>{error.stack || error.message}</pre>
+                  </Text>
+                </Card>
+              </Accordion.Panel>
+            </Accordion.Item>
+          </Accordion>
+        </Card>
+      </Container>
+    </AcmAppShell>
+  );
+};

From 55237aa07ae880b1f51252508f31114c29ab10e2 Mon Sep 17 00:00:00 2001
From: Dev Singh <dev@devksingh.com>
Date: Wed, 5 Nov 2025 10:22:18 -0600
Subject: [PATCH 3/3] Memoize semester options

---
 src/ui/pages/roomRequest/RoomRequestLanding.page.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/ui/pages/roomRequest/RoomRequestLanding.page.tsx b/src/ui/pages/roomRequest/RoomRequestLanding.page.tsx
index 17c58f4b..e4de0d76 100644
--- a/src/ui/pages/roomRequest/RoomRequestLanding.page.tsx
+++ b/src/ui/pages/roomRequest/RoomRequestLanding.page.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import { Container, Title, Tabs, Select } from "@mantine/core";
 import { AuthGuard } from "@ui/components/AuthGuard";
 import { AppRoles } from "@common/roles";
@@ -19,8 +19,11 @@ import { useSearchParams } from "react-router-dom";
 export const ManageRoomRequestsPage: React.FC = () => {
   const api = useApi("core");
   const [semester, setSemesterState] = useState<string | null>(null);
-  const nextSemesters = getSemesters();
-  const semesterOptions = [...getPreviousSemesters(), ...nextSemesters];
+  const nextSemesters = useMemo(() => getSemesters(), []);
+  const semesterOptions = useMemo(
+    () => [...getPreviousSemesters(), ...nextSemesters],
+    [nextSemesters],
+  );
   const [searchParams, setSearchParams] = useSearchParams();
 
   const setSemester = (newSemester: string | null) => {