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({
children,
params,
languageSwitcher,
header,
bookingwidget,
}: React.PropsWithChildren<
LayoutArgs<LangParams> & {
languageSwitcher: React.ReactNode
header: React.ReactNode
bookingwidget: React.ReactNode
}
>) {
@@ -56,13 +56,13 @@ export default async function RootLayout({
<body>
<ServerIntlProvider intl={{ defaultLocale, locale, messages }}>
<TrpcProvider>
<Suspense fallback={<LoadingSpinner />}>
<Header languageSwitcher={languageSwitcher} />
</Suspense>
{header}
{bookingwidget}
{children}
<ToastHandler />
<Footer />
<Suspense fallback={<LoadingSpinner />}>
<Footer />
</Suspense>
<TokenRefresher />
</TrpcProvider>
</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 type { MobileMenuProps } from "@/types/components/header/mobileMenu"
export default function MobileMenu({
menuItems,
languageUrls,
topLink,
}: MobileMenuProps) {
export default function MobileMenu({ languageUrls, topLink }: MobileMenuProps) {
const intl = useIntl()
const {
handleHamburgerClick,
@@ -66,7 +62,7 @@ export default function MobileMenu({
className={styles.dialog}
aria-label={intl.formatMessage({ id: "Menu" })}
>
<NavigationMenu isMobile={true} items={menuItems} />
<NavigationMenu isMobile={true} />
<footer className={styles.footer}>
<HeaderLink href="#">
<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"
export default function NavigationMenu({
items,
export default async function NavigationMenu({
isMobile,
}: NavigationMenuProps) {
const filteredItems = items.filter(
const headerData = await serverClient().contentstack.base.header()
const filteredItems = headerData?.menuItems.filter(
({ link, submenu }) => submenu.length || link
)
if (!filteredItems.length) {
if (!filteredItems?.length) {
return null
}
return (
<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>
)
return <NavigationMenuList isMobile={isMobile} items={filteredItems} />
}

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

@@ -1,4 +1,5 @@
import NextLink from "next/link"
import { Suspense } from "react"
import { myPages } from "@/constants/routes/myPages"
import { serverClient } from "@/lib/trpc/server"
@@ -18,13 +19,46 @@ import styles from "./mainMenu.module.css"
import type { MainMenuProps } from "@/types/components/header/mainMenu"
export default async function MainMenu({
languageUrls,
menuItems,
topLink,
}: MainMenuProps) {
export default async function MainMenu({}: MainMenuProps) {
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([
getIntl(),
serverClient().contentstack.myPages.navigation.get(),
@@ -33,54 +67,47 @@ export default async function MainMenu({
])
return (
<div className={styles.mainMenu}>
<nav className={styles.nav}>
<NextLink className={styles.logoLink} href={`/${lang}`}>
<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}
<>
{user ? (
<>
<MyPagesMenu
membership={membership}
navigation={myPagesNavigation}
user={user}
/>
</NextLink>
<div className={styles.menus}>
<NavigationMenu items={menuItems} isMobile={false} />
{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}
<MyPagesMobileMenu
membership={membership}
navigation={myPagesNavigation}
user={user}
/>
</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 { serverClient } from "@/lib/trpc/server"
import { GiftIcon, SearchIcon } from "@/components/Icons"
import LanguageSwitcher from "@/components/LanguageSwitcher"
import { getIntl } from "@/i18n"
@@ -10,23 +12,28 @@ import styles from "./topMenu.module.css"
import type { TopMenuProps } from "@/types/components/header/topMenu"
export default async function TopMenu({
languageSwitcher,
topLink,
}: TopMenuProps) {
const intl = await getIntl()
export default async function TopMenu({}: TopMenuProps) {
const [intl, languages, headerData] = await Promise.all([
getIntl(),
serverClient().contentstack.languageSwitcher.get(),
serverClient().contentstack.base.header(),
])
if (!languages || !headerData) {
return null
}
return (
<div className={styles.topMenu}>
<div className={styles.content}>
{topLink ? (
<HeaderLink className={styles.topLink} href={topLink.href}>
{headerData.topLink ? (
<HeaderLink className={styles.topLink} href={headerData.topLink.href}>
<GiftIcon width={20} height={20} color="burgundy" />
{topLink.title}
{headerData.topLink.title}
</HeaderLink>
) : null}
<div className={styles.options}>
{languageSwitcher}
<LanguageSwitcher type="desktopHeader" urls={languages.urls} />
<HeaderLink href="#">
<SearchIcon width={20} height={20} color="burgundy" />
{intl.formatMessage({ id: "Find booking" })}

33
components/Header/index.tsx
View File

@@ -1,39 +1,18 @@
import { Suspense } from "react"
import { serverClient } from "@/lib/trpc/server"
import LoadingSpinner from "../LoadingSpinner"
import MainMenu from "./MainMenu"
import TopMenu from "./TopMenu"
import styles from "./header.module.css"
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
}
export default async function Header({}) {
return (
<header className={styles.header}>
<Suspense fallback={<LoadingSpinner />}>
<TopMenu
languageSwitcher={languageSwitcher}
topLink={headerData.topLink}
/>
<MainMenu
languageUrls={languages.urls}
menuItems={headerData.menuItems}
topLink={headerData.topLink}
/>
<Suspense fallback="Loading top menu">
<TopMenu />
</Suspense>
<Suspense fallback="Loading main menu">
<MainMenu />
</Suspense>
</header>
)

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

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

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

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

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

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

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

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