fix: resolve React Hooks violations in Language, ThemeToggle, and DonationPopup

Author: x0sina

dashboard/src/components/DonationPopup.tsx

@@ -1,5 +1,5 @@
 import { Heart, X } from 'lucide-react'
-import { useEffect, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Button } from './ui/button'
 import { cn } from '@/lib/utils'
@@ -108,12 +108,32 @@ export default function DonationPopup() {
   const [isVisible, setIsVisible] = useState(false)
   const [isAnimating, setIsAnimating] = useState(false)
 
-  // Don't show popup if user is not authenticated
-  if (!getAuthToken()) {
-    return null
-  }
+  const showPopup = useCallback(() => {
+    const now = Date.now()
+    // Update storage: set lastShown to now and nextShowTime to 3 days from now
+    const nextShowTime = new Date(now + DAYS_BETWEEN_SHOWS * 24 * 60 * 60 * 1000).toISOString()
+    setStorageData({
+      lastShown: new Date(now).toISOString(),
+      nextShowTime,
+    })
+
+    // Make visible immediately
+    setIsVisible(true)
+
+    // Start animation after a frame for smooth CSS transition
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        setIsAnimating(true)
+      })
+    })
+  }, [])
 
   useEffect(() => {
+    // Don't show popup if user is not authenticated
+    if (!getAuthToken()) {
+      return
+    }
+
     const checkShouldShow = () => {
       const data = getStorageData()
       const now = Date.now()
@@ -140,26 +160,11 @@ export default function DonationPopup() {
     }
 
     checkShouldShow()
-  }, [])
+  }, [showPopup])
 
-  const showPopup = () => {
-    const now = Date.now()
-    // Update storage: set lastShown to now and nextShowTime to 3 days from now
-    const nextShowTime = new Date(now + DAYS_BETWEEN_SHOWS * 24 * 60 * 60 * 1000).toISOString()
-    setStorageData({
-      lastShown: new Date(now).toISOString(),
-      nextShowTime,
-    })
-
-    // Make visible immediately
-    setIsVisible(true)
-
-    // Start animation after a frame for smooth CSS transition
-    requestAnimationFrame(() => {
-      requestAnimationFrame(() => {
-        setIsAnimating(true)
-      })
-    })
+  // Don't render popup if user is not authenticated
+  if (!getAuthToken()) {
+    return null
   }
 
   const handleClose = () => {

dashboard/src/components/Language.tsx

@@ -1,24 +1,18 @@
 import { Button } from '@/components/ui/button'
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
-import { useSidebar } from '@/components/ui/sidebar'
+import { SidebarContext } from '@/components/ui/sidebar'
 import { LanguagesIcon } from 'lucide-react'
+import { useContext } from 'react'
 import { useTranslation } from 'react-i18next'
 
 export const Language: React.FC = () => {
   const { i18n, t } = useTranslation()
 
   // Safely get sidebar state, defaulting to 'expanded' if not available
-  let sidebarState: 'expanded' | 'collapsed' = 'expanded'
-  let isMobile = false
-  try {
-    const { state, isMobile: mobileFlag } = useSidebar()
-    sidebarState = state
-    isMobile = mobileFlag
-  } catch (error) {
-    // useSidebar is not available, use default state
-    console.warn('useSidebar not available in Language component, using default expanded state')
-  }
+  const sidebarContext = useContext(SidebarContext)
+  const sidebarState: 'expanded' | 'collapsed' = sidebarContext?.state ?? 'expanded'
+  const isMobile = sidebarContext?.isMobile ?? false
 
   const changeLanguage = async (lang: string) => {
       await i18n.changeLanguage(lang)

dashboard/src/components/theme-toggle.tsx

@@ -2,26 +2,19 @@ import { Theme, useTheme } from '@/components/theme-provider'
 import { Button } from '@/components/ui/button'
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
-import { useSidebar } from '@/components/ui/sidebar'
+import { SidebarContext } from '@/components/ui/sidebar'
 import { Monitor, Moon, Sun } from 'lucide-react'
-import { useCallback } from 'react'
+import { useCallback, useContext } from 'react'
 import { useTranslation } from 'react-i18next'
 
 export function ThemeToggle() {
   const { setTheme } = useTheme()
   const { t } = useTranslation()
 
   // Safely get sidebar state, defaulting to 'expanded' if not available
-  let sidebarState: 'expanded' | 'collapsed' = 'expanded'
-  let isMobile = false
-  try {
-    const { state, isMobile: mobileFlag } = useSidebar()
-    sidebarState = state
-    isMobile = mobileFlag
-  } catch (error) {
-    // useSidebar is not available, use default state
-    console.warn('useSidebar not available, using default expanded state')
-  }
+  const sidebarContext = useContext(SidebarContext)
+  const sidebarState: 'expanded' | 'collapsed' = sidebarContext?.state ?? 'expanded'
+  const isMobile = sidebarContext?.isMobile ?? false
 
   const toggleTheme = useCallback(
     (theme: Theme) => {

dashboard/src/components/ui/sidebar.tsx

@@ -611,4 +611,5 @@ export {
   SidebarSeparator,
   SidebarTrigger,
   useSidebar,
+  SidebarContext,
 }