refactor: improve system theme listener hook

Remove module-level variable and useCallback wrapper.
Simplify event listener setup and cleanup logic.

References: #RI-7754

Author: pd-redis

redisinsight/ui/src/services/hooks/useSystemThemeListener.ts

@@ -1,36 +1,25 @@
-import { useCallback, useEffect } from 'react'
+import { useEffect } from 'react'
 import { Theme, THEME_MATCH_MEDIA_DARK } from 'uiSrc/constants'
 import { useThemeContext } from 'uiSrc/contexts/themeContext'
 
-let mediaQuery = window.matchMedia?.(THEME_MATCH_MEDIA_DARK)
-
 /**
  * Hook that listens to OS system theme changes
  * and updates the theme context when user has System theme selected.
  */
 export const useSystemThemeListener = () => {
   const { usingSystemTheme, changeTheme } = useThemeContext()
 
-  const handleSystemThemeChange = useCallback(() => {
-    usingSystemTheme && changeTheme(Theme.System)
-  }, [changeTheme, usingSystemTheme])
-
   useEffect(() => {
-    if (!mediaQuery) {
-      // Initialize mediaQuery if not done already because window might not be defined when module is loaded
-      mediaQuery = window.matchMedia?.(THEME_MATCH_MEDIA_DARK)
+    const handleSystemThemeChange = () => {
+      changeTheme(Theme.System)
     }
-    // Only listen if using system theme
-    if (usingSystemTheme) {
-      if (!mediaQuery) {
-        return undefined
-      }
+    const mediaQuery = window.matchMedia?.(THEME_MATCH_MEDIA_DARK)
+    if (usingSystemTheme && mediaQuery) {
       mediaQuery.addEventListener('change', handleSystemThemeChange)
     }
+
     return () => {
-      if (mediaQuery) {
-        mediaQuery.removeEventListener('change', handleSystemThemeChange)
-      }
+      mediaQuery.removeEventListener('change', handleSystemThemeChange)
     }
-  }, [usingSystemTheme])
+  }, [usingSystemTheme, changeTheme])
 }