add ability to select the semester

Author: devksingh4

src/common/types/roomRequest.ts

@@ -13,6 +13,34 @@ export const eventThemeOptions = [
   "Spirituality"
 ] as [string, ...string[]];
 
+
+export function getPreviousSemesters() {
+  const currentDate = new Date();
+  const currentYear = currentDate.getFullYear();
+  const currentMonth = currentDate.getMonth() + 1;
+
+  let semesters = [];
+  let currentSemester = '';
+
+  if (currentMonth >= 1 && currentMonth <= 5) {
+    currentSemester = 'Spring';
+  } else if (currentMonth >= 6 && currentMonth <= 12) {
+    currentSemester = 'Fall';
+  }
+
+  if (currentSemester === 'Spring') {
+    semesters.push({ value: `fa${(currentYear - 1).toString().slice(-2)}`, label: `Fall ${currentYear - 1}` });
+    semesters.push({ value: `sp${(currentYear - 1).toString().slice(-2)}`, label: `Spring ${currentYear - 1}` });
+    semesters.push({ value: `fa${(currentYear - 2).toString().slice(-2)}`, label: `Fall ${currentYear - 2}` });
+  } else if (currentSemester === 'Fall') {
+    semesters.push({ value: `sp${currentYear.toString().slice(-2)}`, label: `Spring ${currentYear}` });
+    semesters.push({ value: `fa${(currentYear - 1).toString().slice(-2)}`, label: `Fall ${currentYear - 1}` });
+    semesters.push({ value: `sp${(currentYear - 1).toString().slice(-2)}`, label: `Spring ${currentYear - 1}` });
+  }
+
+  return semesters.reverse();
+}
+
 export function getSemesters() {
   const currentDate = new Date();
   const currentYear = currentDate.getFullYear();

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

@@ -1,20 +1,24 @@
-import React, { useState } from 'react';
-import { Container, Title, Tabs } from '@mantine/core';
+import React, { useEffect, useState } from 'react';
+import { Container, Title, Tabs, Select, Loader } from '@mantine/core';
 import { AuthGuard } from '@ui/components/AuthGuard';
 import { AppRoles } from '@common/roles';
 import { useApi } from '@ui/util/api';
 import ExistingRoomRequests from './ExistingRoomRequests';
 import NewRoomRequest from './NewRoomRequest';
 import {
+  getPreviousSemesters,
+  getSemesters,
   RoomRequestFormValues,
   RoomRequestGetAllResponse,
   RoomRequestPostResponse,
 } from '@common/types/roomRequest';
 
 export const ManageRoomRequestsPage: React.FC = () => {
   const api = useApi('core');
-  const [semester, setSemester] = useState<string>('sp25');
-
+  const [semester, setSemester] = useState<string | null>(null); // TODO: Create a selector for this
+  const [isLoading, setIsLoading] = useState(false);
+  const nextSemesters = getSemesters();
+  const semesterOptions = [...getPreviousSemesters(), ...nextSemesters];
   const createRoomRequest = async (
     payload: RoomRequestFormValues
   ): Promise<RoomRequestPostResponse> => {
@@ -27,6 +31,9 @@ export const ManageRoomRequestsPage: React.FC = () => {
     return response.data;
   };
 
+  useEffect(() => {
+    setSemester(nextSemesters[0].value);
+  }, []);
   return (
     <AuthGuard
       resourceDef={{
@@ -43,10 +50,29 @@ export const ManageRoomRequestsPage: React.FC = () => {
             <Tabs.Tab value="new_requests">New Request</Tabs.Tab>
           </Tabs.List>
 
-          <Tabs.Panel value="existing_requests">
-            <br />
-            <ExistingRoomRequests getRoomRequests={getRoomRequests} semester={semester} />
-          </Tabs.Panel>
+          <Select
+            label="Select Semester"
+            placeholder="Select semester to view room requests"
+            searchable
+            value={semester}
+            onChange={(val) => {
+              setIsLoading(true);
+              setSemester(val);
+              setIsLoading(false);
+            }}
+            data={semesterOptions}
+          />
+
+          {isLoading ? (
+            <Loader size={16} />
+          ) : (
+            <Tabs.Panel value="existing_requests">
+              <br />
+              {semester && (
+                <ExistingRoomRequests getRoomRequests={getRoomRequests} semester={semester} />
+              )}
+            </Tabs.Panel>
+          )}
 
           <Tabs.Panel value="new_requests">
             <br />