mdares/ACVE
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

MVP

Browse Source
This commit is contained in:
Marcelo
2026-03-20 04:54:08 +00:00
parent 62b3cfe467
commit 02afbd7cfb
12 changed files with 1491 additions and 299 deletions
Download Patch File Download Diff File Expand all files Collapse all files

230
components/courses/StudentClassroomClient.tsx
View File

@@ -4,14 +4,23 @@ import { useEffect, useMemo, useState, useTransition } from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { Check, CircleDashed, ClipboardCheck, FileText, Lock, PlayCircle } from "lucide-react";
import { toast } from "sonner";
import { toggleLessonComplete } from "@/app/(public)/courses/[slug]/learn/actions";
import ProgressBar from "@/components/ProgressBar";
import { getLessonContentTypeLabel, isFinalExam, type LessonContentType } from "@/lib/courses/lessonContent";
import { markdownToSafeHtml } from "@/lib/courses/lessonMarkdown";
import {
getLessonContentTypeLabel,
isFinalExam,
type LessonActivityMeta,
type LessonContentType,
} from "@/lib/courses/lessonContent";
type ClassroomLesson = {
id: string;
title: string;
description: string;
lectureContent: string;
activity: LessonActivityMeta | null;
contentType: LessonContentType;
materialUrl: string | null;
videoUrl: string | null;
@@ -40,6 +49,14 @@ type CompletionCertificate = {
certificateNumber: string | null;
};
type ActivityResult = {
score: number;
correct: number;
total: number;
passed: boolean;
questionResults: Record<string, boolean>;
};
function getYouTubeEmbedUrl(url: string | null | undefined): string | null {
if (!url?.trim()) return null;
const trimmed = url.trim();
@@ -57,6 +74,10 @@ function getIsPdfUrl(url: string | null | undefined): boolean {
return /\.pdf(?:$|\?)/i.test(url.trim());
}
function isAssessmentType(contentType: LessonContentType): boolean {
return contentType === "ACTIVITY" || contentType === "QUIZ" || contentType === "FINAL_EXAM";
}
export default function StudentClassroomClient({
courseSlug,
courseTitle,
@@ -70,6 +91,8 @@ export default function StudentClassroomClient({
const [selectedLessonId, setSelectedLessonId] = useState(initialSelectedLessonId);
const [completedLessonIds, setCompletedLessonIds] = useState(initialCompletedLessonIds);
const [completionCertificate, setCompletionCertificate] = useState<CompletionCertificate | null>(null);
const [activityAnswers, setActivityAnswers] = useState<Record<string, string>>({});
const [activityResult, setActivityResult] = useState<ActivityResult | null>(null);
useEffect(() => {
setSelectedLessonId(initialSelectedLessonId);
@@ -89,10 +112,17 @@ export default function StudentClassroomClient({
const selectedLesson =
flatLessons.find((lesson) => lesson.id === selectedLessonId) ?? flatLessons[0] ?? null;
useEffect(() => {
setActivityAnswers({});
setActivityResult(null);
}, [selectedLesson?.id]);
const selectedLessonTypeLabel = selectedLesson ? getLessonContentTypeLabel(selectedLesson.contentType) : "";
const selectedLessonActivity = selectedLesson?.activity?.questions?.length ? selectedLesson.activity : null;
const selectedLectureHtml = markdownToSafeHtml(selectedLesson?.lectureContent || selectedLesson?.description || "");
const isRestricted = (lessonId: string) => {
if (!isEnrolled) return false; // Non-enrolled can click any lesson (preview shows content, locked shows premium message)
if (!isEnrolled) return false;
const lessonIndex = flatLessons.findIndex((lesson) => lesson.id === lessonId);
if (lessonIndex <= 0) return false;
if (completedSet.has(lessonId)) return false;
@@ -109,7 +139,7 @@ export default function StudentClassroomClient({
};
const handleToggleComplete = async () => {
if (!selectedLesson || isSaving) return;
if (!selectedLesson || isSaving || !isEnrolled) return;
const lessonId = selectedLesson.id;
const wasCompleted = completedSet.has(lessonId);
@@ -146,6 +176,40 @@ export default function StudentClassroomClient({
});
};
const submitActivity = async () => {
if (!selectedLesson || !selectedLessonActivity) return;
const total = selectedLessonActivity.questions.length;
if (total === 0) return;
const unanswered = selectedLessonActivity.questions.filter((question) => !activityAnswers[question.id]);
if (unanswered.length > 0) {
toast.error("Responde todas las preguntas antes de enviar.");
return;
}
let correct = 0;
const questionResults: Record<string, boolean> = {};
for (const question of selectedLessonActivity.questions) {
const answerId = activityAnswers[question.id];
const selectedOption = question.options.find((option) => option.id === answerId);
const isCorrect = Boolean(selectedOption?.isCorrect);
if (isCorrect) correct += 1;
questionResults[question.id] = isCorrect;
}
const score = Math.round((correct / total) * 100);
const passingScore = selectedLesson.contentType === "ACTIVITY" ? 0 : selectedLessonActivity.passingScorePercent;
const passed = selectedLesson.contentType === "ACTIVITY" ? true : score >= passingScore;
setActivityResult({ score, correct, total, passed, questionResults });
if (passed && isEnrolled && !completedSet.has(selectedLesson.id)) {
await handleToggleComplete();
}
};
if (!selectedLesson) {
return (
<div className="rounded-xl border border-slate-200 bg-white p-6">
@@ -217,6 +281,7 @@ export default function StudentClassroomClient({
`}</style>
</>
) : null}
<section className="space-y-4 rounded-xl border border-slate-200 bg-white p-5">
<Link href={`/courses/${courseSlug}`} className="text-sm font-medium text-slate-600 hover:text-slate-900">
{"<-"} Back to Course
@@ -255,12 +320,113 @@ export default function StudentClassroomClient({
key={`${selectedLesson.id}-${selectedLesson.videoUrl}`}
className="h-full w-full"
controls
onEnded={handleToggleComplete}
onEnded={() => {
if (isEnrolled) {
void handleToggleComplete();
}
}}
src={selectedLesson.videoUrl}
/>
) : (
<div className="flex h-full items-center justify-center text-sm text-slate-300">Video not available for this lesson</div>
<div className="flex h-full items-center justify-center text-sm text-slate-300">
Video not available for this lesson
</div>
)
) : selectedLesson.contentType === "LECTURE" ? (
<article
className="space-y-4 text-[16px] leading-8 text-slate-800 [&_a]:font-medium [&_a]:text-blue-700 [&_a]:underline [&_blockquote]:rounded-r-md [&_blockquote]:border-l-4 [&_blockquote]:border-slate-300 [&_blockquote]:bg-slate-100 [&_blockquote]:px-4 [&_blockquote]:py-2 [&_h1]:mt-6 [&_h1]:text-3xl [&_h1]:font-semibold [&_h2]:mt-5 [&_h2]:text-2xl [&_h2]:font-semibold [&_h3]:mt-4 [&_h3]:text-xl [&_h3]:font-semibold [&_ol]:list-decimal [&_ol]:space-y-2 [&_ol]:pl-7 [&_p]:my-3 [&_ul]:list-disc [&_ul]:space-y-2 [&_ul]:pl-7"
dangerouslySetInnerHTML={{ __html: selectedLectureHtml }}
/>
) : isAssessmentType(selectedLesson.contentType) && selectedLessonActivity ? (
<div className="space-y-4">
<p className="inline-flex rounded-full border border-slate-300 bg-white px-3 py-1 text-xs font-semibold uppercase tracking-wide text-slate-700">
{selectedLessonTypeLabel}
</p>
{selectedLessonActivity.instructions ? (
<p className="rounded-lg border border-slate-200 bg-white px-4 py-3 text-sm leading-relaxed text-slate-700">
{selectedLessonActivity.instructions}
</p>
) : null}
<div className="space-y-3">
{selectedLessonActivity.questions.map((question, index) => (
<div key={question.id} className="rounded-xl border border-slate-200 bg-white p-4">
<p className="text-sm font-semibold text-slate-900">
{index + 1}. {question.prompt}
</p>
<div className="mt-3 grid gap-2">
{question.options.map((option) => {
const isSelected = activityAnswers[question.id] === option.id;
const showResult = Boolean(activityResult);
const isCorrect = option.isCorrect;
return (
<button
key={option.id}
type="button"
onClick={() =>
setActivityAnswers((prev) => ({
...prev,
[question.id]: option.id,
}))
}
className={`rounded-lg border px-3 py-2 text-left text-sm transition-colors ${
isSelected ? "border-slate-500 bg-slate-900 text-white" : "border-slate-300 bg-white text-slate-700 hover:bg-slate-50"
} ${
showResult && isCorrect
? "border-emerald-300 bg-emerald-50 text-emerald-900"
: ""
}`}
>
{option.text}
</button>
);
})}
</div>
{activityResult && question.explanation ? (
<p className="mt-3 rounded-md border border-slate-200 bg-slate-50 px-3 py-2 text-xs text-slate-600">
{question.explanation}
</p>
) : null}
</div>
))}
</div>
<button
type="button"
onClick={() => void submitActivity()}
className="rounded-md border border-slate-300 bg-slate-900 px-4 py-2 text-sm font-medium text-white hover:bg-slate-800"
>
Enviar respuestas
</button>
{activityResult ? (
<div
className={`rounded-lg border px-4 py-3 text-sm ${
activityResult.passed
? "border-emerald-200 bg-emerald-50 text-emerald-900"
: "border-amber-200 bg-amber-50 text-amber-900"
}`}
>
Resultado: {activityResult.correct}/{activityResult.total} ({activityResult.score}%)
{selectedLesson.contentType !== "ACTIVITY" ? (
<span>
{" "}
| Mínimo: {selectedLessonActivity.passingScorePercent}%{" "}
{activityResult.passed ? "(Aprobado)" : "(No aprobado)"}
</span>
) : (
<span> | Actividad completada</span>
)}
</div>
) : null}
{isFinalExam(selectedLesson.contentType) ? (
<div className="rounded-lg border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-900">
Debes aprobar esta evaluación final para graduarte y emitir el certificado del curso.
</div>
) : null}
</div>
) : (
<div className="space-y-4">
<p className="inline-flex rounded-full border border-slate-300 bg-white px-3 py-1 text-xs font-semibold uppercase tracking-wide text-slate-700">
@@ -271,35 +437,29 @@ export default function StudentClassroomClient({
) : (
<p className="text-sm text-slate-600">Este contenido no tiene descripción adicional.</p>
)}
{selectedLesson.materialUrl ? (
getIsPdfUrl(selectedLesson.materialUrl) ? (
<iframe
className="h-[430px] w-full rounded-lg border border-slate-200 bg-white"
src={selectedLesson.materialUrl}
title={`${selectedLesson.title} material`}
/>
) : (
<a
className="inline-flex rounded-md border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-800 hover:bg-slate-100"
href={selectedLesson.materialUrl}
rel="noreferrer"
target="_blank"
>
Abrir material
</a>
)
) : null}
{isFinalExam(selectedLesson.contentType) ? (
<div className="rounded-lg border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-900">
Debes completar esta evaluación final para graduarte y emitir el certificado del curso.
</div>
) : null}
</div>
)}
</div>
{selectedLesson.materialUrl ? (
getIsPdfUrl(selectedLesson.materialUrl) ? (
<iframe
className="h-[430px] w-full rounded-lg border border-slate-200 bg-white"
src={selectedLesson.materialUrl}
title={`${selectedLesson.title} material`}
/>
) : (
<a
className="inline-flex rounded-md border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-800 hover:bg-slate-100"
href={selectedLesson.materialUrl}
rel="noreferrer"
target="_blank"
>
Abrir material
</a>
)
) : null}
<div className="space-y-2 rounded-xl border border-slate-200 bg-white p-4">
<h1 className="text-2xl font-semibold text-slate-900">{selectedLesson.title}</h1>
<p className="inline-flex w-fit rounded-full border border-slate-300 bg-slate-50 px-2.5 py-0.5 text-xs font-semibold text-slate-700">
@@ -313,18 +473,14 @@ export default function StudentClassroomClient({
</p>
</div>
{isEnrolled && (
{isEnrolled && !isAssessmentType(selectedLesson.contentType) && (
<button
type="button"
onClick={handleToggleComplete}
onClick={() => void handleToggleComplete()}
disabled={isSaving}
className="rounded-md border border-slate-300 bg-slate-900 px-4 py-2 text-sm font-medium text-white hover:bg-slate-800 disabled:opacity-60"
>
{completedSet.has(selectedLesson.id)
? "Marcar como pendiente"
: isFinalExam(selectedLesson.contentType)
? "Marcar evaluación final como completada"
: "Marcar como completada"}
{completedSet.has(selectedLesson.id) ? "Marcar como pendiente" : "Marcar como completada"}
</button>
)}
</section>