From 8d80123ad3b0bb4ea681abacced0b19616b9710b Mon Sep 17 00:00:00 2001
From: Sakindu Ransindu <sakindu.ransindu@gmail.com>
Date: Sat, 16 Nov 2024 08:14:55 +0530
Subject: [PATCH] fix themes

---
 next.config.ts                           |  1 +
 src/app/admin/admin-dashboard-layout.tsx | 20 +++---
 src/app/layout.tsx                       | 84 ++++++++++++------------
 src/components/ui/floating-navbar.tsx    | 33 ++++++----
 src/interfaces/IThemeContext.ts          |  7 ++
 5 files changed, 83 insertions(+), 62 deletions(-)
 create mode 100644 src/interfaces/IThemeContext.ts

diff --git a/next.config.ts b/next.config.ts
index b4f1d0c..f8f0e1e 100644
--- a/next.config.ts
+++ b/next.config.ts
@@ -2,6 +2,7 @@ import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
   output: process.env.NODE_ENV === 'production' ? 'export' : undefined,
+  trailingSlash: true,
   images: {
     unoptimized: true,
     remotePatterns: [
diff --git a/src/app/admin/admin-dashboard-layout.tsx b/src/app/admin/admin-dashboard-layout.tsx
index d4aba40..796a9c6 100644
--- a/src/app/admin/admin-dashboard-layout.tsx
+++ b/src/app/admin/admin-dashboard-layout.tsx
@@ -10,6 +10,7 @@ import { MoonIcon, SunIcon } from "@heroicons/react/24/solid";
 import LOGO_SMALL from "../../../public/Images/logo/RUR20_small.png";
 import { useAuth } from "@/context/auth-provider";
 import { useRouter } from "next/navigation";
+import { IThemeContextType } from "@/interfaces/IThemeContext";
 
 interface AdminDashboardLayoutProps {
     children: ReactNode;
@@ -46,12 +47,13 @@ function Navbar({ className }: { className?: string }) {
     const router = useRouter();
     const [active, setActive] = useState<string | null>(null);
 
-    const [tougleTheme, currentTheme] = useContext<any>(ThemeContext);
-
-    const handleLogout = async () => {
-        await logOut();
-        router.push("/admin/");
+    const themeContext = useContext<IThemeContextType|null>(ThemeContext);
+    if (!themeContext) {
+        throw new Error("ThemeToggleButton must be used within a ThemeContext.Provider");
     }
+    const { toggleTheme, theme } = themeContext;
+
+
 
     return (
         <div className={cn("fixed top-10 inset-x-0 max-w-2xl mx-auto z-50", className)}>
@@ -64,14 +66,16 @@ function Navbar({ className }: { className?: string }) {
                     <MenuItem setActive={setActive} active={null} link="/admin/dashboard/timeline" item="Timeline" />
                     
                     <MenuItem setActive={setActive} active={null} link="/admin/dashboard/sponsors" item="Sponsors"/>
+
+                    <MenuItem setActive={setActive} active={null} link="/admin/dashboard" item="Dashboard"/>
     
-                    <MenuItem setActive={setActive} active={null} link="/admin/logout" item="Logout"/>
+                    {user && <MenuItem setActive={setActive} active={null} link="/admin/logout" item="Logout"/>}
 
                     <button
-                        onClick={()=>tougleTheme()}
+                        onClick={toggleTheme}
                         className="border text-sm font-medium relative border-neutral-200 dark:border-white/[0.2] text-black dark:text-white px-4 py-2 rounded-full"
                         >
-                        {currentTheme() === "dark" ? (
+                        {theme == "dark" ? (
                             <SunIcon className="h-5 w-5" />
                         ) : (
                             <MoonIcon className="h-5 w-5" />
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 03b8f5e..450fd7a 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,71 +1,71 @@
-'use client'
+'use client';
 
 import localFont from "next/font/local";
 import "./globals.css";
-import React, {  useCallback, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import { AuthProvider } from "@/context/auth-provider";
-
+import {ITheme, IThemeContextType} from "@/interfaces/IThemeContext";
 
 const geistSans = localFont({
   src: "./fonts/GeistVF.woff",
   variable: "--font-geist-sans",
   weight: "100 900",
 });
+
 const geistMono = localFont({
   src: "./fonts/GeistMonoVF.woff",
   variable: "--font-geist-mono",
   weight: "100 900",
 });
 
-export const ThemeContext = React.createContext<any>(null);
+export const ThemeContext = React.createContext<IThemeContextType|null>(null);
 
+export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
+  const DEFAULT_THEME = "dark";
+  const [theme, setThemeMode] = useState<ITheme>(DEFAULT_THEME);
 
-export default function RootLayout({children}: Readonly<{ children: React.ReactNode }>) {
+  useEffect(() => {
+    const storedTheme = localStorage.getItem('theme') as ITheme;
+    if (storedTheme) {
+      setThemeMode(storedTheme);
+    } else {
+      localStorage.setItem('theme', DEFAULT_THEME);
+      setThemeMode(DEFAULT_THEME);
+    }
+  }, []);
 
-  const DEFAULT_THEME:'dark'|'light' = 'dark';
-  const [theme,setThemeMode] = useState<'dark'|'light'>(DEFAULT_THEME);
-  
-      const currentTheme = ():'dark'|'light' => {
-        if (typeof window !== 'undefined') {
-          const t = localStorage.getItem('theme') as 'dark'|'light';
-          if(!t){
-            localStorage.setItem('theme',DEFAULT_THEME);
-            return DEFAULT_THEME;
-          } else {
-            return t;
-          }
-        }
-        return DEFAULT_THEME;
-      }
+  useEffect(() => {
+    document.documentElement.className = theme as ITheme;
+  }, [theme]);
 
-
-    const setTheme = useCallback((newTheme:'dark'|'light') => {
-        if(currentTheme()!==newTheme && currentTheme()!==null){
-        localStorage.setItem('theme',newTheme);
+  const setTheme = useCallback(
+    (newTheme: ITheme) => {
+      if (theme !== newTheme) {
+        localStorage.setItem('theme', newTheme);
         setThemeMode(newTheme);
-        console.log('theme set to',newTheme);
-      }  
-    },[]);
-
-    const tougleTheme = () => {
-        setThemeMode((prev) => prev === 'dark' ? 'light' : 'dark');
+        console.log('Theme set to', newTheme);
       }
+    },
+    [theme]
+  );
+
+  const toggleTheme = useCallback(() => {
+    const newTheme = theme === 'dark' ? 'light' : 'dark';
+    setTheme(newTheme);
+    console.log('Toggled theme to', newTheme);
+  }, [theme, setTheme]);
 
   return (
     <AuthProvider>
-
-    <ThemeContext.Provider value={[setTheme,tougleTheme,currentTheme]}>
-        <html className={theme} lang="en">
-          <body className={`${geistSans.variable} ${geistMono.variable} dark:bg-dark-gradient bg-light-gradient antialiased`} >
+      <ThemeContext.Provider value={{ setTheme, toggleTheme, theme }}>
+        <html lang="en">
+          <body
+            className={`${geistSans.variable} ${geistMono.variable} dark:bg-dark-gradient bg-light-gradient antialiased`}
+          >
             {children}
           </body>
-        </html>    
-    </ThemeContext.Provider>
-    
+        </html>
+      </ThemeContext.Provider>
     </AuthProvider>
   );
- 
-    
-};
-
-
+}
diff --git a/src/components/ui/floating-navbar.tsx b/src/components/ui/floating-navbar.tsx
index 781760d..13b5aeb 100644
--- a/src/components/ui/floating-navbar.tsx
+++ b/src/components/ui/floating-navbar.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import React, {  useContext, useState } from "react";
+import React, {  use, useContext, useEffect, useState } from "react";
 import {
   motion,
   AnimatePresence,
@@ -13,6 +13,7 @@ import { MoonIcon, SunIcon } from "@heroicons/react/24/solid";
 import { ThemeContext } from "@/app/layout";
 import LOGO_SMALL from "../../../public/Images/logo/RUR20_small.png";
 import Image from "next/image";
+import { IThemeContextType } from "@/interfaces/IThemeContext";
 
 
 export const FloatingNav = ({
@@ -47,7 +48,14 @@ export const FloatingNav = ({
     }
   });
 
-  const [tougleTheme,currentTheme] = useContext<any>(ThemeContext);
+  const themeContext = useContext<IThemeContextType|null>(ThemeContext);
+
+  if (!themeContext) {
+    throw new Error("ThemeToggleButton must be used within a ThemeContext.Provider");
+  }
+
+  const { toggleTheme, theme } = themeContext;
+
 
   return (
     <AnimatePresence mode="wait">
@@ -92,16 +100,17 @@ export const FloatingNav = ({
           </Link>
         ))}
 
-        <button
-          onClick={tougleTheme}
-          className="border text-sm font-medium relative border-neutral-200 dark:border-white/[0.2] text-black dark:text-white px-4 py-2 rounded-full"
-        >
-          {currentTheme === "dark" ? (
-            <SunIcon className="h-5 w-5" />
-          ) : (
-            <MoonIcon className="h-5 w-5" />
-          )}
-        </button>
+    <button
+      onClick={toggleTheme}
+      className="border text-sm font-medium relative border-neutral-200 dark:border-white/[0.2] text-black dark:text-white px-4 py-2 rounded-full"
+    >
+      {theme === "dark" ? (
+        <SunIcon className="h-5 w-5" />
+      ) : (
+        <MoonIcon className="h-5 w-5" />
+      )}
+    </button>
+
 
         {/* <button className="border text-sm font-medium relative border-neutral-200 dark:border-white/[0.2] text-black dark:text-white px-4 py-2 rounded-full">
           <span>Login</span>
diff --git a/src/interfaces/IThemeContext.ts b/src/interfaces/IThemeContext.ts
new file mode 100644
index 0000000..03ddad0
--- /dev/null
+++ b/src/interfaces/IThemeContext.ts
@@ -0,0 +1,7 @@
+export type ITheme = 'dark' | 'light';
+
+export  interface IThemeContextType {
+    theme: ITheme;
+    toggleTheme: () => void;
+    setTheme: (newTheme: 'dark' | 'light') => void;
+  }