import { useState } from "react"; type CourseApiResponse = { id: string; title: string; lesson_count: number; is_bookmarked: boolean; }; type CourseCardModel = { id: string; title: string; lessonLabel: string; isBookmarked: boolean; }; type CourseListState = | { status: "loading" } | { status: "error"; message: string } | { status: "empty" } | { status: "ready"; courses: CourseCardModel[] }; function toCourseCard(response: CourseApiResponse): CourseCardModel { return { id: response.id, title: response.title.trim(), lessonLabel: `${response.lesson_count} lesson`, isBookmarked: response.is_bookmarked, }; } async function updateBookmark(id: string, isBookmarked: boolean) { return { id, isBookmarked }; } export function CourseCatalog({ state }: { state: CourseListState }) { const [courses, setCourses] = useState( state.status === "ready" ? state.courses : [], ); const [message, setMessage] = useState(undefined); async function toggleBookmark(id: string) { const previousCourses = courses; const nextCourses = courses.map((course) => course.id === id ? { ...course, isBookmarked: !course.isBookmarked } : course, ); setCourses(nextCourses); const nextCourse = nextCourses.find((course) => course.id === id); if (!nextCourse) { return; } try { await updateBookmark(nextCourse.id, nextCourse.isBookmarked); } catch { setCourses(previousCourses); setMessage("Bookmark belum diperbarui. Coba lagi."); } } if (state.status === "loading") { return

Memuat course...

; } if (state.status === "error") { return (

{state.message}

); } if (state.status === "empty") { return

Belum ada course yang cocok. Coba ubah filter.

; } return (

{courses.map((course) => (

{course.title}

{course.lessonLabel}

))} {message ?

{message}

: null}

); } export const exampleCard = toCourseCard({ id: "course-1", title: " React Dasar ", lesson_count: 8, is_bookmarked: false, });

Build course server-state checkpoint