feat(targeted): add targeted practice functionality
feat(analytics); add analytics page
This commit is contained in:
shafin-r
@ -1,7 +1,327 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { api } from "../../../utils/api";
|
||||
import { type Topic } from "../../../types/topic";
|
||||
import { useAuthStore } from "../../../stores/authStore";
|
||||
import { Loader2 } from "lucide-react";
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import { slideVariants } from "../../../lib/utils";
|
||||
import { Badge } from "../../../components/ui/badge";
|
||||
import { useAuthToken } from "../../../hooks/useAuthToken";
|
||||
import type {
|
||||
TargetedSessionRequest,
|
||||
TargetedSessionResponse,
|
||||
} from "../../../types/session";
|
||||
|
||||
import { useExamConfigStore } from "../../../stores/useExamConfigStore";
|
||||
import { replace, useNavigate } from "react-router-dom";
|
||||
|
||||
type Step = "topic" | "difficulty" | "duration" | "review";
|
||||
|
||||
const ChoiceCard = ({
|
||||
label,
|
||||
selected,
|
||||
subLabel,
|
||||
section,
|
||||
onClick,
|
||||
}: {
|
||||
label: string;
|
||||
selected?: boolean;
|
||||
subLabel?: string;
|
||||
section?: string;
|
||||
onClick: () => void;
|
||||
}) => (
|
||||
<button
|
||||
onClick={onClick}
|
||||
className={`rounded-2xl border p-4 text-left transition flex flex-col
|
||||
${selected ? "border-purple-600 bg-purple-50" : "hover:border-gray-300"}`}
|
||||
>
|
||||
<div className="flex justify-between">
|
||||
<span className="font-satoshi-bold text-lg">{label}</span>
|
||||
{section && (
|
||||
<Badge
|
||||
variant={"secondary"}
|
||||
className={`font-satoshi text-sm ${section === "EBRW" ? "bg-blue-400 text-blue-100" : "bg-red-400 text-red-100"}`}
|
||||
>
|
||||
{section}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
{subLabel && <span className="font-satoshi text-md">{subLabel}</span>}
|
||||
</button>
|
||||
);
|
||||
|
||||
export const TargetedPractice = () => {
|
||||
const navigate = useNavigate();
|
||||
const {
|
||||
storeTopics,
|
||||
setDifficulty: storeDifficulty,
|
||||
storeDuration,
|
||||
setMode,
|
||||
setQuestionCount,
|
||||
} = useExamConfigStore();
|
||||
|
||||
const user = useAuthStore((state) => state.user);
|
||||
const token = useAuthToken();
|
||||
const [direction, setDirection] = useState<1 | -1>(1);
|
||||
|
||||
const [step, setStep] = useState<Step>("topic");
|
||||
|
||||
const [selectedTopics, setSelectedTopics] = useState<Topic[]>([]);
|
||||
|
||||
const [difficulty, setDifficulty] = useState<
|
||||
"EASY" | "MEDIUM" | "HARD" | null
|
||||
>(null);
|
||||
const [duration, setDuration] = useState<number | null>(null);
|
||||
|
||||
const [search, setSearch] = useState("");
|
||||
const [loading, setLoading] = useState<boolean>(false);
|
||||
|
||||
const [topics, setTopics] = useState<Topic[]>([]);
|
||||
|
||||
const difficulties = ["EASY", "MEDIUM", "HARD"] as const;
|
||||
|
||||
const durations = [10, 20, 30, 45];
|
||||
|
||||
const toggleTopic = (topic: Topic) => {
|
||||
setSelectedTopics((prev) => {
|
||||
const exists = prev.some((t) => t.id === topic.id);
|
||||
|
||||
if (exists) {
|
||||
return prev.filter((t) => t.id !== topic.id);
|
||||
}
|
||||
|
||||
return [...prev, topic];
|
||||
});
|
||||
};
|
||||
|
||||
async function handleStartTargetedPractice() {
|
||||
if (!user || !token || !topics || !difficulty || !duration) return;
|
||||
|
||||
navigate(`/student/practice/${topics[0].id}/test`, { replace: true });
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
const fetchAllTopics = async () => {
|
||||
if (!user) return;
|
||||
|
||||
try {
|
||||
setLoading(true);
|
||||
const authStorage = localStorage.getItem("auth-storage");
|
||||
if (!authStorage) return;
|
||||
|
||||
const parsed = JSON.parse(authStorage) as {
|
||||
state?: { token?: string };
|
||||
};
|
||||
|
||||
const token = parsed.state?.token;
|
||||
if (!token) return;
|
||||
|
||||
const response = await api.fetchAllTopics(token);
|
||||
setTopics(response);
|
||||
setLoading(false);
|
||||
} catch (error) {
|
||||
console.error("Failed to load topics. Reason: " + error);
|
||||
}
|
||||
};
|
||||
|
||||
fetchAllTopics();
|
||||
}, [user]);
|
||||
|
||||
return (
|
||||
<main className="min-h-screen max-w-7xl mx-auto px-8 sm:px-6 lg:px-8 py-8 space-y-4">
|
||||
Targeted Practice
|
||||
<main className="relative min-h-screen max-w-7xl mx-auto px-8 sm:px-6 lg:px-8 py-8 space-y-4">
|
||||
<h1 className="font-satoshi-bold text-3xl">Targeted Practice</h1>
|
||||
|
||||
<div className="relative overflow-hidden">
|
||||
<AnimatePresence mode="wait">
|
||||
{step === "topic" && (
|
||||
<motion.div
|
||||
custom={direction}
|
||||
key="topic"
|
||||
variants={slideVariants}
|
||||
initial="initial"
|
||||
animate="animate"
|
||||
exit="exit"
|
||||
className="space-y-4"
|
||||
>
|
||||
<h2 className="text-xl font-satoshi-bold">Choose a topic</h2>
|
||||
|
||||
<input
|
||||
placeholder="Search topics..."
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
className="w-full rounded-xl border px-4 py-2"
|
||||
/>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||
{loading ? (
|
||||
<>
|
||||
<div>
|
||||
<Loader2
|
||||
size={30}
|
||||
color="purple"
|
||||
className="animate-spin"
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
topics
|
||||
.filter((t) =>
|
||||
t.name.toLowerCase().includes(search.toLowerCase()),
|
||||
)
|
||||
.map((t) => (
|
||||
<ChoiceCard
|
||||
key={t.id}
|
||||
label={t.name}
|
||||
subLabel={t.parent_name}
|
||||
section={t.section}
|
||||
selected={selectedTopics.some((st) => st.id === t.id)}
|
||||
onClick={() => toggleTopic(t)}
|
||||
/>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
<button
|
||||
disabled={selectedTopics.length === 0}
|
||||
onClick={() => {
|
||||
setTopics(selectedTopics.map((t) => t.id)); // ✅ STORE
|
||||
storeTopics(selectedTopics.map((t) => t.id)); // ✅ STORE
|
||||
setMode("TARGETED"); // ✅ STORE
|
||||
setQuestionCount(7); // ✅ STORE
|
||||
setDirection(1);
|
||||
setStep("difficulty");
|
||||
}}
|
||||
className={`rounded-2xl py-3 px-6 font-satoshi-bold transition
|
||||
${
|
||||
selectedTopics.length === 0
|
||||
? "bg-gray-300 text-gray-500 cursor-not-allowed"
|
||||
: "bg-linear-to-br from-purple-500 to-purple-600 text-white"
|
||||
}`}
|
||||
>
|
||||
Next
|
||||
</button>
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
{step === "difficulty" && (
|
||||
<motion.div
|
||||
key="difficulty"
|
||||
custom={direction}
|
||||
variants={slideVariants}
|
||||
initial="initial"
|
||||
animate="animate"
|
||||
exit="exit"
|
||||
className="space-y-4"
|
||||
>
|
||||
<h2 className="text-xl font-satoshi-bold">Select difficulty</h2>
|
||||
|
||||
<div className="grid grid-cols-1 gap-3">
|
||||
{difficulties.map((d) => (
|
||||
<ChoiceCard
|
||||
key={d}
|
||||
label={d}
|
||||
selected={difficulty === d}
|
||||
onClick={() => {
|
||||
setDifficulty(d); // local UI
|
||||
storeDifficulty(d); // ✅ STORE
|
||||
setDirection(1);
|
||||
setStep("duration");
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
{step === "duration" && (
|
||||
<motion.div
|
||||
key="duration"
|
||||
custom={direction}
|
||||
variants={slideVariants}
|
||||
initial="initial"
|
||||
animate="animate"
|
||||
exit="exit"
|
||||
className="space-y-4"
|
||||
>
|
||||
<h2 className="text-xl font-satoshi-bold">Select duration</h2>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-3">
|
||||
{durations.map((d) => (
|
||||
<ChoiceCard
|
||||
key={d}
|
||||
label={`${d} minutes`}
|
||||
selected={duration === d}
|
||||
onClick={() => {
|
||||
setDuration(d);
|
||||
storeDuration(d); // ✅ STORE
|
||||
setDirection(1);
|
||||
setStep("review");
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
{step === "review" && (
|
||||
<motion.div
|
||||
custom={direction}
|
||||
key="review"
|
||||
variants={slideVariants}
|
||||
initial="initial"
|
||||
animate="animate"
|
||||
exit="exit"
|
||||
className="space-y-6"
|
||||
>
|
||||
<h2 className="text-xl font-satoshi-bold">Review your choices</h2>
|
||||
|
||||
<div className="rounded-2xl border p-4 space-y-2 font-satoshi">
|
||||
<p>
|
||||
<strong>Topics:</strong>{" "}
|
||||
{selectedTopics.map((t) => t.name).join(", ")}
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<strong>Difficulty:</strong> {difficulty}
|
||||
</p>
|
||||
<p>
|
||||
<strong>Duration:</strong> {duration} minutes
|
||||
</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
<button
|
||||
disabled={step === "topic"}
|
||||
onClick={() => {
|
||||
const order: Step[] = ["topic", "difficulty", "duration", "review"];
|
||||
setDirection(-1);
|
||||
setStep(order[order.indexOf(step) - 1]);
|
||||
}}
|
||||
className={`absolute bottom-24 left-10 rounded-2xl py-3 px-6 font-satoshi-bold transition
|
||||
${
|
||||
step === "topic"
|
||||
? "opacity-0 pointer-events-none"
|
||||
: "bg-linear-to-br from-slate-500 to-slate-600 text-white"
|
||||
}`}
|
||||
>
|
||||
← Back
|
||||
</button>
|
||||
|
||||
<button
|
||||
disabled={step !== "review"}
|
||||
className={`absolute bottom-28 right-10 rounded-2xl py-3 px-6 font-satoshi-bold transition
|
||||
${
|
||||
step !== "review"
|
||||
? "opacity-0 pointer-events-none"
|
||||
: "bg-linear-to-br from-purple-500 to-purple-600 text-white"
|
||||
}`}
|
||||
onClick={() => {
|
||||
handleStartTargetedPractice();
|
||||
}}
|
||||
>
|
||||
Start Test
|
||||
</button>
|
||||
</main>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user