297 lines
12 KiB
TypeScript
297 lines
12 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
import {
|
|
Tabs,
|
|
TabsTrigger,
|
|
TabsList,
|
|
TabsContent,
|
|
} from "../../components/ui/tabs";
|
|
import { useAuthStore } from "../../stores/authStore";
|
|
import { CheckCircle, Search } from "lucide-react";
|
|
import { api } from "../../utils/api";
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardFooter,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "../../components/ui/card";
|
|
import { Badge } from "../../components/ui/badge";
|
|
import { Button } from "../../components/ui/button";
|
|
import type { PracticeSheet } from "../../types/sheet";
|
|
import { formatStatus } from "../../lib/utils";
|
|
|
|
export const Home = () => {
|
|
const user = useAuthStore((state) => state.user);
|
|
|
|
// const logout = useAuthStore((state) => state.logout);
|
|
// const navigate = useNavigate();
|
|
|
|
const [practiceSheets, setPracticeSheets] = useState<PracticeSheet[]>([]);
|
|
const [notStartedSheets, setNotStartedSheets] = useState<PracticeSheet[]>([]);
|
|
const [inProgressSheets, setInProgressSheets] = useState<PracticeSheet[]>([]);
|
|
const [completedSheets, setCompletedSheets] = useState<PracticeSheet[]>([]);
|
|
|
|
useEffect(() => {
|
|
const sortPracticeSheets = (sheets: PracticeSheet[]) => {
|
|
const notStarted = sheets.filter(
|
|
(sheet) => sheet.user_status === "NOT_STARTED",
|
|
);
|
|
const inProgress = sheets.filter(
|
|
(sheet) => sheet.user_status === "in-progress",
|
|
);
|
|
const completed = sheets.filter(
|
|
(sheet) => sheet.user_status === "completed",
|
|
);
|
|
|
|
setNotStartedSheets(notStarted);
|
|
setInProgressSheets(inProgress);
|
|
setCompletedSheets(completed);
|
|
};
|
|
|
|
const fetchPracticeSheets = async () => {
|
|
if (!user) return;
|
|
|
|
try {
|
|
const authStorage = localStorage.getItem("auth-storage");
|
|
if (!authStorage) {
|
|
console.error("authStorage not found in local storage");
|
|
return;
|
|
}
|
|
const {
|
|
state: { token },
|
|
} = JSON.parse(authStorage);
|
|
if (!token) {
|
|
console.error("Token not found in authStorage");
|
|
return;
|
|
}
|
|
const sheets = await api.getPracticeSheets(token, 1, 10);
|
|
setPracticeSheets(sheets.data);
|
|
console.log("All Practice Sheets: ", sheets.data);
|
|
sortPracticeSheets(sheets.data);
|
|
} catch (error) {
|
|
console.error("Error fetching practice sheets:", error);
|
|
}
|
|
};
|
|
|
|
fetchPracticeSheets();
|
|
}, [user]);
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gray-50">
|
|
<main className="flex flex-col gap-12 max-w-full mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
|
<h1 className="text-4xl font-satoshi-bold tracking-tight text-gray-800 text-center">
|
|
Welcome, {user?.name || "Student"}
|
|
</h1>
|
|
<section className="relative w-full">
|
|
<input
|
|
type="text"
|
|
placeholder="Search..."
|
|
className="font-satoshi w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
|
/>
|
|
<div className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
|
|
<Search size={22} color="gray" />
|
|
</div>
|
|
</section>
|
|
<section className="space-y-4">
|
|
<h1 className="font-satoshi-bold text-2xl tracking-tight">
|
|
Pick up where you left off
|
|
</h1>
|
|
</section>
|
|
<section className="w-full">
|
|
<Tabs defaultValue="all" className="w-full ">
|
|
<TabsList className="bg-transparent p-0 w-full">
|
|
<TabsTrigger
|
|
value="all"
|
|
className="font-satoshi-regular tracking-wide text-md rounded-none border-b-2 data-[state=active]:font-satoshi-medium data-[state=active]:border-b-indigo-800 data-[state=active]:text-indigo-800"
|
|
>
|
|
All
|
|
</TabsTrigger>
|
|
<TabsTrigger
|
|
value="NOT_STARTED"
|
|
className="font-satoshi-regular tracking-wide text-md rounded-none border-b-2 data-[state=active]:border-b-indigo-800 data-[state=active]:text-indigo-800"
|
|
>
|
|
Not Started
|
|
</TabsTrigger>
|
|
<TabsTrigger
|
|
value="COMPLETED"
|
|
className="font-satoshi-regular tracking-wide text-md rounded-none border-b-2 data-[state=active]:border-b-indigo-800 data-[state=active]:text-indigo-800"
|
|
>
|
|
Completed
|
|
</TabsTrigger>
|
|
</TabsList>
|
|
<TabsContent value="all">
|
|
<div className="space-y-6">
|
|
{practiceSheets.length > 0 ? (
|
|
practiceSheets.map((sheet) => (
|
|
<Card key={sheet?.id}>
|
|
<CardHeader>
|
|
<CardTitle className="font-satoshi-medium text-xl">
|
|
{sheet?.title}
|
|
</CardTitle>
|
|
<CardDescription className="font-satoshi">
|
|
{sheet?.description}
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="flex justify-between">
|
|
<p className="font-satoshi text-gray-500">
|
|
{formatStatus(sheet?.user_status)}
|
|
</p>
|
|
<Badge
|
|
variant="secondary"
|
|
className="bg-indigo-100 text-indigo-500 font-satoshi tracking-wide"
|
|
>
|
|
{sheet?.modules_count} modules
|
|
</Badge>
|
|
</CardContent>
|
|
<CardContent>
|
|
<p className="font-satoshi text-gray-700">
|
|
{sheet?.time_limit} minutes
|
|
</p>
|
|
</CardContent>
|
|
<CardFooter>
|
|
<Button
|
|
variant="outline"
|
|
className="font-satoshi w-full text-lg py-6 bg-indigo-600 text-white"
|
|
>
|
|
Start
|
|
</Button>
|
|
</CardFooter>
|
|
</Card>
|
|
))
|
|
) : (
|
|
<div className="flex items-center justify-center py-4 rounded-full">
|
|
<h2 className="text-center font-satoshi text-lg text-gray-500">
|
|
No Practice Sheets available.
|
|
</h2>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</TabsContent>
|
|
<TabsContent value="NOT_STARTED">
|
|
<div className="space-y-6">
|
|
{notStartedSheets.map((sheet) => (
|
|
<Card key={sheet?.id}>
|
|
<CardHeader>
|
|
<CardTitle className="font-satoshi-medium text-xl">
|
|
{sheet?.title}
|
|
</CardTitle>
|
|
<CardDescription className="font-satoshi">
|
|
{sheet?.description}
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="flex justify-between">
|
|
<p className="font-satoshi text-gray-700">Not Started</p>
|
|
<Badge
|
|
variant="secondary"
|
|
className="bg-indigo-100 text-indigo-500 font-satoshi tracking-wide "
|
|
>
|
|
{sheet?.modules_count} modules
|
|
</Badge>
|
|
</CardContent>
|
|
<CardContent>
|
|
<p className="font-satoshi text-gray-700">
|
|
{sheet?.time_limit} minutes
|
|
</p>
|
|
</CardContent>
|
|
<CardFooter>
|
|
<Button
|
|
variant="outline"
|
|
className="font-satoshi w-full text-lg py-6 bg-indigo-600 text-white"
|
|
>
|
|
Start
|
|
</Button>
|
|
</CardFooter>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</TabsContent>
|
|
<TabsContent value="COMPLETED">
|
|
{completedSheets.length > 0 ? (
|
|
completedSheets.map((sheet) => (
|
|
<Card key={sheet?.id}>
|
|
<CardHeader>
|
|
<CardTitle className="font-satoshi-medium text-xl">
|
|
{sheet?.title}
|
|
</CardTitle>
|
|
<CardDescription className="font-satoshi">
|
|
{sheet?.description}
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="flex justify-between">
|
|
<p className="font-satoshi text-gray-500">
|
|
{formatStatus(sheet?.user_status)}
|
|
</p>
|
|
<Badge
|
|
variant="secondary"
|
|
className="bg-indigo-100 text-indigo-500 font-satoshi tracking-wide"
|
|
>
|
|
{sheet?.modules_count} modules
|
|
</Badge>
|
|
</CardContent>
|
|
<CardContent>
|
|
<p className="font-satoshi text-gray-700">
|
|
{sheet?.time_limit} minutes
|
|
</p>
|
|
</CardContent>
|
|
<CardFooter>
|
|
<Button
|
|
variant="outline"
|
|
className="font-satoshi w-full text-lg py-6 bg-indigo-600 text-white"
|
|
>
|
|
Start
|
|
</Button>
|
|
</CardFooter>
|
|
</Card>
|
|
))
|
|
) : (
|
|
<div className="flex items-center justify-center py-4 rounded-full">
|
|
<h2 className="text-center font-satoshi text-lg text-gray-500">
|
|
You have not completed any practice sheets.
|
|
</h2>
|
|
</div>
|
|
)}
|
|
</TabsContent>
|
|
</Tabs>
|
|
</section>
|
|
<section className="w-full space-y-4"></section>
|
|
<section className="space-y-4">
|
|
<h1 className="font-satoshi-bold text-2xl tracking-tight">
|
|
SAT Preparation Tips
|
|
</h1>
|
|
<section className="space-y-4">
|
|
<div className="flex items-center gap-2">
|
|
<CheckCircle size={24} color="#AD45FF" />
|
|
<p className="font-satoshi text-lg">
|
|
Practice regularly with official SAT materials
|
|
</p>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<CheckCircle size={24} color="#AD45FF" />
|
|
<p className="font-satoshi text-lg">
|
|
Review your mistakes and learn from them
|
|
</p>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<CheckCircle size={24} color="#AD45FF" />
|
|
<p className="font-satoshi text-lg">Focus on your weak areas</p>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<CheckCircle size={24} color="#AD45FF" />
|
|
<p className="font-satoshi text-lg">
|
|
Take full-length practice tests
|
|
</p>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<CheckCircle size={24} color="#AD45FF" />
|
|
<p className="font-satoshi text-lg">
|
|
Get plenty of rest before the test day
|
|
</p>
|
|
</div>
|
|
</section>
|
|
</section>
|
|
</main>
|
|
</div>
|
|
);
|
|
};
|