refactor: move contentype to header

components/ContentType/LoyaltyPage.tsx

@@ -1,5 +1,4 @@
 import { serverClient } from "@/lib/trpc/server"
-import { PageTypes } from "@/server/routers/contentstack/breadcrumbs/input"
 
 import { auth } from "@/auth"
 import { Blocks } from "@/components/Loyalty/Blocks"
@@ -19,7 +18,7 @@ export default async function LoyaltyPage({ lang }: LangParams) {
 
   return (
     <>
-      <Breadcrumbs pageType={PageTypes.Loyalty} />
+      <Breadcrumbs />
       <section className={styles.content}>
         {session ? (
           <Sidebar lang={lang} />

components/MyPages/Breadcrumbs/index.tsx

@@ -1,23 +1,13 @@
 import { _ } from "@/lib/translation"
 import { serverClient } from "@/lib/trpc/server"
-import { PageTypes } from "@/server/routers/contentstack/breadcrumbs/input"
 
 import Breadcrumb from "./Breadcrumb"
 import BreadcrumbsWithLink from "./BreadcrumbWithLink"
 
 import styles from "./breadcrumbs.module.css"
 
-import { BreadcrumbsProps } from "@/types/components/myPages/breadcrumbs"
-
-export default async function Breadcrumbs({
-  pageType = PageTypes.Account,
-}: BreadcrumbsProps) {
-  let breadcrumbs
-  if (pageType == PageTypes.Account) {
-    breadcrumbs = await serverClient().contentstack.breadcrumbs.getMyPages()
-  } else {
-    breadcrumbs = await serverClient().contentstack.breadcrumbs.getLoyaltyPage()
-  }
+export default async function Breadcrumbs() {
+  const breadcrumbs = await serverClient().contentstack.breadcrumbs.get()
   return (
     <nav className={styles.breadcrumbs}>
       <ul className={styles.list}>

middlewares/cmsContent.ts

@@ -26,9 +26,9 @@ export const middleware: NextMiddleware = async (request) => {
       `Unable to resolve CMS entry for locale "${lang}": ${pathNameWithoutLang}`
     )
   }
-
   const headers = getDefaultRequestHeaders(request)
   headers.set("x-uid", uid)
+  headers.set("x-contenttype", contentType)
 
   const isCurrent = contentType ? contentType.indexOf("current") >= 0 : false
 

middlewares/myPages.ts

@@ -33,8 +33,7 @@ export const middleware: NextMiddleware = async (request) => {
   }
 
   const pathNameWithoutLang = nextUrl.pathname.replace(`/${lang}`, "")
-  const { uid } = await resolveEntry(pathNameWithoutLang, lang)
-
+  const { uid, contentType } = await resolveEntry(pathNameWithoutLang, lang)
   if (!uid) {
     throw notFound(
       `Unable to resolve CMS entry for locale "${lang}": ${pathNameWithoutLang}`
@@ -43,6 +42,7 @@ export const middleware: NextMiddleware = async (request) => {
 
   const headers = getDefaultRequestHeaders(request)
   headers.set("x-uid", uid)
+  headers.set("x-contenttype", contentType)
   return NextResponse.next({
     request: {
       headers,

server/context.ts

@@ -16,6 +16,7 @@ type CreateContextOptions = {
   uid?: string | null
   url: string
   webToken?: string
+  contentType?: string
 }
 
 /** Use this helper for:
@@ -30,6 +31,7 @@ export function createContextInner(opts: CreateContextOptions) {
     uid: opts.uid,
     url: opts.url,
     webToken: opts.webToken,
+    contentType: opts.contentType,
   }
 }
 
@@ -58,6 +60,7 @@ export function createContext() {
     uid: h.get("x-uid"),
     url: h.get("x-url")!,
     webToken: webviewTokenCookie?.value,
+    contentType: h.get("x-contenttype")!,
   })
 }
 

server/routers/contentstack/breadcrumbs/input.ts

@@ -1,12 +0,0 @@
-import { z } from "zod"
-
-export enum PageTypes {
-  Account,
-  Loyalty,
-}
-
-export const PageTypeEnum = z
-  .object({
-    pageType: z.nativeEnum(PageTypes),
-  })
-  .default({ pageType: PageTypes.Account })

server/routers/contentstack/breadcrumbs/query.ts

@@ -1,3 +1,4 @@
+import { Lang } from "@/constants/languages"
 import {
   GetLoyaltyPageBreadcrumbs,
   GetLoyaltyPageBreadcrumbsRefs,
@@ -32,150 +33,168 @@ import type {
   GetMyPagesBreadcrumbsData,
   GetMyPagesBreadcrumbsRefsData,
 } from "@/types/requests/myPages/breadcrumbs"
+import { PageTypeEnum } from "@/types/requests/pageType"
+
+type fetchBreadcrumbs = {
+  lang: Lang
+  pathname: string
+}
+async function getLoyaltyPageBreadcrumbs({ lang, pathname }: fetchBreadcrumbs) {
+  const refsResponse = await request<GetLoyaltyPageBreadcrumbsRefsData>(
+    GetLoyaltyPageBreadcrumbsRefs,
+    { locale: lang, url: pathname },
+    {
+      next: {
+        tags: [generateRefsResponseTag(lang, pathname, affix)],
+      },
+    }
+  )
+  if (!refsResponse.data) {
+    throw notFound(refsResponse)
+  }
+
+  const validatedRefsData =
+    validateLoyaltyPageBreadcrumbsRefsContentstackSchema.safeParse(
+      refsResponse.data
+    )
+
+  if (!validatedRefsData.success) {
+    throw internalServerError(validatedRefsData.error)
+  }
+
+  const connections = getConnections(validatedRefsData.data.all_loyalty_page)
+  const tags = generateTags(lang, connections)
+  const page = validatedRefsData.data.all_loyalty_page.items[0]
+  tags.push(generateTag(lang, page.system.uid, affix))
+
+  const response = await request<GetLoyaltyPageBreadcrumbsData>(
+    GetLoyaltyPageBreadcrumbs,
+    { locale: lang, url: pathname },
+    { next: { tags } }
+  )
+  if (!response.data) {
+    throw notFound(response)
+  }
+
+  const validatedBreadcrumbsData =
+    validateLoyaltyPageBreadcrumbsContentstackSchema.safeParse(response.data)
+
+  if (!validatedBreadcrumbsData.success) {
+    throw internalServerError(validatedBreadcrumbsData.error)
+  }
+
+  const parentBreadcrumbs =
+    validatedBreadcrumbsData.data.all_loyalty_page.items[0].web.breadcrumbs.parentsConnection.edges.map(
+      (breadcrumb) => {
+        return {
+          href: removeMultipleSlashes(
+            `/${breadcrumb.node.system.locale}/${breadcrumb.node.url}`
+          ),
+          title: breadcrumb.node.breadcrumbs.title,
+          uid: breadcrumb.node.system.uid,
+        }
+      }
+    )
+
+  const pageBreadcrumb =
+    validatedBreadcrumbsData.data.all_loyalty_page.items.map((breadcrumb) => {
+      return {
+        title: breadcrumb.web.breadcrumbs.title,
+        uid: breadcrumb.system.uid,
+      }
+    })
+
+  return [pageBreadcrumb, parentBreadcrumbs]
+}
+
+async function getMyPagesBreadcrumbs({ lang, pathname }: fetchBreadcrumbs) {
+  const refsResponse = await request<GetMyPagesBreadcrumbsRefsData>(
+    GetMyPagesBreadcrumbsRefs,
+    { locale: lang, url: pathname },
+    {
+      next: {
+        tags: [generateRefsResponseTag(lang, pathname, affix)],
+      },
+    }
+  )
+  if (!refsResponse.data) {
+    throw notFound(refsResponse)
+  }
+
+  const validatedRefsData =
+    validateMyPagesBreadcrumbsRefsContentstackSchema.safeParse(
+      refsResponse.data
+    )
+  if (!validatedRefsData.success) {
+    throw internalServerError(validatedRefsData.error)
+  }
+
+  const connections = getConnections(validatedRefsData.data.all_account_page)
+  const tags = generateTags(lang, connections)
+  const page = validatedRefsData.data.all_account_page.items[0]
+  tags.push(generateTag(lang, page.system.uid, affix))
+
+  const response = await request<GetMyPagesBreadcrumbsData>(
+    GetMyPagesBreadcrumbs,
+    { locale: lang, url: pathname },
+    { next: { tags } }
+  )
+  if (!response.data) {
+    throw notFound(response)
+  }
+
+  const validatedBreadcrumbsData =
+    validateMyPagesBreadcrumbsContentstackSchema.safeParse(response.data)
+
+  if (!validatedBreadcrumbsData.success) {
+    throw internalServerError(validatedBreadcrumbsData.error)
+  }
+
+  const parentBreadcrumbs =
+    validatedBreadcrumbsData.data.all_account_page.items[0].web.breadcrumbs.parentsConnection.edges.map(
+      (breadcrumb) => {
+        return {
+          href: removeMultipleSlashes(
+            `/${breadcrumb.node.system.locale}/${breadcrumb.node.url}`
+          ),
+          title: breadcrumb.node.breadcrumbs.title,
+          uid: breadcrumb.node.system.uid,
+        }
+      }
+    )
+
+  const pageBreadcrumb =
+    validatedBreadcrumbsData.data.all_account_page.items.map((breadcrumb) => {
+      return {
+        title: breadcrumb.web.breadcrumbs.title,
+        uid: breadcrumb.system.uid,
+      }
+    })
+
+  return [pageBreadcrumb, parentBreadcrumbs]
+}
 
 export const breadcrumbsQueryRouter = router({
-  getMyPages: contentstackProcedure.query(async ({ ctx }) => {
-    const refsResponse = await request<GetMyPagesBreadcrumbsRefsData>(
-      GetMyPagesBreadcrumbsRefs,
-      { locale: ctx.lang, url: ctx.pathname },
-      {
-        next: {
-          tags: [generateRefsResponseTag(ctx.lang, ctx.pathname, affix)],
-        },
-      }
-    )
-    if (!refsResponse.data) {
-      throw notFound(refsResponse)
+  get: contentstackProcedure.query(async ({ ctx }) => {
+    let pageBreadcrumb, parentBreadcrumbs
+
+    switch (ctx.contentType) {
+      case PageTypeEnum.accountPage:
+        ;[pageBreadcrumb, parentBreadcrumbs] = await getMyPagesBreadcrumbs({
+          lang: ctx.lang,
+          pathname: ctx.pathname,
+        })
+        break
+      case PageTypeEnum.loyaltyPage:
+        ;[pageBreadcrumb, parentBreadcrumbs] = await getLoyaltyPageBreadcrumbs({
+          lang: ctx.lang,
+          pathname: ctx.pathname,
+        })
+        break
+      default:
+        return []
     }
 
-    const validatedRefsData =
-      validateMyPagesBreadcrumbsRefsContentstackSchema.safeParse(
-        refsResponse.data
-      )
-    if (!validatedRefsData.success) {
-      throw internalServerError(validatedRefsData.error)
-    }
-
-    const connections = getConnections(validatedRefsData.data.all_account_page)
-    const tags = generateTags(ctx.lang, connections)
-    const page = validatedRefsData.data.all_account_page.items[0]
-    tags.push(generateTag(ctx.lang, page.system.uid, affix))
-
-    const response = await request<GetMyPagesBreadcrumbsData>(
-      GetMyPagesBreadcrumbs,
-      { locale: ctx.lang, url: ctx.pathname },
-      { next: { tags } }
-    )
-    if (!response.data) {
-      throw notFound(response)
-    }
-
-    const validatedBreadcrumbsData =
-      validateMyPagesBreadcrumbsContentstackSchema.safeParse(response.data)
-
-    if (!validatedBreadcrumbsData.success) {
-      throw internalServerError(validatedBreadcrumbsData.error)
-    }
-
-    const parentBreadcrumbs =
-      validatedBreadcrumbsData.data.all_account_page.items[0].web.breadcrumbs.parentsConnection.edges.map(
-        (breadcrumb) => {
-          return {
-            href: removeMultipleSlashes(
-              `/${breadcrumb.node.system.locale}/${breadcrumb.node.url}`
-            ),
-            title: breadcrumb.node.breadcrumbs.title,
-            uid: breadcrumb.node.system.uid,
-          }
-        }
-      )
-
-    const pageBreadcrumb =
-      validatedBreadcrumbsData.data.all_account_page.items.map((breadcrumb) => {
-        return {
-          title: breadcrumb.web.breadcrumbs.title,
-          uid: breadcrumb.system.uid,
-        }
-      })
-
-    const breadcrumbs = [
-      homeBreadcrumbs[ctx.lang],
-      parentBreadcrumbs,
-      pageBreadcrumb,
-    ].flat()
-
-    const validatedBreadcrumbs = getBreadcrumbsSchema.safeParse(breadcrumbs)
-    if (!validatedBreadcrumbs.success) {
-      throw internalServerError(validatedBreadcrumbs.error)
-    }
-
-    return validatedBreadcrumbs.data
-  }),
-  getLoyaltyPage: contentstackProcedure.query(async ({ ctx }) => {
-    const refsResponse = await request<GetLoyaltyPageBreadcrumbsRefsData>(
-      GetLoyaltyPageBreadcrumbsRefs,
-      { locale: ctx.lang, url: ctx.pathname },
-      {
-        next: {
-          tags: [generateRefsResponseTag(ctx.lang, ctx.pathname, affix)],
-        },
-      }
-    )
-    if (!refsResponse.data) {
-      throw notFound(refsResponse)
-    }
-
-    const validatedRefsData =
-      validateLoyaltyPageBreadcrumbsRefsContentstackSchema.safeParse(
-        refsResponse.data
-      )
-
-    if (!validatedRefsData.success) {
-      throw internalServerError(validatedRefsData.error)
-    }
-
-    const connections = getConnections(validatedRefsData.data.all_loyalty_page)
-    const tags = generateTags(ctx.lang, connections)
-    const page = validatedRefsData.data.all_loyalty_page.items[0]
-    tags.push(generateTag(ctx.lang, page.system.uid, affix))
-
-    const response = await request<GetLoyaltyPageBreadcrumbsData>(
-      GetLoyaltyPageBreadcrumbs,
-      { locale: ctx.lang, url: ctx.pathname },
-      { next: { tags } }
-    )
-    if (!response.data) {
-      throw notFound(response)
-    }
-
-    const validatedBreadcrumbsData =
-      validateLoyaltyPageBreadcrumbsContentstackSchema.safeParse(response.data)
-
-    if (!validatedBreadcrumbsData.success) {
-      throw internalServerError(validatedBreadcrumbsData.error)
-    }
-
-    const parentBreadcrumbs =
-      validatedBreadcrumbsData.data.all_loyalty_page.items[0].web.breadcrumbs.parentsConnection.edges.map(
-        (breadcrumb) => {
-          return {
-            href: removeMultipleSlashes(
-              `/${breadcrumb.node.system.locale}/${breadcrumb.node.url}`
-            ),
-            title: breadcrumb.node.breadcrumbs.title,
-            uid: breadcrumb.node.system.uid,
-          }
-        }
-      )
-
-    const pageBreadcrumb =
-      validatedBreadcrumbsData.data.all_loyalty_page.items.map((breadcrumb) => {
-        return {
-          title: breadcrumb.web.breadcrumbs.title,
-          uid: breadcrumb.system.uid,
-        }
-      })
-
     const breadcrumbs = [
       homeBreadcrumbs[ctx.lang],
       parentBreadcrumbs,

types/components/myPages/breadcrumbs.ts

@@ -1,5 +0,0 @@
-import { PageTypes } from "@/server/routers/contentstack/breadcrumbs/input"
-
-export type BreadcrumbsProps = {
-  pageType?: PageTypes
-}

types/requests/pageType.ts

@@ -0,0 +1,4 @@
+export enum PageTypeEnum {
+  accountPage = "account-page",
+  loyaltyPage = "loyalty-page",
+}