From 095edcce8c86a734c1b3b9bae8523084483d0a8b Mon Sep 17 00:00:00 2001 From: Christel Westerberg Date: Mon, 3 Jun 2024 09:38:17 +0200 Subject: [PATCH] fix: refactor language switcher --- .../[uid] => [...uri]}/page.module.css | 0 .../{my-pages/[...path] => [...uri]}/page.tsx | 12 +- .../[contentType]/[uid]/page.tsx | 50 ------- .../my-pages/[...path]/page.module.css | 17 --- .../(live-current)/@languageSwitcher/page.tsx | 22 +-- lib/graphql/Query/AccountPage.graphql | 24 ++-- lib/graphql/Query/CurrentFooter.graphql | 11 ++ .../routers/contentstack/accountPage/query.ts | 43 ------ server/routers/contentstack/config/output.ts | 29 +++- server/routers/contentstack/config/query.ts | 135 +++++++++++++++++- .../contentstack/loyaltyPage/output.ts | 21 --- .../routers/contentstack/loyaltyPage/query.ts | 49 ------- types/requests/languageSwitcher.ts | 12 +- types/requests/pageType.ts | 1 + 14 files changed, 196 insertions(+), 230 deletions(-) rename app/[lang]/(live)/@languageSwitcher/{[contentType]/[uid] => [...uri]}/page.module.css (100%) rename app/[lang]/(live)/@languageSwitcher/{my-pages/[...path] => [...uri]}/page.tsx (51%) delete mode 100644 app/[lang]/(live)/@languageSwitcher/[contentType]/[uid]/page.tsx delete mode 100644 app/[lang]/(live)/@languageSwitcher/my-pages/[...path]/page.module.css diff --git a/app/[lang]/(live)/@languageSwitcher/[contentType]/[uid]/page.module.css b/app/[lang]/(live)/@languageSwitcher/[...uri]/page.module.css similarity index 100% rename from app/[lang]/(live)/@languageSwitcher/[contentType]/[uid]/page.module.css rename to app/[lang]/(live)/@languageSwitcher/[...uri]/page.module.css diff --git a/app/[lang]/(live)/@languageSwitcher/my-pages/[...path]/page.tsx b/app/[lang]/(live)/@languageSwitcher/[...uri]/page.tsx similarity index 51% rename from app/[lang]/(live)/@languageSwitcher/my-pages/[...path]/page.tsx rename to app/[lang]/(live)/@languageSwitcher/[...uri]/page.tsx index e6ee25f98..50f322ad4 100644 --- a/app/[lang]/(live)/@languageSwitcher/my-pages/[...path]/page.tsx +++ b/app/[lang]/(live)/@languageSwitcher/[...uri]/page.tsx @@ -5,16 +5,20 @@ import Mobile from "@/components/Current/Header/LanguageSwitcher/Mobile" import styles from "./page.module.css" -export default async function LanguageSwitcher() { - const data = await serverClient().contentstack.accountPage.languageSwitcher() +import { LangParams, PageArgs, UriParams } from "@/types/params" + +export default async function LanguageSwitcher({ + params, +}: PageArgs) { + const { urls } = await serverClient().contentstack.config.languageSwitcher() return ( <>
- +
- +
) diff --git a/app/[lang]/(live)/@languageSwitcher/[contentType]/[uid]/page.tsx b/app/[lang]/(live)/@languageSwitcher/[contentType]/[uid]/page.tsx deleted file mode 100644 index 99083ed4e..000000000 --- a/app/[lang]/(live)/@languageSwitcher/[contentType]/[uid]/page.tsx +++ /dev/null @@ -1,50 +0,0 @@ -import { notFound } from "next/navigation" - -import { Lang } from "@/constants/languages" -import { serverClient } from "@/lib/trpc/server" - -import Desktop from "@/components/Current/Header/LanguageSwitcher/Desktop" -import Mobile from "@/components/Current/Header/LanguageSwitcher/Mobile" - -import styles from "./page.module.css" - -import { - ContentTypeParams, - LangParams, - PageArgs, - UIDParams, -} from "@/types/params" -import { LanguageSwitcherData } from "@/types/requests/languageSwitcher" - -export default async function LanguageSwitcher({ - params, -}: PageArgs) { - let urls: LanguageSwitcherData - let lang: Lang - switch (params.contentType) { - case "loyalty-page": - const data = - await serverClient().contentstack.loyaltyPage.languageSwitcher() - urls = data.urls - lang = data.lang - break - case "content-page": - // TODO: Implement this - return null - default: - const type: never = params.contentType - console.error(`Unsupported content type given: ${type}`) - notFound() - } - - return ( - <> -
- -
-
- -
- - ) -} diff --git a/app/[lang]/(live)/@languageSwitcher/my-pages/[...path]/page.module.css b/app/[lang]/(live)/@languageSwitcher/my-pages/[...path]/page.module.css deleted file mode 100644 index c0e8a497d..000000000 --- a/app/[lang]/(live)/@languageSwitcher/my-pages/[...path]/page.module.css +++ /dev/null @@ -1,17 +0,0 @@ -.desktop { - display: none; -} - -.mobile { - display: block; -} - -@media (min-width: 950px) { - .desktop { - display: block; - } - - .mobile { - display: none; - } -} diff --git a/app/[lang]/(live-current)/@languageSwitcher/page.tsx b/app/[lang]/(live-current)/@languageSwitcher/page.tsx index 6b94c5f4d..cf9e9c3f7 100644 --- a/app/[lang]/(live-current)/@languageSwitcher/page.tsx +++ b/app/[lang]/(live-current)/@languageSwitcher/page.tsx @@ -1,8 +1,4 @@ -import { batchRequest } from "@/lib/graphql/batchRequest" -import { - GetDaDeEnUrlsCurrentBlocksPage, - GetFiNoSvUrlsCurrentBlocksPage, -} from "@/lib/graphql/Query/LanguageSwitcherCurrent.graphql" +import { serverClient } from "@/lib/trpc/server" import Desktop from "@/components/Current/Header/LanguageSwitcher/Desktop" import Mobile from "@/components/Current/Header/LanguageSwitcher/Mobile" @@ -10,7 +6,6 @@ import Mobile from "@/components/Current/Header/LanguageSwitcher/Mobile" import styles from "./page.module.css" import { LangParams, PageArgs, UIDParams, UriParams } from "@/types/params" -import { LanguageSwitcherData } from "@/types/requests/languageSwitcher" export default async function LanguageSwitcher({ params, @@ -20,20 +15,7 @@ export default async function LanguageSwitcher({ return null } - const variables = { - uid: searchParams.uid, - } - - const { data: urls } = await batchRequest([ - { - document: GetDaDeEnUrlsCurrentBlocksPage, - variables, - }, - { - document: GetFiNoSvUrlsCurrentBlocksPage, - variables, - }, - ]) + const { urls } = await serverClient().contentstack.config.languageSwitcher() return ( <> diff --git a/lib/graphql/Query/AccountPage.graphql b/lib/graphql/Query/AccountPage.graphql index d69fc2bbd..5f76dc4ae 100644 --- a/lib/graphql/Query/AccountPage.graphql +++ b/lib/graphql/Query/AccountPage.graphql @@ -64,35 +64,29 @@ query GetAccountPageRefs($locale: String!, $uid: String!) { } query GetDaDeEnUrlsAccountPage($uid: String!) { - de: all_account_page(where: { uid: $uid }, locale: "de") { - items { - url - } + de: account_page(uid: $uid, locale: "de") { + url } - en: all_account_page(where: { uid: $uid }, locale: "en") { - items { - url - } + en: account_page(uid: $uid, locale: "en") { + url } - da: all_account_page(where: { uid: $uid }, locale: "da") { - items { - url - } + da: account_page(uid: $uid, locale: "da") { + url } } query GetFiNoSvUrlsAccountPage($uid: String!) { - fi: all_account_page(where: { uid: $uid }, locale: "fi") { + fi: account_page(uid: $uid, locale: "fi") { items { url } } - no: all_account_page(where: { uid: $uid }, locale: "no") { + no: account_page(uid: $uid, locale: "no") { items { url } } - sv: all_account_page(where: { uid: $uid }, locale: "sv") { + sv: account_page(uid: $uid, locale: "sv") { items { url } diff --git a/lib/graphql/Query/CurrentFooter.graphql b/lib/graphql/Query/CurrentFooter.graphql index 31530b3f4..5ec7f6bc9 100644 --- a/lib/graphql/Query/CurrentFooter.graphql +++ b/lib/graphql/Query/CurrentFooter.graphql @@ -3,6 +3,7 @@ #import "../Fragments/Footer/Navigation.graphql" #import "../Fragments/Footer/SocialMedia.graphql" #import "../Fragments/Footer/TripAdvisor.graphql" +#import "../Fragments/Refs/System.graphql" query GetCurrentFooter($locale: String!) { all_current_footer(limit: 1, locale: $locale) { @@ -24,3 +25,13 @@ query GetCurrentFooter($locale: String!) { } } } + +query GetCurrentFooterRef($locale: String!) { + all_current_footer(limit: 1, locale: $locale) { + items { + system { + ...System + } + } + } +} diff --git a/server/routers/contentstack/accountPage/query.ts b/server/routers/contentstack/accountPage/query.ts index e15d6b467..17375efa6 100644 --- a/server/routers/contentstack/accountPage/query.ts +++ b/server/routers/contentstack/accountPage/query.ts @@ -1,10 +1,6 @@ -import { Lang } from "@/constants/languages" -import { batchRequest } from "@/lib/graphql/batchRequest" import { GetAccountPage, GetAccountPageRefs, - GetDaDeEnUrlsAccountPage, - GetFiNoSvUrlsAccountPage, } from "@/lib/graphql/Query/AccountPage.graphql" import { request } from "@/lib/graphql/request" import { internalServerError, notFound } from "@/server/errors/trpc" @@ -22,16 +18,11 @@ import { AccountPageRefsDataRaw, validateAccountPageRefsSchema, validateAccountPageSchema, - validateLanguageSwitcherData, } from "./output" import { getConnections } from "./utils" import { ContentEntries } from "@/types/components/myPages/myPage/enums" import { Embeds } from "@/types/requests/embeds" -import { - LanguageSwitcherData, - LanguageSwitcherQueryDataRaw, -} from "@/types/requests/languageSwitcher" import { Edges } from "@/types/requests/utils/edges" import { RTEDocument } from "@/types/rte/node" @@ -140,38 +131,4 @@ export const accountPageQueryRouter = router({ return accountPage }), - languageSwitcher: contentstackProcedure.query(async ({ ctx }) => { - const variables = { - uid: ctx.uid, - } - - const res = await batchRequest([ - { - document: GetDaDeEnUrlsAccountPage, - variables, - }, - { - document: GetFiNoSvUrlsAccountPage, - variables, - }, - ]) - - const urls = Object.keys(res.data).reduce( - (acc, key) => { - const item = res.data[key as Lang]?.items[0] - const url = item ? `/${key}${item.url}` : undefined - return { ...acc, [key]: { url, isExternal: false } } - }, - {} as LanguageSwitcherData - ) - - const validatedLanguageSwitcherData = - validateLanguageSwitcherData.safeParse(urls) - - if (!validatedLanguageSwitcherData.success) { - throw internalServerError(validatedLanguageSwitcherData.error) - } - - return { lang: ctx.lang, urls } - }), }) diff --git a/server/routers/contentstack/config/output.ts b/server/routers/contentstack/config/output.ts index d15e736e1..17d650b06 100644 --- a/server/routers/contentstack/config/output.ts +++ b/server/routers/contentstack/config/output.ts @@ -132,6 +132,8 @@ const validateHeaderRefConfigSchema = z.object({ }), }) +export type HeaderRefDataRaw = z.infer + const validateAppDownload = z.object({ href: z.string(), imageConnection: z.object({ @@ -155,9 +157,6 @@ const validateAppDownload = z.object({ }), }) -export type HeaderRefDataRaw = z.infer - - const validateNavigationItem = z.object({ links: z.array(z.object({ href: z.string(), title: z.string() })), title: z.string(), @@ -240,3 +239,27 @@ export type FooterData = Omit< > & { logo: Image } + +const validateFooterRefConfigSchema = z.object({ + all_current_footer: z.object({ + items: z.array( + z.object({ + system: z.object({ + content_type_uid: z.string(), + uid: z.string(), + }), + }) + ), + }), +}) + +export type FooterRefDataRaw = z.infer + +export const validateLanguageSwitcherData = z.object({ + en: z.object({ url: z.string(), isExternal: z.boolean() }).optional(), + da: z.object({ url: z.string(), isExternal: z.boolean() }).optional(), + de: z.object({ url: z.string(), isExternal: z.boolean() }).optional(), + fi: z.object({ url: z.string(), isExternal: z.boolean() }).optional(), + sv: z.object({ url: z.string(), isExternal: z.boolean() }).optional(), + no: z.object({ url: z.string(), isExternal: z.boolean() }).optional(), +}) diff --git a/server/routers/contentstack/config/query.ts b/server/routers/contentstack/config/query.ts index 5ce1c67d9..56d78ac08 100644 --- a/server/routers/contentstack/config/query.ts +++ b/server/routers/contentstack/config/query.ts @@ -1,9 +1,26 @@ +import { Lang } from "@/constants/languages" +import { batchRequest } from "@/lib/graphql/batchRequest" +import { + GetDaDeEnUrlsAccountPage, + GetFiNoSvUrlsAccountPage, +} from "@/lib/graphql/Query/AccountPage.graphql" import { GetContactConfig } from "@/lib/graphql/Query/ContactConfig.graphql" -import { GetCurrentFooter } from "@/lib/graphql/Query/CurrentFooter.graphql" +import { + GetCurrentFooter, + GetCurrentFooterRef, +} from "@/lib/graphql/Query/CurrentFooter.graphql" import { GetCurrentHeader, GetCurrentHeaderRef, } from "@/lib/graphql/Query/CurrentHeader.graphql" +import { + GetDaDeEnUrlsCurrentBlocksPage, + GetFiNoSvUrlsCurrentBlocksPage, +} from "@/lib/graphql/Query/LanguageSwitcherCurrent.graphql" +import { + GetDaDeEnUrlsLoyaltyPage, + GetFiNoSvUrlsLoyaltyPage, +} from "@/lib/graphql/Query/LoyaltyPage.graphql" import { request } from "@/lib/graphql/request" import { internalServerError, notFound } from "@/server/errors/trpc" import { contentstackProcedure, publicProcedure, router } from "@/server/trpc" @@ -13,14 +30,22 @@ import { generateTag } from "@/utils/generateTag" import { type ContactConfigData, FooterDataRaw, + FooterRefDataRaw, HeaderData, HeaderDataRaw, HeaderRefDataRaw, validateContactConfigSchema, validateFooterConfigSchema, validateHeaderConfigSchema, + validateLanguageSwitcherData, } from "./output" +import { + LanguageSwitcherData, + LanguageSwitcherQueryDataRaw, +} from "@/types/requests/languageSwitcher" +import { PageTypeEnum } from "@/types/requests/pageType" + export const configQueryRouter = router({ contact: contentstackProcedure.query(async ({ ctx }) => { const { lang } = ctx @@ -85,13 +110,24 @@ export const configQueryRouter = router({ } as HeaderData }), footer: contentstackProcedure.query(async ({ ctx }) => { + const responseRef = await request(GetCurrentFooterRef, { + locale: ctx.lang, + }) + const response = await request( GetCurrentFooter, { locale: ctx.lang, }, { - next: { tags: [`footer-${ctx.lang}`] }, + next: { + tags: [ + generateTag( + ctx.lang, + responseRef.data.all_current_footer.items[0].system.uid + ), + ], + }, } ) @@ -105,4 +141,99 @@ export const configQueryRouter = router({ return validatedFooterConfig.data.all_current_footer.items[0] }), + languageSwitcher: contentstackProcedure.query(async ({ ctx }) => { + const variables = { uid: ctx.uid, locale: ctx.lang } + let urls: LanguageSwitcherData + switch (ctx.contentType) { + case PageTypeEnum.accountPage: + const accountPageRes = await batchRequest( + [ + { + document: GetDaDeEnUrlsAccountPage, + variables, + }, + { + document: GetFiNoSvUrlsAccountPage, + variables, + }, + ] + ) + + const accountPageUrls = Object.keys( + accountPageRes.data + ).reduce((acc, key) => { + const item = accountPageRes.data[key as Lang]?.items?.[0] + const url = item + ? { url: `/${key}${item.url}`, isExternal: false } + : undefined + return { ...acc, [key]: url } + }, {} as LanguageSwitcherData) + + const validatedAccountLanguageSwitcherData = + validateLanguageSwitcherData.safeParse(accountPageUrls) + + if (!validatedAccountLanguageSwitcherData.success) { + throw internalServerError(validatedAccountLanguageSwitcherData.error) + } + + urls = validatedAccountLanguageSwitcherData.data + break + case PageTypeEnum.loyaltyPage: + const loyaltyPageRes = await batchRequest( + [ + { + document: GetDaDeEnUrlsLoyaltyPage, + variables, + }, + { + document: GetFiNoSvUrlsLoyaltyPage, + variables, + }, + ] + ) + const loyaltyPageUrls = Object.keys( + loyaltyPageRes.data + ).reduce((acc, key) => { + const item = loyaltyPageRes.data[key as Lang]?.items?.[0] + const url = item + ? { + url: item.web?.original_url || `/${key}${item.url}`, + isExternal: !!item?.web?.original_url, + } + : undefined + + return { + ...acc, + [key]: url, + } + }, {} as LanguageSwitcherData) + + const validatedLoyaltyLanguageSwitcherData = + validateLanguageSwitcherData.safeParse(loyaltyPageUrls) + + if (!validatedLoyaltyLanguageSwitcherData.success) { + throw internalServerError(validatedLoyaltyLanguageSwitcherData.error) + } + + urls = validatedLoyaltyLanguageSwitcherData.data + break + case PageTypeEnum.currentBlocksPage: + const { data } = await batchRequest([ + { + document: GetDaDeEnUrlsCurrentBlocksPage, + variables, + }, + { + document: GetFiNoSvUrlsCurrentBlocksPage, + variables, + }, + ]) + + urls = data + break + default: + urls = [] as unknown as LanguageSwitcherData + } + return { urls, lang: ctx.lang } + }), }) diff --git a/server/routers/contentstack/loyaltyPage/output.ts b/server/routers/contentstack/loyaltyPage/output.ts index c139a6f88..7fd660663 100644 --- a/server/routers/contentstack/loyaltyPage/output.ts +++ b/server/routers/contentstack/loyaltyPage/output.ts @@ -306,24 +306,3 @@ export const validateLoyaltyPageRefsSchema = z.object({ export type LoyaltyPageRefsDataRaw = z.infer< typeof validateLoyaltyPageRefsSchema > - -export const validateLanguageSwitcherData = z.object({ - en: z - .object({ url: z.string().optional(), isExternal: z.boolean() }) - .nullable(), - da: z - .object({ url: z.string().optional(), isExternal: z.boolean() }) - .nullable(), - de: z - .object({ url: z.string().optional(), isExternal: z.boolean() }) - .nullable(), - fi: z - .object({ url: z.string().optional(), isExternal: z.boolean() }) - .nullable(), - sv: z - .object({ url: z.string().optional(), isExternal: z.boolean() }) - .nullable(), - no: z - .object({ url: z.string().optional(), isExternal: z.boolean() }) - .nullable(), -}) diff --git a/server/routers/contentstack/loyaltyPage/query.ts b/server/routers/contentstack/loyaltyPage/query.ts index 32d8800f3..565b06bc5 100644 --- a/server/routers/contentstack/loyaltyPage/query.ts +++ b/server/routers/contentstack/loyaltyPage/query.ts @@ -1,8 +1,4 @@ -import { Lang } from "@/constants/languages" -import { batchRequest } from "@/lib/graphql/batchRequest" import { - GetDaDeEnUrlsLoyaltyPage, - GetFiNoSvUrlsLoyaltyPage, GetLoyaltyPage, GetLoyaltyPageRefs, } from "@/lib/graphql/Query/LoyaltyPage.graphql" @@ -21,17 +17,12 @@ import { removeEmptyObjects } from "../../utils" import { LoyaltyPage, type LoyaltyPageRefsDataRaw, - validateLanguageSwitcherData, validateLoyaltyPageRefsSchema, validateLoyaltyPageSchema, } from "./output" import { getConnections } from "./utils" import { LoyaltyBlocksTypenameEnum } from "@/types/components/loyalty/enums" -import { - LanguageSwitcherData, - LanguageSwitcherQueryDataRaw, -} from "@/types/requests/languageSwitcher" function makeButtonObject(button: any) { return { @@ -181,44 +172,4 @@ export const loyaltyPageQueryRouter = router({ // Assert LoyaltyPage type to get correct typings for RTE fields return validatedLoyaltyPage.data as LoyaltyPage }), - languageSwitcher: contentstackProcedure.query(async ({ ctx }) => { - const variables = { - uid: ctx.uid, - } - - const res = await batchRequest([ - { - document: GetDaDeEnUrlsLoyaltyPage, - variables, - }, - { - document: GetFiNoSvUrlsLoyaltyPage, - variables, - }, - ]) - - const urls = Object.keys(res.data).reduce( - (acc, key) => { - const item = res.data[key as Lang]?.items[0] - const url = item - ? item.web?.original_url || `/${key}${item.url}` - : undefined - - return { - ...acc, - [key]: { url, isExternal: !!item?.web?.original_url }, - } - }, - {} as LanguageSwitcherData - ) - - const validatedLanguageSwitcherData = - validateLanguageSwitcherData.safeParse(urls) - - if (!validatedLanguageSwitcherData.success) { - throw internalServerError(validatedLanguageSwitcherData.error) - } - - return { lang: ctx.lang, urls } - }), }) diff --git a/types/requests/languageSwitcher.ts b/types/requests/languageSwitcher.ts index 23d7b1cf0..00c315790 100644 --- a/types/requests/languageSwitcher.ts +++ b/types/requests/languageSwitcher.ts @@ -4,12 +4,12 @@ type CurrentLanguageResult = { } export type LanguageSwitcherData = { - da: CurrentLanguageResult | undefined - de: CurrentLanguageResult | undefined - en: CurrentLanguageResult | undefined - fi: CurrentLanguageResult | undefined - no: CurrentLanguageResult | undefined - sv: CurrentLanguageResult | undefined + da?: CurrentLanguageResult + de?: CurrentLanguageResult + en?: CurrentLanguageResult + fi?: CurrentLanguageResult + no?: CurrentLanguageResult + sv?: CurrentLanguageResult } type LanguageResult = { diff --git a/types/requests/pageType.ts b/types/requests/pageType.ts index 52e563fec..1fcc273eb 100644 --- a/types/requests/pageType.ts +++ b/types/requests/pageType.ts @@ -1,4 +1,5 @@ export enum PageTypeEnum { accountPage = "account-page", loyaltyPage = "loyalty-page", + currentBlocksPage = "current-blocks-page", }