Add fetchOutlines API utility and update CourseGraph and page components for improved course data handling

Author: Highfire1

src/app/sfu/courses/[dept]/[number]/CourseGraph.tsx

@@ -2,6 +2,7 @@
 
 import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { type Course } from '../../../../../utils/courseApi';
+import Link from "next/link";
 
 type SFUPrereqNode = {
   type: string;
@@ -1287,8 +1288,8 @@ export default function CourseGraph({ courseId: initialCourseId, courses }: Cour
 			>
 				{/* Home button - top left */}
 				<div data-pan-block className="absolute top-2 left-2 z-20">
-					<a
-						href="/sfu"
+					<Link
+						href="/sfu/courses"
 						className="inline-flex items-center gap-2 bg-white/90 dark:bg-neutral-800/90 backdrop-blur rounded-lg border border-gray-200 dark:border-gray-700 shadow px-3 py-2 text-xs hover:bg-neutral-50 dark:hover:bg-neutral-700 text-gray-800 dark:text-gray-200"
 						title="Home"
 					>
@@ -1297,7 +1298,7 @@ export default function CourseGraph({ courseId: initialCourseId, courses }: Cour
 							<path d="M5 10v9a1 1 0 001 1h4v-6h4v6h4a1 1 0 001-1v-9" />
 						</svg>
 						<span className="hidden sm:inline">Home</span>
-					</a>
+					</Link>
 				</div>
 					{/* Fullscreen button - top right */}
 					<div data-pan-block className="absolute top-2 right-2 z-20">

src/app/sfu/courses/[dept]/[number]/page.tsx

@@ -1,5 +1,6 @@
 import CourseGraph from './CourseGraph';
 import { getAllCourses, getCourseByDeptAndNumber } from '../../../../../utils/courseApi';
+import { fetchOutlines } from '../../../../../utils/sfuOutlinesApi';
 
 interface PageProps {
   params: Promise<{
@@ -11,61 +12,74 @@ interface PageProps {
 // Generate static paths for all courses from API
 export async function generateStaticParams() {
   try {
-    const courses = await getAllCourses();
-    const params = courses.map((course) => ({
-      // Keep original casing to match links like /sfu/courses/CMPT/105W
-      dept: String(course.dept),
-      number: String(course.number),
+    // Prefer official outlines API to enumerate ALL courses
+    const outlines = await fetchOutlines();
+    const params = outlines.map((o) => ({
+      dept: String(o.dept).toLowerCase(),
+      number: String(o.number).toLowerCase(),
     }));
-    console.log(`Generated ${params.length} static params for courses`);
+    // Fallback: if outlines unexpectedly empty, use crowdsourced list
+    if (params.length === 0) {
+      const courses = await getAllCourses();
+      return courses.map((course) => ({ dept: String(course.dept).toLowerCase(), number: String(course.number).toLowerCase() }));
+    }
     return params;
   } catch (error) {
-    console.error('Error generating static params:', error);
-    return [];
+    console.error('Error generating static params from outlines:', error);
+    try {
+      const courses = await getAllCourses();
+      return courses.map((course) => ({ dept: String(course.dept).toLowerCase(), number: String(course.number).toLowerCase() }));
+    } catch (e) {
+      console.error('Error falling back to crowdsourced params:', e);
+      return [];
+    }
   }
 }
 
 // With static export, only the paths from generateStaticParams are valid
-// export const dynamicParams = false;
+export const dynamicParams = false;
 // Ensure this route is fully static
-// export const revalidate = false;
+export const revalidate = false;
 
 export default async function CoursePage({ params }: PageProps) {
   const resolvedParams = await params;
-  const courseId = `${resolvedParams.dept.toUpperCase()} ${resolvedParams.number}`;
-  
-  // Fetch the course and all courses from API at build time
-  const [course, allCourses] = await Promise.all([
-    getCourseByDeptAndNumber(resolvedParams.dept, resolvedParams.number),
-    getAllCourses()
+  const courseId = `${resolvedParams.dept.toUpperCase()} ${resolvedParams.number.toUpperCase()}`;
+
+  // Fetch the crowdsourced data (may not include every course)
+  const [allCourses, course] = await Promise.all([
+    getAllCourses(),
+    getCourseByDeptAndNumber(resolvedParams.dept, resolvedParams.number.toUpperCase()),
   ]);
 
+  // If this course exists in outlines but not in our crowdsourced data, show a helpful message
   if (!course) {
     return (
       <div className="flex items-center justify-center h-screen bg-white dark:bg-black">
-        <div className="text-center">
-          <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
-            Course Not Found
+        <div className="text-center px-6 max-w-xl">
+          <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-3">
+            No prerequisite data yet
           </h1>
-          <p className="text-gray-600 dark:text-gray-400">
-            No prerequisite data available for {courseId}
+          <p className="text-gray-700 dark:text-gray-300 mb-2">
+            We have not yet parsed {courseId}.
           </p>
           <p className="text-gray-600 dark:text-gray-400">
-            Contribute today at{' '}
+            You can help by contributing at
+            {' '}
             <a
               href="https://crowdsource.sfucourses.com"
               target="_blank"
               rel="noopener noreferrer"
-              className="text-blue-500 hover:underline"
+              className="underline hover:opacity-80"
             >
               crowdsource.sfucourses.com
-            </a>
+            </a>.
           </p>
         </div>
       </div>
     );
   }
 
+  // Render the graph regardless; the component will indicate when data is missing for a course
   return (
     <div className="w-full h-screen bg-white dark:bg-black">
       <CourseGraph courseId={courseId} courses={allCourses} />

src/app/sfu/courses/page.tsx

@@ -40,7 +40,7 @@ export default async function SFUCoursesPage() {
                       .map((course) => (
                         <Link
                           key={course.id}
-                          href={`/sfu/courses/${course.dept}/${course.number}`}
+                          href={`/sfu/courses/${course.dept.toLowerCase()}/${course.number.toLowerCase()}`}
                           className="block p-4 border border-gray-200 dark:border-gray-600 rounded-lg hover:border-blue-400 dark:hover:border-blue-500 hover:bg-blue-50 dark:hover:bg-gray-800 transition-colors bg-white dark:bg-gray-900"
                         >
                           <div className="font-semibold text-gray-900 dark:text-white">

src/utils/sfuOutlinesApi.ts

@@ -0,0 +1,46 @@
+export type SfuOutline = {
+  corequisites?: string;
+  degreeLevel?: string;
+  deliveryMethod?: string;
+  dept: string;
+  description?: string;
+  designation?: string;
+  notes?: string;
+  number: string;
+  prerequisites?: string;
+  title?: string;
+  units?: string;
+  offerings?: Array<{
+    instructors?: string[];
+    term?: string;
+  }>;
+};
+
+// Fetch outlines; if dept/number omitted, API is expected to return all outlines
+export async function fetchOutlines(params?: { dept?: string; number?: string }): Promise<SfuOutline[]> {
+  const base = 'https://api.sfucourses.com/v1/rest/outlines';
+  const url = new URL(base);
+  if (params?.dept != null) url.searchParams.set('dept', params.dept.toUpperCase());
+  if (params?.number != null) url.searchParams.set('number', params.number);
+
+  const res = await fetch(url.toString(), {
+    headers: { Accept: 'application/json' },
+    // Cache at build time; for client-side it will use the browser cache
+    cache: 'force-cache',
+  });
+  if (!res.ok) {
+    // Return empty array on failure so callers can treat as not found
+    return [];
+  }
+  const data = await res.json();
+  return Array.isArray(data) ? (data as SfuOutline[]) : [];
+}
+
+export async function isValidCourseSFU(dept: string, number: string): Promise<boolean> {
+  try {
+    const outlines = await fetchOutlines({ dept, number });
+    return outlines.length > 0;
+  } catch {
+    return false;
+  }
+}