Add files via upload

src/hooks/useTheme.ts

@@ -0,0 +1,224 @@
+import { useState, useEffect, useCallback } from 'react'
+import { EnabledThemes, DEFAULT_ENABLED_THEMES } from '../types/theme'
+import { themeColorsApi } from '../api/themeColors'
+
+type Theme = 'dark' | 'light'
+
+const THEME_KEY = 'cabinet-theme'
+const ENABLED_THEMES_KEY = 'cabinet-enabled-themes'
+
+// Fetch enabled themes from API
+async function fetchEnabledThemes(): Promise<EnabledThemes> {
+  try {
+    const data = await themeColorsApi.getEnabledThemes()
+    // Cache in localStorage for faster subsequent loads
+    localStorage.setItem(ENABLED_THEMES_KEY, JSON.stringify(data))
+    return data
+  } catch {
+    // Ignore errors, use cached or default
+  }
+  // Try to get from cache
+  const cached = localStorage.getItem(ENABLED_THEMES_KEY)
+  if (cached) {
+    try {
+      return JSON.parse(cached)
+    } catch {
+      // Ignore parse errors
+    }
+  }
+  return DEFAULT_ENABLED_THEMES
+}
+
+// Get cached enabled themes synchronously
+function getCachedEnabledThemes(): EnabledThemes {
+  const cached = localStorage.getItem(ENABLED_THEMES_KEY)
+  if (cached) {
+    try {
+      return JSON.parse(cached)
+    } catch {
+      // Ignore parse errors
+    }
+  }
+  return DEFAULT_ENABLED_THEMES
+}
+
+// Custom event for same-tab updates
+const ENABLED_THEMES_CHANGED_EVENT = 'enabledThemesChanged'
+
+// Update cache (called from admin settings)
+export function updateEnabledThemesCache(themes: EnabledThemes) {
+  localStorage.setItem(ENABLED_THEMES_KEY, JSON.stringify(themes))
+  // Dispatch custom event for same-tab updates
+  window.dispatchEvent(new CustomEvent(ENABLED_THEMES_CHANGED_EVENT, { detail: themes }))
+}
+
+export function useTheme() {
+  const [enabledThemes, setEnabledThemes] = useState<EnabledThemes>(getCachedEnabledThemes)
+  const [isLoading, setIsLoading] = useState(true)
+
+  const [theme, setThemeState] = useState<Theme>(() => {
+    const enabled = getCachedEnabledThemes()
+
+    // Check localStorage first
+    if (typeof window !== 'undefined') {
+      const stored = localStorage.getItem(THEME_KEY) as Theme | null
+      if (stored === 'light' && enabled.light) {
+        return 'light'
+      }
+      if (stored === 'dark' && enabled.dark) {
+        return 'dark'
+      }
+      // If stored theme is disabled, use the enabled one
+      if (stored && !enabled[stored]) {
+        return enabled.dark ? 'dark' : 'light'
+      }
+      // Check system preference
+      if (window.matchMedia('(prefers-color-scheme: light)').matches && enabled.light) {
+        return 'light'
+      }
+    }
+    // Default to dark if enabled, otherwise light
+    return enabled.dark ? 'dark' : 'light'
+  })
+
+  // Fetch enabled themes on mount
+  useEffect(() => {
+    fetchEnabledThemes().then((data) => {
+      setEnabledThemes(data)
+      setIsLoading(false)
+      // If current theme is disabled, switch to enabled one
+      if (!data[theme]) {
+        const newTheme = data.dark ? 'dark' : 'light'
+        setThemeState(newTheme)
+      }
+    })
+  }, []) // eslint-disable-line react-hooks/exhaustive-deps
+
+  // Listen for localStorage changes (when admin updates enabled themes from other tabs)
+  useEffect(() => {
+    const handleStorageChange = (e: StorageEvent) => {
+      if (e.key === ENABLED_THEMES_KEY && e.newValue) {
+        try {
+          const data = JSON.parse(e.newValue) as EnabledThemes
+          setEnabledThemes(data)
+          // If current theme is now disabled, switch to enabled one
+          if (!data[theme]) {
+            const newTheme = data.dark ? 'dark' : 'light'
+            setThemeState(newTheme)
+          }
+        } catch {
+          // Ignore parse errors
+        }
+      }
+    }
+
+    window.addEventListener('storage', handleStorageChange)
+    return () => window.removeEventListener('storage', handleStorageChange)
+  }, [theme])
+
+  // Listen for same-tab enabled themes changes (from admin settings)
+  useEffect(() => {
+    const handleEnabledThemesChange = (e: CustomEvent<EnabledThemes>) => {
+      const data = e.detail
+      setEnabledThemes(data)
+      // If current theme is now disabled, switch to enabled one
+      if (!data[theme]) {
+        const newTheme = data.dark ? 'dark' : 'light'
+        setThemeState(newTheme)
+      }
+    }
+
+    window.addEventListener(ENABLED_THEMES_CHANGED_EVENT, handleEnabledThemesChange as EventListener)
+    return () => window.removeEventListener(ENABLED_THEMES_CHANGED_EVENT, handleEnabledThemesChange as EventListener)
+  }, [theme])
+
+  // Apply theme to document - also check if theme is disabled and switch
+  useEffect(() => {
+    const root = document.documentElement
+
+    // If current theme is disabled, switch to the enabled one
+    if (!enabledThemes[theme]) {
+      const newTheme = enabledThemes.dark ? 'dark' : 'light'
+      if (newTheme !== theme) {
+        setThemeState(newTheme)
+        return // Will re-run with correct theme
+      }
+    }
+
+    if (theme === 'light') {
+      root.classList.remove('dark')
+      root.classList.add('light')
+    } else {
+      root.classList.remove('light')
+      root.classList.add('dark')
+    }
+
+    localStorage.setItem(THEME_KEY, theme)
+  }, [theme, enabledThemes])
+
+  // Listen for system theme changes
+  useEffect(() => {
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: light)')
+
+    const handleChange = (e: MediaQueryListEvent) => {
+      const stored = localStorage.getItem(THEME_KEY)
+      // Only auto-switch if user hasn't set a preference and theme is enabled
+      if (!stored) {
+        const newTheme = e.matches ? 'light' : 'dark'
+        if (enabledThemes[newTheme]) {
+          setThemeState(newTheme)
+        }
+      }
+    }
+
+    mediaQuery.addEventListener('change', handleChange)
+    return () => mediaQuery.removeEventListener('change', handleChange)
+  }, [enabledThemes])
+
+  const setTheme = useCallback((newTheme: Theme) => {
+    // Only allow setting if theme is enabled
+    if (enabledThemes[newTheme]) {
+      setThemeState(newTheme)
+    }
+  }, [enabledThemes])
+
+  const toggleTheme = useCallback(() => {
+    setThemeState((prev) => {
+      const newTheme = prev === 'dark' ? 'light' : 'dark'
+      // Only toggle if the new theme is enabled
+      if (enabledThemes[newTheme]) {
+        return newTheme
+      }
+      return prev
+    })
+  }, [enabledThemes])
+
+  const isDark = theme === 'dark'
+  const isLight = theme === 'light'
+
+  // Check if theme switching is available (both themes enabled and loaded)
+  const canToggle = !isLoading && enabledThemes.dark && enabledThemes.light
+
+  // Refresh enabled themes from API
+  const refreshEnabledThemes = useCallback(() => {
+    fetchEnabledThemes().then((data) => {
+      setEnabledThemes(data)
+      if (!data[theme]) {
+        const newTheme = data.dark ? 'dark' : 'light'
+        setThemeState(newTheme)
+      }
+    })
+  }, [theme])
+
+  return {
+    theme,
+    setTheme,
+    toggleTheme,
+    isDark,
+    isLight,
+    enabledThemes,
+    canToggle,
+    isLoading,
+    refreshEnabledThemes,
+  }
+}