Fix UI bugs

src/ui/components/AuthGuard/index.tsx

@@ -5,10 +5,10 @@ import { AcmAppShell, AcmAppShellProps } from "@ui/components/AppShell";
 import FullScreenLoader from "@ui/components/AuthContext/LoadingScreen";
 import { getRunEnvironmentConfig, ValidService } from "@ui/config";
 import { useApi } from "@ui/util/api";
-import { AppRoles } from "@common/roles";
+import { AppRoles, OrgRoleDefinition } from "@common/roles";
 
 export const CACHE_KEY_PREFIX = "auth_response_cache_";
-const CACHE_DURATION = 2 * 60 * 60 * 1000; // 2 hours in milliseconds
+const CACHE_DURATION = 30 * 60 * 1000; // 30 minutes in milliseconds
 
 type CacheData = {
   data: any; // Just the JSON response data
@@ -87,7 +87,6 @@ export const clearAuthCache = () => {
 /**
  * Retrieves the user's roles from the session cache for a specific service.
  * @param service The service to check the cache for.
- * @param route The authentication check route.
  * @returns A promise that resolves to an array of roles, or null if not found in cache.
  */
 export const getUserRoles = async (
@@ -105,6 +104,25 @@ export const getUserRoles = async (
   return null;
 };
 
+/**
+ * Retrieves the user's org roles from the session cache for Core API.
+ * @returns A promise that resolves to an array of roles, or null if not found in cache.
+ */
+export const getCoreOrgRoles = async (): Promise<
+  OrgRoleDefinition[] | null
+> => {
+  const { authCheckRoute } =
+    getRunEnvironmentConfig().ServiceConfiguration.core;
+  if (!authCheckRoute) {
+    throw new Error("no auth check route");
+  }
+  const cachedData = await getCachedResponse("core", authCheckRoute);
+  if (cachedData?.data?.orgRoles && Array.isArray(cachedData.data.orgRoles)) {
+    return cachedData.data.orgRoles;
+  }
+  return null;
+};
+
 export const AuthGuard: React.FC<
   {
     resourceDef: ResourceDefinition;

src/ui/pages/organization/OrgInfo.page.tsx

@@ -1,13 +1,16 @@
 import { useState, useEffect } from "react";
 import { Title, Stack, Container, Select } from "@mantine/core";
-import { AuthGuard, getUserRoles } from "@ui/components/AuthGuard";
+import {
+  AuthGuard,
+  getUserRoles,
+  getCoreOrgRoles,
+} from "@ui/components/AuthGuard";
 import { useApi } from "@ui/util/api";
 import { AppRoles } from "@common/roles";
 import { notifications } from "@mantine/notifications";
 import { IconAlertCircle } from "@tabler/icons-react";
 import FullScreenLoader from "@ui/components/AuthContext/LoadingScreen";
 import { AllOrganizationNameList, OrganizationName } from "@acm-uiuc/js-shared";
-import { useAuth } from "@ui/components/AuthContext";
 import { ManageOrganizationForm } from "./ManageOrganizationForm";
 import {
   LeadEntry,
@@ -21,7 +24,6 @@ type OrganizationData = z.infer<typeof setOrganizationMetaBody>;
 
 export const OrgInfoPage = () => {
   const api = useApi("core");
-  const { orgRoles } = useAuth();
   const [searchParams, setSearchParams] = useSearchParams();
   const [manageableOrgs, setManagableOrgs] = useState<
     OrganizationName[] | null
@@ -112,15 +114,19 @@ export const OrgInfoPage = () => {
   useEffect(() => {
     (async () => {
       const appRoles = await getUserRoles("core");
-      if (appRoles?.includes(AppRoles.ALL_ORG_MANAGER)) {
+      const orgRoles = await getCoreOrgRoles();
+      if (appRoles === null || orgRoles === null) {
+        return;
+      }
+      if (appRoles.includes(AppRoles.ALL_ORG_MANAGER)) {
         setManagableOrgs(AllOrganizationNameList);
         return;
       }
       setManagableOrgs(
         orgRoles.filter((x) => x.role === "LEAD").map((x) => x.org),
       );
     })();
-  }, [orgRoles]);
+  }, []);
 
   // Update URL when selected org changes
   const handleOrgChange = (org: OrganizationName | null) => {

src/ui/pages/roomRequest/RoomRequestLanding.page.tsx

@@ -14,13 +14,21 @@ import {
   type RoomRequestStatus,
 } from "@common/types/roomRequest";
 import { OrganizationName } from "@acm-uiuc/js-shared";
+import { useSearchParams } from "react-router-dom";
 
 export const ManageRoomRequestsPage: React.FC = () => {
   const api = useApi("core");
-  const [semester, setSemester] = useState<string | null>(null); // TODO: Create a selector for this
+  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 createRoomRequest = async (
     payload: RoomRequestFormValues,
   ): Promise<RoomRequestPostResponse> => {
@@ -45,7 +53,15 @@ export const ManageRoomRequestsPage: React.FC = () => {
   };
 
   useEffect(() => {
-    setSemester(nextSemesters[0].value);
+    const semeseterFromUrl = searchParams.get("semester") as string | null;
+    if (
+      semeseterFromUrl &&
+      semesterOptions.map((x) => x.value).includes(semeseterFromUrl)
+    ) {
+      setSemester(semeseterFromUrl);
+    } else {
+      setSemester(nextSemesters[0].value);
+    }
   }, []);
   return (
     <AuthGuard