From 6b678dc45174a041ce83be8c76c387ac073a5874 Mon Sep 17 00:00:00 2001 From: "HanuCh@udhary" <137854084+hanuchaudhary@users.noreply.github.com> Date: Wed, 15 Jan 2025 14:56:27 +0530 Subject: [PATCH 1/4] sidebar revamp --- app/dashboard/layout.tsx | 13 +- app/dashboard/page.tsx | 100 +------- app/dashboard/profile/page.tsx | 101 ++++++++- components/dashboardComponents/AppSidebar.tsx | 213 +++++++----------- store/AuthStore/useAuthStore.ts | 2 +- 5 files changed, 186 insertions(+), 243 deletions(-) diff --git a/app/dashboard/layout.tsx b/app/dashboard/layout.tsx index 2581950..9a3f551 100644 --- a/app/dashboard/layout.tsx +++ b/app/dashboard/layout.tsx @@ -1,5 +1,4 @@ import { AppSidebar } from "@/components/dashboardComponents/AppSidebar"; -import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar"; import type { Metadata } from "next"; export const metadata: Metadata = { @@ -13,9 +12,13 @@ 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..6a396db 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..8cee62b 100644 --- a/components/dashboardComponents/AppSidebar.tsx +++ b/components/dashboardComponents/AppSidebar.tsx @@ -1,150 +1,107 @@ "use client"; -import { - Calendar, - LayoutDashboard, - ChevronUp, - Search, - Settings, - User, - User2, -} from "lucide-react"; -import { useState } from "react"; +import * as React from "react"; +import { Moon, Sun, LogOut, User, Settings, BookA, FileQuestion, ChevronRight, ChevronLeft } from 'lucide-react'; +import { useTheme } from "next-themes"; +import { usePathname } from "next/navigation"; +import Link from "next/link"; -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 { Button } from "@/components/ui/button"; import { cn } from "@/lib/utils"; -import { signout } from "@/app/actions/action"; -// Menu items. -const items = [ +const SidebarData = [ { - title: "profile", - url: "/dashboard/profile", + title: "Profile", icon: User, + href: "/dashboard/profile", }, { title: "Problems", - url: "#", - icon: LayoutDashboard, + icon: FileQuestion, + href: "/dashboard/problems", }, { - title: "Calendar", - url: "#", - icon: Calendar, - }, - { - title: "Search", - url: "#", - icon: Search, + title: "Journal", + icon: BookA, + href: "/dashboard/journal", }, { title: "Settings", - url: "#", icon: Settings, + href: "/dashboard/settings", }, ]; 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 - - - - - - - Account - - - Billing - - - Sign out - - - - - - - + ); -} +} \ No newline at end of file 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."); } From 08cf416ee5261ee0f8245c1ff899ea9682f8438f Mon Sep 17 00:00:00 2001 From: "HanuCh@udhary" <137854084+hanuchaudhary@users.noreply.github.com> Date: Wed, 15 Jan 2025 15:08:21 +0530 Subject: [PATCH 2/4] changes --- app/dashboard/layout.tsx | 1 + app/dashboard/profile/page.tsx | 2 +- components/dashboardComponents/AppSidebar.tsx | 31 ++++++++++++++----- 3 files changed, 25 insertions(+), 9 deletions(-) diff --git a/app/dashboard/layout.tsx b/app/dashboard/layout.tsx index 9a3f551..a11f45c 100644 --- a/app/dashboard/layout.tsx +++ b/app/dashboard/layout.tsx @@ -11,6 +11,7 @@ export default function RootLayout({ }: { children: React.ReactNode; }) { + return (
diff --git a/app/dashboard/profile/page.tsx b/app/dashboard/profile/page.tsx index 6a396db..01b7a64 100644 --- a/app/dashboard/profile/page.tsx +++ b/app/dashboard/profile/page.tsx @@ -75,7 +75,7 @@ export default function Dashboard() { <> {leetcodeStats && ( -
+

Your LeetCode Progress

diff --git a/components/dashboardComponents/AppSidebar.tsx b/components/dashboardComponents/AppSidebar.tsx index 8cee62b..32c5b8d 100644 --- a/components/dashboardComponents/AppSidebar.tsx +++ b/components/dashboardComponents/AppSidebar.tsx @@ -1,7 +1,17 @@ "use client"; import * as React from "react"; -import { Moon, Sun, LogOut, User, Settings, BookA, FileQuestion, ChevronRight, ChevronLeft } from 'lucide-react'; +import { + Moon, + Sun, + LogOut, + User, + Settings, + BookA, + FileQuestion, + ChevronRight, + ChevronLeft, +} from "lucide-react"; import { useTheme } from "next-themes"; import { usePathname } from "next/navigation"; import Link from "next/link"; @@ -45,9 +55,7 @@ export function AppSidebar() { )} >
- {!isCollapsed && ( -

Leetcode Journal

- )} + {!isCollapsed &&

Dashboard

}
); -} \ No newline at end of file +} From 6b8a5b6cecd37b214f57e2c109469938a0331764 Mon Sep 17 00:00:00 2001 From: "HanuCh@udhary" <137854084+hanuchaudhary@users.noreply.github.com> Date: Wed, 15 Jan 2025 19:20:55 +0530 Subject: [PATCH 3/4] added-resposive-sidebar --- app/dashboard/layout.tsx | 8 +- components/dashboardComponents/AppSidebar.tsx | 29 +----- .../dashboardComponents/MobileSidebar.tsx | 99 +++++++++++++++++++ data/SidebarData.ts | 24 +++++ 4 files changed, 130 insertions(+), 30 deletions(-) create mode 100644 components/dashboardComponents/MobileSidebar.tsx create mode 100644 data/SidebarData.ts diff --git a/app/dashboard/layout.tsx b/app/dashboard/layout.tsx index a11f45c..08f3b85 100644 --- a/app/dashboard/layout.tsx +++ b/app/dashboard/layout.tsx @@ -1,4 +1,5 @@ import { AppSidebar } from "@/components/dashboardComponents/AppSidebar"; +import MobileSidear from "@/components/dashboardComponents/MobileSidebar"; import type { Metadata } from "next"; export const metadata: Metadata = { @@ -14,10 +15,13 @@ export default function RootLayout({ return ( -
-
+
+
+
+ +
{children}
diff --git a/components/dashboardComponents/AppSidebar.tsx b/components/dashboardComponents/AppSidebar.tsx index 32c5b8d..aab6434 100644 --- a/components/dashboardComponents/AppSidebar.tsx +++ b/components/dashboardComponents/AppSidebar.tsx @@ -5,42 +5,15 @@ import { Moon, Sun, LogOut, - User, - Settings, - BookA, - FileQuestion, ChevronRight, ChevronLeft, } from "lucide-react"; 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"; - -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", - }, -]; +import { SidebarData } from "@/data/SidebarData"; export function AppSidebar() { const { setTheme, theme } = useTheme(); diff --git a/components/dashboardComponents/MobileSidebar.tsx b/components/dashboardComponents/MobileSidebar.tsx new file mode 100644 index 0000000..d057b4c --- /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", + }, +]; From 0e55d748a441e2dbbd6f9ff2254be92a284512d8 Mon Sep 17 00:00:00 2001 From: "HanuCh@udhary" <137854084+hanuchaudhary@users.noreply.github.com> Date: Wed, 15 Jan 2025 19:25:47 +0530 Subject: [PATCH 4/4] changes --- components/dashboardComponents/MobileSidebar.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/dashboardComponents/MobileSidebar.tsx b/components/dashboardComponents/MobileSidebar.tsx index d057b4c..59f7c50 100644 --- a/components/dashboardComponents/MobileSidebar.tsx +++ b/components/dashboardComponents/MobileSidebar.tsx @@ -36,9 +36,9 @@ export default function MobileSidear() { return ( - +