-
{track.title}
+
{track.title}
{track.categories.map((item) => (
{item.category.category}
))}
-
-
+
+
{track.problems.length} Chapters
-
+
{formatDistanceToNow(new Date(track.createdAt), { addSuffix: true })}
+ {(session?.user || userProgress.length > 0) && (
+
+
+
+ {progressPercentage.toFixed(0)}%
+
+
+ )}
-
+
);
}
diff --git a/apps/web/components/TrackPreview.tsx b/apps/web/components/TrackPreview.tsx
index d3b85e0d..8d47ee05 100644
--- a/apps/web/components/TrackPreview.tsx
+++ b/apps/web/components/TrackPreview.tsx
@@ -1,16 +1,26 @@
"use client";
+
import React, { useState, useEffect } from "react";
import Link from "next/link";
-import { Button } from "../../../packages/ui/src/shad/ui/button";
-import { Dialog, DialogContent } from "../../../packages/ui/src/shad/ui/dailog";
-import { ArrowRight } from "lucide-react";
+import { ArrowRight, Play, Redo, CheckCircle } from "lucide-react";
import { formatDistanceToNow } from "date-fns";
+import { Track, Problem, UserProgress, Categories } from "@prisma/client";
+import { useSession } from "next-auth/react";
+import { Button, Dialog, DialogContent } from "@repo/ui";
-type TrackPreviewProps = {
+interface TrackPreviewProps {
showPreview: boolean;
setShowPreview: (val: boolean) => void;
- track: any;
-};
+ track: Track & {
+ problems: Problem[];
+ categories: {
+ category: Categories;
+ }[];
+ };
+ isCompleted: boolean;
+ lastVisitedProblem: UserProgress | null;
+ userProgress: UserProgress[];
+}
const truncateDescription = (text: string, wordLimit: number) => {
const words = text.split(" ");
@@ -20,74 +30,120 @@ const truncateDescription = (text: string, wordLimit: number) => {
return text;
};
-export function TrackPreview({ showPreview, setShowPreview, track }: TrackPreviewProps) {
+export function TrackPreview({
+ showPreview,
+ setShowPreview,
+ track,
+ isCompleted,
+ lastVisitedProblem,
+ userProgress,
+}: TrackPreviewProps) {
const [isMediumOrLarger, setIsMediumOrLarger] = useState(false);
-
- const updateScreenSize = () => {
- setIsMediumOrLarger(window.innerWidth >= 768);
- };
+ const { data: session } = useSession();
+ const [completedProblems, setCompletedProblems] = useState
([]);
+ const [lastVisited, setLastVisited] = useState(null);
useEffect(() => {
- updateScreenSize(); // Set the initial state
- window.addEventListener("resize", updateScreenSize); // Add resize listener
+ const updateScreenSize = () => {
+ setIsMediumOrLarger(window.innerWidth >= 768);
+ };
+
+ updateScreenSize();
+ window.addEventListener("resize", updateScreenSize);
return () => {
- window.removeEventListener("resize", updateScreenSize); // Cleanup listener on unmount
+ window.removeEventListener("resize", updateScreenSize);
};
}, []);
+ useEffect(() => {
+ if (session?.user) {
+ setCompletedProblems(userProgress.filter((p) => p.completed).map((p) => p.problemId));
+ setLastVisited(lastVisitedProblem?.problemId || null);
+ }
+ }, [session, track.id, userProgress, lastVisitedProblem]);
+
const truncatedDescription = isMediumOrLarger ? track.description : truncateDescription(track.description, 15);
+ const progressPercentage = (completedProblems.length / track.problems.length) * 100;
+
return (
+