fix(ts): types broken

src/app/[lang]/courses/[courseId]/DownloadSyllabus.tsx

@@ -1,22 +1,15 @@
-'use client';
 import supabase from "@/config/supabase";
 import { RawCourseID } from "@/types/courses";
 import { Button } from "@mui/joy";
+import Link from "next/link";
 import { DownloadCloud } from "react-feather";
 
 const DownloadSyllabus = ({ courseId }: { courseId: RawCourseID }) => {
-    const handleDownload = async () => {
-
-        const fileURL = `${process.env.NEXT_PUBLIC_SUPABASE_URL}storage/v1/object/public/syllabus/${encodeURIComponent(courseId)}.pdf`;
-        const link = document.createElement('a')
-        link.href = fileURL
-        link.setAttribute('download', courseId+'.pdf')
-        document.body.appendChild(link)
-        link.click()
-        link.remove()
-    }
+    const fileURL = `${process.env.NEXT_PUBLIC_SUPABASE_URL}storage/v1/object/public/syllabus/${encodeURIComponent(courseId)}.pdf`;
 
-    return <Button variant="outlined" startDecorator={<DownloadCloud />} onClick={handleDownload}>Download PDF</Button>
+    return <Link href={fileURL} target="_blank">
+        <Button variant="outlined" startDecorator={<DownloadCloud />}>Download PDF</Button>
+    </Link>
 }
 
 export default DownloadSyllabus;

src/app/[lang]/courses/page.tsx

@@ -196,7 +196,7 @@ const CoursePage: NextPage = () => {
             if (error) console.error(error);
             else {
                 console.log(courses)
-                setCourses(courses as CourseSyllabusView[]);
+                setCourses(courses as unknown as CourseSyllabusView[]);
                 setHeadIndex(index);
             }
         }

src/components/Timetable/CourseSearchbar.tsx

@@ -56,7 +56,7 @@ const CourseSearchbar = ({ onAddCourse }: { onAddCourse: (course: CourseDefiniti
             setRefreshKey(newValue!.raw_id! ?? Date.now());
             if(newValue) onAddCourse(newValue!);
         }}
-        isOptionEqualToValue={(option, value) => option.id === value.id}
+        isOptionEqualToValue={(option, value) => option.raw_id === value.raw_id}
         getOptionLabel={(option) => `${option.department} ${option.course}-${option.class} ${option.name_zh} ${option.name_en} ${option.raw_teacher_zh} ${option.raw_teacher_en}`}
         renderOption={(props, option) => (
             <AutocompleteOption {...props}>

src/components/Timetable/TimetableCourseList.tsx

@@ -49,7 +49,7 @@ const TimetableCourseList = () => {
 
 
     return <div className="flex flex-col gap-4 px-4">
-        <CourseSearchbar onAddCourse={course => addCourse(course)} />
+        <CourseSearchbar onAddCourse={course => addCourse(course.raw_id)} />
         <div className='grid grid-cols-2 text-center'>
             <div className='space-x-2'>
                 <span className='text-2xl'>{allCourseData.length}</span>
@@ -78,7 +78,7 @@ const TimetableCourseList = () => {
                     </div>
                 </div>
                 <ButtonGroup>
-                    <IconButton onClick={() => deleteCourse(course)}>
+                    <IconButton onClick={() => deleteCourse(course.raw_id)}>
                         <Trash className="w-4 h-4" />
                     </IconButton>
                     <IconButton>

src/config/supabase.ts

@@ -6,7 +6,7 @@ const supabase = createClient<Database>(process.env.NEXT_PUBLIC_SUPABASE_URL ??
 export type CourseDefinition = Database['public']['Tables']['courses']['Row'];
 export type CourseSyllabusDefinition = Database['public']['Tables']['course_syllabus']['Row'];
 export type CourseJoinWithSyllabus = CourseDefinition & { course_syllabus: CourseSyllabusDefinition };
-export type CourseSyllabusView = Database['public']['Views']['courses_with_syllabus']['Row'];
+export type CourseSyllabusView = CourseDefinition & { brief: string | null, keywords: string | null };
 export type AlertDefinition = Database['public']['Tables']['alerts']['Row'];
 export type BusScheduleDefinition = Database['public']['Tables']['bus_schedule']['Row'];
 export type CdsCourseDefinition = Database['public']['Tables']['cds_courses']['Row'];

src/hooks/useUserTimetable.tsx

@@ -1,10 +1,10 @@
 import { useSettings } from "./contexts/settings";
 import { useState, useEffect } from "react";
-import supabase, { CourseDefinition } from "@/config/supabase";
+import supabase, { CourseDefinition, CourseSyllabusView } from "@/config/supabase";
 import { createTimetableFromCourses } from "@/helpers/timetable";
 import { CourseTimeslotData } from "@/types/timetable";
 import useSWR from "swr";
-import {MinimalCourse} from '@/types/courses';
+import {MinimalCourse, RawCourseID} from '@/types/courses';
 
 const useUserTimetable = (loadCourse = true) => {
     const { courses, timetableTheme, setCourses } = useSettings();
@@ -13,7 +13,7 @@ const useUserTimetable = (loadCourse = true) => {
         const { data = [], error } = await supabase.from('courses_with_syllabus').select("*").in('raw_id', courseCodes);
         if(error) throw error;
         if(!data) throw new Error('No data');
-        return data;
+        return data as unknown as CourseSyllabusView[];
     });
     const [timetableData, setTimetableData] = useState<CourseTimeslotData[]>([]);
 
@@ -30,12 +30,12 @@ const useUserTimetable = (loadCourse = true) => {
         setTimetableData(createTimetableFromCourses(allCourseData! as MinimalCourse[], timetableTheme));
     }, [allCourseData, isLoading, error, timetableTheme]);
 
-    const deleteCourse = async (course: CourseDefinition) => {
-        setCourses(courses.filter(c => c != course.raw_id));
+    const deleteCourse = async (courseID: RawCourseID) => {
+        setCourses(courses.filter(c => c != courseID));
     }
 
-    const addCourse = async (course: CourseDefinition) => {
-        setCourses([...courses, course.raw_id!]);
+    const addCourse = async (courseID: RawCourseID) => {
+        setCourses([...courses, courseID!]);
     }
 
     return { timetableData, allCourseData, deleteCourse, addCourse, isLoading, error };