fix(ui): change tab names
fix(api): change api url
This commit is contained in:
shafin-r
@ -6,11 +6,10 @@ import {
|
||||
TabsContent,
|
||||
} from "../../components/ui/tabs";
|
||||
import { useAuthStore } from "../../stores/authStore";
|
||||
import { Search } from "lucide-react";
|
||||
import { CheckCircle, Search } from "lucide-react";
|
||||
import { api } from "../../utils/api";
|
||||
import {
|
||||
Card,
|
||||
CardAction,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardFooter,
|
||||
@ -19,13 +18,19 @@ import {
|
||||
} from "../../components/ui/card";
|
||||
import { Badge } from "../../components/ui/badge";
|
||||
import { Button } from "../../components/ui/button";
|
||||
import type { PracticeSheet } from "../../types/sheet";
|
||||
|
||||
export const Home = () => {
|
||||
const user = useAuthStore((state) => state.user);
|
||||
const [practiceSheets, setPracticeSheets] = useState([]);
|
||||
|
||||
// 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 fetchPracticeSheets = async () => {
|
||||
if (!user) return;
|
||||
@ -45,11 +50,28 @@ export const Home = () => {
|
||||
}
|
||||
const sheets = await api.getPracticeSheets(token, 1, 10);
|
||||
setPracticeSheets(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]);
|
||||
|
||||
@ -59,7 +81,7 @@ export const Home = () => {
|
||||
<h1 className="text-4xl font-satoshi-bold tracking-tight text-gray-800">
|
||||
Welcome, {user?.name || "Student"}
|
||||
</h1>
|
||||
<div className="relative w-full">
|
||||
<section className="relative w-full">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search..."
|
||||
@ -68,19 +90,19 @@ export const Home = () => {
|
||||
<div className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
|
||||
<Search size={22} color="gray" />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<Tabs defaultValue="all" className="w-full space-y-4">
|
||||
<TabsList className="bg-transparent border-b rounded-none p-0">
|
||||
</section>
|
||||
<section className="w-full">
|
||||
<Tabs defaultValue="all" className="w-full ">
|
||||
<TabsList className="bg-transparent border-b rounded-none 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 status
|
||||
All
|
||||
</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"
|
||||
>
|
||||
Not Started
|
||||
@ -102,7 +124,66 @@ export const Home = () => {
|
||||
</TabsList>
|
||||
<TabsContent value="all">
|
||||
<div className="space-y-6">
|
||||
{practiceSheets.map((sheet) => (
|
||||
{practiceSheets.length < 0 ? (
|
||||
practiceSheets.slice(0, 4).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 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>
|
||||
)}
|
||||
{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">
|
||||
<div className="space-y-6">
|
||||
{notStartedSheets.map((sheet) => (
|
||||
<Card key={sheet?.id}>
|
||||
<CardHeader>
|
||||
<CardTitle className="font-satoshi-medium text-xl">
|
||||
@ -138,17 +219,116 @@ export const Home = () => {
|
||||
))}
|
||||
</div>
|
||||
</TabsContent>
|
||||
<TabsContent value="not-started">
|
||||
<h1>Not Started</h1>
|
||||
</TabsContent>
|
||||
<TabsContent value="in-progress">
|
||||
<h1>In Progress</h1>
|
||||
{inProgressSheets.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>
|
||||
))}
|
||||
</TabsContent>
|
||||
<TabsContent value="completed">
|
||||
<h1>Completed</h1>
|
||||
{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>
|
||||
))}
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
</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>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user