From 5e3041a73af0239d9cdda8513f243fb9c90c982e Mon Sep 17 00:00:00 2001 From: Michael Zetterberg Date: Thu, 16 May 2024 15:22:39 +0200 Subject: [PATCH] fix: rewriting rules for my-pages --- .../@breadcrumbs/benefits/default.tsx | 3 - .../my-pages/@breadcrumbs/benefits/page.tsx | 17 ---- .../my-pages/@breadcrumbs/default.tsx | 3 - .../@breadcrumbs/overview/default.tsx | 3 - .../my-pages/@breadcrumbs/overview/page.tsx | 17 ---- .../profile/[...catchAll]/page.tsx | 17 ---- .../my-pages/@breadcrumbs/profile/page.tsx | 17 ---- .../my-pages/@breadcrumbs/stays/default.tsx | 3 - .../my-pages/@breadcrumbs/stays/page.tsx | 17 ---- .../my-pages/[...path]/page.module.css | 34 +++++++ .../(protected)/my-pages/[...path]/page.tsx | 45 +++++++++ .../(protected)/my-pages/layout.module.css | 19 ---- .../(live)/(protected)/my-pages/layout.tsx | 8 +- .../(protected)/my-pages/page.module.css | 15 --- .../(live)/(protected)/my-pages/page.tsx | 31 ------ components/MyPages/AccountPage/Content.tsx | 96 +++++++++---------- middlewares/authRequired.ts | 18 ---- next.config.js | 69 +++++-------- 18 files changed, 150 insertions(+), 282 deletions(-) delete mode 100644 app/[lang]/(live)/(protected)/my-pages/@breadcrumbs/benefits/default.tsx delete mode 100644 app/[lang]/(live)/(protected)/my-pages/@breadcrumbs/benefits/page.tsx delete mode 100644 app/[lang]/(live)/(protected)/my-pages/@breadcrumbs/default.tsx delete mode 100644 app/[lang]/(live)/(protected)/my-pages/@breadcrumbs/overview/default.tsx delete mode 100644 app/[lang]/(live)/(protected)/my-pages/@breadcrumbs/overview/page.tsx delete mode 100644 app/[lang]/(live)/(protected)/my-pages/@breadcrumbs/profile/[...catchAll]/page.tsx delete mode 100644 app/[lang]/(live)/(protected)/my-pages/@breadcrumbs/profile/page.tsx delete mode 100644 app/[lang]/(live)/(protected)/my-pages/@breadcrumbs/stays/default.tsx delete mode 100644 app/[lang]/(live)/(protected)/my-pages/@breadcrumbs/stays/page.tsx create mode 100644 app/[lang]/(live)/(protected)/my-pages/[...path]/page.module.css create mode 100644 app/[lang]/(live)/(protected)/my-pages/[...path]/page.tsx delete mode 100644 app/[lang]/(live)/(protected)/my-pages/page.module.css delete mode 100644 app/[lang]/(live)/(protected)/my-pages/page.tsx diff --git a/app/[lang]/(live)/(protected)/my-pages/@breadcrumbs/benefits/default.tsx b/app/[lang]/(live)/(protected)/my-pages/@breadcrumbs/benefits/default.tsx deleted file mode 100644 index 86b9e9a38..000000000 --- a/app/[lang]/(live)/(protected)/my-pages/@breadcrumbs/benefits/default.tsx +++ /dev/null @@ -1,3 +0,0 @@ -export default function Default() { - return null -} diff --git a/app/[lang]/(live)/(protected)/my-pages/@breadcrumbs/benefits/page.tsx b/app/[lang]/(live)/(protected)/my-pages/@breadcrumbs/benefits/page.tsx deleted file mode 100644 index 25acf3e0a..000000000 --- a/app/[lang]/(live)/(protected)/my-pages/@breadcrumbs/benefits/page.tsx +++ /dev/null @@ -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) { - const href = benefits[params.lang].replace(`/${params.lang}`, "") - const breadcrumbs = await serverClient().contentstack.breadcrumbs.get({ - href, - locale: params.lang, - }) - return -} diff --git a/app/[lang]/(live)/(protected)/my-pages/@breadcrumbs/default.tsx b/app/[lang]/(live)/(protected)/my-pages/@breadcrumbs/default.tsx deleted file mode 100644 index 86b9e9a38..000000000 --- a/app/[lang]/(live)/(protected)/my-pages/@breadcrumbs/default.tsx +++ /dev/null @@ -1,3 +0,0 @@ -export default function Default() { - return null -} diff --git a/app/[lang]/(live)/(protected)/my-pages/@breadcrumbs/overview/default.tsx b/app/[lang]/(live)/(protected)/my-pages/@breadcrumbs/overview/default.tsx deleted file mode 100644 index 86b9e9a38..000000000 --- a/app/[lang]/(live)/(protected)/my-pages/@breadcrumbs/overview/default.tsx +++ /dev/null @@ -1,3 +0,0 @@ -export default function Default() { - return null -} diff --git a/app/[lang]/(live)/(protected)/my-pages/@breadcrumbs/overview/page.tsx b/app/[lang]/(live)/(protected)/my-pages/@breadcrumbs/overview/page.tsx deleted file mode 100644 index 203ace024..000000000 --- a/app/[lang]/(live)/(protected)/my-pages/@breadcrumbs/overview/page.tsx +++ /dev/null @@ -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) { - const href = overview[params.lang].replace(`/${params.lang}`, "") - const breadcrumbs = await serverClient().contentstack.breadcrumbs.get({ - href, - locale: params.lang, - }) - return -} diff --git a/app/[lang]/(live)/(protected)/my-pages/@breadcrumbs/profile/[...catchAll]/page.tsx b/app/[lang]/(live)/(protected)/my-pages/@breadcrumbs/profile/[...catchAll]/page.tsx deleted file mode 100644 index 243892846..000000000 --- a/app/[lang]/(live)/(protected)/my-pages/@breadcrumbs/profile/[...catchAll]/page.tsx +++ /dev/null @@ -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) { - const href = profile[params.lang].replace(`/${params.lang}`, "") - const breadcrumbs = await serverClient().contentstack.breadcrumbs.get({ - href, - locale: params.lang, - }) - return -} diff --git a/app/[lang]/(live)/(protected)/my-pages/@breadcrumbs/profile/page.tsx b/app/[lang]/(live)/(protected)/my-pages/@breadcrumbs/profile/page.tsx deleted file mode 100644 index 243892846..000000000 --- a/app/[lang]/(live)/(protected)/my-pages/@breadcrumbs/profile/page.tsx +++ /dev/null @@ -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) { - const href = profile[params.lang].replace(`/${params.lang}`, "") - const breadcrumbs = await serverClient().contentstack.breadcrumbs.get({ - href, - locale: params.lang, - }) - return -} diff --git a/app/[lang]/(live)/(protected)/my-pages/@breadcrumbs/stays/default.tsx b/app/[lang]/(live)/(protected)/my-pages/@breadcrumbs/stays/default.tsx deleted file mode 100644 index 86b9e9a38..000000000 --- a/app/[lang]/(live)/(protected)/my-pages/@breadcrumbs/stays/default.tsx +++ /dev/null @@ -1,3 +0,0 @@ -export default function Default() { - return null -} diff --git a/app/[lang]/(live)/(protected)/my-pages/@breadcrumbs/stays/page.tsx b/app/[lang]/(live)/(protected)/my-pages/@breadcrumbs/stays/page.tsx deleted file mode 100644 index 69a7ccdab..000000000 --- a/app/[lang]/(live)/(protected)/my-pages/@breadcrumbs/stays/page.tsx +++ /dev/null @@ -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) { - const href = stays[params.lang].replace(`/${params.lang}`, "") - const breadcrumbs = await serverClient().contentstack.breadcrumbs.get({ - href, - locale: params.lang, - }) - return -} diff --git a/app/[lang]/(live)/(protected)/my-pages/[...path]/page.module.css b/app/[lang]/(live)/(protected)/my-pages/[...path]/page.module.css new file mode 100644 index 000000000..872aa93d7 --- /dev/null +++ b/app/[lang]/(live)/(protected)/my-pages/[...path]/page.module.css @@ -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; + } +} diff --git a/app/[lang]/(live)/(protected)/my-pages/[...path]/page.tsx b/app/[lang]/(live)/(protected)/my-pages/[...path]/page.tsx new file mode 100644 index 000000000..73beee00f --- /dev/null +++ b/app/[lang]/(live)/(protected)/my-pages/[...path]/page.tsx @@ -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) { + 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 ( + <> + + +
+ + + {accountPage.content.length ? ( + + ) : ( +

No content published

+ )} + +
+ + ) +} diff --git a/app/[lang]/(live)/(protected)/my-pages/layout.module.css b/app/[lang]/(live)/(protected)/my-pages/layout.module.css index 0f59f89b1..a4f9a9f44 100644 --- a/app/[lang]/(live)/(protected)/my-pages/layout.module.css +++ b/app/[lang]/(live)/(protected)/my-pages/layout.module.css @@ -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; - } -} diff --git a/app/[lang]/(live)/(protected)/my-pages/layout.tsx b/app/[lang]/(live)/(protected)/my-pages/layout.tsx index b5e51dd1d..3fae5e673 100644 --- a/app/[lang]/(live)/(protected)/my-pages/layout.tsx +++ b/app/[lang]/(live)/(protected)/my-pages/layout.tsx @@ -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) { @@ -16,11 +14,7 @@ export default async function MyPagesLayout({ className={`${firaMono.variable} ${firaSans.variable} ${styles.layout}`} >
- {breadcrumbs} -
- - {children} -
+ {children} ) } diff --git a/app/[lang]/(live)/(protected)/my-pages/page.module.css b/app/[lang]/(live)/(protected)/my-pages/page.module.css deleted file mode 100644 index dc99df596..000000000 --- a/app/[lang]/(live)/(protected)/my-pages/page.module.css +++ /dev/null @@ -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; - } -} diff --git a/app/[lang]/(live)/(protected)/my-pages/page.tsx b/app/[lang]/(live)/(protected)/my-pages/page.tsx deleted file mode 100644 index c5e0a31ff..000000000 --- a/app/[lang]/(live)/(protected)/my-pages/page.tsx +++ /dev/null @@ -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) { - if (!searchParams.uri) { - throw new Error("Bad URI") - } - - const accountPage = await serverClient().contentstack.accountPage.get({ - url: searchParams.uri, - lang: params.lang, - }) - - return ( - - - - ) -} diff --git a/components/MyPages/AccountPage/Content.tsx b/components/MyPages/AccountPage/Content.tsx index 8f15ef5a7..7afbf55d7 100644 --- a/components/MyPages/AccountPage/Content.tsx +++ b/components/MyPages/AccountPage/Content.tsx @@ -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 ( - - ) - case ContentEntries.AccountPageContentShortcuts: - return ( - - ) - case ContentEntries.AccountPageContentTextContent: - return ( -
- -
- ) - 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 ( + + ) + case ContentEntries.AccountPageContentShortcuts: + return ( + + ) + case ContentEntries.AccountPageContentTextContent: + return ( +
+ +
+ ) + default: + return null + } + }) } diff --git a/middlewares/authRequired.ts b/middlewares/authRequired.ts index 99debb1dc..2e5c5fde2 100644 --- a/middlewares/authRequired.ts +++ b/middlewares/authRequired.ts @@ -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() } diff --git a/next.config.js b/next.config.js index 99b3cf58a..70253a2db 100644 --- a/next.config.js +++ b/next.config.js @@ -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*`, + }, ], } },