From c36578a83f91c9e494290ccc3ea5de6e09150bee Mon Sep 17 00:00:00 2001 From: Christel Westerberg Date: Wed, 22 May 2024 16:46:07 +0200 Subject: [PATCH] Fix: break out pages to dynamic route --- .../webview/[contentType]/[uid]/page.tsx | 26 +++++++++++++++++ app/[lang]/webview/loyalty-page/page.tsx | 25 ---------------- .../ContentType/Webviews/AccountPage.tsx | 13 ++++----- .../ContentType/Webviews/LoyaltyPage.tsx | 29 +++++++++++++++++++ .../Webviews/accountPage.module.css | 0 .../Webviews/loyaltyPage.module.css | 11 +++++-- lib/trpc/server.ts | 4 --- middlewares/webView.ts | 8 ++--- server/context.ts | 7 ----- server/trpc.ts | 2 +- types/params.ts | 4 +++ 11 files changed, 78 insertions(+), 51 deletions(-) create mode 100644 app/[lang]/webview/[contentType]/[uid]/page.tsx delete mode 100644 app/[lang]/webview/loyalty-page/page.tsx rename app/[lang]/webview/my-pages/page.tsx => components/ContentType/Webviews/AccountPage.tsx (56%) create mode 100644 components/ContentType/Webviews/LoyaltyPage.tsx rename app/[lang]/webview/loyalty-page/page.module.css => components/ContentType/Webviews/accountPage.module.css (100%) rename app/[lang]/webview/my-pages/page.module.css => components/ContentType/Webviews/loyaltyPage.module.css (52%) diff --git a/app/[lang]/webview/[contentType]/[uid]/page.tsx b/app/[lang]/webview/[contentType]/[uid]/page.tsx new file mode 100644 index 000000000..8a3fdfe9e --- /dev/null +++ b/app/[lang]/webview/[contentType]/[uid]/page.tsx @@ -0,0 +1,26 @@ +import { notFound } from "next/navigation" + +import AccountPage from "@/components/ContentType/Webviews/AccountPage" +import LoyaltyPage from "@/components/ContentType/Webviews/LoyaltyPage" + +import { + ContentTypeWebviewParams, + LangParams, + PageArgs, + UIDParams, +} from "@/types/params" + +export default async function ContentTypePage({ + params, +}: PageArgs) { + switch (params.contentType) { + case "loyalty-page": + return + case "account-page": + return + default: + const type: never = params.contentType + console.error(`Unsupported content type given: ${type}`) + notFound() + } +} diff --git a/app/[lang]/webview/loyalty-page/page.tsx b/app/[lang]/webview/loyalty-page/page.tsx deleted file mode 100644 index 0a3ca54ea..000000000 --- a/app/[lang]/webview/loyalty-page/page.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import { serverClient } from "@/lib/trpc/server" - -import { Blocks } from "@/components/Loyalty/Blocks/WebView" -import Sidebar from "@/components/Loyalty/Sidebar" -import MaxWidth from "@/components/MaxWidth" -import LinkToOverview from "@/components/Webviews/LinkToOverview" - -import styles from "./page.module.css" - -import { LangParams, PageArgs } from "@/types/params" - -export default async function AboutScandicFriends({ - params, -}: PageArgs) { - const loyaltyPage = await serverClient().contentstack.loyaltyPage.get() - return ( -
- - {loyaltyPage.sidebar ? : null} - - - -
- ) -} diff --git a/app/[lang]/webview/my-pages/page.tsx b/components/ContentType/Webviews/AccountPage.tsx similarity index 56% rename from app/[lang]/webview/my-pages/page.tsx rename to components/ContentType/Webviews/AccountPage.tsx index f6ba45d39..d93b28565 100644 --- a/app/[lang]/webview/my-pages/page.tsx +++ b/components/ContentType/Webviews/AccountPage.tsx @@ -8,20 +8,19 @@ import MaxWidth from "@/components/MaxWidth" import Content from "@/components/MyPages/AccountPage/Webview/Content" import LinkToOverview from "@/components/Webviews/LinkToOverview" -import styles from "./page.module.css" +import styles from "./accountPage.module.css" -import { LangParams, PageArgs } from "@/types/params" +import { LangParams } from "@/types/params" -export default async function MyPages({ params }: PageArgs) { +export default async function MyPages({ lang }: LangParams) { const accountPage = await serverClient().contentstack.accountPage.get() - const linkToOverview = - `/${params.lang}/webview${accountPage.url}` !== overview[params.lang] + const linkToOverview = `/${lang}/webview${accountPage.url}` !== overview[lang] return ( - {linkToOverview ? : null} - + {linkToOverview ? : null} + ) } diff --git a/components/ContentType/Webviews/LoyaltyPage.tsx b/components/ContentType/Webviews/LoyaltyPage.tsx new file mode 100644 index 000000000..12c3e0eb3 --- /dev/null +++ b/components/ContentType/Webviews/LoyaltyPage.tsx @@ -0,0 +1,29 @@ +import { serverClient } from "@/lib/trpc/server" + +import { Blocks } from "@/components/Loyalty/Blocks/WebView" +import Sidebar from "@/components/Loyalty/Sidebar" +import MaxWidth from "@/components/MaxWidth" +import LinkToOverview from "@/components/Webviews/LinkToOverview" + +import styles from "./loyaltyPage.module.css" + +import { LangParams } from "@/types/params" + +export default async function AboutScandicFriends({ lang }: LangParams) { + const loyaltyPage = await serverClient().contentstack.loyaltyPage.get() + return ( +
+ + + {loyaltyPage.sidebar ? ( +
+ +
+ ) : null} + + + + +
+ ) +} diff --git a/app/[lang]/webview/loyalty-page/page.module.css b/components/ContentType/Webviews/accountPage.module.css similarity index 100% rename from app/[lang]/webview/loyalty-page/page.module.css rename to components/ContentType/Webviews/accountPage.module.css diff --git a/app/[lang]/webview/my-pages/page.module.css b/components/ContentType/Webviews/loyaltyPage.module.css similarity index 52% rename from app/[lang]/webview/my-pages/page.module.css rename to components/ContentType/Webviews/loyaltyPage.module.css index dbfe806a3..593e758d2 100644 --- a/app/[lang]/webview/my-pages/page.module.css +++ b/components/ContentType/Webviews/loyaltyPage.module.css @@ -1,7 +1,12 @@ -.blocks { +.content { display: grid; - gap: 4.2rem; + padding-top: 2rem; padding-left: 2rem; padding-right: 2rem; - padding-top: 2rem; + gap: 4.2rem; +} + +.sidebar { + margin-left: calc(2rem * -1); + margin-right: calc(2rem * -1); } diff --git a/lib/trpc/server.ts b/lib/trpc/server.ts index 7f3966979..021c0a802 100644 --- a/lib/trpc/server.ts +++ b/lib/trpc/server.ts @@ -2,7 +2,6 @@ import { TRPCError } from "@trpc/server" import { redirect } from "next/navigation" import { Lang } from "@/constants/languages" -import { overview } from "@/constants/routes/webviews" import { appRouter } from "@/server" import { createContext } from "@/server/context" import { internalServerError } from "@/server/errors/next" @@ -24,7 +23,6 @@ export function serverClient() { if (error.code === "UNAUTHORIZED") { const lang = ctx?.lang || Lang.en if (ctx?.webToken) { - console.log({ ctx }) const returnUrl = ctx.url const redirectUrl = `/${lang}/webview/refresh?returnurl=${encodeURIComponent(returnUrl)}` @@ -35,8 +33,6 @@ export function serverClient() { redirect(redirectUrl) } - console.error("Unautorized on web, redirecting to login") - const pathname = ctx?.pathname || "/" redirect( `/${lang}/login?redirectTo=${encodeURIComponent(`/${lang}/${pathname}`)}` diff --git a/middlewares/webView.ts b/middlewares/webView.ts index 6d62b9f74..0d5967a29 100644 --- a/middlewares/webView.ts +++ b/middlewares/webView.ts @@ -47,7 +47,7 @@ export const middleware: NextMiddleware = async (request) => { // we're done, allow it if (myPagesWebviews.includes(nextUrl.pathname)) { return NextResponse.rewrite( - new URL(`/${lang}/webview/my-pages`, nextUrl), + new URL(`/${lang}/webview/account-page/${uid}`, nextUrl), { request: { headers, @@ -56,7 +56,7 @@ export const middleware: NextMiddleware = async (request) => { ) } else if (loyaltyPagesWebviews.includes(nextUrl.pathname)) { return NextResponse.rewrite( - new URL(`/${lang}/webview/loyalty-page`, nextUrl), + new URL(`/${lang}/webview/loyalty-page/${uid}`, nextUrl), { request: { headers, @@ -91,7 +91,7 @@ export const middleware: NextMiddleware = async (request) => { if (myPagesWebviews.includes(nextUrl.pathname)) { return NextResponse.rewrite( - new URL(`/${lang}/webview/my-pages`, nextUrl), + new URL(`/${lang}/webview/account-page/${uid}`, nextUrl), { headers: { "Set-Cookie": `webviewToken=${decryptedData}; Secure; HttpOnly; Path=/; SameSite=Strict;`, @@ -104,7 +104,7 @@ export const middleware: NextMiddleware = async (request) => { ) } else if (loyaltyPagesWebviews.includes(nextUrl.pathname)) { return NextResponse.rewrite( - new URL(`/${lang}/webview/loyalty-page`, nextUrl), + new URL(`/${lang}/webview/loyalty-page/${uid}`, nextUrl), { headers: { "Set-Cookie": `webviewToken=${decryptedData}; Secure; HttpOnly; Path=/; SameSite=Strict;`, diff --git a/server/context.ts b/server/context.ts index 2791a994c..f70a054a4 100644 --- a/server/context.ts +++ b/server/context.ts @@ -38,13 +38,6 @@ export function createContext() { const cookie = cookies() const webviewTokenCookie = cookie.get("webviewToken") - console.log("IN CONTEXT", { - lang: h.get("x-lang") as Lang, - pathname: h.get("x-pathname")!, - url: h.get("x-url")!, - webviewToken: cookie.get("webviewToken"), - }) - return createContextInner({ auth, lang: h.get("x-lang") as Lang, diff --git a/server/trpc.ts b/server/trpc.ts index 65e49fff4..016f14624 100644 --- a/server/trpc.ts +++ b/server/trpc.ts @@ -41,7 +41,7 @@ export const protectedProcedure = t.procedure.use(async function (opts) { throw sessionExpiredError() } - if (!session?.user || !opts.ctx.webToken) { + if (!session?.token.access_token && !opts.ctx.webToken) { throw unauthorizedError() } diff --git a/types/params.ts b/types/params.ts index da6dd75b9..0ea8f134a 100644 --- a/types/params.ts +++ b/types/params.ts @@ -20,6 +20,10 @@ export type ContentTypeParams = { contentType: "loyalty-page" | "content-page" } +export type ContentTypeWebviewParams = { + contentType: "loyalty-page" | "account-page" +} + export type UIDParams = { uid: string }