fix: breakout current page tsx

app/[lang]/(live)/current-content-page/page.tsx

@@ -3,13 +3,7 @@ import { notFound } from "next/navigation"
 import { request } from "@/lib/request";
 import { GetCurrentBlockPage } from "@/lib/graphql/Query/CurrentBlockPage.graphql";
 
-import Aside from "@/components/Current/Aside"
+import ContentPage from "@/components/Current/ContentPage"
-import Blocks from "@/components/Current/Blocks"
-import Header from "@/components/Current/Header"
-import Hero from "@/components/Current/Hero"
-import Preamble from "@/components/Current/Preamble"
-import Section from "@/components/Current/Section"
-import SubnavMobile from "@/components/Current/SubnavMobile"
 
 import type { PageArgs, LangParams, UriParams } from "@/types/params"
 import type { GetCurrentBlockPageData } from "@/types/requests/currentBlockPage"
@@ -38,40 +32,12 @@ export default async function CurrentContentPage({
       throw new Error("Not found")
     }
 
-    const page = response.data.all_current_blocks_page.items[0]
-    const images = page.hero?.imagesConnection
-    const breadcrumbs = page.breadcrumbs.parentsConnection
-    const parent = breadcrumbs.edges.at(-1)
-
     return (
-      <>
+      <ContentPage
-        <Header lang={params.lang} pathname={searchParams.uri} />
+        data={response.data}
-        {images?.totalCount ? <Hero images={images.edges} /> : null}
+        uri={searchParams.uri}
-        <main className="main l-sections-wrapper" id="maincontent" role="main">
+        lang={params.lang}
-          <input
+      />
-            id="lbl-personalized-areas"
-            name="lbl-personalized-areas"
-            type="hidden"
-            value=""
-          />
-          <SubnavMobile
-            breadcrumbs={breadcrumbs}
-            parent={parent}
-            title={page.breadcrumbs.title}
-          />
-          <Preamble
-            breadcrumbs={breadcrumbs}
-            breadcrumbParent={parent}
-            breadcrumbTitle={page.breadcrumbs.title}
-            preamble={page.preamble}
-            title={page.title}
-          />
-          <Section>
-            <Blocks blocks={page.blocks} />
-            <Aside blocks={page.aside} />
-          </Section>
-        </main>
-      </>
     )
   } catch (err) {
     return notFound()

app/[lang]/(preview)/preview/page.tsx

@@ -1,17 +1,11 @@
-import { notFound } from "next/navigation"
-
 import { previewRequest } from "@/lib/previewRequest"
 import { GetCurrentBlockPage } from "@/lib/graphql/Query/CurrentBlockPage.graphql"
 
-import Aside from "@/components/Current/Aside"
-import Blocks from "@/components/Current/Blocks"
-import Header from "@/components/Current/Header"
-import Hero from "@/components/Current/Hero"
-
 import type { PageArgs, LangParams, UriParams } from "@/types/params"
 import type { GetCurrentBlockPageData } from "@/types/requests/currentBlockPage"
 import ContentstackLivePreview from "@contentstack/live-preview-utils"
 import LoadingPreview from "@/components/Current/LoadingPreview"
+import ContentPage from "@/components/Current/ContentPage"
 
 export default async function CurrentContentPage({
   params,
@@ -26,7 +20,7 @@ export default async function CurrentContentPage({
 
     const response = await previewRequest<GetCurrentBlockPageData>(
       GetCurrentBlockPage,
-      { locale: params.lang, uid: searchParams.uri }
+      { locale: params.lang, uri: searchParams.uri }
     )
 
     if (!response.data?.all_current_blocks_page?.total) {
@@ -36,19 +30,12 @@ export default async function CurrentContentPage({
       throw new Error("Not found")
     }
 
-    const page = response.data.all_current_blocks_page.items[0]
-    const images = page.hero?.imagesConnection
-
     return (
-      <>
+      <ContentPage
-        <Header lang={params.lang} pathname={searchParams.uri} />
+        data={response.data}
-        {images?.totalCount ? <Hero images={images.edges} /> : null}
+        uri={searchParams.uri}
-        <main className="main l-sections-wrapper" id="maincontent" role="main">
+        lang={params.lang}
-          <h1>{page.title}</h1>
+      />
-          <Blocks blocks={page.blocks} />
-          <Aside blocks={page.aside} />
-        </main>
-      </>
     )
   } catch (error) {
     // TODO: throw 500

components/Current/ContentPage/index.tsx

@@ -0,0 +1,53 @@
+import Aside from "@/components/Current/Aside"
+import Blocks from "@/components/Current/Blocks"
+import Header from "@/components/Current/Header"
+import Hero from "@/components/Current/Hero"
+import Preamble from "@/components/Current/Preamble"
+import Section from "@/components/Current/Section"
+import SubnavMobile from "@/components/Current/SubnavMobile"
+import { Lang } from "@/types/lang"
+import { GetCurrentBlockPageData } from "@/types/requests/currentBlockPage"
+
+type ContentPageProps = {
+  data: GetCurrentBlockPageData
+  uri: string
+  lang: Lang
+}
+
+export default function ContentPage({ data, lang, uri }: ContentPageProps) {
+  const page = data.all_current_blocks_page.items[0]
+  const images = page.hero?.imagesConnection
+  const breadcrumbs = page.breadcrumbs.parentsConnection
+  const parent = breadcrumbs.edges.at(-1)
+
+  return (
+    <>
+      <Header lang={lang} pathname={uri} />
+      {images?.totalCount ? <Hero images={images.edges} /> : null}
+      <main className="main l-sections-wrapper" id="maincontent" role="main">
+        <input
+          id="lbl-personalized-areas"
+          name="lbl-personalized-areas"
+          type="hidden"
+          value=""
+        />
+        <SubnavMobile
+          breadcrumbs={breadcrumbs}
+          parent={parent}
+          title={page.breadcrumbs.title}
+        />
+        <Preamble
+          breadcrumbs={breadcrumbs}
+          breadcrumbParent={parent}
+          breadcrumbTitle={page.breadcrumbs.title}
+          preamble={page.preamble}
+          title={page.title}
+        />
+        <Section>
+          <Blocks blocks={page.blocks} />
+          <Aside blocks={page.aside} />
+        </Section>
+      </main>
+    </>
+  )
+}