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

fix: rewriting rules for my-pages

Browse Source
This commit is contained in:
Michael Zetterberg
2024-05-16 15:22:39 +02:00
parent f1682b5a15
commit 5e3041a73a
18 changed files with 150 additions and 282 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
app/[lang]/(live)/(protected)/my-pages/@breadcrumbs/benefits/default.tsx
View File

@@ -1,3 +0,0 @@
export default function Default() {
return null
}

17
app/[lang]/(live)/(protected)/my-pages/@breadcrumbs/benefits/page.tsx
View File

@@ -1,17 +0,0 @@
import { benefits } from "@/constants/routes/myPages"
import { serverClient } from "@/lib/trpc/server"
import Breadcrumbs from "@/components/MyPages/Breadcrumbs"
import type { LangParams, PageArgs } from "@/types/params"
export default async function BenefitsBreadcrumbs({
params,
}: PageArgs<LangParams>) {
const href = benefits[params.lang].replace(`/${params.lang}`, "")
const breadcrumbs = await serverClient().contentstack.breadcrumbs.get({
href,
locale: params.lang,
})
return <Breadcrumbs breadcrumbs={breadcrumbs} />
}

3
app/[lang]/(live)/(protected)/my-pages/@breadcrumbs/default.tsx
View File

@@ -1,3 +0,0 @@
export default function Default() {
return null
}

3
app/[lang]/(live)/(protected)/my-pages/@breadcrumbs/overview/default.tsx
View File

@@ -1,3 +0,0 @@
export default function Default() {
return null
}

17
app/[lang]/(live)/(protected)/my-pages/@breadcrumbs/overview/page.tsx
View File

@@ -1,17 +0,0 @@
import { overview } from "@/constants/routes/myPages"
import { serverClient } from "@/lib/trpc/server"
import Breadcrumbs from "@/components/MyPages/Breadcrumbs"
import type { LangParams, PageArgs } from "@/types/params"
export default async function OverviewBreadcrumbs({
params,
}: PageArgs<LangParams>) {
const href = overview[params.lang].replace(`/${params.lang}`, "")
const breadcrumbs = await serverClient().contentstack.breadcrumbs.get({
href,
locale: params.lang,
})
return <Breadcrumbs breadcrumbs={breadcrumbs} />
}

17
app/[lang]/(live)/(protected)/my-pages/@breadcrumbs/profile/[...catchAll]/page.tsx
View File

@@ -1,17 +0,0 @@
import { profile } from "@/constants/routes/myPages"
import { serverClient } from "@/lib/trpc/server"
import Breadcrumbs from "@/components/MyPages/Breadcrumbs"
import type { LangParams, PageArgs } from "@/types/params"
export default async function ProfileBreadcrumbs({
params,
}: PageArgs<LangParams>) {
const href = profile[params.lang].replace(`/${params.lang}`, "")
const breadcrumbs = await serverClient().contentstack.breadcrumbs.get({
href,
locale: params.lang,
})
return <Breadcrumbs breadcrumbs={breadcrumbs} />
}

17
app/[lang]/(live)/(protected)/my-pages/@breadcrumbs/profile/page.tsx
View File

@@ -1,17 +0,0 @@
import { profile } from "@/constants/routes/myPages"
import { serverClient } from "@/lib/trpc/server"
import Breadcrumbs from "@/components/MyPages/Breadcrumbs"
import type { LangParams, PageArgs } from "@/types/params"
export default async function ProfileBreadcrumbs({
params,
}: PageArgs<LangParams>) {
const href = profile[params.lang].replace(`/${params.lang}`, "")
const breadcrumbs = await serverClient().contentstack.breadcrumbs.get({
href,
locale: params.lang,
})
return <Breadcrumbs breadcrumbs={breadcrumbs} />
}

3
app/[lang]/(live)/(protected)/my-pages/@breadcrumbs/stays/default.tsx
View File

@@ -1,3 +0,0 @@
export default function Default() {
return null
}

17
app/[lang]/(live)/(protected)/my-pages/@breadcrumbs/stays/page.tsx
View File

@@ -1,17 +0,0 @@
import { stays } from "@/constants/routes/myPages"
import { serverClient } from "@/lib/trpc/server"
import Breadcrumbs from "@/components/MyPages/Breadcrumbs"
import type { LangParams, PageArgs } from "@/types/params"
export default async function StaysBreadcrumbs({
params,
}: PageArgs<LangParams>) {
const href = stays[params.lang].replace(`/${params.lang}`, "")
const breadcrumbs = await serverClient().contentstack.breadcrumbs.get({
href,
locale: params.lang,
})
return <Breadcrumbs breadcrumbs={breadcrumbs} />
}

34
app/[lang]/(live)/(protected)/my-pages/[...path]/page.module.css Normal file
View File

@@ -0,0 +1,34 @@
.content {
display: grid;
padding-bottom: 7.7rem;
padding-left: 0;
padding-right: 0;
position: relative;
}
@media screen and (min-width: 950px) {
.content {
gap: 10rem;
grid-template-columns: 25rem 1fr;
padding-bottom: 17.5rem;
padding-left: 2.4rem;
padding-right: 2.4rem;
padding-top: 5.8rem;
}
}
.blocks {
display: grid;
gap: 4.2rem;
padding-top: 4rem;
padding-left: 1.6rem;
padding-right: 1.6rem;
}
@media screen and (min-width: 950px) {
.blocks {
gap: 6.4rem;
padding-left: 0;
padding-right: 0;
}
}

45
app/[lang]/(live)/(protected)/my-pages/[...path]/page.tsx Normal file
View File

@@ -0,0 +1,45 @@
import { myPages } from "@/constants/routes/myPages"
import { serverClient } from "@/lib/trpc/server"
import MaxWidth from "@/components/MaxWidth"
import Content from "@/components/MyPages/AccountPage/Content"
import Breadcrumbs from "@/components/MyPages/Breadcrumbs"
import Sidebar from "@/components/MyPages/Sidebar"
import styles from "./page.module.css"
import type { LangParams, PageArgs } from "@/types/params"
export default async function MyPages({
params,
}: PageArgs<LangParams & { path: string[] }>) {
const baseUrl = myPages[params.lang].replace(`/${params.lang}`, "")
const pathUrl = params.path.join("/")
const accountPage = await serverClient().contentstack.accountPage.get({
url: `${baseUrl}/${pathUrl}`,
lang: params.lang,
})
const breadcrumbs = await serverClient().contentstack.breadcrumbs.get({
href: `${baseUrl}/${pathUrl}`,
locale: params.lang,
})
return (
<>
<Breadcrumbs breadcrumbs={breadcrumbs} />
<div className={styles.content}>
<Sidebar lang={params.lang} />
<MaxWidth className={styles.blocks} tag="main">
{accountPage.content.length ? (
<Content lang={params.lang} content={accountPage.content} />
) : (
<p>No content published</p>
)}
</MaxWidth>
</div>
</>
)
}

19
app/[lang]/(live)/(protected)/my-pages/layout.module.css
View File

@@ -7,22 +7,3 @@
grid-template-rows: var(--header-height) auto 1fr;
min-height: 100dvh;
}
.content {
display: grid;
padding-bottom: 7.7rem;
padding-left: 0;
padding-right: 0;
position: relative;
}
@media screen and (min-width: 950px) {
.content {
gap: 10rem;
grid-template-columns: 25rem 1fr;
padding-bottom: 17.5rem;
padding-left: 2.4rem;
padding-right: 2.4rem;
padding-top: 5.8rem;
}
}

8
app/[lang]/(live)/(protected)/my-pages/layout.tsx
View File

@@ -1,13 +1,11 @@
import { firaMono, firaSans } from "@/app/[lang]/(live)/fonts"
import Header from "@/components/MyPages/Header"
import Sidebar from "@/components/MyPages/Sidebar"
import styles from "./layout.module.css"
import type { MyPagesLayoutProps } from "@/types/components/myPages/layout"
export default async function MyPagesLayout({
breadcrumbs,
children,
params,
}: React.PropsWithChildren<MyPagesLayoutProps>) {
@@ -16,11 +14,7 @@ export default async function MyPagesLayout({
className={`${firaMono.variable} ${firaSans.variable} ${styles.layout}`}
>
<Header lang={params.lang} />
{breadcrumbs}
<div className={styles.content}>
<Sidebar lang={params.lang} />
{children}
</div>
{children}
</div>
)
}

15
app/[lang]/(live)/(protected)/my-pages/page.module.css
View File

@@ -1,15 +0,0 @@
.blocks {
display: grid;
gap: 4.2rem;
padding-top: 4rem;
padding-left: 1.6rem;
padding-right: 1.6rem;
}
@media screen and (min-width: 950px) {
.blocks {
gap: 6.4rem;
padding-left: 0;
padding-right: 0;
}
}

31
app/[lang]/(live)/(protected)/my-pages/page.tsx
View File

@@ -1,31 +0,0 @@
import { redirect } from "next/navigation"
import { myPages, overview } from "@/constants/routes/myPages"
import { serverClient } from "@/lib/trpc/server"
import MaxWidth from "@/components/MaxWidth"
import Content from "@/components/MyPages/AccountPage/Content"
import styles from "./page.module.css"
import type { LangParams, PageArgs, UriParams } from "@/types/params"
export default async function MyPages({
params,
searchParams,
}: PageArgs<LangParams, UriParams>) {
if (!searchParams.uri) {
throw new Error("Bad URI")
}
const accountPage = await serverClient().contentstack.accountPage.get({
url: searchParams.uri,
lang: params.lang,
})
return (
<MaxWidth className={styles.blocks} tag="main">
<Content lang={params.lang} content={accountPage.content} />
</MaxWidth>
)
}

96
components/MyPages/AccountPage/Content.tsx
View File

@@ -37,57 +37,51 @@ function DynamicComponent({ component, props }: AccountPageContentProps) {
}
export default function Content({ lang, content }: ContentProps) {
return (
<>
{content.map((item) => {
switch (item.__typename) {
case ContentEntries.AccountPageContentDynamicContent:
const link = item.dynamic_content.link.linkConnection.edges.length
? {
href:
item.dynamic_content.link.linkConnection.edges[0].node
.original_url ||
`/${lang}${item.dynamic_content.link.linkConnection.edges[0].node.url}`,
text: item.dynamic_content.link.link_text,
}
: null
const componentProps = {
lang,
title: item.dynamic_content.title,
// TODO: rename preamble to subtitle in Contentstack?
subtitle: item.dynamic_content.preamble,
...(link && { link }),
return content.map((item) => {
switch (item.__typename) {
case ContentEntries.AccountPageContentDynamicContent:
const link = item.dynamic_content.link.linkConnection.edges.length
? {
href:
item.dynamic_content.link.linkConnection.edges[0].node
.original_url ||
`/${lang}${item.dynamic_content.link.linkConnection.edges[0].node.url}`,
text: item.dynamic_content.link.link_text,
}
return (
<DynamicComponent
component={item.dynamic_content.component}
props={componentProps}
/>
)
case ContentEntries.AccountPageContentShortcuts:
return (
<Shortcuts
shortcuts={item.shortcuts.shortcuts}
subtitle={item.shortcuts.preamble}
title={item.shortcuts.title}
/>
)
case ContentEntries.AccountPageContentTextContent:
return (
<section>
<JsonToHtml
embeds={
item.text_content.content.embedded_itemsConnection.edges
}
nodes={item.text_content.content.json.children}
/>
</section>
)
default:
return null
: null
const componentProps = {
lang,
title: item.dynamic_content.title,
// TODO: rename preamble to subtitle in Contentstack?
subtitle: item.dynamic_content.preamble,
...(link && { link }),
}
})}
</>
)
return (
<DynamicComponent
component={item.dynamic_content.component}
props={componentProps}
/>
)
case ContentEntries.AccountPageContentShortcuts:
return (
<Shortcuts
shortcuts={item.shortcuts.shortcuts}
subtitle={item.shortcuts.preamble}
title={item.shortcuts.title}
/>
)
case ContentEntries.AccountPageContentTextContent:
return (
<section>
<JsonToHtml
embeds={item.text_content.content.embedded_itemsConnection.edges}
nodes={item.text_content.content.json.children}
/>
</section>
)
default:
return null
}
})
}

18
middlewares/authRequired.ts
View File

@@ -3,7 +3,6 @@ import { NextResponse } from "next/server"
import { findLang } from "@/constants/languages"
import { authRequired } from "@/constants/routes/authRequired"
import { login } from "@/constants/routes/handleAuth"
import { benefits, myPages, overview, stays } from "@/constants/routes/myPages"
import { auth } from "@/auth"
@@ -43,23 +42,6 @@ export const middleware = auth(async (request) => {
const isLoggedIn = !!request.auth
if (isLoggedIn) {
const pathNameWithoutLang = nextUrl.pathname.replace(`/${lang}`, "")
// Temp fix until we have a better solution for identifying AccountPage type
const accountPagePaths = [
myPages[lang],
overview[lang],
benefits[lang],
stays[lang],
]
if (accountPagePaths.includes(nextUrl.pathname)) {
const searchParams = new URLSearchParams(request.nextUrl.searchParams)
searchParams.set("uri", pathNameWithoutLang)
return NextResponse.rewrite(
new URL(`/${lang}/my-pages?${searchParams.toString()}`, nextUrl)
)
}
return NextResponse.next()
}

69
next.config.js
View File

@@ -84,6 +84,11 @@ const nextConfig = {
destination: overview.de,
permanent: false,
},
{
source: myPages.en,
destination: overview.en,
permanent: false,
},
{
source: myPages.fi,
destination: overview.fi,
@@ -104,56 +109,32 @@ const nextConfig = {
rewrites() {
return {
beforeFiles: [
{
source: benefits.da,
destination: "/da/my-pages/benefits",
},
{
source: benefits.de,
destination: "/de/my-pages/benefits",
},
{
source: benefits.fi,
destination: "/fi/my-pages/benefits",
},
{
source: benefits.no,
destination: "/no/my-pages/benefits",
},
{
source: benefits.sv,
destination: "/sv/my-pages/benefits",
},
{ source: login.da, destination: "/da/login" },
{ source: login.de, destination: "/de/login" },
{ source: login.fi, destination: "/fi/login" },
{ source: login.no, destination: "/no/login" },
{ source: login.sv, destination: "/sv/login" },
{ source: overview.da, destination: "/da/my-pages/overview" },
{ source: overview.de, destination: "/de/my-pages/overview" },
{ source: overview.fi, destination: "/fi/my-pages/overview" },
{ source: overview.no, destination: "/no/my-pages/overview" },
{ source: overview.sv, destination: "/sv/my-pages/overview" },
{ source: profile.da, destination: "/da/my-pages/profile" },
{ source: profile.de, destination: "/de/my-pages/profile" },
{ source: profile.fi, destination: "/fi/my-pages/profile" },
{ source: profile.no, destination: "/no/my-pages/profile" },
{ source: profile.sv, destination: "/sv/my-pages/profile" },
{ source: profileEdit.da, destination: "/da/my-pages/profile/edit" },
{ source: profileEdit.de, destination: "/de/my-pages/profile/edit" },
{ source: profileEdit.fi, destination: "/fi/my-pages/profile/edit" },
{ source: profileEdit.no, destination: "/no/my-pages/profile/edit" },
{ source: profileEdit.sv, destination: "/sv/my-pages/profile/edit" },
{ source: stays.da, destination: "/da/my-pages/stays" },
{ source: stays.de, destination: "/de/my-pages/stays" },
{ source: stays.fi, destination: "/fi/my-pages/stays" },
{ source: stays.no, destination: "/no/my-pages/stays" },
{ source: stays.sv, destination: "/sv/my-pages/stays" },
{
source: `${myPages.da}/:path*`,
destination: `/da/my-pages/:path*`,
},
{
source: `${myPages.de}/:path*`,
destination: `/de/my-pages/:path*`,
},
{
source: `${myPages.fi}/:path*`,
destination: `/fi/my-pages/:path*`,
},
{
source: `${myPages.no}/:path*`,
destination: `/no/my-pages/:path*`,
},
{
source: `${myPages.sv}/:path*`,
destination: `/sv/my-pages/:path*`,
},
],
}
},