From a81f641ccd936d0006c87e517235dc83c26bf39f Mon Sep 17 00:00:00 2001 From: Arvid Norlin Date: Tue, 30 Apr 2024 14:48:20 +0200 Subject: [PATCH] refactor: make my-pages page more reusable --- .../my-pages/benefits/_constants.ts | 5 --- .../my-pages/benefits/page.module.css | 45 ------------------- .../(protected)/my-pages/benefits/page.tsx | 20 --------- .../(protected)/my-pages/overview/error.tsx | 8 ---- .../(protected)/my-pages/overview/page.tsx | 22 --------- .../my-pages/{overview => }/page.module.css | 0 .../(live)/(protected)/my-pages/page.tsx | 34 ++++++++++++-- middlewares/authRequired.ts | 13 ++++++ .../contentstack/accountPage/output.ts | 34 +------------- 9 files changed, 44 insertions(+), 137 deletions(-) delete mode 100644 app/[lang]/(live)/(protected)/my-pages/benefits/_constants.ts delete mode 100644 app/[lang]/(live)/(protected)/my-pages/benefits/page.module.css delete mode 100644 app/[lang]/(live)/(protected)/my-pages/benefits/page.tsx delete mode 100644 app/[lang]/(live)/(protected)/my-pages/overview/error.tsx delete mode 100644 app/[lang]/(live)/(protected)/my-pages/overview/page.tsx rename app/[lang]/(live)/(protected)/my-pages/{overview => }/page.module.css (100%) diff --git a/app/[lang]/(live)/(protected)/my-pages/benefits/_constants.ts b/app/[lang]/(live)/(protected)/my-pages/benefits/_constants.ts deleted file mode 100644 index a096641c0..000000000 --- a/app/[lang]/(live)/(protected)/my-pages/benefits/_constants.ts +++ /dev/null @@ -1,5 +0,0 @@ -export const shortcuts = [ - { url: "#", title: "Member prices on hotel nights" }, - { url: "#", title: "Great deals from our partners" }, - { url: "#", title: "A special gift on your birthday" }, -] diff --git a/app/[lang]/(live)/(protected)/my-pages/benefits/page.module.css b/app/[lang]/(live)/(protected)/my-pages/benefits/page.module.css deleted file mode 100644 index dc1c040f8..000000000 --- a/app/[lang]/(live)/(protected)/my-pages/benefits/page.module.css +++ /dev/null @@ -1,45 +0,0 @@ -.container { - display: flex; - gap: 4.2rem; - flex-direction: column; - max-width: var(--max-width); - padding-left: 2rem; - padding-right: 2rem; -} - -.header { - display: grid; - gap: 2rem; - padding-top: 4rem; -} - -.title { - font-weight: 600; -} - -.red { - color: var(--some-red-color, #ed2027); -} - -.preamble { - font-weight: 400; - font-family: var(--fira-sans); - font-size: var(--typography-Subtitle-Mobile-fontSize, 18px); - margin: 0; -} - -@media screen and (min-width: 950px) { - .header { - padding: 0; - } - - .container { - padding-left: 0; - padding-right: 0; - gap: 6.4rem; - } - - .preamble { - font-size: var(--typography-Subtitle-Desktop-fontSize, 18px); - } -} diff --git a/app/[lang]/(live)/(protected)/my-pages/benefits/page.tsx b/app/[lang]/(live)/(protected)/my-pages/benefits/page.tsx deleted file mode 100644 index 237b7a377..000000000 --- a/app/[lang]/(live)/(protected)/my-pages/benefits/page.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import { serverClient } from "@/lib/trpc/server" - -import Content from "@/components/MyPages/AccountPage/Content" - -import styles from "./page.module.css" - -import type { LangParams, PageArgs } from "@/types/params" - -export default async function BenefitsPage({ params }: PageArgs) { - const accountPage = await serverClient().contentstack.accountPage.get({ - url: "/my-pages/benefits", - lang: params.lang, - }) - - return ( -
- -
- ) -} diff --git a/app/[lang]/(live)/(protected)/my-pages/overview/error.tsx b/app/[lang]/(live)/(protected)/my-pages/overview/error.tsx deleted file mode 100644 index 131424d0b..000000000 --- a/app/[lang]/(live)/(protected)/my-pages/overview/error.tsx +++ /dev/null @@ -1,8 +0,0 @@ -"use client" - -import type { ErrorPage } from "@/types/next/error" - -export default function MyPageOverviewError({ error }: ErrorPage) { - console.error(error) - return

Error happened, overview

-} diff --git a/app/[lang]/(live)/(protected)/my-pages/overview/page.tsx b/app/[lang]/(live)/(protected)/my-pages/overview/page.tsx deleted file mode 100644 index a9b7f26e0..000000000 --- a/app/[lang]/(live)/(protected)/my-pages/overview/page.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import { _ } from "@/lib/translation" -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 } from "@/types/params" - -export default async function MyPageOverview({ params }: PageArgs) { - const accountPage = await serverClient().contentstack.accountPage.get({ - url: "/my-pages/overview", - lang: params.lang, - }) - - return ( - - - - ) -} diff --git a/app/[lang]/(live)/(protected)/my-pages/overview/page.module.css b/app/[lang]/(live)/(protected)/my-pages/page.module.css similarity index 100% rename from app/[lang]/(live)/(protected)/my-pages/overview/page.module.css rename to app/[lang]/(live)/(protected)/my-pages/page.module.css diff --git a/app/[lang]/(live)/(protected)/my-pages/page.tsx b/app/[lang]/(live)/(protected)/my-pages/page.tsx index 72c90152b..ce3c31901 100644 --- a/app/[lang]/(live)/(protected)/my-pages/page.tsx +++ b/app/[lang]/(live)/(protected)/my-pages/page.tsx @@ -1,9 +1,35 @@ import { redirect } from "next/navigation" -import { overview } from "@/constants/routes/myPages" +import { myPages, overview } from "@/constants/routes/myPages" +import { serverClient } from "@/lib/trpc/server" -import type { LangParams, PageArgs } from "@/types/params" +import MaxWidth from "@/components/MaxWidth" +import Content from "@/components/MyPages/AccountPage/Content" -export default function MyPages({ params }: PageArgs) { - redirect(overview[params.lang]) +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 myPagesRoot = myPages[params.lang].replace(`/${params.lang}`, "") + if (searchParams.uri === myPagesRoot) { + redirect(overview[params.lang]) + } + const accountPage = await serverClient().contentstack.accountPage.get({ + url: searchParams.uri, + lang: params.lang, + }) + + return ( + + + + ) } diff --git a/middlewares/authRequired.ts b/middlewares/authRequired.ts index 2e5c5fde2..0e7c98e3c 100644 --- a/middlewares/authRequired.ts +++ b/middlewares/authRequired.ts @@ -3,6 +3,7 @@ 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 } from "@/constants/routes/myPages" import { auth } from "@/auth" @@ -42,6 +43,18 @@ 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]] + + 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/server/routers/contentstack/accountPage/output.ts b/server/routers/contentstack/accountPage/output.ts index 65df04bb4..f64077aaf 100644 --- a/server/routers/contentstack/accountPage/output.ts +++ b/server/routers/contentstack/accountPage/output.ts @@ -69,15 +69,6 @@ const accountPageDynamicContent = z.object({ }), }) -// To validate the JSON content -// https://zod.dev/?id=json-type -const literalSchema = z.union([z.string(), z.number(), z.boolean(), z.null()]) -type Literal = z.infer -type Json = Literal | { [key: string]: Json } | Json[] -const jsonSchema: z.ZodType = z.lazy(() => - z.union([literalSchema, z.array(jsonSchema), z.record(jsonSchema)]) -) - const accountPageTextContent = z.object({ __typename: z.literal(ContentEntries.AccountPageContentTextContent), text_content: z.object({ @@ -126,30 +117,7 @@ export const validateAccountPageSchema = z.object({ }), }) -export const validateAccountPageOverviewSchema = z.object({ - all_account_page: z.object({ - items: z.array( - z.object({ - url: z.string(), - title: z.string(), - content: z.array(accountPageContentItem), - }) - ), - }), -}) -export const validateAccountPageBenefitsSchema = z.object({ - all_account_page: z.object({ - items: z.array( - z.object({ - url: z.string(), - title: z.string(), - content: z.array(z.object({})), - }) - ), - }), -}) - -type AccountPageDataRaw = z.infer +type AccountPageDataRaw = z.infer type AccountPageRaw = AccountPageDataRaw["all_account_page"]["items"][0]