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

feat(sw-187): Refactor dropdown to keep more logic in main-menu.ts

Browse Source
This commit is contained in:
Pontus Dreij
2024-09-11 11:41:26 +02:00
parent 76c7cfa6f0
commit 2734af5f3f
9 changed files with 104 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
components/Current/Header/MainMenu/index.tsx
View File

@@ -18,7 +18,7 @@ import LoginButton from "../LoginButton"
import styles from "./mainMenu.module.css" import styles from "./mainMenu.module.css"
import type { MainMenuProps } from "@/types/components/current/header/mainMenu" 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({ export function MainMenu({
frontpageLinkText, frontpageLinkText,
@@ -62,11 +62,8 @@ export function MainMenu({
"/sv/current-content-page", "/sv/current-content-page",
].includes(pathname) ].includes(pathname)
const { toggleDropdown, openDropdown } = useDropdownStore() const { toggleDropdown, isMyPagesMobileMenuOpen, isHamburgerMenuOpen } =
useDropdownStore()
const isMyPagesMobileMenuOpen =
openDropdown === DropdownType.MyPagesMobileMenu
const isHamburgerMenuOpen = openDropdown === DropdownType.HamburgerMenu
function handleMyPagesMobileMenuClick() { function handleMyPagesMobileMenuClick() {
// Only track click when opening it // Only track click when opening it
@@ -74,7 +71,7 @@ export function MainMenu({
trackClick("profile picture icon") trackClick("profile picture icon")
} }
toggleDropdown(DropdownType.MyPagesMobileMenu) toggleDropdown(DropdownTypeEnum.MyPagesMobileMenu)
} }
return ( return (
@@ -89,7 +86,7 @@ export function MainMenu({
<button <button
aria-pressed="false" aria-pressed="false"
className={`${styles.expanderBtn} ${isHamburgerMenuOpen ? styles.expanded : ""}`} className={`${styles.expanderBtn} ${isHamburgerMenuOpen ? styles.expanded : ""}`}
onClick={() => toggleDropdown(DropdownType.HamburgerMenu)} onClick={() => toggleDropdown(DropdownTypeEnum.HamburgerMenu)}
type="button" type="button"
> >
<span className={styles.iconBars}></span> <span className={styles.iconBars}></span>

9
components/Current/Header/MyPagesMobileDropdown/index.tsx
View File

@@ -13,7 +13,7 @@ import useLang from "@/hooks/useLang"
import styles from "./my-pages-mobile-dropdown.module.css" 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"]>> type Navigation = Awaited<ReturnType<(typeof navigationQueryRouter)["get"]>>
@@ -24,10 +24,7 @@ export default function MyPagesMobileDropdown({
}) { }) {
const { formatMessage } = useIntl() const { formatMessage } = useIntl()
const lang = useLang() const lang = useLang()
const { toggleDropdown, openDropdown } = useDropdownStore() const { toggleDropdown, isMyPagesMobileMenuOpen } = useDropdownStore()
const isMyPagesMobileMenuOpen =
openDropdown === DropdownType.MyPagesMobileMenu
if (!navigation) { if (!navigation) {
return null return null
@@ -56,7 +53,7 @@ export default function MyPagesMobileDropdown({
variant="myPageMobileDropdown" variant="myPageMobileDropdown"
color="burgundy" color="burgundy"
onClick={() => onClick={() =>
toggleDropdown(DropdownType.MyPagesMobileMenu) toggleDropdown(DropdownTypeEnum.MyPagesMobileMenu)
} }
> >
{link.linkText} {link.linkText}

36
components/Header/MainMenu/MobileMenu/index.tsx
View File

@@ -14,7 +14,7 @@ import NavigationMenu from "../NavigationMenu"
import styles from "./mobileMenu.module.css" 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" import type { MobileMenuProps } from "@/types/components/header/mobileMenu"
export default function MobileMenu({ export default function MobileMenu({
@@ -23,35 +23,31 @@ export default function MobileMenu({
topLink, topLink,
}: MobileMenuProps) { }: MobileMenuProps) {
const intl = useIntl() const intl = useIntl()
const { toggleDropdown, openDropdown } = useDropdownStore() const {
const isHamburgerMenuOpen = toggleDropdown,
openDropdown === DropdownType.HamburgerMenu || isHamburgerMenuOpen,
openDropdown === DropdownType.HeaderLanguageMobile isMyPagesMobileMenuOpen,
isHeaderLanguageSwitcherMobileOpen,
const isMyPagesMobileMenuOpen = isFooterLanguageSwitcherOpen,
openDropdown === DropdownType.MyPagesMobileMenu } = useDropdownStore()
const isHeaderLanguageSwitcherOpen =
openDropdown === DropdownType.HeaderLanguageMobile
const isFooterLanguageSwitcherOpen =
openDropdown === DropdownType.FooterLanguage
useHandleKeyUp((event: KeyboardEvent) => { useHandleKeyUp((event: KeyboardEvent) => {
if (event.key === "Escape" && isHamburgerMenuOpen) { if (event.key === "Escape" && isHamburgerMenuOpen) {
toggleDropdown(DropdownType.HamburgerMenu) toggleDropdown(DropdownTypeEnum.HamburgerMenu)
} }
}) })
function handleHamburgerClick() { function handleHamburgerClick() {
if (isMyPagesMobileMenuOpen) { if (isMyPagesMobileMenuOpen) {
toggleDropdown(DropdownType.MyPagesMobileMenu) toggleDropdown(DropdownTypeEnum.MyPagesMobileMenu)
} else { } else {
if (isHeaderLanguageSwitcherOpen) { if (isHeaderLanguageSwitcherMobileOpen) {
toggleDropdown(DropdownType.HeaderLanguageMobile) toggleDropdown(DropdownTypeEnum.HeaderLanguageSwitcherMobile)
} }
if (!isFooterLanguageSwitcherOpen) { if (!isFooterLanguageSwitcherOpen) {
toggleDropdown(DropdownType.HamburgerMenu) toggleDropdown(DropdownTypeEnum.HamburgerMenu)
} else { } else {
toggleDropdown(DropdownType.FooterLanguage) toggleDropdown(DropdownTypeEnum.FooterLanguageSwitcher)
} }
} }
} }
@@ -60,7 +56,7 @@ export default function MobileMenu({
<> <>
<button <button
type="button" type="button"
className={`${styles.hamburger} ${isHamburgerMenuOpen || isMyPagesMobileMenuOpen || isFooterLanguageSwitcherOpen ? styles.isExpanded : ""}`} className={`${styles.hamburger} ${isHamburgerMenuOpen || isMyPagesMobileMenuOpen || isFooterLanguageSwitcherOpen || isHeaderLanguageSwitcherMobileOpen ? styles.isExpanded : ""}`}
aria-label={intl.formatMessage({ aria-label={intl.formatMessage({
id: isHamburgerMenuOpen ? "Close menu" : "Open menu", id: isHamburgerMenuOpen ? "Close menu" : "Open menu",
})} })}
@@ -70,7 +66,7 @@ export default function MobileMenu({
</button> </button>
<Modal <Modal
className={styles.modal} className={styles.modal}
isOpen={isHamburgerMenuOpen || isHeaderLanguageSwitcherOpen} isOpen={isHamburgerMenuOpen || isHeaderLanguageSwitcherMobileOpen}
> >
<Dialog <Dialog
className={styles.dialog} className={styles.dialog}

13
components/Header/MainMenu/MyPagesMenu/index.tsx
View File

@@ -15,7 +15,7 @@ import MyPagesMenuContent from "../MyPagesMenuContent"
import styles from "./myPagesMenu.module.css" 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" import type { MyPagesMenuProps } from "@/types/components/header/myPagesMenu"
export default function MyPagesMenu({ export default function MyPagesMenu({
@@ -25,12 +25,11 @@ export default function MyPagesMenu({
}: MyPagesMenuProps) { }: MyPagesMenuProps) {
const intl = useIntl() const intl = useIntl()
const { toggleDropdown, openDropdown } = useDropdownStore() const { toggleDropdown, isMyPagesMenuOpen } = useDropdownStore()
const isMyPagesMenuOpen = openDropdown === DropdownType.MyPagesMenu
useHandleKeyUp((event: KeyboardEvent) => { useHandleKeyUp((event: KeyboardEvent) => {
if (event.key === "Escape" && isMyPagesMenuOpen) { if (event.key === "Escape" && isMyPagesMenuOpen) {
toggleDropdown(DropdownType.MyPagesMenu) toggleDropdown(DropdownTypeEnum.MyPagesMenu)
} }
}) })
@@ -38,7 +37,7 @@ export default function MyPagesMenu({
<div className={styles.myPagesMenu}> <div className={styles.myPagesMenu}>
<MainMenuButton <MainMenuButton
className={styles.button} className={styles.button}
onClick={() => toggleDropdown(DropdownType.MyPagesMenu)} onClick={() => toggleDropdown(DropdownTypeEnum.MyPagesMenu)}
> >
<Avatar initials={getInitials(user.firstName, user.lastName)} /> <Avatar initials={getInitials(user.firstName, user.lastName)} />
<Subtitle type="two" className={styles.userName}> <Subtitle type="two" className={styles.userName}>
@@ -55,7 +54,9 @@ export default function MyPagesMenu({
navigation={navigation} navigation={navigation}
user={user} user={user}
membership={membership} membership={membership}
toggleOpenStateFn={() => toggleDropdown(DropdownType.MyPagesMenu)} toggleOpenStateFn={() =>
toggleDropdown(DropdownTypeEnum.MyPagesMenu)
}
/> />
</div> </div>
) : null} ) : null}

12
components/Header/MainMenu/MyPagesMobileMenu/index.tsx
View File

@@ -14,7 +14,7 @@ import MyPagesMenuContent from "../MyPagesMenuContent"
import styles from "./myPagesMobileMenu.module.css" 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" import type { MyPagesMenuProps } from "@/types/components/header/myPagesMenu"
export default function MyPagesMobileMenu({ export default function MyPagesMobileMenu({
@@ -23,13 +23,11 @@ export default function MyPagesMobileMenu({
user, user,
}: MyPagesMenuProps) { }: MyPagesMenuProps) {
const intl = useIntl() const intl = useIntl()
const { openDropdown, toggleDropdown } = useDropdownStore() const { isMyPagesMobileMenuOpen, toggleDropdown } = useDropdownStore()
const isMyPagesMobileMenuOpen =
openDropdown === DropdownType.MyPagesMobileMenu
useHandleKeyUp((event: KeyboardEvent) => { useHandleKeyUp((event: KeyboardEvent) => {
if (event.key === "Escape" && isMyPagesMobileMenuOpen) { if (event.key === "Escape" && isMyPagesMobileMenuOpen) {
toggleDropdown(DropdownType.MyPagesMobileMenu) toggleDropdown(DropdownTypeEnum.MyPagesMobileMenu)
} }
}) })
@@ -37,7 +35,7 @@ export default function MyPagesMobileMenu({
<div className={styles.myPagesMobileMenu}> <div className={styles.myPagesMobileMenu}>
<MainMenuButton <MainMenuButton
className={styles.button} className={styles.button}
onClick={() => toggleDropdown(DropdownType.MyPagesMobileMenu)} onClick={() => toggleDropdown(DropdownTypeEnum.MyPagesMobileMenu)}
aria-label={intl.formatMessage({ id: "Open my pages menu" })} aria-label={intl.formatMessage({ id: "Open my pages menu" })}
> >
<Avatar initials={getInitials(user.firstName, user.lastName)} /> <Avatar initials={getInitials(user.firstName, user.lastName)} />
@@ -52,7 +50,7 @@ export default function MyPagesMobileMenu({
navigation={navigation} navigation={navigation}
user={user} user={user}
toggleOpenStateFn={() => toggleOpenStateFn={() =>
toggleDropdown(DropdownType.MyPagesMobileMenu) toggleDropdown(DropdownTypeEnum.MyPagesMobileMenu)
} }
/> />
</Dialog> </Dialog>

6
components/LanguageSwitcher/LanguageSwitcherContent/index.tsx
View File

@@ -13,7 +13,7 @@ import { useTrapFocus } from "@/hooks/useTrapFocus"
import styles from "./languageSwitcherContent.module.css" 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" import type { LanguageSwitcherProps } from "@/types/components/languageSwitcher/languageSwitcher"
export default function LanguageSwitcherContent({ export default function LanguageSwitcherContent({
@@ -26,7 +26,9 @@ export default function LanguageSwitcherContent({
const languageSwitcherRef = useTrapFocus() const languageSwitcherRef = useTrapFocus()
const urlKeys = Object.keys(urls) as Lang[] const urlKeys = Object.keys(urls) as Lang[]
const position = const position =
type === "footer" ? DropdownType.FooterLanguage : DropdownType.HamburgerMenu type === "footer"
? DropdownTypeEnum.FooterLanguageSwitcher
: DropdownTypeEnum.HamburgerMenu
return ( return (
<div className={styles.languageSwitcherContent} ref={languageSwitcherRef}> <div className={styles.languageSwitcherContent} ref={languageSwitcherRef}>

18
components/LanguageSwitcher/index.tsx
View File

@@ -14,7 +14,7 @@ import { languageSwitcherVariants } from "./variants"
import styles from "./languageSwitcher.module.css" 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" import type { LanguageSwitcherProps } from "@/types/components/languageSwitcher/languageSwitcher"
export default function LanguageSwitcher({ export default function LanguageSwitcher({
@@ -23,18 +23,24 @@ export default function LanguageSwitcher({
}: LanguageSwitcherProps) { }: LanguageSwitcherProps) {
const intl = useIntl() const intl = useIntl()
const currentLanguage = useLang() const currentLanguage = useLang()
const { toggleDropdown, openDropdown } = useDropdownStore() const {
toggleDropdown,
isFooterLanguageSwitcherOpen,
isHeaderLanguageSwitcherOpen,
} = useDropdownStore()
const position = type === "footer" ? "footer" : "header" const position = type === "footer" ? "footer" : "header"
const color = type === "footer" ? "pale" : "burgundy" const color = type === "footer" ? "pale" : "burgundy"
const dropdownType = { const dropdownType = {
footer: DropdownType.FooterLanguage, footer: DropdownTypeEnum.FooterLanguageSwitcher,
desktopHeader: DropdownType.HeaderLanguage, desktopHeader: DropdownTypeEnum.HeaderLanguageSwitcher,
mobileHeader: DropdownType.HeaderLanguageMobile, mobileHeader: DropdownTypeEnum.HeaderLanguageSwitcherMobile,
}[type] }[type]
const isLanguageSwitcherOpen = openDropdown === dropdownType const isLanguageSwitcherOpen =
(type === "footer" && isFooterLanguageSwitcherOpen) ||
(type !== "footer" && isHeaderLanguageSwitcherOpen)
useHandleKeyUp((event: KeyboardEvent) => { useHandleKeyUp((event: KeyboardEvent) => {
if (event.key === "Escape" && isLanguageSwitcherOpen) { if (event.key === "Escape" && isLanguageSwitcherOpen) {

43
stores/main-menu.ts
View File

@@ -1,16 +1,43 @@
import { create } from "zustand" import { create } from "zustand"
import { import type {
type DropdownState, DropdownState,
DropdownType, DropdownType,
} from "@/types/components/dropdown/dropdown" } from "@/types/components/dropdown/dropdown"
const useDropdownStore = create<DropdownState>((set) => ({ // TODO: When MyPagesMobileMenu is removed, also remove the
openDropdown: null, // isMyPagesMobileMenuOpen state
toggleDropdown: (dropdown: DropdownType) =>
set((state) => ({ const useDropdownStore = create<
openDropdown: state.openDropdown === dropdown ? null : dropdown, 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 export default useDropdownStore

31
types/components/dropdown/dropdown.ts
View File

@@ -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 { export interface DropdownState {
openDropdown: DropdownType | null isHamburgerMenuOpen: boolean
toggleDropdown: (dropdown: DropdownType) => void 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}`