Feature/search api

.github/workflows/update-autocomplete.yml

@@ -0,0 +1,80 @@
+name: Update course data from API
+
+on: workflow_dispatch
+
+jobs:
+  main:
+    name: Fetch and rebuild autocomplete graph and combos table
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+      pull-requests: write
+
+    steps:
+      - name: Check out Git repository
+        uses: actions/checkout@v4
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Create or reset the update branch
+        run: |
+          git config user.name "github-actions[bot]"
+          git config user.email "github-actions[bot]@users.noreply.github.com"
+          git checkout develop
+          git branch -D update-course-data || true  # Delete branch if it exists locally
+          git checkout -b update-course-data
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '22'
+
+      - name: Install for ts-node
+        run: npm install
+
+      - name: Add API Key
+        run: echo "NEBULA_API_KEY=${{ secrets.NEBULA_API_KEY }}" >> .env.local
+
+      - name: Fetch new data from api
+        run: npm run fetchdata
+
+      - name: Build autocomplete graph
+        run: npm run buildautocomplete
+
+      - name: Build course name table
+        run: npm run buildcoursenames
+
+      - name: Commit changes
+        run: |
+          git add .
+          git commit -m "Update course data from API"
+          git push -f origin update-course-data
+
+      - name: Create PR
+        uses: actions/github-script@v6
+        with:
+          script: |
+            const { repo, owner } = context.repo;
+            const pulls = await github.rest.pulls.list({
+              owner: owner,
+              repo: repo,
+              head: '${owner}:update-course-data',
+              base: 'develop',
+              state: 'open',
+            });
+
+            if (pulls.data.length < 1) {
+              await github.rest.pulls.create({
+                title: 'Update course data from API',
+                owner: owner,
+                repo: repo,
+                head: 'update-course-data',
+                base: 'develop',
+                body: [
+                  'Fetch and rebuild autocomplete graph and combos table',
+                  '',
+                  'This PR is auto-generated by',
+                  '[actions/github-script](https://github.com/actions/github-script)',
+                ].join('\n'),
+              });
+            }

.prettierignore

@@ -1,2 +1,3 @@
 src/server/db/migrations/*
 next-env.d.ts
+data

package.json

@@ -13,7 +13,10 @@
     "test": "NODE_OPTIONS=--experimental-vm-modules dotenv jest --detectOpenHandles --forceExit",
     "auth-schema:generate": "dotenv -- npx @better-auth/cli@latest generate --output src/server/db/schema/auth.ts --config src/server/auth.ts",
     "drizzle:generate": "dotenv drizzle-kit generate",
-    "drizzle:push": "dotenv drizzle-kit push"
+    "drizzle:push": "dotenv drizzle-kit push",
+    "fetchdata": "ts-node -O \"{\\\"module\\\":\\\"commonjs\\\"}\" src/scripts/fetchAggregatedData.ts",
+    "buildautocomplete": "ts-node -O \"{\\\"module\\\":\\\"commonjs\\\"}\" src/scripts/generateAutocompleteGraph.ts",
+    "buildcoursenames": "ts-node -O \"{\\\"module\\\":\\\"commonjs\\\"}\" src/scripts/generateCourseNameTable.ts"
   },
   "dependencies": {
     "@auth/drizzle-adapter": "^0.3.2",
@@ -39,11 +42,13 @@
     "@trpc/client": "^11.8.1",
     "@trpc/server": "^11.8.1",
     "@trpc/tanstack-react-query": "^11.8.1",
+    "autosuggest-highlight": "^3.3.4",
     "better-auth": "^1.4.17",
     "date-fns": "^4.1.0",
     "dotenv": "^17.2.3",
     "drizzle-orm": "^0.45.1",
     "drizzle-zod": "^0.8.3",
+    "graphology": "^0.26.0",
     "next": "^16.1.4",
     "next-auth": "^4.24.11",
     "pdfjs-dist": "^5.4.296",
@@ -82,7 +87,8 @@
     "tailwindcss-animate": "^1.0.7",
     "ts-jest": "^29.4.6",
     "ts-node": "^10.9.1",
-    "typescript": "^5.9.3"
+    "typescript": "^5.9.3",
+    "@types/autosuggest-highlight": "^3.2.3"
   },
   "overrides": {
     "drizzle-zod": {

src/app/api/autocomplete/route.ts

@@ -0,0 +1,43 @@
+import { NextResponse } from 'next/server';
+import autocompleteGraph from 'src/data/autocomplete_graph.json';
+import type { GenericFetchedData } from 'src/modules/GenericFetchedData/GenericFetchedData';
+import { type SearchQuery } from 'src/modules/SearchQuery/SearchQuery';
+import {
+  getGraph,
+  searchAutocomplete,
+} from '@src/modules/autocomplete/autocomplete';
+
+const graph = getGraph(autocompleteGraph as object);
+
+export function GET(request: Request) {
+  const { searchParams } = new URL(request.url);
+  const input = searchParams.get('input');
+  if (typeof input !== 'string') {
+    return NextResponse.json(
+      { message: 'error', data: 'Incorrect query parameters' },
+      { status: 400 },
+    );
+  }
+
+  let searchBy: 'any' | 'professor' | 'course' = 'any';
+  const searchByParam = searchParams.get('searchBy');
+  if (searchByParam === 'professor' || searchByParam === 'course') {
+    searchBy = searchByParam;
+  }
+
+  let limit = 20;
+  const limitParam = searchParams.get('limit');
+  if (typeof limitParam === 'string' && !isNaN(Number(limitParam))) {
+    limit = Number(limitParam);
+  }
+
+  const results = searchAutocomplete(graph, input, limit, searchBy);
+
+  return NextResponse.json(
+    {
+      state: 'done',
+      data: results,
+    } satisfies GenericFetchedData<SearchQuery[]>,
+    { status: 200 },
+  );
+}

src/app/notes/[...slug]/layout.tsx

@@ -9,7 +9,6 @@ export default function NotesLayout({ children }: NotesLayoutProps) {
   return (
     <main className="relative min-h-screen">
       <Header />
-
       <section className="mx-auto flex w-full max-w-6xl flex-col gap-6 px-5 pb-16 pt-24 lg:pt-28">
         {children}
       </section>

src/app/page.tsx

@@ -1,7 +1,5 @@
-import SearchIcon from '@mui/icons-material/Search';
-import InputAdornment from '@mui/material/InputAdornment';
-import TextField from '@mui/material/TextField';
 import Header from '@src/components/header/Header';
+import SearchBar from '@src/components/header/SearchBar';
 import NebulaLogo from '@src/icons/NebulaLogo';
 
 const Home = () => {
@@ -23,7 +21,6 @@ const Home = () => {
           itemVisibility={{ search: false }}
           color="light"
         />
-
         <section className="h-screen">
           <div className="flex h-full w-full flex-col items-center justify-center overflow-visible">
             <h2 className="mb-3 flex items-center gap-1 text-sm font-semibold tracking-wider text-white text-shadow-[0_0_4px_rgb(0_0_0_/_0.4)]">
@@ -48,22 +45,7 @@ const Home = () => {
             <p className="mb-10 text-center text-white text-base md:text-lg text-shadow-[0_0_4px_rgb(0_0_0_/_0.4)]">
               Share and access course notes. By students, for students.
             </p>
-
-            <TextField
-              placeholder="Search for courses or professors"
-              variant="outlined"
-              slotProps={{
-                input: {
-                  endAdornment: (
-                    <InputAdornment position="end" key="search-icon">
-                      <SearchIcon className="text-royal dark:text-cornflower-300" />
-                    </InputAdornment>
-                  ),
-                  className: 'rounded-full bg-white dark:bg-neutral-700',
-                },
-              }}
-              className="w-full max-w-xs md:max-w-sm lg:max-w-md"
-            />
+            <SearchBar autoFocus />
           </div>
         </section>
       </div>

src/components/header/Header.tsx

@@ -1,5 +1,6 @@
 'use server';
 
+import SearchBar from '@src/components/header/SearchBar';
 import Sidebar from '@src/components/nav/Sidebar';
 import { BaseHeader, BaseHeaderProps } from './BaseHeader';
 
@@ -9,6 +10,7 @@ const Header = async (props: BaseHeaderProps) => {
   return (
     <BaseHeader
       menu={<Sidebar homepage={props.shadow} hamburgerColor={props.color} />}
+      searchBar={<SearchBar />}
       {...props}
     >
       {props.children}