fix(practice-sheets); fix practice sheets not showing up in all category
This commit is contained in:
shafin-r
@ -1,6 +1,19 @@
|
||||
import { clsx, type ClassValue } from "clsx"
|
||||
import { twMerge } from "tailwind-merge"
|
||||
import { clsx, type ClassValue } from "clsx";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
|
||||
export function cn(...inputs: ClassValue[]) {
|
||||
return twMerge(clsx(inputs))
|
||||
return twMerge(clsx(inputs));
|
||||
}
|
||||
|
||||
export function formatStatus(status: string) {
|
||||
switch (status) {
|
||||
case "NOT_STARTED":
|
||||
return "Not Started";
|
||||
case "IN_PROGRESS":
|
||||
return "In Progress";
|
||||
case "COMPLETED":
|
||||
return "Completed";
|
||||
default:
|
||||
return status;
|
||||
}
|
||||
}
|
||||
|
||||
@ -19,6 +19,7 @@ import {
|
||||
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);
|
||||
@ -32,6 +33,22 @@ export const Home = () => {
|
||||
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;
|
||||
|
||||
@ -50,35 +67,20 @@ export const Home = () => {
|
||||
}
|
||||
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);
|
||||
}
|
||||
};
|
||||
|
||||
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);
|
||||
};
|
||||
|
||||
fetchPracticeSheets();
|
||||
}, [user]);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
<main className="flex flex-col items-center justify-center 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">
|
||||
<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">
|
||||
@ -91,6 +93,11 @@ export const Home = () => {
|
||||
<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 border-b rounded-none p-0 w-full">
|
||||
@ -100,23 +107,14 @@ export const Home = () => {
|
||||
>
|
||||
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="in-progress"
|
||||
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"
|
||||
>
|
||||
In Progress
|
||||
</TabsTrigger>
|
||||
|
||||
<TabsTrigger
|
||||
value="completed"
|
||||
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
|
||||
@ -124,8 +122,8 @@ export const Home = () => {
|
||||
</TabsList>
|
||||
<TabsContent value="all">
|
||||
<div className="space-y-6">
|
||||
{practiceSheets.length < 0 ? (
|
||||
practiceSheets.slice(0, 4).map((sheet) => (
|
||||
{practiceSheets.length > 0 ? (
|
||||
practiceSheets.map((sheet) => (
|
||||
<Card key={sheet?.id}>
|
||||
<CardHeader>
|
||||
<CardTitle className="font-satoshi-medium text-xl">
|
||||
@ -136,8 +134,8 @@ export const Home = () => {
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="flex justify-between">
|
||||
<p className="font-satoshi text-gray-700">
|
||||
Not Started
|
||||
<p className="font-satoshi text-gray-500">
|
||||
{formatStatus(sheet?.user_status)}
|
||||
</p>
|
||||
<Badge
|
||||
variant="secondary"
|
||||
@ -168,17 +166,6 @@ export const Home = () => {
|
||||
</h2>
|
||||
</div>
|
||||
)}
|
||||
{practiceSheets.length > 4 && (
|
||||
<div className="text-center">
|
||||
<Button
|
||||
variant="outline"
|
||||
className="font-satoshi text-lg py-3 px-6 mt-4 cursor-pointer"
|
||||
onClick={() => setPracticeSheets(practiceSheets)}
|
||||
>
|
||||
Load more
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</TabsContent>
|
||||
<TabsContent value="NOT_STARTED">
|
||||
@ -190,7 +177,7 @@ export const Home = () => {
|
||||
{sheet?.title}
|
||||
</CardTitle>
|
||||
<CardDescription className="font-satoshi">
|
||||
{sheet?.subject}
|
||||
{sheet?.description}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="flex justify-between">
|
||||
@ -219,22 +206,25 @@ export const Home = () => {
|
||||
))}
|
||||
</div>
|
||||
</TabsContent>
|
||||
<TabsContent value="in-progress">
|
||||
{inProgressSheets.map((sheet) => (
|
||||
<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?.subject}
|
||||
{sheet?.description}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="flex justify-between">
|
||||
<p className="font-satoshi text-gray-700">Not Started</p>
|
||||
<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 "
|
||||
className="bg-indigo-100 text-indigo-500 font-satoshi tracking-wide"
|
||||
>
|
||||
{sheet?.modules_count} modules
|
||||
</Badge>
|
||||
@ -253,43 +243,14 @@ export const Home = () => {
|
||||
</Button>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
))}
|
||||
</TabsContent>
|
||||
<TabsContent value="completed">
|
||||
{completedSheets.map((sheet) => (
|
||||
<Card key={sheet?.id}>
|
||||
<CardHeader>
|
||||
<CardTitle className="font-satoshi-medium text-xl">
|
||||
{sheet?.title}
|
||||
</CardTitle>
|
||||
<CardDescription className="font-satoshi">
|
||||
{sheet?.subject}
|
||||
</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 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>
|
||||
|
||||
Reference in New Issue
Block a user