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

refactor: make my-pages page more reusable

Browse Source
This commit is contained in:
Arvid Norlin
2024-04-30 14:48:20 +02:00
parent a1e474073e
commit a81f641ccd
9 changed files with 44 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
app/[lang]/(live)/(protected)/my-pages/benefits/_constants.ts
View File

@@ -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" },
]

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

@@ -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);
}
}

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

@@ -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<LangParams>) {
const accountPage = await serverClient().contentstack.accountPage.get({
url: "/my-pages/benefits",
lang: params.lang,
})
return (
<main className={styles.container}>
<Content lang={params.lang} content={accountPage.content} />
</main>
)
}

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

@@ -1,8 +0,0 @@
"use client"
import type { ErrorPage } from "@/types/next/error"
export default function MyPageOverviewError({ error }: ErrorPage) {
console.error(error)
return <h1>Error happened, overview</h1>
}

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

@@ -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<LangParams>) {
const accountPage = await serverClient().contentstack.accountPage.get({
url: "/my-pages/overview",
lang: params.lang,
})
return (
<MaxWidth className={styles.blocks} tag="main">
<Content lang={params.lang} content={accountPage.content} />
</MaxWidth>
)
}

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

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

@@ -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<LangParams>) {
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<LangParams, UriParams>) {
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 (
<MaxWidth className={styles.blocks} tag="main">
<Content lang={params.lang} content={accountPage.content} />
</MaxWidth>
)
}

13
middlewares/authRequired.ts
View File

@@ -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()
}

34
server/routers/contentstack/accountPage/output.ts
View File

@@ -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<typeof literalSchema>
type Json = Literal | { [key: string]: Json } | Json[]
const jsonSchema: z.ZodType<Json> = 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<typeof validateAccountPageOverviewSchema>
type AccountPageDataRaw = z.infer<typeof validateAccountPageSchema>
type AccountPageRaw = AccountPageDataRaw["all_account_page"]["items"][0]