shafin808s/edbridge-scholars
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(practice-sheets); fix practice sheets not showing up in all category

Browse Source
This commit is contained in:
shafin-r
2026-01-17 19:18:43 +06:00
parent 61061001f9
commit cdd15b1a89
2 changed files with 92 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/lib/utils.ts
View File

@ -1,6 +1,19 @@
import { clsx, type ClassValue } from "clsx" import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge" import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) { 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;
}
} }

191
src/pages/student/Home.tsx
View File

@ -19,6 +19,7 @@ import {
import { Badge } from "../../components/ui/badge"; import { Badge } from "../../components/ui/badge";
import { Button } from "../../components/ui/button"; import { Button } from "../../components/ui/button";
import type { PracticeSheet } from "../../types/sheet"; import type { PracticeSheet } from "../../types/sheet";
import { formatStatus } from "../../lib/utils";
export const Home = () => { export const Home = () => {
const user = useAuthStore((state) => state.user); const user = useAuthStore((state) => state.user);
@ -32,6 +33,22 @@ export const Home = () => {
const [completedSheets, setCompletedSheets] = useState<PracticeSheet[]>([]); const [completedSheets, setCompletedSheets] = useState<PracticeSheet[]>([]);
useEffect(() => { 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 () => { const fetchPracticeSheets = async () => {
if (!user) return; if (!user) return;
@ -50,35 +67,20 @@ export const Home = () => {
} }
const sheets = await api.getPracticeSheets(token, 1, 10); const sheets = await api.getPracticeSheets(token, 1, 10);
setPracticeSheets(sheets.data); setPracticeSheets(sheets.data);
console.log("All Practice Sheets: ", sheets.data);
sortPracticeSheets(sheets.data); sortPracticeSheets(sheets.data);
} catch (error) { } catch (error) {
console.error("Error fetching practice sheets:", 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(); fetchPracticeSheets();
}, [user]); }, [user]);
return ( return (
<div className="min-h-screen bg-gray-50"> <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"> <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"> <h1 className="text-4xl font-satoshi-bold tracking-tight text-gray-800 text-center">
Welcome, {user?.name || "Student"} Welcome, {user?.name || "Student"}
</h1> </h1>
<section className="relative w-full"> <section className="relative w-full">
@ -91,6 +93,11 @@ export const Home = () => {
<Search size={22} color="gray" /> <Search size={22} color="gray" />
</div> </div>
</section> </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"> <section className="w-full">
<Tabs defaultValue="all" className="w-full "> <Tabs defaultValue="all" className="w-full ">
<TabsList className="bg-transparent border-b rounded-none p-0 w-full"> <TabsList className="bg-transparent border-b rounded-none p-0 w-full">
@ -100,23 +107,14 @@ export const Home = () => {
> >
All All
</TabsTrigger> </TabsTrigger>
<TabsTrigger <TabsTrigger
value="NOT_STARTED" 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" 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 Not Started
</TabsTrigger> </TabsTrigger>
<TabsTrigger <TabsTrigger
value="in-progress" 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"
>
In Progress
</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" 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 Completed
@ -124,8 +122,8 @@ export const Home = () => {
</TabsList> </TabsList>
<TabsContent value="all"> <TabsContent value="all">
<div className="space-y-6"> <div className="space-y-6">
{practiceSheets.length < 0 ? ( {practiceSheets.length > 0 ? (
practiceSheets.slice(0, 4).map((sheet) => ( practiceSheets.map((sheet) => (
<Card key={sheet?.id}> <Card key={sheet?.id}>
<CardHeader> <CardHeader>
<CardTitle className="font-satoshi-medium text-xl"> <CardTitle className="font-satoshi-medium text-xl">
@ -136,8 +134,8 @@ export const Home = () => {
</CardDescription> </CardDescription>
</CardHeader> </CardHeader>
<CardContent className="flex justify-between"> <CardContent className="flex justify-between">
<p className="font-satoshi text-gray-700"> <p className="font-satoshi text-gray-500">
Not Started {formatStatus(sheet?.user_status)}
</p> </p>
<Badge <Badge
variant="secondary" variant="secondary"
@ -168,17 +166,6 @@ export const Home = () => {
</h2> </h2>
</div> </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> </div>
</TabsContent> </TabsContent>
<TabsContent value="NOT_STARTED"> <TabsContent value="NOT_STARTED">
@ -190,7 +177,7 @@ export const Home = () => {
{sheet?.title} {sheet?.title}
</CardTitle> </CardTitle>
<CardDescription className="font-satoshi"> <CardDescription className="font-satoshi">
{sheet?.subject} {sheet?.description}
</CardDescription> </CardDescription>
</CardHeader> </CardHeader>
<CardContent className="flex justify-between"> <CardContent className="flex justify-between">
@ -219,77 +206,51 @@ export const Home = () => {
))} ))}
</div> </div>
</TabsContent> </TabsContent>
<TabsContent value="in-progress"> <TabsContent value="COMPLETED">
{inProgressSheets.map((sheet) => ( {completedSheets.length > 0 ? (
<Card key={sheet?.id}> completedSheets.map((sheet) => (
<CardHeader> <Card key={sheet?.id}>
<CardTitle className="font-satoshi-medium text-xl"> <CardHeader>
{sheet?.title} <CardTitle className="font-satoshi-medium text-xl">
</CardTitle> {sheet?.title}
<CardDescription className="font-satoshi"> </CardTitle>
{sheet?.subject} <CardDescription className="font-satoshi">
</CardDescription> {sheet?.description}
</CardHeader> </CardDescription>
<CardContent className="flex justify-between"> </CardHeader>
<p className="font-satoshi text-gray-700">Not Started</p> <CardContent className="flex justify-between">
<Badge <p className="font-satoshi text-gray-500">
variant="secondary" {formatStatus(sheet?.user_status)}
className="bg-indigo-100 text-indigo-500 font-satoshi tracking-wide " </p>
> <Badge
{sheet?.modules_count} modules variant="secondary"
</Badge> className="bg-indigo-100 text-indigo-500 font-satoshi tracking-wide"
</CardContent> >
<CardContent> {sheet?.modules_count} modules
<p className="font-satoshi text-gray-700"> </Badge>
{sheet?.time_limit} minutes </CardContent>
</p> <CardContent>
</CardContent> <p className="font-satoshi text-gray-700">
<CardFooter> {sheet?.time_limit} minutes
<Button </p>
variant="outline" </CardContent>
className="font-satoshi w-full text-lg py-6 bg-indigo-600 text-white" <CardFooter>
> <Button
Start variant="outline"
</Button> className="font-satoshi w-full text-lg py-6 bg-indigo-600 text-white"
</CardFooter> >
</Card> Start
))} </Button>
</TabsContent> </CardFooter>
<TabsContent value="completed"> </Card>
{completedSheets.map((sheet) => ( ))
<Card key={sheet?.id}> ) : (
<CardHeader> <div className="flex items-center justify-center py-4 rounded-full">
<CardTitle className="font-satoshi-medium text-xl"> <h2 className="text-center font-satoshi text-lg text-gray-500">
{sheet?.title} You have not completed any practice sheets.
</CardTitle> </h2>
<CardDescription className="font-satoshi"> </div>
{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>
))}
</TabsContent> </TabsContent>
</Tabs> </Tabs>
</section> </section>