fix(SW-272): now closing on click outside and also closing the mobile menu when changing to screensizes larger than mobile

components/LanguageSwitcher/index.tsx

@@ -1,12 +1,13 @@
 "use client"
 
-import { useEffect, useRef } from "react"
+import { useRef } from "react"
 import { useIntl } from "react-intl"
 
 import { languages } from "@/constants/languages"
 import useDropdownStore from "@/stores/main-menu"
 
 import { ChevronDownIcon, GlobeIcon } from "@/components/Icons"
+import useClickOutside from "@/hooks/useClickOutside"
 import { useHandleKeyUp } from "@/hooks/useHandleKeyUp"
 import useLang from "@/hooks/useLang"
 
@@ -28,18 +29,13 @@ export default function LanguageSwitcher({
 }: LanguageSwitcherProps) {
   const intl = useIntl()
   const currentLanguage = useLang()
-  const toggleDropdown = useDropdownStore((state) => state.toggleDropdown)
+  const {
+    toggleDropdown,
+    isFooterLanguageSwitcherOpen,
+    isHeaderLanguageSwitcherMobileOpen,
+    isHeaderLanguageSwitcherOpen,
+  } = useDropdownStore()
   const languageSwitcherRef = useRef<HTMLDivElement>(null)
-  const isFooterLanguageSwitcherOpen = useDropdownStore(
-    (state) => state.isFooterLanguageSwitcherOpen
-  )
-  const isHeaderLanguageSwitcherOpen = useDropdownStore(
-    (state) => state.isHeaderLanguageSwitcherOpen
-  )
-  const isHeaderLanguageSwitcherMobileOpen = useDropdownStore(
-    (state) => state.isHeaderLanguageSwitcherMobileOpen
-  )
-
   const isFooter = type === LanguageSwitcherTypesEnum.Footer
   const isHeader = !isFooter
 
@@ -71,33 +67,11 @@ export default function LanguageSwitcher({
       window.scrollTo(0, scrollPosition)
     })
   }
-
-  useEffect(() => {
-    function handleClickOutside(evt: Event) {
-      const target = evt.target as HTMLElement
-      if (
-        languageSwitcherRef.current &&
-        target &&
-        !languageSwitcherRef.current.contains(target) &&
-        isLanguageSwitcherOpen &&
-        !isHeaderLanguageSwitcherMobileOpen
-      ) {
-        toggleDropdown(dropdownType)
-      }
-    }
-
-    if (languageSwitcherRef.current) {
-      document.addEventListener("click", handleClickOutside)
-    }
-    return () => {
-      document.removeEventListener("click", handleClickOutside)
-    }
-  }, [
-    dropdownType,
-    toggleDropdown,
-    isLanguageSwitcherOpen,
-    isHeaderLanguageSwitcherMobileOpen,
-  ])
+  useClickOutside(
+    languageSwitcherRef,
+    isLanguageSwitcherOpen && !isHeaderLanguageSwitcherMobileOpen,
+    () => toggleDropdown(dropdownType)
+  )
 
   const classNames = languageSwitcherVariants({ color, position })