Load departments from Anteater API

apps/antalmanac/src/backend/routers/websoc.ts

@@ -1,8 +1,16 @@
-import type { WebsocAPIResponse, CourseInfo, WebsocCourse, WebsocSectionType } from '@packages/antalmanac-types';
+import type {
+    WebsocAPIResponse,
+    CourseInfo,
+    WebsocCourse,
+    WebsocSectionType,
+    WebsocAPIDepartmentsResponse,
+} from '@packages/antalmanac-types';
 import { z } from 'zod';
 
 import { procedure, router } from '../trpc';
 
+const DEPARTMENT_YEAR_RANGE = 10;
+
 function sanitizeSearchParams(params: Record<string, string>) {
     if ('term' in params) {
         const termValue = params.term;
@@ -74,6 +82,19 @@ const queryWebSoc = async ({ input }: { input: Record<string, string> }) => {
     return sortWebsocResponse(data.data as WebsocAPIResponse);
 };
 
+const queryWebSocDepartments = async () => {
+    const minYear = new Date().getFullYear() - DEPARTMENT_YEAR_RANGE;
+    const url = `https://anteaterapi.com/v2/rest/websoc/departments?since=${minYear}`;
+
+    const response = await fetch(url, {
+        headers: {
+            ...(process.env.ANTEATER_API_KEY && { Authorization: `Bearer ${process.env.ANTEATER_API_KEY}` }),
+        },
+    });
+    const data = await response.json();
+    return data.data as WebsocAPIDepartmentsResponse;
+};
+
 function combineWebsocResponses(responses: WebsocAPIResponse[]) {
     const combined: WebsocAPIResponse = { schools: [] };
     for (const res of responses) {
@@ -148,6 +169,9 @@ const websocRouter = router({
         }
         return courseInfo;
     }),
+    getDepartments: procedure.query(async () => {
+        return await queryWebSocDepartments();
+    }),
 });
 
 export default websocRouter;

apps/antalmanac/src/components/RightPane/CoursePane/SearchForm/DepartmentSearchBar/DepartmentSearchBar.tsx

@@ -1,11 +1,13 @@
 import { useCallback, useEffect, useState } from 'react';
 
-import { DEPARTMENT_MAP } from '$components/RightPane/CoursePane/SearchForm/DepartmentSearchBar/constants';
 import { LabeledAutocomplete } from '$components/RightPane/CoursePane/SearchForm/LabeledInputs/LabeledAutocomplete';
 import RightPaneStore from '$components/RightPane/RightPaneStore';
+import { useDepartments } from '$hooks/useDepartments';
 import { getLocalStorageRecentlySearched, setLocalStorageRecentlySearched } from '$lib/localStorage';
 
-const options = Object.keys(DEPARTMENT_MAP);
+const DEFAULT_DEPARTMENTS: Record<string, string> = {
+    ALL: 'ALL: Include All Departments',
+};
 
 const parseLocalStorageRecentlySearched = (): string[] => {
     try {
@@ -27,6 +29,12 @@ const parseLocalStorageRecentlySearched = (): string[] => {
 };
 
 export function DepartmentSearchBar() {
+    const { departments } = useDepartments();
+
+    const departmentsWithAll = departments ? { ...DEFAULT_DEPARTMENTS, ...departments } : DEFAULT_DEPARTMENTS;
+
+    const options = Object.keys(departmentsWithAll);
+
     const [value, setValue] = useState(() => RightPaneStore.getFormData().deptValue);
     const [recentSearches, setRecentSearches] = useState<typeof options>(() => parseLocalStorageRecentlySearched());
 
@@ -84,10 +92,10 @@ export function DepartmentSearchBar() {
             label="Department"
             autocompleteProps={{
                 value,
-                options: Array.from(new Set<string>([...recentSearches, ...options])),
+                options: Array.from(new Set([...recentSearches, ...options])),
                 autoHighlight: true,
                 openOnFocus: true,
-                getOptionLabel: (option) => DEPARTMENT_MAP[option.toUpperCase() as keyof typeof DEPARTMENT_MAP],
+                getOptionLabel: (option) => departmentsWithAll[option.toUpperCase()] ?? option,
                 onChange: handleChange,
                 includeInputInList: true,
                 noOptionsText: 'No departments match the search',

apps/antalmanac/src/hooks/useDepartments.tsx

@@ -0,0 +1,15 @@
+import { useEffect } from 'react';
+
+import { useDepartmentsStore } from '$stores/DepartmentsStore';
+
+export function useDepartments() {
+    const { departments, loadDepartments } = useDepartmentsStore();
+
+    useEffect(() => {
+        loadDepartments();
+    }, [loadDepartments]);
+
+    return {
+        departments,
+    };
+}

apps/antalmanac/src/lib/websoc.ts

@@ -40,6 +40,10 @@ class _WebSOC {
     async getCourseInfo(params: Record<string, string>) {
         return await trpc.websoc.getCourseInfo.query(params);
     }
+
+    async getDepartments() {
+        return await trpc.websoc.getDepartments.query();
+    }
 }
 
 export const WebSOC = new _WebSOC();

apps/antalmanac/src/stores/DepartmentsStore.ts

@@ -0,0 +1,27 @@
+import { create } from 'zustand';
+
+import { WebSOC } from '$lib/websoc';
+
+interface DepartmentsState {
+    departments: Record<string, string> | null;
+    loadDepartments: () => Promise<void>;
+}
+
+export const useDepartmentsStore = create<DepartmentsState>((set, get) => ({
+    departments: null,
+    loadDepartments: async () => {
+        if (get().departments != null) {
+            return;
+        }
+        try {
+            const departmentsData = await WebSOC.getDepartments();
+            const departmentsMap: Record<string, string> = {};
+            for (const dept of departmentsData) {
+                departmentsMap[dept.deptCode] = `${dept.deptCode}: ${dept.deptName}`;
+            }
+            set({ departments: departmentsMap });
+        } catch (error) {
+            console.error('Error loading departments: ', error);
+        }
+    },
+}));

packages/anteater-api-types/src/websoc.ts

@@ -3,6 +3,9 @@ import { paths } from './generated/anteater-api-types';
 export type WebsocAPIResponse =
     paths['/v2/rest/websoc']['get']['responses'][200]['content']['application/json']['data'];
 
+export type WebsocAPIDepartmentsResponse =
+    paths['/v2/rest/websoc/departments']['get']['responses'][200]['content']['application/json']['data'];
+
 export type WebsocSchool = WebsocAPIResponse['schools'][number];
 
 export type WebsocDepartment = WebsocSchool['departments'][number];