feat: cache websoc (#1086)

apps/antalmanac/src/actions/AppStoreActions.ts

@@ -1,5 +1,10 @@
-import { RepeatingCustomEvent, ScheduleCourse, ShortCourseSchedule, WebsocSection } from '@packages/antalmanac-types';
-import { CourseDetails } from '@packages/antalmanac-types';
+import type {
+    CourseDetails,
+    RepeatingCustomEvent,
+    ScheduleCourse,
+    ShortCourseSchedule,
+    WebsocSection,
+} from '@packages/antalmanac-types';
 import { TRPCError } from '@trpc/server';
 import { VariantType } from 'notistack';
 

apps/antalmanac/src/components/RightPane/SectionTable/CourseInfo/CourseInfoBar.tsx

@@ -8,9 +8,9 @@ import { useState } from 'react';
 
 import { MOBILE_BREAKPOINT } from '../../../../globals';
 
+import PrereqTree from '$components/RightPane/SectionTable/PrereqTree';
 import analyticsEnum, { logAnalytics } from '$lib/analytics';
 import trpc from '$lib/api/trpc';
-import PrereqTree from '$components/RightPane/SectionTable/PrereqTree';
 
 const styles = () => ({
     rightSpace: {

apps/antalmanac/src/components/RightPane/SectionTable/CourseInfo/CourseInfoButton.tsx

@@ -80,10 +80,6 @@ export const CourseInfoButton = ({
                         setIsClicked((prev) => !prev);
                     }
                 }}
-                // style={{
-                //     backgroundColor: '#385EB1',
-                //     color: '#fff',
-                // }}
             >
                 <span style={{ display: 'flex', gap: 4 }}>
                     {icon}

apps/antalmanac/src/components/RightPane/SectionTable/CourseInfo/CourseInfoSearchButton.tsx

@@ -1,12 +1,13 @@
-import RightPaneStore from '$components/RightPane/RightPaneStore';
-import { useCoursePaneStore } from '$stores/CoursePaneStore';
-import { useTabStore } from '$stores/TabStore';
 import { Search } from '@material-ui/icons';
 import { Button } from '@mui/material';
 import { AACourse } from '@packages/antalmanac-types';
 import { useCallback } from 'react';
 import { Link } from 'react-router-dom';
 
+import RightPaneStore from '$components/RightPane/RightPaneStore';
+import { useCoursePaneStore } from '$stores/CoursePaneStore';
+import { useTabStore } from '$stores/TabStore';
+
 /**
  * Routes the user to the corresponding search result
  */

apps/antalmanac/src/components/RightPane/SectionTable/PrereqTree.tsx

@@ -3,8 +3,7 @@ import { Button, Popover } from '@material-ui/core';
 import { Prerequisite, PrerequisiteTree } from '@packages/antalmanac-types';
 import { FC, useState } from 'react';
 
-import { CourseInfo } from './CourseInfoBar';
-
+import { CourseInfo } from '$components/RightPane/SectionTable/CourseInfo/CourseInfoBar';
 import { useThemeStore } from '$stores/SettingsStore';
 
 import './PrereqTree.css';

apps/antalmanac/src/components/RightPane/SectionTable/SectionTable.tsx

@@ -10,7 +10,7 @@ import {
     Typography,
     useMediaQuery,
 } from '@material-ui/core';
-import { Assessment, Help, RateReview, Search, ShowChart as ShowChartIcon } from '@material-ui/icons';
+import { Assessment, Help, RateReview, ShowChart as ShowChartIcon } from '@material-ui/icons';
 import { useMemo } from 'react';
 
 import { MOBILE_BREAKPOINT } from '../../../globals';
@@ -19,12 +19,12 @@ import { EnrollmentHistoryPopup } from './EnrollmentHistoryPopup';
 import GradesPopup from './GradesPopup';
 import { SectionTableProps } from './SectionTable.types';
 
+import { CourseInfoBar } from '$components/RightPane/SectionTable/CourseInfo/CourseInfoBar';
+import { CourseInfoButton } from '$components/RightPane/SectionTable/CourseInfo/CourseInfoButton';
+import { CourseInfoSearchButton } from '$components/RightPane/SectionTable/CourseInfo/CourseInfoSearchButton';
 import { SectionTableBody } from '$components/RightPane/SectionTable/SectionTableBody/SectionTableBody';
 import analyticsEnum from '$lib/analytics';
 import { useColumnStore, SECTION_TABLE_COLUMNS, type SectionTableColumn } from '$stores/ColumnStore';
-import { CourseInfoButton } from '$components/RightPane/SectionTable/CourseInfo/CourseInfoButton';
-import { CourseInfoBar } from '$components/RightPane/SectionTable/CourseInfo/CourseInfoBar';
-import { CourseInfoSearchButton } from '$components/RightPane/SectionTable/CourseInfo/CourseInfoSearchButton';
 import { useTabStore } from '$stores/TabStore';
 
 const TOTAL_NUM_COLUMNS = SECTION_TABLE_COLUMNS.length;

apps/antalmanac/src/components/RightPane/SectionTable/cells/action.tsx

@@ -1,7 +1,6 @@
 import { Add, ArrowDropDown, Delete } from '@mui/icons-material';
 import { Box, IconButton, Menu, MenuItem, TableCell, Tooltip, useMediaQuery } from '@mui/material';
-import { AASection } from '@packages/antalmanac-types';
-import { CourseDetails } from '@packages/antalmanac-types';
+import { AASection, CourseDetails } from '@packages/antalmanac-types';
 import { bindMenu, bindTrigger, usePopupState } from 'material-ui-popup-state/hooks';
 
 import { MOBILE_BREAKPOINT } from '../../../../globals';

apps/antalmanac/src/lib/websoc.ts

@@ -1,14 +1,36 @@
+import { WebsocAPIResponse } from '@packages/antalmanac-types';
+
 import trpc from '$lib/api/trpc';
 
+type CacheEntry = WebsocAPIResponse & {
+    timestamp: number;
+};
+
 class _WebSOC {
     private aaCacheKey = Date.now().toString(10);
+    private cache: { [key: string]: CacheEntry };
+
+    constructor() {
+        this.cache = {};
+    }
 
     clearCache() {
         this.aaCacheKey = Date.now().toString(10);
+        Object.keys(this.cache).forEach((key) => delete this.cache[key]); // https://stackoverflow.com/a/19316873/14587004
     }
 
     async query(params: Record<string, string>) {
-        return await trpc.websoc.getOne.query({ ...params, aaCacheKey: this.aaCacheKey });
+        const paramsString = JSON.stringify(params);
+
+        // hit cache if data is less than 15 minutes old
+        if (this.cache[paramsString]?.timestamp > Date.now() - 15 * 60 * 1000) {
+            return this.cache[paramsString];
+        }
+
+        const response = await trpc.websoc.getOne.query({ ...params, aaCacheKey: this.aaCacheKey });
+        this.cache[paramsString] = { ...response, timestamp: Date.now() };
+
+        return response;
     }
 
     async queryMultiple(params: { [key: string]: string }, fieldName: string) {

apps/antalmanac/src/stores/Schedules.ts

@@ -5,8 +5,8 @@ import type {
     ScheduleUndoState,
     ShortCourseSchedule,
     RepeatingCustomEvent,
+    CourseInfo,
 } from '@packages/antalmanac-types';
-import type { CourseInfo } from '@packages/antalmanac-types';
 
 import { calendarizeCourseEvents, calendarizeCustomEvents, calendarizeFinals } from './calendarizeHelpers';
 

apps/backend/src/routers/websoc.ts

@@ -1,5 +1,5 @@
 import { z } from 'zod';
-import type {WebsocAPIResponse, CourseInfo, WebsocCourse} from '@packages/antalmanac-types';
+import type { WebsocAPIResponse, CourseInfo, WebsocCourse } from '@packages/antalmanac-types';
 import { procedure, router } from '../trpc';
 
 function sanitizeSearchParams(params: Record<string, string>) {

eslint.config.mjs

@@ -0,0 +1,95 @@
+import { fixupConfigRules, fixupPluginRules } from '@eslint/compat';
+import _import from 'eslint-plugin-import';
+import typescriptEslintEslintPlugin from '@typescript-eslint/eslint-plugin';
+import globals from 'globals';
+import tsParser from '@typescript-eslint/parser';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import js from '@eslint/js';
+import { FlatCompat } from '@eslint/eslintrc';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const compat = new FlatCompat({
+    baseDirectory: __dirname,
+    recommendedConfig: js.configs.recommended,
+    allConfig: js.configs.all,
+});
+
+export default [
+    {
+        ignores: [
+            '**/*.config.*',
+            '**/*rc.cjs',
+            '**/node_modules/',
+            '**/coverage/',
+            '**/.turbo/',
+            '**/build/',
+            '**/dist/',
+            '**/public/',
+            '**/.env',
+            '**/.env.*',
+            '!**/.env.sample',
+        ],
+    },
+    ...fixupConfigRules(
+        compat.extends(
+            'eslint:recommended',
+            'plugin:import/recommended',
+            'plugin:import/typescript',
+            'plugin:@typescript-eslint/recommended',
+            'prettier'
+        )
+    ),
+    {
+        plugins: {
+            import: fixupPluginRules(_import),
+            '@typescript-eslint': fixupPluginRules(typescriptEslintEslintPlugin),
+        },
+
+        languageOptions: {
+            globals: {
+                ...globals.browser,
+                ...globals.node,
+            },
+
+            parser: tsParser,
+            ecmaVersion: 5,
+            sourceType: 'module',
+
+            parserOptions: {
+                project: ['tsconfig.json'],
+            },
+        },
+
+        settings: {
+            'import/resolver': {
+                typescript: {
+                    project: ['tsconfig.json', 'apps/*/tsconfig.json'],
+                },
+            },
+        },
+
+        rules: {
+            '@typescript-eslint/no-unused-vars': [
+                'error',
+                {
+                    argsIgnorePattern: '^_',
+                    varsIgnorePattern: '^_',
+                    caughtErrorsIgnorePattern: '^_',
+                },
+            ],
+
+            'import/order': [
+                'error',
+                {
+                    alphabetize: {
+                        order: 'asc',
+                    },
+
+                    'newlines-between': 'always',
+                },
+            ],
+        },
+    },
+];

package.json

@@ -19,10 +19,14 @@
         "test": "vitest"
     },
     "devDependencies": {
+        "@eslint/compat": "^1.2.4",
+        "@eslint/eslintrc": "^3.2.0",
+        "@eslint/js": "^9.17.0",
         "@types/eslint": "^8.56.5",
         "@types/node": "^20.11.6",
         "cross-env": "^7.0.3",
         "eslint-import-resolver-typescript": "^3.6.1",
+        "globals": "^15.14.0",
         "husky": "^8.0.3",
         "jsdom": "^22.1.0",
         "lint-staged": "^13.1.1",