From 2734af5f3f993376c54ed6c195dca865b216f3d3 Mon Sep 17 00:00:00 2001
From: Pontus Dreij <pontus.dreij@scandichotels.com>
Date: Wed, 11 Sep 2024 11:41:26 +0200
Subject: [PATCH] feat(sw-187): Refactor dropdown to keep more logic in
 main-menu.ts

---
 components/Current/Header/MainMenu/index.tsx  | 13 +++---
 .../Header/MyPagesMobileDropdown/index.tsx    |  9 ++--
 .../Header/MainMenu/MobileMenu/index.tsx      | 36 +++++++---------
 .../Header/MainMenu/MyPagesMenu/index.tsx     | 13 +++---
 .../MainMenu/MyPagesMobileMenu/index.tsx      | 12 +++---
 .../LanguageSwitcherContent/index.tsx         |  6 ++-
 components/LanguageSwitcher/index.tsx         | 18 +++++---
 stores/main-menu.ts                           | 43 +++++++++++++++----
 types/components/dropdown/dropdown.ts         | 31 +++++++------
 9 files changed, 104 insertions(+), 77 deletions(-)

diff --git a/components/Current/Header/MainMenu/index.tsx b/components/Current/Header/MainMenu/index.tsx
index c3ec15ab5..e8f41a12e 100644
--- a/components/Current/Header/MainMenu/index.tsx
+++ b/components/Current/Header/MainMenu/index.tsx
@@ -18,7 +18,7 @@ import LoginButton from "../LoginButton"
 import styles from "./mainMenu.module.css"
 
 import type { MainMenuProps } from "@/types/components/current/header/mainMenu"
-import { DropdownType } from "@/types/components/dropdown/dropdown"
+import { DropdownTypeEnum } from "@/types/components/dropdown/dropdown"
 
 export function MainMenu({
   frontpageLinkText,
@@ -62,11 +62,8 @@ export function MainMenu({
     "/sv/current-content-page",
   ].includes(pathname)
 
-  const { toggleDropdown, openDropdown } = useDropdownStore()
-
-  const isMyPagesMobileMenuOpen =
-    openDropdown === DropdownType.MyPagesMobileMenu
-  const isHamburgerMenuOpen = openDropdown === DropdownType.HamburgerMenu
+  const { toggleDropdown, isMyPagesMobileMenuOpen, isHamburgerMenuOpen } =
+    useDropdownStore()
 
   function handleMyPagesMobileMenuClick() {
     // Only track click when opening it
@@ -74,7 +71,7 @@ export function MainMenu({
       trackClick("profile picture icon")
     }
 
-    toggleDropdown(DropdownType.MyPagesMobileMenu)
+    toggleDropdown(DropdownTypeEnum.MyPagesMobileMenu)
   }
 
   return (
@@ -89,7 +86,7 @@ export function MainMenu({
           <button
             aria-pressed="false"
             className={`${styles.expanderBtn} ${isHamburgerMenuOpen ? styles.expanded : ""}`}
-            onClick={() => toggleDropdown(DropdownType.HamburgerMenu)}
+            onClick={() => toggleDropdown(DropdownTypeEnum.HamburgerMenu)}
             type="button"
           >
             <span className={styles.iconBars}></span>
diff --git a/components/Current/Header/MyPagesMobileDropdown/index.tsx b/components/Current/Header/MyPagesMobileDropdown/index.tsx
index 5e9ab01b5..49c333f34 100644
--- a/components/Current/Header/MyPagesMobileDropdown/index.tsx
+++ b/components/Current/Header/MyPagesMobileDropdown/index.tsx
@@ -13,7 +13,7 @@ import useLang from "@/hooks/useLang"
 
 import styles from "./my-pages-mobile-dropdown.module.css"
 
-import { DropdownType } from "@/types/components/dropdown/dropdown"
+import { DropdownTypeEnum } from "@/types/components/dropdown/dropdown"
 
 type Navigation = Awaited<ReturnType<(typeof navigationQueryRouter)["get"]>>
 
@@ -24,10 +24,7 @@ export default function MyPagesMobileDropdown({
 }) {
   const { formatMessage } = useIntl()
   const lang = useLang()
-  const { toggleDropdown, openDropdown } = useDropdownStore()
-
-  const isMyPagesMobileMenuOpen =
-    openDropdown === DropdownType.MyPagesMobileMenu
+  const { toggleDropdown, isMyPagesMobileMenuOpen } = useDropdownStore()
 
   if (!navigation) {
     return null
@@ -56,7 +53,7 @@ export default function MyPagesMobileDropdown({
                     variant="myPageMobileDropdown"
                     color="burgundy"
                     onClick={() =>
-                      toggleDropdown(DropdownType.MyPagesMobileMenu)
+                      toggleDropdown(DropdownTypeEnum.MyPagesMobileMenu)
                     }
                   >
                     {link.linkText}
diff --git a/components/Header/MainMenu/MobileMenu/index.tsx b/components/Header/MainMenu/MobileMenu/index.tsx
index b56d31c95..cce0c4b0e 100644
--- a/components/Header/MainMenu/MobileMenu/index.tsx
+++ b/components/Header/MainMenu/MobileMenu/index.tsx
@@ -14,7 +14,7 @@ import NavigationMenu from "../NavigationMenu"
 
 import styles from "./mobileMenu.module.css"
 
-import { DropdownType } from "@/types/components/dropdown/dropdown"
+import { DropdownTypeEnum } from "@/types/components/dropdown/dropdown"
 import type { MobileMenuProps } from "@/types/components/header/mobileMenu"
 
 export default function MobileMenu({
@@ -23,35 +23,31 @@ export default function MobileMenu({
   topLink,
 }: MobileMenuProps) {
   const intl = useIntl()
-  const { toggleDropdown, openDropdown } = useDropdownStore()
-  const isHamburgerMenuOpen =
-    openDropdown === DropdownType.HamburgerMenu ||
-    openDropdown === DropdownType.HeaderLanguageMobile
-
-  const isMyPagesMobileMenuOpen =
-    openDropdown === DropdownType.MyPagesMobileMenu
-  const isHeaderLanguageSwitcherOpen =
-    openDropdown === DropdownType.HeaderLanguageMobile
-  const isFooterLanguageSwitcherOpen =
-    openDropdown === DropdownType.FooterLanguage
+  const {
+    toggleDropdown,
+    isHamburgerMenuOpen,
+    isMyPagesMobileMenuOpen,
+    isHeaderLanguageSwitcherMobileOpen,
+    isFooterLanguageSwitcherOpen,
+  } = useDropdownStore()
 
   useHandleKeyUp((event: KeyboardEvent) => {
     if (event.key === "Escape" && isHamburgerMenuOpen) {
-      toggleDropdown(DropdownType.HamburgerMenu)
+      toggleDropdown(DropdownTypeEnum.HamburgerMenu)
     }
   })
 
   function handleHamburgerClick() {
     if (isMyPagesMobileMenuOpen) {
-      toggleDropdown(DropdownType.MyPagesMobileMenu)
+      toggleDropdown(DropdownTypeEnum.MyPagesMobileMenu)
     } else {
-      if (isHeaderLanguageSwitcherOpen) {
-        toggleDropdown(DropdownType.HeaderLanguageMobile)
+      if (isHeaderLanguageSwitcherMobileOpen) {
+        toggleDropdown(DropdownTypeEnum.HeaderLanguageSwitcherMobile)
       }
       if (!isFooterLanguageSwitcherOpen) {
-        toggleDropdown(DropdownType.HamburgerMenu)
+        toggleDropdown(DropdownTypeEnum.HamburgerMenu)
       } else {
-        toggleDropdown(DropdownType.FooterLanguage)
+        toggleDropdown(DropdownTypeEnum.FooterLanguageSwitcher)
       }
     }
   }
@@ -60,7 +56,7 @@ export default function MobileMenu({
     <>
       <button
         type="button"
-        className={`${styles.hamburger} ${isHamburgerMenuOpen || isMyPagesMobileMenuOpen || isFooterLanguageSwitcherOpen ? styles.isExpanded : ""}`}
+        className={`${styles.hamburger} ${isHamburgerMenuOpen || isMyPagesMobileMenuOpen || isFooterLanguageSwitcherOpen || isHeaderLanguageSwitcherMobileOpen ? styles.isExpanded : ""}`}
         aria-label={intl.formatMessage({
           id: isHamburgerMenuOpen ? "Close menu" : "Open menu",
         })}
@@ -70,7 +66,7 @@ export default function MobileMenu({
       </button>
       <Modal
         className={styles.modal}
-        isOpen={isHamburgerMenuOpen || isHeaderLanguageSwitcherOpen}
+        isOpen={isHamburgerMenuOpen || isHeaderLanguageSwitcherMobileOpen}
       >
         <Dialog
           className={styles.dialog}
diff --git a/components/Header/MainMenu/MyPagesMenu/index.tsx b/components/Header/MainMenu/MyPagesMenu/index.tsx
index 84247da74..054d867be 100644
--- a/components/Header/MainMenu/MyPagesMenu/index.tsx
+++ b/components/Header/MainMenu/MyPagesMenu/index.tsx
@@ -15,7 +15,7 @@ import MyPagesMenuContent from "../MyPagesMenuContent"
 
 import styles from "./myPagesMenu.module.css"
 
-import { DropdownType } from "@/types/components/dropdown/dropdown"
+import { DropdownTypeEnum } from "@/types/components/dropdown/dropdown"
 import type { MyPagesMenuProps } from "@/types/components/header/myPagesMenu"
 
 export default function MyPagesMenu({
@@ -25,12 +25,11 @@ export default function MyPagesMenu({
 }: MyPagesMenuProps) {
   const intl = useIntl()
 
-  const { toggleDropdown, openDropdown } = useDropdownStore()
-  const isMyPagesMenuOpen = openDropdown === DropdownType.MyPagesMenu
+  const { toggleDropdown, isMyPagesMenuOpen } = useDropdownStore()
 
   useHandleKeyUp((event: KeyboardEvent) => {
     if (event.key === "Escape" && isMyPagesMenuOpen) {
-      toggleDropdown(DropdownType.MyPagesMenu)
+      toggleDropdown(DropdownTypeEnum.MyPagesMenu)
     }
   })
 
@@ -38,7 +37,7 @@ export default function MyPagesMenu({
     <div className={styles.myPagesMenu}>
       <MainMenuButton
         className={styles.button}
-        onClick={() => toggleDropdown(DropdownType.MyPagesMenu)}
+        onClick={() => toggleDropdown(DropdownTypeEnum.MyPagesMenu)}
       >
         <Avatar initials={getInitials(user.firstName, user.lastName)} />
         <Subtitle type="two" className={styles.userName}>
@@ -55,7 +54,9 @@ export default function MyPagesMenu({
             navigation={navigation}
             user={user}
             membership={membership}
-            toggleOpenStateFn={() => toggleDropdown(DropdownType.MyPagesMenu)}
+            toggleOpenStateFn={() =>
+              toggleDropdown(DropdownTypeEnum.MyPagesMenu)
+            }
           />
         </div>
       ) : null}
diff --git a/components/Header/MainMenu/MyPagesMobileMenu/index.tsx b/components/Header/MainMenu/MyPagesMobileMenu/index.tsx
index f540b9eb2..6620c87d8 100644
--- a/components/Header/MainMenu/MyPagesMobileMenu/index.tsx
+++ b/components/Header/MainMenu/MyPagesMobileMenu/index.tsx
@@ -14,7 +14,7 @@ import MyPagesMenuContent from "../MyPagesMenuContent"
 
 import styles from "./myPagesMobileMenu.module.css"
 
-import { DropdownType } from "@/types/components/dropdown/dropdown"
+import { DropdownTypeEnum } from "@/types/components/dropdown/dropdown"
 import type { MyPagesMenuProps } from "@/types/components/header/myPagesMenu"
 
 export default function MyPagesMobileMenu({
@@ -23,13 +23,11 @@ export default function MyPagesMobileMenu({
   user,
 }: MyPagesMenuProps) {
   const intl = useIntl()
-  const { openDropdown, toggleDropdown } = useDropdownStore()
-  const isMyPagesMobileMenuOpen =
-    openDropdown === DropdownType.MyPagesMobileMenu
+  const { isMyPagesMobileMenuOpen, toggleDropdown } = useDropdownStore()
 
   useHandleKeyUp((event: KeyboardEvent) => {
     if (event.key === "Escape" && isMyPagesMobileMenuOpen) {
-      toggleDropdown(DropdownType.MyPagesMobileMenu)
+      toggleDropdown(DropdownTypeEnum.MyPagesMobileMenu)
     }
   })
 
@@ -37,7 +35,7 @@ export default function MyPagesMobileMenu({
     <div className={styles.myPagesMobileMenu}>
       <MainMenuButton
         className={styles.button}
-        onClick={() => toggleDropdown(DropdownType.MyPagesMobileMenu)}
+        onClick={() => toggleDropdown(DropdownTypeEnum.MyPagesMobileMenu)}
         aria-label={intl.formatMessage({ id: "Open my pages menu" })}
       >
         <Avatar initials={getInitials(user.firstName, user.lastName)} />
@@ -52,7 +50,7 @@ export default function MyPagesMobileMenu({
             navigation={navigation}
             user={user}
             toggleOpenStateFn={() =>
-              toggleDropdown(DropdownType.MyPagesMobileMenu)
+              toggleDropdown(DropdownTypeEnum.MyPagesMobileMenu)
             }
           />
         </Dialog>
diff --git a/components/LanguageSwitcher/LanguageSwitcherContent/index.tsx b/components/LanguageSwitcher/LanguageSwitcherContent/index.tsx
index d6e07325e..9aebfa711 100644
--- a/components/LanguageSwitcher/LanguageSwitcherContent/index.tsx
+++ b/components/LanguageSwitcher/LanguageSwitcherContent/index.tsx
@@ -13,7 +13,7 @@ import { useTrapFocus } from "@/hooks/useTrapFocus"
 
 import styles from "./languageSwitcherContent.module.css"
 
-import { DropdownType } from "@/types/components/dropdown/dropdown"
+import { DropdownTypeEnum } from "@/types/components/dropdown/dropdown"
 import type { LanguageSwitcherProps } from "@/types/components/languageSwitcher/languageSwitcher"
 
 export default function LanguageSwitcherContent({
@@ -26,7 +26,9 @@ export default function LanguageSwitcherContent({
   const languageSwitcherRef = useTrapFocus()
   const urlKeys = Object.keys(urls) as Lang[]
   const position =
-    type === "footer" ? DropdownType.FooterLanguage : DropdownType.HamburgerMenu
+    type === "footer"
+      ? DropdownTypeEnum.FooterLanguageSwitcher
+      : DropdownTypeEnum.HamburgerMenu
 
   return (
     <div className={styles.languageSwitcherContent} ref={languageSwitcherRef}>
diff --git a/components/LanguageSwitcher/index.tsx b/components/LanguageSwitcher/index.tsx
index 83ae77ce6..e6ed0395b 100644
--- a/components/LanguageSwitcher/index.tsx
+++ b/components/LanguageSwitcher/index.tsx
@@ -14,7 +14,7 @@ import { languageSwitcherVariants } from "./variants"
 
 import styles from "./languageSwitcher.module.css"
 
-import { DropdownType } from "@/types/components/dropdown/dropdown"
+import { DropdownTypeEnum } from "@/types/components/dropdown/dropdown"
 import type { LanguageSwitcherProps } from "@/types/components/languageSwitcher/languageSwitcher"
 
 export default function LanguageSwitcher({
@@ -23,18 +23,24 @@ export default function LanguageSwitcher({
 }: LanguageSwitcherProps) {
   const intl = useIntl()
   const currentLanguage = useLang()
-  const { toggleDropdown, openDropdown } = useDropdownStore()
+  const {
+    toggleDropdown,
+    isFooterLanguageSwitcherOpen,
+    isHeaderLanguageSwitcherOpen,
+  } = useDropdownStore()
 
   const position = type === "footer" ? "footer" : "header"
   const color = type === "footer" ? "pale" : "burgundy"
 
   const dropdownType = {
-    footer: DropdownType.FooterLanguage,
-    desktopHeader: DropdownType.HeaderLanguage,
-    mobileHeader: DropdownType.HeaderLanguageMobile,
+    footer: DropdownTypeEnum.FooterLanguageSwitcher,
+    desktopHeader: DropdownTypeEnum.HeaderLanguageSwitcher,
+    mobileHeader: DropdownTypeEnum.HeaderLanguageSwitcherMobile,
   }[type]
 
-  const isLanguageSwitcherOpen = openDropdown === dropdownType
+  const isLanguageSwitcherOpen =
+    (type === "footer" && isFooterLanguageSwitcherOpen) ||
+    (type !== "footer" && isHeaderLanguageSwitcherOpen)
 
   useHandleKeyUp((event: KeyboardEvent) => {
     if (event.key === "Escape" && isLanguageSwitcherOpen) {
diff --git a/stores/main-menu.ts b/stores/main-menu.ts
index d6c147999..a4cc38a1e 100644
--- a/stores/main-menu.ts
+++ b/stores/main-menu.ts
@@ -1,16 +1,43 @@
 import { create } from "zustand"
 
-import {
-  type DropdownState,
+import type {
+  DropdownState,
   DropdownType,
 } from "@/types/components/dropdown/dropdown"
 
-const useDropdownStore = create<DropdownState>((set) => ({
-  openDropdown: null,
-  toggleDropdown: (dropdown: DropdownType) =>
-    set((state) => ({
-      openDropdown: state.openDropdown === dropdown ? null : dropdown,
-    })),
+// TODO: When MyPagesMobileMenu is removed, also remove the
+// isMyPagesMobileMenuOpen state
+
+const useDropdownStore = create<
+  DropdownState & { toggleDropdown: (dropdown: DropdownType) => void }
+>((set) => ({
+  isHamburgerMenuOpen: false,
+  isMyPagesMobileMenuOpen: false,
+  isMyPagesMenuOpen: false,
+  isHeaderLanguageSwitcherOpen: false,
+  isHeaderLanguageSwitcherMobileOpen: false,
+  isFooterLanguageSwitcherOpen: false,
+  toggleDropdown: (dropdown) =>
+    set((state) => {
+      const newState = {
+        isHamburgerMenuOpen: false,
+        isMyPagesMobileMenuOpen: false,
+        isMyPagesMenuOpen: false,
+        isHeaderLanguageSwitcherOpen: false,
+        isHeaderLanguageSwitcherMobileOpen: false,
+        isFooterLanguageSwitcherOpen: false,
+      }
+
+      const currentState =
+        state[
+          `is${dropdown.charAt(0).toUpperCase() + dropdown.slice(1)}Open` as keyof DropdownState
+        ]
+      newState[
+        `is${dropdown.charAt(0).toUpperCase() + dropdown.slice(1)}Open` as keyof DropdownState
+      ] = !currentState
+
+      return newState
+    }),
 }))
 
 export default useDropdownStore
diff --git a/types/components/dropdown/dropdown.ts b/types/components/dropdown/dropdown.ts
index 76f2e3a7c..3dd6d1417 100644
--- a/types/components/dropdown/dropdown.ts
+++ b/types/components/dropdown/dropdown.ts
@@ -1,16 +1,19 @@
-// TODO: When MyPagesMobileMenu is removed, also remove the
-// isMyPagesMobileMenuOpen state
-
-export enum DropdownType {
-  HeaderLanguage,
-  HeaderLanguageMobile,
-  FooterLanguage,
-  HamburgerMenu,
-  MyPagesMenu,
-  MyPagesMobileMenu,
-}
-
 export interface DropdownState {
-  openDropdown: DropdownType | null
-  toggleDropdown: (dropdown: DropdownType) => void
+  isHamburgerMenuOpen: boolean
+  isMyPagesMobileMenuOpen: boolean
+  isMyPagesMenuOpen: boolean
+  isHeaderLanguageSwitcherOpen: boolean
+  isHeaderLanguageSwitcherMobileOpen: boolean
+  isFooterLanguageSwitcherOpen: boolean
 }
+
+export enum DropdownTypeEnum {
+  HamburgerMenu = "hamburgerMenu",
+  MyPagesMobileMenu = "myPagesMobileMenu",
+  MyPagesMenu = "myPagesMenu",
+  HeaderLanguageSwitcher = "headerLanguageSwitcher",
+  HeaderLanguageSwitcherMobile = "headerLanguageSwitcherMobile",
+  FooterLanguageSwitcher = "footerLanguageSwitcher",
+}
+
+export type DropdownType = `${DropdownTypeEnum}`