pennlabs · esinx · Nov 19, 2024 · Nov 5, 2024 · Nov 5, 2024 · Nov 19, 2024
diff --git a/frontend/alert-2.0/.gitignore b/frontend/alert-2.0/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/frontend/alert-2.0/README.md b/frontend/alert-2.0/README.md
@@ -0,0 +1,50 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+
+- Configure the top-level `parserOptions` property like this:
+
+```js
+export default tseslint.config({
+  languageOptions: {
+    // other options...
+    parserOptions: {
+      project: ['./tsconfig.node.json', './tsconfig.app.json'],
+      tsconfigRootDir: import.meta.dirname,
+    },
+  },
+})
+```
+
+- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
+- Optionally add `...tseslint.configs.stylisticTypeChecked`
+- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
+
+```js
+// eslint.config.js
+import react from 'eslint-plugin-react'
+
+export default tseslint.config({
+  // Set the react version
+  settings: { react: { version: '18.3' } },
+  plugins: {
+    // Add the react plugin
+    react,
+  },
+  rules: {
+    // other rules...
+    // Enable its recommended rules
+    ...react.configs.recommended.rules,
+    ...react.configs['jsx-runtime'].rules,
+  },
+})
+```
diff --git a/frontend/alert-2.0/components.json b/frontend/alert-2.0/components.json
@@ -0,0 +1,20 @@
+{
+	"$schema": "https://ui.shadcn.com/schema.json",
+	"style": "new-york",
+	"rsc": false,
+	"tsx": true,
+	"tailwind": {
+		"config": "tailwind.config.js",
+		"css": "src/index.css",
+		"baseColor": "neutral",
+		"cssVariables": true,
+		"prefix": ""
+	},
+	"aliases": {
+		"components": "@/components",
+		"utils": "@/lib/utils",
+		"ui": "@/components/ui",
+		"lib": "@/lib",
+		"hooks": "@/hooks"
+	}
+}
diff --git a/frontend/alert-2.0/eslint.config.js b/frontend/alert-2.0/eslint.config.js
@@ -0,0 +1,3 @@
+import config from "@esinx/eslint-config";
+
+export default [...config]
diff --git a/frontend/alert-2.0/index.html b/frontend/alert-2.0/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/frontend/alert-2.0/package.json b/frontend/alert-2.0/package.json
@@ -0,0 +1,68 @@
+{
+	"name": "alert-2.0",
+	"private": true,
+	"version": "0.0.0",
+	"type": "module",
+	"prettier": "@esinx/prettier-config",
+	"scripts": {
+		"dev": "vite",
+		"build": "tsc -b && vite build",
+		"lint": "eslint .",
+		"preview": "vite preview"
+	},
+	"dependencies": {
+		"@hookform/resolvers": "^3.9.0",
+		"@radix-ui/react-avatar": "^1.1.0",
+		"@radix-ui/react-dialog": "^1.1.1",
+		"@radix-ui/react-icons": "^1.3.0",
+		"@radix-ui/react-label": "^2.1.0",
+		"@radix-ui/react-navigation-menu": "^1.2.0",
+		"@radix-ui/react-popover": "^1.1.1",
+		"@radix-ui/react-slot": "^1.1.0",
+		"@radix-ui/react-switch": "^1.1.0",
+		"@tanstack/react-query": "^5.53.3",
+		"@tanstack/react-router": "^1.51.6",
+		"@trpc/client": "^11.0.0-rc.498",
+		"@trpc/react-query": "^11.0.0-rc.498",
+		"@trpc/server": "^11.0.0-rc.498",
+		"class-variance-authority": "^0.7.0",
+		"clsx": "^2.1.1",
+		"cmdk": "1.0.0",
+		"lucide-react": "^0.436.0",
+		"next-themes": "^0.3.0",
+		"oidc-client-ts": "^3.0.1",
+		"react": "^18.3.1",
+		"react-dom": "^18.3.1",
+		"react-error-boundary": "^4.0.13",
+		"react-hook-form": "^7.53.0",
+		"react-oidc-context": "^3.1.0",
+		"sonner": "^1.5.0",
+		"tailwind-merge": "^2.5.2",
+		"tailwindcss-animate": "^1.0.7",
+		"ts-pattern": "^5.3.1",
+		"use-debounce": "^10.0.3",
+		"zod": "^3.23.8",
+		"zustand": "^4.5.5"
+	},
+	"devDependencies": {
+		"@esinx/eslint-config": "^2.0.1",
+		"@esinx/prettier-config": "^1.0.0-3",
+		"@eslint/js": "^9.9.0",
+		"@tanstack/router-devtools": "^1.51.6",
+		"@tanstack/router-plugin": "^1.51.6",
+		"@types/node": "^22.5.1",
+		"@types/react": "^18.3.3",
+		"@types/react-dom": "^18.3.0",
+		"@vitejs/plugin-react": "^4.3.1",
+		"autoprefixer": "^10.4.20",
+		"eslint": "^9.9.0",
+		"eslint-plugin-react-hooks": "^5.1.0-rc.0",
+		"eslint-plugin-react-refresh": "^0.4.9",
+		"globals": "^15.9.0",
+		"postcss": "^8.4.41",
+		"tailwindcss": "^3.4.10",
+		"typescript": "^5.5.3",
+		"typescript-eslint": "^8.0.1",
+		"vite": "^5.4.1"
+	}
+}
diff --git a/frontend/alert-2.0/postcss.config.js b/frontend/alert-2.0/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/frontend/alert-2.0/public/assets/icons/PCA_logo.svg b/frontend/alert-2.0/public/assets/icons/PCA_logo.svg
diff --git a/frontend/alert-2.0/public/assets/icons/abell.svg b/frontend/alert-2.0/public/assets/icons/abell.svg
diff --git a/frontend/alert-2.0/public/assets/icons/bang.svg b/frontend/alert-2.0/public/assets/icons/bang.svg
diff --git a/frontend/alert-2.0/public/assets/icons/bell-off.svg b/frontend/alert-2.0/public/assets/icons/bell-off.svg
diff --git a/frontend/alert-2.0/public/assets/icons/bell.svg b/frontend/alert-2.0/public/assets/icons/bell.svg
diff --git a/frontend/alert-2.0/public/assets/icons/blue-trash.svg b/frontend/alert-2.0/public/assets/icons/blue-trash.svg
diff --git a/frontend/alert-2.0/public/assets/icons/check.svg b/frontend/alert-2.0/public/assets/icons/check.svg
diff --git a/frontend/alert-2.0/public/assets/icons/close.svg b/frontend/alert-2.0/public/assets/icons/close.svg
diff --git a/frontend/alert-2.0/public/assets/icons/down-arrow.svg b/frontend/alert-2.0/public/assets/icons/down-arrow.svg
diff --git a/frontend/alert-2.0/public/assets/icons/search.svg b/frontend/alert-2.0/public/assets/icons/search.svg
diff --git a/frontend/alert-2.0/public/assets/icons/trash.svg b/frontend/alert-2.0/public/assets/icons/trash.svg
diff --git a/frontend/alert-2.0/public/assets/icons/up-arrow.svg b/frontend/alert-2.0/public/assets/icons/up-arrow.svg
diff --git a/frontend/alert-2.0/public/assets/icons/x.svg b/frontend/alert-2.0/public/assets/icons/x.svg
diff --git a/frontend/alert-2.0/src/components/CourseSection.tsx b/frontend/alert-2.0/src/components/CourseSection.tsx
@@ -0,0 +1,65 @@
+import { match } from 'ts-pattern'
+
+import { StatusIndicator } from '@/components/StatusIndicator'
+import { Badge } from '@/components/ui/badge'
+import { Activity, type CourseSection } from '@/core/types'
+import { cn } from '@/lib/utils'
+
+interface Props {
+	section: CourseSection
+	className?: string
+}
+
+const classOfActivity = (activity: Activity) =>
+	match(activity)
+		.with(Activity.LECTURE, () =>
+			cn('bg-blue-100', 'hover:bg-blue-100', 'text-blue-600'),
+		)
+		.with(Activity.RECITATION, () =>
+			cn('bg-yellow-100', 'hover:bg-yellow-100', 'text-yellow-600'),
+		)
+		.with(Activity.LAB, () =>
+			cn('bg-green-100', 'hover:bg-green-100', 'text-green-600'),
+		)
+		.otherwise(() => cn('bg-gray-100', 'hover:bg-gray-100', 'text-gray-600'))
+
+export const CourseSectionContent: React.FC<Props> = ({
+	section,
+	className,
+}) => {
+	return (
+		<div
+			className={cn(
+				'flex',
+				'justify-between',
+				'items-center',
+				'text-sm',
+				className,
+			)}
+		>
+			<div className={cn('flex', 'items-center', 'space-x-4')}>
+				<StatusIndicator status={section.status} />
+				<div>
+					<div className={cn('text-slate-600')}>{section.course_title}</div>
+					<div className={cn('font-bold')}>{section.section_id}</div>
+					<div className={cn('text-slate-600')}>
+						{section.instructors.length > 0
+							? section.instructors.map(inst => inst.name).join(', ')
+							: 'N/A'}
+					</div>
+				</div>
+			</div>
+			<div className={cn('flex', 'flex-col', 'space-y-2', 'items-end')}>
+				<Badge
+					className={cn(
+						classOfActivity(section.activity),
+						'shadow-none',
+						'hover:none',
+					)}
+				>
+					{section.activity}
+				</Badge>
+			</div>
+		</div>
+	)
+}
diff --git a/frontend/alert-2.0/src/components/CourseSectionAutocomplete.tsx b/frontend/alert-2.0/src/components/CourseSectionAutocomplete.tsx
@@ -0,0 +1,67 @@
+import { keepPreviousData } from '@tanstack/react-query'
+import { useState } from 'react'
+import { useDebounce } from 'use-debounce'
+
+import { AutoComplete, ItemEntry } from '@/components/autocomplete'
+import { CourseSectionContent } from '@/components/CourseSection'
+import { trpc } from '@/core/trpc'
+import { CourseSection } from '@/core/types'
+import { cn } from '@/lib/utils'
+
+interface Props {
+	onCourseSectionSelected?: (courseSection: CourseSection) => void
+}
+
+const ItemComponent: React.FC<{ item: ItemEntry<CourseSection> }> = ({
+	item: { value },
+}) => {
+	return (
+		<CourseSectionContent
+			section={value}
+			className={cn('w-full', 'hover:cursor-pointer')}
+		/>
+	)
+}
+
+export const CourseSectionAutocomplete: React.FC<Props> = ({
+	onCourseSectionSelected,
+}) => {
+	const [query, setQuery] = useState('')
+	const [debouncedQuery] = useDebounce(query, 500)
+	const {
+		data: sections,
+		isLoading,
+		isPlaceholderData,
+	} = trpc.course.searchSection.useQuery(
+		{
+			query: debouncedQuery,
+			limit: 20,
+		},
+		{
+			placeholderData: keepPreviousData,
+		},
+	)
+	return (
+		<div>
+			<AutoComplete
+				items={
+					sections?.map(section => ({
+						id: section.section_id,
+						value: section,
+					})) ?? []
+				}
+				ItemComponent={ItemComponent}
+				searchValue={query}
+				onSearchValueChange={setQuery}
+				placeholder="CIS-1200"
+				onSelect={({ value }) => onCourseSectionSelected?.(value)}
+				isLoading={isLoading}
+				emptyMessage={
+					debouncedQuery.length > 0 && !isPlaceholderData
+						? 'No courses found'
+						: 'Start typing to search!'
+				}
+			/>
+		</div>
+	)
+}