feat(SW-187): added immer and refactor dropdown a bit

components/Header/MainMenu/MobileMenu/index.tsx

@@ -24,6 +24,7 @@ export default function MobileMenu({
 }: MobileMenuProps) {
   const intl = useIntl()
   const {
+    handleHamburgerClick,
     toggleDropdown,
     isHamburgerMenuOpen,
     isMyPagesMobileMenuOpen,
@@ -37,21 +38,6 @@ export default function MobileMenu({
     }
   })
 
-  function handleHamburgerClick() {
-    if (isMyPagesMobileMenuOpen) {
-      toggleDropdown(DropdownTypeEnum.MyPagesMobileMenu)
-    } else {
-      if (isHeaderLanguageSwitcherMobileOpen) {
-        toggleDropdown(DropdownTypeEnum.HeaderLanguageSwitcherMobile)
-      }
-      if (!isFooterLanguageSwitcherOpen) {
-        toggleDropdown(DropdownTypeEnum.HamburgerMenu)
-      } else {
-        toggleDropdown(DropdownTypeEnum.FooterLanguageSwitcher)
-      }
-    }
-  }
-
   return (
     <>
       <button

components/LanguageSwitcher/index.tsx

@@ -27,6 +27,7 @@ export default function LanguageSwitcher({
     toggleDropdown,
     isFooterLanguageSwitcherOpen,
     isHeaderLanguageSwitcherOpen,
+    isHeaderLanguageSwitcherMobileOpen,
   } = useDropdownStore()
 
   const position = type === "footer" ? "footer" : "header"
@@ -40,7 +41,8 @@ export default function LanguageSwitcher({
 
   const isLanguageSwitcherOpen =
     (type === "footer" && isFooterLanguageSwitcherOpen) ||
-    (type !== "footer" && isHeaderLanguageSwitcherOpen)
+    (type !== "footer" &&
+      (isHeaderLanguageSwitcherOpen || isHeaderLanguageSwitcherMobileOpen))
 
   useHandleKeyUp((event: KeyboardEvent) => {
     if (event.key === "Escape" && isLanguageSwitcherOpen) {

package-lock.json

@@ -35,6 +35,7 @@
         "graphql": "^16.8.1",
         "graphql-request": "^6.1.0",
         "graphql-tag": "^2.12.6",
+        "immer": "10.1.1",
         "libphonenumber-js": "^1.10.60",
         "next": "^14.2.3",
         "next-auth": "^5.0.0-beta.19",
@@ -10951,6 +10952,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/immer": {
+      "version": "10.1.1",
+      "resolved": "https://registry.npmjs.org/immer/-/immer-10.1.1.tgz",
+      "integrity": "sha512-s2MPrmjovJcoMaHtx6K11Ra7oD05NT97w1IC5zpMkT6Atjr7H8LjaDd81iIxUYpMKSRRNMJE703M1Fhr/TctHw==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/immer"
+      }
+    },
     "node_modules/immutable": {
       "version": "4.3.6",
       "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.6.tgz",

package.json

@@ -51,6 +51,7 @@
     "graphql": "^16.8.1",
     "graphql-request": "^6.1.0",
     "graphql-tag": "^2.12.6",
+    "immer": "10.1.1",
     "libphonenumber-js": "^1.10.60",
     "next": "^14.2.3",
     "next-auth": "^5.0.0-beta.19",

stores/main-menu.ts

@@ -1,43 +1,94 @@
+import { produce } from "immer"
 import { create } from "zustand"
 
-import type {
-  DropdownState,
-  DropdownType,
+import {
+  type DropdownState,
+  DropdownTypeEnum,
 } from "@/types/components/dropdown/dropdown"
 
 // TODO: When MyPagesMobileMenu is removed, also remove the
 // isMyPagesMobileMenuOpen state
 
-const useDropdownStore = create<
-  DropdownState & { toggleDropdown: (dropdown: DropdownType) => void }
->((set) => ({
+const useDropdownStore = create<DropdownState>((set, get) => ({
   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,
+  handleHamburgerClick: () => {
+    const state = get()
+    if (state.isMyPagesMobileMenuOpen) {
+      set({ isMyPagesMobileMenuOpen: false })
+    } else {
+      if (state.isHeaderLanguageSwitcherMobileOpen) {
+        set({ isHeaderLanguageSwitcherMobileOpen: 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
-    }),
+      if (!state.isFooterLanguageSwitcherOpen) {
+        set({ isHamburgerMenuOpen: !state.isHamburgerMenuOpen })
+      } else {
+        set({ isFooterLanguageSwitcherOpen: false })
+      }
+    }
+  },
+  toggleDropdown: (dropdown: DropdownTypeEnum) =>
+    set(
+      produce((state: DropdownState) => {
+        switch (dropdown) {
+          case DropdownTypeEnum.HamburgerMenu:
+            state.isHamburgerMenuOpen = !state.isHamburgerMenuOpen
+            state.isMyPagesMobileMenuOpen = false
+            state.isMyPagesMenuOpen = false
+            state.isHeaderLanguageSwitcherOpen = false
+            state.isHeaderLanguageSwitcherMobileOpen = false
+            state.isFooterLanguageSwitcherOpen = false
+            break
+          case DropdownTypeEnum.MyPagesMobileMenu:
+            state.isMyPagesMobileMenuOpen = !state.isMyPagesMobileMenuOpen
+            state.isHamburgerMenuOpen = false
+            state.isMyPagesMenuOpen = false
+            state.isHeaderLanguageSwitcherOpen = false
+            state.isHeaderLanguageSwitcherMobileOpen = false
+            state.isFooterLanguageSwitcherOpen = false
+            break
+          case DropdownTypeEnum.MyPagesMenu:
+            state.isMyPagesMenuOpen = !state.isMyPagesMenuOpen
+            state.isHamburgerMenuOpen = false
+            state.isMyPagesMobileMenuOpen = false
+            state.isHeaderLanguageSwitcherOpen = false
+            state.isHeaderLanguageSwitcherMobileOpen = false
+            state.isFooterLanguageSwitcherOpen = false
+            break
+          case DropdownTypeEnum.HeaderLanguageSwitcher:
+            state.isHeaderLanguageSwitcherOpen =
+              !state.isHeaderLanguageSwitcherOpen
+            state.isHamburgerMenuOpen = false
+            state.isMyPagesMobileMenuOpen = false
+            state.isMyPagesMenuOpen = false
+            state.isHeaderLanguageSwitcherMobileOpen = false
+            state.isFooterLanguageSwitcherOpen = false
+            break
+          case DropdownTypeEnum.HeaderLanguageSwitcherMobile:
+            state.isHeaderLanguageSwitcherMobileOpen =
+              !state.isHeaderLanguageSwitcherMobileOpen
+            state.isHamburgerMenuOpen = false
+            state.isMyPagesMobileMenuOpen = false
+            state.isMyPagesMenuOpen = false
+            state.isHeaderLanguageSwitcherOpen = false
+            state.isFooterLanguageSwitcherOpen = false
+            break
+          case DropdownTypeEnum.FooterLanguageSwitcher:
+            state.isFooterLanguageSwitcherOpen =
+              !state.isFooterLanguageSwitcherOpen
+            state.isHamburgerMenuOpen = false
+            state.isMyPagesMobileMenuOpen = false
+            state.isMyPagesMenuOpen = false
+            state.isHeaderLanguageSwitcherOpen = false
+            state.isHeaderLanguageSwitcherMobileOpen = false
+            break
+        }
+      })
+    ),
 }))
 
 export default useDropdownStore

types/components/dropdown/dropdown.ts

@@ -5,6 +5,8 @@ export interface DropdownState {
   isHeaderLanguageSwitcherOpen: boolean
   isHeaderLanguageSwitcherMobileOpen: boolean
   isFooterLanguageSwitcherOpen: boolean
+  toggleDropdown: (dropdown: DropdownTypeEnum) => void
+  handleHamburgerClick: () => void
 }
 
 export enum DropdownTypeEnum {