Skip to content

Commit 2462b0c

Browse files
hanuchaudharyhanuchaudhary
authored
Feature/Sidebar (#90)
1 parent a0fba6e commit 2462b0c

File tree

5 files changed

+197
-238
lines changed

5 files changed

+197
-238
lines changed

Diff for: ‎app/dashboard/layout.tsx

+9-5
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { AppSidebar } from "@/components/dashboardComponents/AppSidebar";
2-
import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar";
32
import type { Metadata } from "next";
43

54
export const metadata: Metadata = {
@@ -12,10 +11,15 @@ export default function RootLayout({
1211
}: {
1312
children: React.ReactNode;
1413
}) {
14+
1515
return (
16-
<SidebarProvider>
17-
<AppSidebar />
18-
<main className="w-full">{children}</main>
19-
</SidebarProvider>
16+
<body>
17+
<main className="flex min-h-screen overflow-hidden md:gap-3 gap-1 md:p-3 p-1 h-full">
18+
<div>
19+
<AppSidebar />
20+
</div>
21+
<div className="w-full dark:bg-neutral-900 md:p-6 p-3 bg-neutral-200 md:rounded-xl rounded-sm">{children}</div>
22+
</main>
23+
</body>
2024
);
2125
}

Diff for: ‎app/dashboard/page.tsx

+3-97
Original file line numberDiff line numberDiff line change
@@ -1,103 +1,9 @@
1-
"use client";
2-
3-
import { useEffect, useState } from "react";
4-
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
5-
import { Skeleton } from "@/components/ui/skeleton";
6-
import { useAuthStore } from "@/store/AuthStore/useAuthStore";
7-
import DashboardNavbar from "@/components/dashboardComponents/DashboardNavbar";
8-
import { DashboardContentSkeleton } from "@/components/dashboardComponents/DashboardContentSkeleton";
9-
import { Bar } from "react-chartjs-2";
10-
import { Chart as ChartJS, CategoryScale, LinearScale, BarElement } from "chart.js";
11-
12-
ChartJS.register(CategoryScale, LinearScale, BarElement);
13-
14-
function DashboardContent({ authUser }: any) {
15-
return (
16-
<main className="container mx-auto p-4 space-y-6">
17-
<h1 className="text-3xl font-bold">Welcome, {authUser?.fullName}</h1>
18-
<Card>
19-
<CardHeader>
20-
<CardTitle>Your Profile</CardTitle>
21-
</CardHeader>
22-
<CardContent className="space-y-2">
23-
<p>
24-
<span className="font-medium">LeetCode Username:</span>{" "}
25-
{authUser?.leetcodeUsername}
26-
</p>
27-
<p>
28-
<span className="font-medium">Gender:</span> {authUser?.gender}
29-
</p>
30-
</CardContent>
31-
</Card>
32-
{/*
33-
<Card>
34-
<CardHeader>
35-
<CardTitle>LeetCode Stats</CardTitle>
36-
</CardHeader>
37-
<CardContent>
38-
<p className="text-muted-foreground">
39-
LeetCode stats are coming soon!
40-
</p>
41-
</CardContent>
42-
</Card> */}
43-
</main>
44-
);
45-
}
1+
import React from "react";
462

473
export default function Dashboard() {
48-
const { authUser, fetchAuthUser, authUserLoading } = useAuthStore();
49-
const [leetcodeStats, setLeetcodeStats] = useState<any>(null);
50-
51-
useEffect(() => {
52-
fetchAuthUser();
53-
}, [fetchAuthUser]);
54-
55-
// Fetch and store stats once we have the user
56-
useEffect(() => {
57-
if (authUser?.leetcodeUsername && authUser?.id) {
58-
const fetchStats = async () => {
59-
const res = await fetch(
60-
`/api/leetcode?username=${authUser.leetcodeUsername}&id=${authUser.id}`,
61-
{ method: "POST" }
62-
);
63-
if (res.ok) {
64-
const data = await res.json();
65-
setLeetcodeStats(data.stats);
66-
}
67-
};
68-
fetchStats();
69-
}
70-
}, [authUser]);
71-
72-
// Simple bar chart config
73-
const chartData = {
74-
labels: ["Easy", "Medium", "Hard"],
75-
datasets: [
76-
{
77-
label: "Solved",
78-
data: leetcodeStats?.submitStats.acSubmissionNum?.map((i: any) => i.count) || [0, 0, 0],
79-
backgroundColor: ["#4ade80", "#fbbf24", "#ef4444"],
80-
},
81-
],
82-
};
83-
844
return (
85-
<div className="min-h-screen w-full">
86-
{authUserLoading ? (
87-
<DashboardContentSkeleton />
88-
) : (
89-
<>
90-
<DashboardContent authUser={authUser} />
91-
{leetcodeStats && (
92-
<div className="container mx-auto mt-6">
93-
<h2 className="text-xl font-semibold mb-4">Your LeetCode Progress</h2>
94-
<div className="max-w-xl">
95-
<Bar data={chartData} />
96-
</div>
97-
</div>
98-
)}
99-
</>
100-
)}
5+
<div className="flex flex-col items-center justify-center h-full">
6+
<h1 className="text-6xl font-bold">This is the dashboard</h1>
1017
</div>
1028
);
1039
}

Diff for: ‎app/dashboard/profile/page.tsx

+89-12
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,89 @@
1-
import React from 'react';
2-
3-
const ProfilePage: React.FC = () => {
4-
return (
5-
<div>
6-
<h1>Profile Page</h1>
7-
<p>Welcome to your profile!</p>
8-
</div>
9-
);
10-
};
11-
12-
export default ProfilePage;
1+
"use client";
2+
3+
import { useEffect, useState } from "react";
4+
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
5+
import { useAuthStore } from "@/store/AuthStore/useAuthStore";
6+
import { DashboardContentSkeleton } from "@/components/dashboardComponents/DashboardContentSkeleton";
7+
import { Bar } from "react-chartjs-2";
8+
import { Chart as ChartJS, CategoryScale, LinearScale, BarElement } from "chart.js";
9+
10+
ChartJS.register(CategoryScale, LinearScale, BarElement);
11+
12+
function DashboardContent({ authUser }: any) {
13+
return (
14+
<main className="container mx-auto space-y-6">
15+
<h1 className="text-3xl font-bold">Welcome, {authUser?.fullName}</h1>
16+
<Card>
17+
<CardHeader>
18+
<CardTitle>Your Profile</CardTitle>
19+
</CardHeader>
20+
<CardContent className="space-y-2">
21+
<p>
22+
<span className="font-medium">LeetCode Username:</span>{" "}
23+
{authUser?.leetcodeUsername}
24+
</p>
25+
<p>
26+
<span className="font-medium">Gender:</span> {authUser?.gender}
27+
</p>
28+
</CardContent>
29+
</Card>
30+
</main>
31+
);
32+
}
33+
34+
export default function Dashboard() {
35+
const { authUser, fetchAuthUser, authUserLoading } = useAuthStore();
36+
const [leetcodeStats, setLeetcodeStats] = useState<any>(null);
37+
38+
useEffect(() => {
39+
fetchAuthUser();
40+
}, [fetchAuthUser]);
41+
42+
useEffect(() => {
43+
if (authUser?.leetcodeUsername && authUser?.id) {
44+
const fetchStats = async () => {
45+
const res = await fetch(
46+
`/api/leetcode?username=${authUser.leetcodeUsername}&id=${authUser.id}`,
47+
{ method: "POST" }
48+
);
49+
if (res.ok) {
50+
const data = await res.json();
51+
setLeetcodeStats(data.stats);
52+
}
53+
};
54+
fetchStats();
55+
}
56+
}, [authUser]);
57+
58+
// Simple bar chart config
59+
const chartData = {
60+
labels: ["Easy", "Medium", "Hard"],
61+
datasets: [
62+
{
63+
label: "Solved",
64+
data: leetcodeStats?.submitStats.acSubmissionNum?.map((i: any) => i.count) || [0, 0, 0],
65+
backgroundColor: ["#4ade80", "#fbbf24", "#ef4444"],
66+
},
67+
],
68+
};
69+
70+
return (
71+
<div className="w-full">
72+
{authUserLoading ? (
73+
<DashboardContentSkeleton />
74+
) : (
75+
<>
76+
<DashboardContent authUser={authUser} />
77+
{leetcodeStats && (
78+
<div className="container mx-auto bg-neutral-800 rounded-lg p-3 mt-6">
79+
<h2 className="text-xl font-semibold mb-4">Your LeetCode Progress</h2>
80+
<div className="max-w-xl">
81+
<Bar data={chartData} />
82+
</div>
83+
</div>
84+
)}
85+
</>
86+
)}
87+
</div>
88+
);
89+
}

0 commit comments

Comments
 (0)