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

Break into smaller components

Browse Source
This commit is contained in:
Linus Flood
2024-09-13 12:00:31 +02:00
parent a640fd057e
commit e8b5ec544e
17 changed files with 154 additions and 153 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
app/[lang]/(live)/@languageSwitcher/[...paths]/page.tsx → app/[lang]/(live)/@header/[...paths]/page.tsx
View File

0
app/[lang]/(live)/@languageSwitcher/[contentType]/[uid]/page.tsx → app/[lang]/(live)/@header/[contentType]/[uid]/page.tsx
View File

0
app/[lang]/(live)/@languageSwitcher/default.tsx → app/[lang]/(live)/@header/default.tsx
View File

0
app/[lang]/(live)/@languageSwitcher/my-pages/[...path]/page.tsx → app/[lang]/(live)/@header/my-pages/[...path]/page.tsx
View File

10
app/[lang]/(live)/@header/page.tsx Normal file
View File

@@ -0,0 +1,10 @@
import Header from "@/components/Header"
import { setLang } from "@/i18n/serverContext"
import { LangParams, PageArgs } from "@/types/params"
export default async function HeaderPage({ params }: PageArgs<LangParams>) {
setLang(params.lang)
return <Header />
}

17
app/[lang]/(live)/@languageSwitcher/page.tsx
View File

@@ -1,17 +0,0 @@
import { Suspense } from "react"
import { serverClient } from "@/lib/trpc/server"
import LanguageSwitcher from "@/components/LanguageSwitcher"
import { setLang } from "@/i18n/serverContext"
import { LangParams, PageArgs } from "@/types/params"
export default async function HeaderPage({ params }: PageArgs<LangParams>) {
setLang(params.lang)
const languages = await serverClient().contentstack.languageSwitcher.get()
if (!languages) {
return null
}
return <LanguageSwitcher type="desktopHeader" urls={languages.urls} />
}

12
app/[lang]/(live)/layout.tsx
View File

@@ -23,11 +23,11 @@ import type { LangParams, LayoutArgs } from "@/types/params"
export default async function RootLayout({ export default async function RootLayout({
children, children,
params, params,
languageSwitcher, header,
bookingwidget, bookingwidget,
}: React.PropsWithChildren< }: React.PropsWithChildren<
LayoutArgs<LangParams> & { LayoutArgs<LangParams> & {
languageSwitcher: React.ReactNode header: React.ReactNode
bookingwidget: React.ReactNode bookingwidget: React.ReactNode
} }
>) { >) {
@@ -56,13 +56,13 @@ export default async function RootLayout({
<body> <body>
<ServerIntlProvider intl={{ defaultLocale, locale, messages }}> <ServerIntlProvider intl={{ defaultLocale, locale, messages }}>
<TrpcProvider> <TrpcProvider>
<Suspense fallback={<LoadingSpinner />}> {header}
<Header languageSwitcher={languageSwitcher} />
</Suspense>
{bookingwidget} {bookingwidget}
{children} {children}
<ToastHandler /> <ToastHandler />
<Footer /> <Suspense fallback={<LoadingSpinner />}>
<Footer />
</Suspense>
<TokenRefresher /> <TokenRefresher />
</TrpcProvider> </TrpcProvider>
</ServerIntlProvider> </ServerIntlProvider>

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

@@ -18,11 +18,7 @@ import styles from "./mobileMenu.module.css"
import { DropdownTypeEnum } 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({ languageUrls, topLink }: MobileMenuProps) {
menuItems,
languageUrls,
topLink,
}: MobileMenuProps) {
const intl = useIntl() const intl = useIntl()
const { const {
handleHamburgerClick, handleHamburgerClick,
@@ -66,7 +62,7 @@ export default function MobileMenu({
className={styles.dialog} className={styles.dialog}
aria-label={intl.formatMessage({ id: "Menu" })} aria-label={intl.formatMessage({ id: "Menu" })}
> >
<NavigationMenu isMobile={true} items={menuItems} /> <NavigationMenu isMobile={true} />
<footer className={styles.footer}> <footer className={styles.footer}>
<HeaderLink href="#"> <HeaderLink href="#">
<SearchIcon width={20} height={20} color="burgundy" /> <SearchIcon width={20} height={20} color="burgundy" />

24
components/Header/MainMenu/NavigationMenu/NavigationMenuList/index.tsx Normal file
View File

@@ -0,0 +1,24 @@
"use client"
import NavigationMenuItem from "../NavigationMenuItem"
import styles from "../navigationMenu.module.css"
export default function NavigationMenuList({
isMobile,
items,
}: {
isMobile: boolean
items: any
}) {
return (
<ul
className={`${styles.navigationMenu} ${isMobile ? styles.mobile : styles.desktop}`}
>
{items.map((item: any) => (
<li key={item.title} className={styles.item}>
<NavigationMenuItem isMobile={isMobile} item={item} />
</li>
))}
</ul>
)
}

26
components/Header/MainMenu/NavigationMenu/index.tsx
View File

@@ -1,30 +1,22 @@
import NavigationMenuItem from "./NavigationMenuItem" "use server"
import { serverClient } from "@/lib/trpc/server"
import styles from "./navigationMenu.module.css" import NavigationMenuList from "./NavigationMenuList"
import type { NavigationMenuProps } from "@/types/components/header/navigationMenu" import type { NavigationMenuProps } from "@/types/components/header/navigationMenu"
export default function NavigationMenu({ export default async function NavigationMenu({
items,
isMobile, isMobile,
}: NavigationMenuProps) { }: NavigationMenuProps) {
const filteredItems = items.filter( const headerData = await serverClient().contentstack.base.header()
const filteredItems = headerData?.menuItems.filter(
({ link, submenu }) => submenu.length || link ({ link, submenu }) => submenu.length || link
) )
if (!filteredItems.length) { if (!filteredItems?.length) {
return null return null
} }
return ( return <NavigationMenuList isMobile={isMobile} items={filteredItems} />
<ul
className={`${styles.navigationMenu} ${isMobile ? styles.mobile : styles.desktop}`}
>
{filteredItems.map((item) => (
<li key={item.title} className={styles.item}>
<NavigationMenuItem isMobile={isMobile} item={item} />
</li>
))}
</ul>
)
} }

131
components/Header/MainMenu/index.tsx
View File

@@ -1,4 +1,5 @@
import NextLink from "next/link" import NextLink from "next/link"
import { Suspense } from "react"
import { myPages } from "@/constants/routes/myPages" import { myPages } from "@/constants/routes/myPages"
import { serverClient } from "@/lib/trpc/server" import { serverClient } from "@/lib/trpc/server"
@@ -18,13 +19,46 @@ import styles from "./mainMenu.module.css"
import type { MainMenuProps } from "@/types/components/header/mainMenu" import type { MainMenuProps } from "@/types/components/header/mainMenu"
export default async function MainMenu({ export default async function MainMenu({}: MainMenuProps) {
languageUrls,
menuItems,
topLink,
}: MainMenuProps) {
const lang = getLang() const lang = getLang()
const intl = await getIntl()
return (
<div className={styles.mainMenu}>
<nav className={styles.nav}>
<NextLink className={styles.logoLink} href={`/${lang}`}>
<Suspense>
<Image
alt={intl.formatMessage({ id: "Back to scandichotels.com" })}
className={styles.logo}
data-js="scandiclogoimg"
data-nosvgsrc="/_static/img/scandic-logotype.png"
itemProp="logo"
height={22}
src="/_static/img/scandic-logotype.svg"
width={103}
/>
</Suspense>
</NextLink>
<div className={styles.menus}>
<Suspense fallback={"Loading nav"}>
<NavigationMenu isMobile={false} />
</Suspense>
<Suspense fallback={"Loading profile"}>
<MyPagesMenuServer />
</Suspense>
<Suspense fallback={"Loading menu"}>
<MobileMenuServer />
</Suspense>
</div>
</nav>
</div>
)
}
async function MyPagesMenuServer({}) {
const lang = getLang()
const [intl, myPagesNavigation, user, membership] = await Promise.all([ const [intl, myPagesNavigation, user, membership] = await Promise.all([
getIntl(), getIntl(),
serverClient().contentstack.myPages.navigation.get(), serverClient().contentstack.myPages.navigation.get(),
@@ -33,54 +67,47 @@ export default async function MainMenu({
]) ])
return ( return (
<div className={styles.mainMenu}> <>
<nav className={styles.nav}> {user ? (
<NextLink className={styles.logoLink} href={`/${lang}`}> <>
<Image <MyPagesMenu
alt={intl.formatMessage({ id: "Back to scandichotels.com" })} membership={membership}
className={styles.logo} navigation={myPagesNavigation}
data-js="scandiclogoimg" user={user}
data-nosvgsrc="/_static/img/scandic-logotype.png"
itemProp="logo"
height={22}
src="/_static/img/scandic-logotype.svg"
width={103}
/> />
</NextLink> <MyPagesMobileMenu
<div className={styles.menus}> membership={membership}
<NavigationMenu items={menuItems} isMobile={false} /> navigation={myPagesNavigation}
{user ? ( user={user}
<>
<MyPagesMenu
membership={membership}
navigation={myPagesNavigation}
user={user}
/>
<MyPagesMobileMenu
membership={membership}
navigation={myPagesNavigation}
user={user}
/>
</>
) : (
<Link
href={myPages[lang]}
className={styles.loginLink}
aria-label={intl.formatMessage({ id: "Log in/Join" })}
>
<Avatar />
<span className={styles.userName}>
{intl.formatMessage({ id: "Log in/Join" })}
</span>
</Link>
)}
<MobileMenu
languageUrls={languageUrls}
menuItems={menuItems}
topLink={topLink}
/> />
</div> </>
</nav> ) : (
</div> <Link
href={myPages[lang]}
className={styles.loginLink}
aria-label={intl.formatMessage({ id: "Log in/Join" })}
>
<Avatar />
<span className={styles.userName}>
{intl.formatMessage({ id: "Log in/Join" })}
</span>
</Link>
)}
</>
)
}
async function MobileMenuServer({}) {
const [languages, headerData] = await Promise.all([
serverClient().contentstack.languageSwitcher.get(),
serverClient().contentstack.base.header(),
])
if (!languages || !headerData) {
return null
}
return (
<MobileMenu languageUrls={languages.urls} topLink={headerData?.topLink} />
) )
} }

25
components/Header/TopMenu/index.tsx
View File

@@ -1,5 +1,7 @@
import { Suspense } from "react" import { Suspense } from "react"
import { serverClient } from "@/lib/trpc/server"
import { GiftIcon, SearchIcon } from "@/components/Icons" import { GiftIcon, SearchIcon } from "@/components/Icons"
import LanguageSwitcher from "@/components/LanguageSwitcher" import LanguageSwitcher from "@/components/LanguageSwitcher"
import { getIntl } from "@/i18n" import { getIntl } from "@/i18n"
@@ -10,23 +12,28 @@ import styles from "./topMenu.module.css"
import type { TopMenuProps } from "@/types/components/header/topMenu" import type { TopMenuProps } from "@/types/components/header/topMenu"
export default async function TopMenu({ export default async function TopMenu({}: TopMenuProps) {
languageSwitcher, const [intl, languages, headerData] = await Promise.all([
topLink, getIntl(),
}: TopMenuProps) { serverClient().contentstack.languageSwitcher.get(),
const intl = await getIntl() serverClient().contentstack.base.header(),
])
if (!languages || !headerData) {
return null
}
return ( return (
<div className={styles.topMenu}> <div className={styles.topMenu}>
<div className={styles.content}> <div className={styles.content}>
{topLink ? ( {headerData.topLink ? (
<HeaderLink className={styles.topLink} href={topLink.href}> <HeaderLink className={styles.topLink} href={headerData.topLink.href}>
<GiftIcon width={20} height={20} color="burgundy" /> <GiftIcon width={20} height={20} color="burgundy" />
{topLink.title} {headerData.topLink.title}
</HeaderLink> </HeaderLink>
) : null} ) : null}
<div className={styles.options}> <div className={styles.options}>
{languageSwitcher} <LanguageSwitcher type="desktopHeader" urls={languages.urls} />
<HeaderLink href="#"> <HeaderLink href="#">
<SearchIcon width={20} height={20} color="burgundy" /> <SearchIcon width={20} height={20} color="burgundy" />
{intl.formatMessage({ id: "Find booking" })} {intl.formatMessage({ id: "Find booking" })}

33
components/Header/index.tsx
View File

@@ -1,39 +1,18 @@
import { Suspense } from "react" import { Suspense } from "react"
import { serverClient } from "@/lib/trpc/server"
import LoadingSpinner from "../LoadingSpinner"
import MainMenu from "./MainMenu" import MainMenu from "./MainMenu"
import TopMenu from "./TopMenu" import TopMenu from "./TopMenu"
import styles from "./header.module.css" import styles from "./header.module.css"
export default async function Header({ export default async function Header({}) {
languageSwitcher,
}: {
languageSwitcher: React.ReactNode
}) {
const [languages, headerData] = await Promise.all([
serverClient().contentstack.languageSwitcher.get(),
serverClient().contentstack.base.header(),
])
if (!languages || !headerData) {
return null
}
return ( return (
<header className={styles.header}> <header className={styles.header}>
<Suspense fallback={<LoadingSpinner />}> <Suspense fallback="Loading top menu">
<TopMenu <TopMenu />
languageSwitcher={languageSwitcher} </Suspense>
topLink={headerData.topLink} <Suspense fallback="Loading main menu">
/> <MainMenu />
<MainMenu
languageUrls={languages.urls}
menuItems={headerData.menuItems}
topLink={headerData.topLink}
/>
</Suspense> </Suspense>
</header> </header>
) )

9
types/components/header/mainMenu.ts
View File

@@ -1,8 +1 @@
import type { Header, MenuItem } from "@/types/header" export interface MainMenuProps {}
import type { LanguageSwitcherData } from "@/types/requests/languageSwitcher"
export interface MainMenuProps {
languageUrls: LanguageSwitcherData
menuItems: MenuItem[]
topLink: Header["topLink"]
}

1
types/components/header/mobileMenu.ts
View File

@@ -3,6 +3,5 @@ import type { LanguageSwitcherData } from "@/types/requests/languageSwitcher"
export interface MobileMenuProps { export interface MobileMenuProps {
languageUrls: LanguageSwitcherData languageUrls: LanguageSwitcherData
menuItems: MenuItem[]
topLink: Header["topLink"] topLink: Header["topLink"]
} }

3
types/components/header/navigationMenu.ts
View File

@@ -1,6 +1,3 @@
import type { MenuItem } from "@/types/header"
export interface NavigationMenuProps { export interface NavigationMenuProps {
items: MenuItem[]
isMobile: boolean isMobile: boolean
} }

8
types/components/header/topMenu.ts
View File

@@ -1,7 +1 @@
import type { Header } from "@/types/header" export interface TopMenuProps {}
import type { LanguageSwitcherData } from "@/types/requests/languageSwitcher"
export interface TopMenuProps {
languageSwitcher: React.ReactNode
topLink: Header["topLink"]
}