refactor: reuse query code for both loyalty and account pages

components/ContentType/LoyaltyPage.tsx

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

components/MyPages/Breadcrumbs/index.tsx

@@ -1,20 +1,16 @@
 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"
 
-type bool = {
-  b?: Boolean
-}
-export default async function Breadcrumbs({ b = false }: bool) {
-  let breadcrumbs
-  if (!b)
-    breadcrumbs = await serverClient().contentstack.breadcrumbs.getAccountPage()
-  else
-    breadcrumbs = await serverClient().contentstack.breadcrumbs.getLoyaltyPage()
+export default async function Breadcrumbs({ pageType = PageTypes.Account }) {
+  const breadcrumbs = await serverClient().contentstack.breadcrumbs.get({
+    pageType,
+  })
   return (
     <nav className={styles.breadcrumbs}>
       <ul className={styles.list}>

lib/graphql/Query/BreadcrumbsAccountPage.graphql

@@ -2,7 +2,7 @@
 #import "../Fragments/Refs/Breadcrumbs.graphql"
 
 query GetAccountPageBreadcrumbs($locale: String!, $url: String!) {
-  all_account_page(locale: $locale, where: { url: $url }) {
+  all_page: all_account_page(locale: $locale, where: { url: $url }) {
     items {
       ...AccountPageBreadcrumbs
       system {
@@ -13,7 +13,7 @@ query GetAccountPageBreadcrumbs($locale: String!, $url: String!) {
 }
 
 query GetAccountPageBreadcrumbsRefs($locale: String!, $url: String!) {
-  all_account_page(locale: $locale, where: { url: $url }) {
+  all_page: all_account_page(locale: $locale, where: { url: $url }) {
     items {
       ...AccountPageBreadcrumbsRefs
     }

lib/graphql/Query/BreadcrumbsLoyaltyPage.graphql

@@ -2,7 +2,7 @@
 #import "../Fragments/Refs/Breadcrumbs.graphql"
 
 query GetLoyaltyPageBreadcrumbs($locale: String!, $url: String!) {
-  all_loyalty_page(locale: $locale, where: { url: $url }) {
+  all_page: all_loyalty_page(locale: $locale, where: { url: $url }) {
     items {
       ...LoyaltyPageBreadcrumbs
       system {
@@ -13,7 +13,7 @@ query GetLoyaltyPageBreadcrumbs($locale: String!, $url: String!) {
 }
 
 query GetLoyaltyPageBreadcrumbsRefs($locale: String!, $url: String!) {
-  all_loyalty_page(locale: $locale, where: { url: $url }) {
+  all_page: all_loyalty_page(locale: $locale, where: { url: $url }) {
     items {
       ...LoyaltyPageBreadcrumbsRefs
     }

server/routers/contentstack/breadcrumbs/input.ts

@@ -0,0 +1,12 @@
+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/output.ts

@@ -10,50 +10,26 @@ export const getBreadcrumbsSchema = z.array(
   })
 )
 
-const validateBreadcrumbs = z.object({
-  breadcrumbs: z.object({
-    title: z.string(),
-    parentsConnection: z.object({
-      edges: z.array(
-        z.object({
-          node: z.object({
-            breadcrumbs: z.object({
-              title: z.string(),
-            }),
-            system: z.object({
-              locale: z.nativeEnum(Lang),
-              uid: z.string(),
-            }),
-            url: z.string(),
-          }),
-        })
-      ),
-    }),
-  }),
-})
-
-const validateBreadcrumbsRefs = z.object({
-  breadcrumbs: z.object({
-    parentsConnection: z.object({
-      edges: z.array(
-        z.object({
-          node: z.object({
-            system: z.object({
-              content_type_uid: z.string(),
-              uid: z.string(),
-            }),
-          }),
-        })
-      ),
-    }),
-  }),
-})
-
-export const validateBreadcrumbsRefsContentstackSchemaAccountPage = z.object({
-  all_account_page: z.object({
+export const validateBreadcrumbsRefsContentstackSchema = z.object({
+  all_page: z.object({
     items: z.array(
       z.object({
-        web: validateBreadcrumbsRefs,
+        web: z.object({
+          breadcrumbs: z.object({
+            parentsConnection: z.object({
+              edges: z.array(
+                z.object({
+                  node: z.object({
+                    system: z.object({
+                      content_type_uid: z.string(),
+                      uid: z.string(),
+                    }),
+                  }),
+                })
+              ),
+            }),
+          }),
+        }),
         system: z.object({
           content_type_uid: z.string(),
           uid: z.string(),
@@ -63,38 +39,31 @@ export const validateBreadcrumbsRefsContentstackSchemaAccountPage = z.object({
   }),
 })
 
-export const validateBreadcrumbsContentstackSchemaAccountPage = z.object({
-  all_account_page: z.object({
+export const validateBreadcrumbsContentstackSchema = z.object({
+  all_page: z.object({
     items: z.array(
       z.object({
-        web: validateBreadcrumbs,
-        system: z.object({
-          uid: z.string(),
-        }),
-      })
-    ),
-  }),
-})
-
-export const validateBreadcrumbsRefsContentstackSchemaLoyaltyPage = z.object({
-  all_loyalty_page: z.object({
-    items: z.array(
-      z.object({
-        web: validateBreadcrumbsRefs,
-        system: z.object({
-          content_type_uid: z.string(),
-          uid: z.string(),
-        }),
-      })
-    ),
-  }),
-})
-
-export const validateBreadcrumbsContentstackSchemaLoyaltyPage = z.object({
-  all_loyalty_page: z.object({
-    items: z.array(
-      z.object({
-        web: validateBreadcrumbs,
+        web: z.object({
+          breadcrumbs: z.object({
+            title: z.string(),
+            parentsConnection: z.object({
+              edges: z.array(
+                z.object({
+                  node: z.object({
+                    breadcrumbs: z.object({
+                      title: z.string(),
+                    }),
+                    system: z.object({
+                      locale: z.nativeEnum(Lang),
+                      uid: z.string(),
+                    }),
+                    url: z.string(),
+                  }),
+                })
+              ),
+            }),
+          }),
+        }),
         system: z.object({
           uid: z.string(),
         }),

server/routers/contentstack/breadcrumbs/query.ts

@@ -17,183 +17,107 @@ import {
 } from "@/utils/generateTag"
 import { removeMultipleSlashes } from "@/utils/url"
 
+import { PageTypeEnum, PageTypes } from "./input"
 import {
   getBreadcrumbsSchema,
-  validateBreadcrumbsContentstackSchemaAccountPage,
-  validateBreadcrumbsContentstackSchemaLoyaltyPage,
-  validateBreadcrumbsRefsContentstackSchemaAccountPage,
-  validateBreadcrumbsRefsContentstackSchemaLoyaltyPage,
+  validateBreadcrumbsContentstackSchema,
+  validateBreadcrumbsRefsContentstackSchema,
 } from "./output"
-import {
-  affix,
-  getConnectionsAccountPage,
-  getConnectionsLoyaltyPage,
-  homeBreadcrumbs,
-} from "./utils"
+import { affix, getConnections, homeBreadcrumbs } from "./utils"
 
 import type {
-  GetAccountPageBreadcrumbsData,
-  GetAccountPageBreadcrumbsRefsData,
-  GetLoyaltyPageBreadcrumbsData,
-  GetLoyaltyPageBreadcrumbsRefsData,
+  GetMyPagesBreadcrumbsData,
+  GetMyPagesBreadcrumbsRefsData,
 } from "@/types/requests/myPages/breadcrumbs"
 
 export const breadcrumbsQueryRouter = router({
-  getAccountPage: contentstackProcedure.query(async ({ ctx }) => {
-    const refsResponse = await request<GetAccountPageBreadcrumbsRefsData>(
-      GetAccountPageBreadcrumbsRefs,
-      { locale: ctx.lang, url: ctx.pathname },
-      {
-        next: {
-          tags: [generateRefsResponseTag(ctx.lang, ctx.pathname, affix)],
-        },
+  get: contentstackProcedure
+    .input(PageTypeEnum)
+    .query(async ({ ctx, input }) => {
+      let refsResponse, GetPageBreadcrumbs, GetPageBreadcrumbRefs
+
+      if (input.pageType == PageTypes.Account) {
+        GetPageBreadcrumbs = GetAccountPageBreadcrumbs
+        GetPageBreadcrumbRefs = GetAccountPageBreadcrumbsRefs
+      } else if (input.pageType == PageTypes.Loyalty) {
+        GetPageBreadcrumbs = GetLoyaltyPageBreadcrumbs
+        GetPageBreadcrumbRefs = GetLoyaltyPageBreadcrumbsRefs
+      } else {
+        return []
       }
-    )
-    if (!refsResponse.data) {
-      throw notFound(refsResponse)
-    }
-
-    const validatedRefsData =
-      validateBreadcrumbsRefsContentstackSchemaAccountPage.safeParse(
-        refsResponse.data
+      refsResponse = await request<GetMyPagesBreadcrumbsRefsData>(
+        GetPageBreadcrumbRefs,
+        { locale: ctx.lang, url: ctx.pathname },
+        {
+          next: {
+            tags: [generateRefsResponseTag(ctx.lang, ctx.pathname, affix)],
+          },
+        }
       )
-    if (!validatedRefsData.success) {
-      throw internalServerError(validatedRefsData.error)
-    }
+      if (!refsResponse.data) {
+        throw notFound(refsResponse)
+      }
 
-    const connections = getConnectionsAccountPage(validatedRefsData.data)
-    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 validatedRefsData =
+        validateBreadcrumbsRefsContentstackSchema.safeParse(refsResponse.data)
+      if (!validatedRefsData.success) {
+        throw internalServerError(validatedRefsData.error)
+      }
 
-    const response = await request<GetAccountPageBreadcrumbsData>(
-      GetAccountPageBreadcrumbs,
-      { locale: ctx.lang, url: ctx.pathname },
-      { next: { tags } }
-    )
-    if (!response.data) {
-      throw notFound(response)
-    }
+      const connections = getConnections(validatedRefsData.data)
+      const tags = generateTags(ctx.lang, connections)
+      const page = validatedRefsData.data.all_page.items[0]
+      tags.push(generateTag(ctx.lang, page.system.uid, affix))
 
-    const validatedBreadcrumbsData =
-      validateBreadcrumbsContentstackSchemaAccountPage.safeParse(response.data)
+      const response = await request<GetMyPagesBreadcrumbsData>(
+        GetPageBreadcrumbs,
+        { locale: ctx.lang, url: ctx.pathname },
+        { next: { tags } }
+      )
+      if (!response.data) {
+        throw notFound(response)
+      }
 
-    if (!validatedBreadcrumbsData.success) {
-      throw internalServerError(validatedBreadcrumbsData.error)
-    }
+      const validatedBreadcrumbsData =
+        validateBreadcrumbsContentstackSchema.safeParse(response.data)
 
-    const parentBreadcrumbs =
-      validatedBreadcrumbsData.data.all_account_page.items[0].web.breadcrumbs.parentsConnection.edges.map(
+      if (!validatedBreadcrumbsData.success) {
+        throw internalServerError(validatedBreadcrumbsData.error)
+      }
+
+      const parentBreadcrumbs =
+        validatedBreadcrumbsData.data.all_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_page.items.map(
         (breadcrumb) => {
           return {
-            href: removeMultipleSlashes(
-              `/${breadcrumb.node.system.locale}/${breadcrumb.node.url}`
-            ),
-            title: breadcrumb.node.breadcrumbs.title,
-            uid: breadcrumb.node.system.uid,
+            title: breadcrumb.web.breadcrumbs.title,
+            uid: breadcrumb.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 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)],
-        },
+      const validatedBreadcrumbs = getBreadcrumbsSchema.safeParse(breadcrumbs)
+      if (!validatedBreadcrumbs.success) {
+        throw internalServerError(validatedBreadcrumbs.error)
       }
-    )
 
-    if (!refsResponse.data) {
-      throw notFound(refsResponse)
-    }
-
-    const validatedRefsData =
-      validateBreadcrumbsRefsContentstackSchemaLoyaltyPage.safeParse(
-        refsResponse.data
-      )
-
-    if (!validatedRefsData.success) {
-      throw internalServerError(validatedRefsData.error)
-    }
-
-    const connections = getConnectionsLoyaltyPage(validatedRefsData.data)
-    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 =
-      validateBreadcrumbsContentstackSchemaLoyaltyPage.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,
-      pageBreadcrumb,
-    ].flat()
-
-    const validatedBreadcrumbs = getBreadcrumbsSchema.safeParse(breadcrumbs)
-    if (!validatedBreadcrumbs.success) {
-      throw internalServerError(validatedBreadcrumbs.error)
-    }
-
-    return validatedBreadcrumbs.data
-  }),
+      return validatedBreadcrumbs.data
+    }),
 })

server/routers/contentstack/breadcrumbs/utils.ts

@@ -1,27 +1,12 @@
 import { Lang } from "@/constants/languages"
 
-import type {
-  GetAccountPageBreadcrumbsRefsData,
-  GetLoyaltyPageBreadcrumbsRefsData,
-} from "@/types/requests/myPages/breadcrumbs"
+import type { GetMyPagesBreadcrumbsRefsData } from "@/types/requests/myPages/breadcrumbs"
 import type { Edges } from "@/types/requests/utils/edges"
 import type { NodeRefs } from "@/types/requests/utils/refs"
 
-export function getConnectionsAccountPage(
-  refs: GetAccountPageBreadcrumbsRefsData
-) {
+export function getConnections(refs: GetMyPagesBreadcrumbsRefsData) {
   const connections: Edges<NodeRefs>[] = []
-  refs.all_account_page.items.forEach((ref) => {
-    connections.push(ref.web.breadcrumbs.parentsConnection)
-  })
-  return connections
-}
-
-export function getConnectionsLoyaltyPage(
-  refs: GetLoyaltyPageBreadcrumbsRefsData
-) {
-  const connections: Edges<NodeRefs>[] = []
-  refs.all_loyalty_page.items.forEach((ref) => {
+  refs.all_page.items.forEach((ref) => {
     connections.push(ref.web.breadcrumbs.parentsConnection)
   })
   return connections

types/requests/myPages/breadcrumbs.ts

@@ -27,12 +27,8 @@ interface MyPagesBreadcrumbs {
 
 interface AllPageResponse extends AllRequestResponse<MyPagesBreadcrumbs> {}
 
-export interface GetAccountPageBreadcrumbsData {
-  all_account_page: AllPageResponse
-}
-
-export interface GetLoyaltyPageBreadcrumbsData {
-  all_loyalty_page: AllPageResponse
+export interface GetMyPagesBreadcrumbsData {
+  all_page: AllPageResponse
 }
 
 interface MyPagesBreadcrumbRefs extends System {
@@ -46,10 +42,6 @@ interface MyPagesBreadcrumbRefs extends System {
 interface AllPageRefsResponse
   extends AllRequestResponse<MyPagesBreadcrumbRefs> {}
 
-export interface GetAccountPageBreadcrumbsRefsData {
-  all_account_page: AllPageRefsResponse
-}
-
-export interface GetLoyaltyPageBreadcrumbsRefsData {
-  all_loyalty_page: AllPageRefsResponse
+export interface GetMyPagesBreadcrumbsRefsData {
+  all_page: AllPageRefsResponse
 }