scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Pontus Dreij
2024-09-11 14:17:44 +02:00
parent 2734af5f3f
commit b01fca97ba
6 changed files with 94 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
stores/main-menu.ts
View File

@@ -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