From b01fca97baf8f2c47c638edfa879aa3efa503d07 Mon Sep 17 00:00:00 2001
From: Pontus Dreij <pontus.dreij@scandichotels.com>
Date: Wed, 11 Sep 2024 14:17:44 +0200
Subject: [PATCH] feat(SW-187): added immer and refactor dropdown a bit

---
 .../Header/MainMenu/MobileMenu/index.tsx      |  16 +--
 components/LanguageSwitcher/index.tsx         |   4 +-
 package-lock.json                             |  10 ++
 package.json                                  |   1 +
 stores/main-menu.ts                           | 103 +++++++++++++-----
 types/components/dropdown/dropdown.ts         |   2 +
 6 files changed, 94 insertions(+), 42 deletions(-)

diff --git a/components/Header/MainMenu/MobileMenu/index.tsx b/components/Header/MainMenu/MobileMenu/index.tsx
index cce0c4b0e..353afa4ee 100644
--- a/components/Header/MainMenu/MobileMenu/index.tsx
+++ b/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
diff --git a/components/LanguageSwitcher/index.tsx b/components/LanguageSwitcher/index.tsx
index e6ed0395b..65888d578 100644
--- a/components/LanguageSwitcher/index.tsx
+++ b/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) {
diff --git a/package-lock.json b/package-lock.json
index 1362c73c0..11bc68c40 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index bc4b33000..d4dc4add7 100644
--- a/package.json
+++ b/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",
diff --git a/stores/main-menu.ts b/stores/main-menu.ts
index a4cc38a1e..29e039e99 100644
--- a/stores/main-menu.ts
+++ b/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
diff --git a/types/components/dropdown/dropdown.ts b/types/components/dropdown/dropdown.ts
index 3dd6d1417..899086336 100644
--- a/types/components/dropdown/dropdown.ts
+++ b/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 {