diff --git a/app/dashboard/layout.tsx b/app/dashboard/layout.tsx index 2581950..08f3b85 100644 --- a/app/dashboard/layout.tsx +++ b/app/dashboard/layout.tsx @@ -1,5 +1,5 @@ import { AppSidebar } from "@/components/dashboardComponents/AppSidebar"; -import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar"; +import MobileSidear from "@/components/dashboardComponents/MobileSidebar"; import type { Metadata } from "next"; export const metadata: Metadata = { @@ -12,10 +12,18 @@ export default function RootLayout({ }: { children: React.ReactNode; }) { + return ( - - -
{children}
- + +
+
+ +
+
+ +
+
{children}
+
+ ); } diff --git a/app/dashboard/page.tsx b/app/dashboard/page.tsx index f13370b..b8a8062 100644 --- a/app/dashboard/page.tsx +++ b/app/dashboard/page.tsx @@ -1,103 +1,9 @@ -"use client"; - -import { useEffect, useState } from "react"; -import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; -import { Skeleton } from "@/components/ui/skeleton"; -import { useAuthStore } from "@/store/AuthStore/useAuthStore"; -import DashboardNavbar from "@/components/dashboardComponents/DashboardNavbar"; -import { DashboardContentSkeleton } from "@/components/dashboardComponents/DashboardContentSkeleton"; -import { Bar } from "react-chartjs-2"; -import { Chart as ChartJS, CategoryScale, LinearScale, BarElement } from "chart.js"; - -ChartJS.register(CategoryScale, LinearScale, BarElement); - -function DashboardContent({ authUser }: any) { - return ( -
-

Welcome, {authUser?.fullName}

- - - Your Profile - - -

- LeetCode Username:{" "} - {authUser?.leetcodeUsername} -

-

- Gender: {authUser?.gender} -

- - -{/* - - - LeetCode Stats - - -

- LeetCode stats are coming soon! -

- - */} -
- ); -} +import React from "react"; export default function Dashboard() { - const { authUser, fetchAuthUser, authUserLoading } = useAuthStore(); - const [leetcodeStats, setLeetcodeStats] = useState(null); - - useEffect(() => { - fetchAuthUser(); - }, [fetchAuthUser]); - - // Fetch and store stats once we have the user - useEffect(() => { - if (authUser?.leetcodeUsername && authUser?.id) { - const fetchStats = async () => { - const res = await fetch( - `/api/leetcode?username=${authUser.leetcodeUsername}&id=${authUser.id}`, - { method: "POST" } - ); - if (res.ok) { - const data = await res.json(); - setLeetcodeStats(data.stats); - } - }; - fetchStats(); - } - }, [authUser]); - - // Simple bar chart config - const chartData = { - labels: ["Easy", "Medium", "Hard"], - datasets: [ - { - label: "Solved", - data: leetcodeStats?.submitStats.acSubmissionNum?.map((i: any) => i.count) || [0, 0, 0], - backgroundColor: ["#4ade80", "#fbbf24", "#ef4444"], - }, - ], - }; - return ( -
- {authUserLoading ? ( - - ) : ( - <> - - {leetcodeStats && ( -
-

Your LeetCode Progress

-
- -
-
- )} - - )} +
+

This is the dashboard

); } diff --git a/app/dashboard/profile/page.tsx b/app/dashboard/profile/page.tsx index f226982..01b7a64 100644 --- a/app/dashboard/profile/page.tsx +++ b/app/dashboard/profile/page.tsx @@ -1,12 +1,89 @@ -import React from 'react'; - -const ProfilePage: React.FC = () => { - return ( -
-

Profile Page

-

Welcome to your profile!

-
- ); -}; - -export default ProfilePage; \ No newline at end of file +"use client"; + +import { useEffect, useState } from "react"; +import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; +import { useAuthStore } from "@/store/AuthStore/useAuthStore"; +import { DashboardContentSkeleton } from "@/components/dashboardComponents/DashboardContentSkeleton"; +import { Bar } from "react-chartjs-2"; +import { Chart as ChartJS, CategoryScale, LinearScale, BarElement } from "chart.js"; + +ChartJS.register(CategoryScale, LinearScale, BarElement); + +function DashboardContent({ authUser }: any) { + return ( +
+

Welcome, {authUser?.fullName}

+ + + Your Profile + + +

+ LeetCode Username:{" "} + {authUser?.leetcodeUsername} +

+

+ Gender: {authUser?.gender} +

+ + +
+ ); +} + +export default function Dashboard() { + const { authUser, fetchAuthUser, authUserLoading } = useAuthStore(); + const [leetcodeStats, setLeetcodeStats] = useState(null); + + useEffect(() => { + fetchAuthUser(); + }, [fetchAuthUser]); + + useEffect(() => { + if (authUser?.leetcodeUsername && authUser?.id) { + const fetchStats = async () => { + const res = await fetch( + `/api/leetcode?username=${authUser.leetcodeUsername}&id=${authUser.id}`, + { method: "POST" } + ); + if (res.ok) { + const data = await res.json(); + setLeetcodeStats(data.stats); + } + }; + fetchStats(); + } + }, [authUser]); + + // Simple bar chart config + const chartData = { + labels: ["Easy", "Medium", "Hard"], + datasets: [ + { + label: "Solved", + data: leetcodeStats?.submitStats.acSubmissionNum?.map((i: any) => i.count) || [0, 0, 0], + backgroundColor: ["#4ade80", "#fbbf24", "#ef4444"], + }, + ], + }; + + return ( +
+ {authUserLoading ? ( + + ) : ( + <> + + {leetcodeStats && ( +
+

Your LeetCode Progress

+
+ +
+
+ )} + + )} +
+ ); +} diff --git a/components/dashboardComponents/AppSidebar.tsx b/components/dashboardComponents/AppSidebar.tsx index d780b7d..aab6434 100644 --- a/components/dashboardComponents/AppSidebar.tsx +++ b/components/dashboardComponents/AppSidebar.tsx @@ -1,150 +1,95 @@ "use client"; +import * as React from "react"; import { - Calendar, - LayoutDashboard, - ChevronUp, - Search, - Settings, - User, - User2, + Moon, + Sun, + LogOut, + ChevronRight, + ChevronLeft, } from "lucide-react"; -import { useState } from "react"; - -import { - Sidebar, - SidebarContent, - SidebarFooter, - SidebarGroup, - SidebarGroupContent, - SidebarGroupLabel, - SidebarMenu, - SidebarMenuButton, - SidebarMenuItem, - SidebarTrigger, -} from "@/components/ui/sidebar"; -import { - DropdownMenu, - DropdownMenuContent, - DropdownMenuItem, - DropdownMenuTrigger, -} from "@/components/ui/dropdown-menu"; +import { useTheme } from "next-themes"; +import { usePathname } from "next/navigation"; +import Link from "next/link"; +import { Button } from "@/components/ui/button"; import { cn } from "@/lib/utils"; -import { signout } from "@/app/actions/action"; - -// Menu items. -const items = [ - { - title: "profile", - url: "/dashboard/profile", - icon: User, - }, - { - title: "Problems", - url: "#", - icon: LayoutDashboard, - }, - { - title: "Calendar", - url: "#", - icon: Calendar, - }, - { - title: "Search", - url: "#", - icon: Search, - }, - { - title: "Settings", - url: "#", - icon: Settings, - }, -]; +import { SidebarData } from "@/data/SidebarData"; export function AppSidebar() { - const [isCollapsed, setIsCollapsed] = useState(false); + const { setTheme, theme } = useTheme(); + const pathname = usePathname(); + const [isCollapsed, setIsCollapsed] = React.useState(false); + return ( - - setIsCollapsed(!isCollapsed)} - className="absolute right-[-12px] top-4 z-20 flex h-6 w-6 items-center justify-center rounded-full border bg-background text-foreground shadow-sm" - > - {isCollapsed ? "→" : "←"} - - - - - Leetcode Journal - - - - {items.map((item) => ( - - - - - - {item.title} - - {isCollapsed && ( - - {item.title} - - )} - - - - ))} - - - - - - - - - - - - - Username - - +
+ {!isCollapsed &&

Dashboard

} + +
+ +
+
+ + +
+
+ ); } diff --git a/components/dashboardComponents/MobileSidebar.tsx b/components/dashboardComponents/MobileSidebar.tsx new file mode 100644 index 0000000..59f7c50 --- /dev/null +++ b/components/dashboardComponents/MobileSidebar.tsx @@ -0,0 +1,99 @@ +"use client"; + +import React from "react"; +import { + Sheet, + SheetContent, + SheetDescription, + SheetFooter, + SheetHeader, + SheetTitle, + SheetTrigger, +} from "../ui/sheet"; +import { Button } from "../ui/button"; +import { + BookA, + FileQuestion, + Github, + Menu, + Settings, + User, +} from "lucide-react"; +import { useTheme } from "next-themes"; +import { usePathname } from "next/navigation"; +import Link from "next/link"; +import { cn } from "@/lib/utils"; +import { SidebarData } from "@/data/SidebarData"; +import { signout } from "@/app/actions/action"; + +export default function MobileSidear() { + const { setTheme, theme } = useTheme(); + const pathname = usePathname(); + + const toggleTheme = () => { + setTheme(theme === "dark" ? "light" : "dark"); + }; + return ( + + + + + + + +

+ LeetCode Journal. +

+ + Your personal coding companion. + + + + + {/* */} + + + + + + + ); +} diff --git a/data/SidebarData.ts b/data/SidebarData.ts new file mode 100644 index 0000000..50d6c6a --- /dev/null +++ b/data/SidebarData.ts @@ -0,0 +1,24 @@ +import { BookA, FileQuestion, Settings, User } from "lucide-react"; + +export const SidebarData = [ + { + title: "Profile", + icon: User, + href: "/dashboard/profile", + }, + { + title: "Problems", + icon: FileQuestion, + href: "/dashboard/problems", + }, + { + title: "Journal", + icon: BookA, + href: "/dashboard/journal", + }, + { + title: "Settings", + icon: Settings, + href: "/dashboard/settings", + }, +]; diff --git a/store/AuthStore/useAuthStore.ts b/store/AuthStore/useAuthStore.ts index ff27af9..34cec17 100644 --- a/store/AuthStore/useAuthStore.ts +++ b/store/AuthStore/useAuthStore.ts @@ -44,7 +44,7 @@ export const useAuthStore = create((set) => ({ } if (data.session) { - router.push("/dashboard"); + router.push("/dashboard/profile"); } else { throw new Error("Unable to retrieve session after login."); }