Skip to content

Commit 2a894e0

Browse files
ayusharma-ctrlayusharma-ctrl
committed
feature to toggle theme as per users saved preference and minor uni changes
1 parent 0b90a5c commit 2a894e0

File tree

9 files changed

+34
-29
lines changed

9 files changed

+34
-29
lines changed

‎src/app/dashboard/layout.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ export default async function DashboardLayout({ children }: { children: React.Re
2323
return (
2424
<div className="flex min-h-screen flex-col">
2525
<header className="sticky top-0 z-40 border-b bg-background px-6 lg:px-12">
26-
<div className="container flex h-16 items-center justify-between py-4">
26+
<div className="flex h-16 items-center justify-between py-4">
2727
<div className="flex items-center gap-2 md:hidden">
2828
<MobileNav />
2929
</div>
@@ -36,7 +36,7 @@ export default async function DashboardLayout({ children }: { children: React.Re
3636
</div>
3737
</header>
3838
<div className="flex-1 items-start md:grid md:grid-cols-[220px_1fr] md:gap-6 lg:grid-cols-[240px_1fr]">
39-
<aside className="fixed top-14 z-30 -ml-2 hidden h-[calc(100vh-3.5rem)] w-full shrink-0 overflow-y-auto border-r md:sticky md:block">
39+
<aside className="fixed top-14 z-30 -ml-2 hidden h-full w-full shrink-0 overflow-y-auto border-r md:sticky md:block">
4040
<DashboardNav />
4141
</aside>
4242
<main className="flex w-full flex-col overflow-hidden px-4 md:pr-8 md:py-8">{children}</main>

‎src/app/dashboard/settings/page.tsx‎

Lines changed: 6 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import { zodResolver } from "@hookform/resolvers/zod";
55
import { useForm } from "react-hook-form";
66
import * as z from "zod";
77
import { api } from "@/trpc/react";
8-
import { useSession } from "next-auth/react";
98
import { DashboardShell } from "@/components/dashboard/DashboardShell";
109
import { DashboardHeader } from "@/components/dashboard/DashboardHeader";
1110
import { Button } from "@/components/ui/button";
@@ -21,9 +20,8 @@ const settingsFormSchema = z.object({
2120
type SettingsFormValues = z.infer<typeof settingsFormSchema>
2221

2322
export default function SettingsPage() {
24-
const { theme, setTheme } = useTheme();
23+
const { setTheme } = useTheme();
2524
const [isLoading, setIsLoading] = useState(false);
26-
const { data: session } = useSession();
2725

2826
// Get user preferences from server action
2927
const { data: userPreferences } = api.user.getPreferences.useQuery();
@@ -42,29 +40,25 @@ export default function SettingsPage() {
4240
});
4341
setIsLoading(false);
4442
},
45-
})
46-
47-
// Get user preferences from session
48-
// const userPreferences = (preferences as { darkMode?: boolean }) || {}
49-
43+
});
5044

5145
// form state
5246
const form = useForm<SettingsFormValues>({
5347
resolver: zodResolver(settingsFormSchema),
5448
defaultValues: {
55-
darkMode: userPreferences?.darkMode ?? theme === "dark",
49+
darkMode: false,
5650
},
5751
});
5852

5953

6054
// Update form when session/theme changes
6155
useEffect(() => {
62-
if (session?.user) {
56+
if (userPreferences?.darkMode !== undefined) {
6357
form.reset({
64-
darkMode: userPreferences?.darkMode ?? theme === "dark",
58+
darkMode: userPreferences.darkMode, // either true or false
6559
});
6660
}
67-
}, [session, theme, form, userPreferences?.darkMode]);
61+
}, [form, userPreferences?.darkMode]);
6862

6963

7064
// handle form submit to update prefereneces

‎src/app/layout.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { type Metadata } from "next";
66
import { TRPCReactProvider } from "@/trpc/react";
77
import { AuthProvider } from "@/components/AuthProvider";
88
import { Toaster } from "@/components/ui/sonner";
9+
import { ThemeProvider } from "@/components/ThemeProvider";
910

1011
export const metadata: Metadata = {
1112
title: "WorkNest",
@@ -21,6 +22,7 @@ export default function RootLayout({
2122
<body>
2223
<AuthProvider>
2324
<TRPCReactProvider>
25+
<ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
2426
{children}
2527
<Toaster
2628
toastOptions={{
@@ -29,6 +31,7 @@ export default function RootLayout({
2931
},
3032
}}
3133
/>
34+
</ThemeProvider>
3235
</TRPCReactProvider>
3336
</AuthProvider>
3437
</body>

‎src/components/ThemeProvider.tsx‎

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,23 @@ import { api } from "@/trpc/react";
66

77

88
export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
9-
// Get user preferences from server action
10-
const userPreferences = api.user.getPreferences.useQuery() as { darkMode?: boolean } || {}
9+
// check for user session
10+
const { data: session } = api.user.getSession.useQuery(undefined, {
11+
retry: 0,
12+
refetchOnWindowFocus: false
13+
});
1114

12-
// Set initial theme based on user preferences
15+
// method to get userpreferences only when session exists
16+
const { data: userPreferences } = api.user.getPreferences.useQuery(undefined, {
17+
enabled: !!session,
18+
});
19+
20+
// update the theme after successful sign in as per the saved preference
1321
useEffect(() => {
14-
if (userPreferences.darkMode !== undefined) {
15-
document.documentElement.classList.toggle("dark", userPreferences.darkMode)
22+
if (session && userPreferences?.darkMode !== undefined) {
23+
document.documentElement.classList.toggle("dark", userPreferences.darkMode);
1624
}
17-
}, [userPreferences.darkMode]);
25+
}, [session, userPreferences]);
1826

1927
return <NextThemesProvider {...props}>{children}</NextThemesProvider>
2028
}

‎src/components/dashboard/Nav.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ export function DashboardNav() {
1919
<Button
2020
key={index}
2121
variant="ghost"
22-
className={cn("justify-start", pathname === item.href && "bg-slate-200 font-medium")}
22+
className={cn("justify-start", (pathname === item.href || (item.href === "/dashboard/projects" && pathname.startsWith("/dashboard/projects"))) && "bg-slate-200 dark:bg-gray-500 font-medium")}
2323
asChild
2424
>
2525
<Link href={item.href}>

‎src/components/landing/Header.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -34,17 +34,17 @@ export const Header = () => {
3434

3535
return (
3636
<header className="sticky top-0 z-40 w-full px-6 lg:px-12 lg:py-2 border-b bg-transparent backdrop-blur-md">
37-
<div className="container flex h-16 items-center justify-between py-4">
37+
<div className="flex h-16 items-center justify-between py-4">
3838
<div className="flex items-center gap-2">
3939
<Link href="/" className="flex items-center space-x-2">
4040
<span className="text-xl font-bold">WorkNest</span>
4141
</Link>
4242
</div>
4343
<nav className="flex items-center gap-4">
44-
<Link href="#features" className="text-sm font-medium hover:underline">
44+
<Link href="#features" className="text-sm font-medium hover:underline hidden md:block">
4545
Features
4646
</Link>
47-
<Link href="#feedbacks" className="text-sm font-medium hover:underline">
47+
<Link href="#feedbacks" className="text-sm font-medium hover:underline hidden md:block">
4848
Feedbacks
4949
</Link>
5050
{/* <Link href="/pricing" className="text-sm font-medium hover:underline">

‎src/components/ui/switch.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ const Switch = React.forwardRef<
1111
>(({ className, ...props }, ref) => (
1212
<SwitchPrimitives.Root
1313
className={cn(
14-
"peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
14+
"peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-green-400 data-[state=unchecked]:bg-primary",
1515
className
1616
)}
1717
{...props}

‎src/middleware.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ export async function middleware(req: NextRequest) {
55
const token = await getToken({
66
req,
77
secret: process.env.AUTH_SECRET!,
8-
cookieName: "__Secure-authjs.session-token",
8+
cookieName: "__Secure-authjs.session-token", // "__Secure-authjs.session-token" - prod, "next-authjs.session-token" - local
99
});
1010

1111
const isAuthenticated = !!token;

‎src/server/auth/config.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -60,13 +60,13 @@ export const authConfig = {
6060
},
6161
cookies: {
6262
sessionToken: {
63-
name: "__Secure-authjs.session-token",
63+
name: "__Secure-authjs.session-token", // "__Secure-authjs.session-token" - prod, "next-authjs.session-token" - local
6464
options: {
6565
httpOnly: true,
6666
sameSite: "lax",
6767
path: "/",
68-
secure: true,
69-
domain: "d1y7b99mgepb4k.cloudfront.net",
68+
secure: true, // true - prod, false - local
69+
domain: "d1y7b99mgepb4k.cloudfront.net", // "d1y7b99mgepb4k.cloudfront.net" - prod, undefined - local
7070
}
7171
}
7272
},

0 commit comments

Comments
 (0)