outsource settings effects

Author: StackOverflowIsBetterThanAnyAI

src/components/UI/navigation/SettingsPopup.tsx

@@ -1,4 +1,4 @@
-import { FC, useContext, useEffect, useRef, useState } from 'react'
+import { FC, useContext, useRef, useState } from 'react'
 import {
     ContextLanguage,
     ContextSEOSearchText,
@@ -12,6 +12,8 @@ import Icon from '../Icon'
 import ProfilePicture from './ProfilePicture'
 import { getLanguageIndex } from '../../../helper/getLanguageIndex'
 import { setItemInStorage } from '../../../helper/setItemInStorage'
+import { useCloseSettingsPopup } from '../../../hooks/useCloseSettingsPopup'
+import { useSettingsPopupFocusTrap } from '../../../hooks/useSettingsPopupFocusTrap'
 
 type SettingsPopupProps = {
     handleButtonKeyDown: (e: React.KeyboardEvent<HTMLButtonElement>) => void
@@ -176,61 +178,12 @@ const SettingsPopup: FC<SettingsPopupProps> = ({
         window.location.reload()
     }
 
-    useEffect(() => {
-        const handleEscape = (event: KeyboardEvent) => {
-            if (
-                popupLanguageRef.current &&
-                !popupLanguageRef.current.contains(event.target as Node) &&
-                filterLanguageExpanded &&
-                event.key === 'Escape'
-            ) {
-                event.stopPropagation()
-                setFilterLanguageExpanded(false)
-            }
-        }
-
-        if (filterLanguageExpanded) {
-            document.addEventListener('keydown', handleEscape)
-        } else {
-            document.removeEventListener('keydown', handleEscape)
-        }
-
-        return () => {
-            document.removeEventListener('keydown', handleEscape)
-        }
-    }, [filterLanguageExpanded, setFilterLanguageExpanded])
-
-    useEffect(() => {
-        if (filterLanguageExpanded) return
-
-        const buttons = popupRef.current?.querySelectorAll('button')
-        if (!buttons || buttons.length === 0) return
-
-        const firstButton = buttons[0]
-        const lastButton = buttons[buttons.length - 1]
-
-        const handleFocusTrap = (e: KeyboardEvent) => {
-            if (e.key !== 'Tab') return
-
-            if (e.shiftKey) {
-                if (document.activeElement === firstButton) {
-                    e.preventDefault()
-                    lastButton.focus()
-                }
-            } else {
-                if (document.activeElement === lastButton) {
-                    e.preventDefault()
-                    firstButton.focus()
-                }
-            }
-        }
-
-        document.addEventListener('keydown', handleFocusTrap)
-
-        return () => {
-            document.removeEventListener('keydown', handleFocusTrap)
-        }
-    }, [filterLanguageExpanded, popupRef])
+    useCloseSettingsPopup(
+        filterLanguageExpanded,
+        popupLanguageRef,
+        setFilterLanguageExpanded
+    )
+    useSettingsPopupFocusTrap(filterLanguageExpanded, popupRef)
 
     return (
         <div

src/hooks/useCloseSettingsPopup.ts

@@ -0,0 +1,31 @@
+import { useEffect } from 'react'
+
+export const useCloseSettingsPopup = (
+    filterLanguageExpanded: boolean,
+    popupLanguageRef: React.MutableRefObject<HTMLDivElement | null>,
+    setFilterLanguageExpanded: (value: React.SetStateAction<boolean>) => void
+) => {
+    useEffect(() => {
+        const handleEscape = (event: KeyboardEvent) => {
+            if (
+                popupLanguageRef.current &&
+                !popupLanguageRef.current.contains(event.target as Node) &&
+                filterLanguageExpanded &&
+                event.key === 'Escape'
+            ) {
+                event.stopPropagation()
+                setFilterLanguageExpanded(false)
+            }
+        }
+
+        if (filterLanguageExpanded) {
+            document.addEventListener('keydown', handleEscape)
+        } else {
+            document.removeEventListener('keydown', handleEscape)
+        }
+
+        return () => {
+            document.removeEventListener('keydown', handleEscape)
+        }
+    }, [filterLanguageExpanded, popupLanguageRef, setFilterLanguageExpanded])
+}

src/hooks/useSettingsPopupFocusTrap.ts

@@ -0,0 +1,44 @@
+import { useEffect } from 'react'
+
+export const useSettingsPopupFocusTrap = (
+    filterLanguageExpanded: boolean,
+    popupRef: React.MutableRefObject<HTMLDivElement | null>
+) => {
+    useEffect(() => {
+        if (filterLanguageExpanded) {
+            return
+        }
+
+        const buttons = popupRef.current?.querySelectorAll('button')
+        if (!buttons || buttons.length === 0) {
+            return
+        }
+
+        const firstButton = buttons[0]
+        const lastButton = buttons[buttons.length - 1]
+
+        const handleFocusTrap = (e: KeyboardEvent) => {
+            if (e.key !== 'Tab') {
+                return
+            }
+
+            if (e.shiftKey) {
+                if (document.activeElement === firstButton) {
+                    e.preventDefault()
+                    lastButton.focus()
+                }
+            } else {
+                if (document.activeElement === lastButton) {
+                    e.preventDefault()
+                    firstButton.focus()
+                }
+            }
+        }
+
+        document.addEventListener('keydown', handleFocusTrap)
+
+        return () => {
+            document.removeEventListener('keydown', handleFocusTrap)
+        }
+    }, [filterLanguageExpanded, popupRef])
+}