fix: preventDefault() forget

Signed-off-by: Kenneth Obsequio <k80308392@gmail.com>
This commit is contained in:
2026-07-04 06:03:10 +08:00
parent 57fa25b73a
commit 530da0b49d
+34 -16
View File
@@ -5,6 +5,7 @@ import api from "@/utils/api.util";
import { import {
House, Timer, Layers, GitBranch, Medal, CircleStar, LockIcon, House, Timer, Layers, GitBranch, Medal, CircleStar, LockIcon,
SendHorizonal, CheckCheck, CheckCircle2, Clock, FileQuestion, ClipboardList, SendHorizonal, CheckCheck, CheckCircle2, Clock, FileQuestion, ClipboardList,
Hourglass,
} from "lucide-react"; } from "lucide-react";
import CourseBadge from "@/modules/admin/components/courses/CourseBadge"; import CourseBadge from "@/modules/admin/components/courses/CourseBadge";
import { Badge } from "@/components/ui/badge"; import { Badge } from "@/components/ui/badge";
@@ -521,6 +522,9 @@ const CourseDetails = () => {
}, []); }, []);
const hasCompleted = !!course?.is_completed; const hasCompleted = !!course?.is_completed;
// duration_seconds is derived from authored lesson content (see duration.util.js) —
// zero means no lesson content has been built yet, so the course isn't ready to take.
const contentNotReady = !course?.duration_seconds;
useEffect(() => { useEffect(() => {
if (!myTier) getMyTier(); if (!myTier) getMyTier();
@@ -595,12 +599,18 @@ const CourseDetails = () => {
<div className="w-full flex items-center justify-between"> <div className="w-full flex items-center justify-between">
<AppBreadcrumb items={items} /> <AppBreadcrumb items={items} />
<div id="call-to-action"> <div id="call-to-action">
<Button onClick={() => navigate(`/course/${courseId}/unit`)}> {contentNotReady ? (
{hasCompleted <Badge variant="secondary" className="gap-1.5 text-xs">
? <><CheckCheck /> Start Again</> <Hourglass className="size-3" /> Coming Soon
: <><SendHorizonal /> Start Learning</> </Badge>
} ) : (
</Button> <Button onClick={() => navigate(`/course/${courseId}/unit`)}>
{hasCompleted
? <><CheckCheck /> Start Again</>
: <><SendHorizonal /> Start Learning</>
}
</Button>
)}
</div> </div>
</div> </div>
</motion.div> </motion.div>
@@ -639,16 +649,24 @@ const CourseDetails = () => {
</div> </div>
)} )}
</div> </div>
<Button <div ref={CourseBreadcrumb} className="w-fit">
className="w-fit" {contentNotReady ? (
ref={CourseBreadcrumb} <div className="flex items-center gap-2 rounded-lg border bg-muted px-4 py-2.5 text-sm text-muted-foreground">
onClick={() => navigate(`/course/${courseId}/unit`)} <Hourglass className="size-4 shrink-0" />
> This course is currently being prepared. Please check back later.
{hasCompleted </div>
? <><CheckCheck /> Start Again</> ) : (
: <><SendHorizonal /> Proceed</> <Button
} className="w-fit"
</Button> onClick={() => navigate(`/course/${courseId}/unit`)}
>
{hasCompleted
? <><CheckCheck /> Start Again</>
: <><SendHorizonal /> Proceed</>
}
</Button>
)}
</div>
</div> </div>
</div> </div>
</div> </div>