Added preview functionality for home page

app/(site)/[locale]/[...slug]/page.tsx

@@ -1,10 +1,10 @@
+import CategoryPage from '@/components/pages/category-page';
+import ProductPage from '@/components/pages/product-page';
+import SinglePage from '@/components/pages/single-page';
 import getQueryFromSlug from '@/helpers/get-query-from-slug';
-import { clientFetch } from 'lib/sanity/sanity.client';
+import { getCachedClient } from 'lib/sanity/sanity.client';
 import type { Metadata } from 'next';
 import { notFound } from 'next/navigation';
-import CategoryPage from './pages/category-page';
-import ProductPage from './pages/product-page';
-import SinglePage from './pages/single-page';
 
 export const revalidate = 43200; // 12 hours in seconds
 
@@ -17,7 +17,7 @@ export async function generateMetadata({
 
   const { query = '', queryParams } = getQueryFromSlug(slug, locale);
 
-  const page = await clientFetch(query, queryParams);
+  const page = await getCachedClient()(query, queryParams);
 
   if (!page) return notFound();
 
@@ -47,11 +47,11 @@ export default async function Page({ params }: PageParams) {
   let pageData;
 
   if (docType === 'page') {
-    pageData = await clientFetch(query, queryParams);
+    pageData = await getCachedClient()(query, queryParams);
   } else if (docType === 'product') {
-    pageData = await clientFetch(query, queryParams);
+    pageData = await getCachedClient()(query, queryParams);
   } else if (docType === 'category') {
-    pageData = await clientFetch(query, queryParams);
+    pageData = await getCachedClient()(query, queryParams);
   } else {
     return;
   }

app/(site)/[locale]/[...slug]/pages/category-page.tsx

@@ -1,26 +0,0 @@
-import Search from '@/components/search/search';
-import SearchResult from '@/components/search/search-result';
-import Text from '@/components/ui/text/text';
-
-interface CategoryPageParams {
-  data: object | any;
-}
-
-export default function CategoryPage({ data }: CategoryPageParams) {
-  const category = data;
-
-  const { title } = category;
-
-  return (
-    <div className="my-8 flex w-full flex-col px-4 lg:my-12 lg:px-8 2xl:px-16">
-      {title && (
-        <Text className="mb-8 lg:mb-12" variant="pageHeading">
-          {title}
-        </Text>
-      )}
-      <Search isCategory placeholder={title.toLowerCase()}>
-        <SearchResult />
-      </Search>
-    </div>
-  );
-}

app/(site)/[locale]/[...slug]/pages/product-page.tsx

@@ -1,28 +0,0 @@
-import ProductView from '@/components/product/product-view';
-interface ProductPageParams {
-  data: object | any;
-}
-
-export default function ProductPage({ data }: ProductPageParams) {
-  const product = data;
-
-  const productJsonLd = {
-    '@context': 'https://schema.org',
-    '@type': 'Product',
-    name: product.name,
-    description: product.description,
-    image: product.images[0].asset.url
-  };
-
-  return (
-    <>
-      <script
-        type="application/ld+json"
-        dangerouslySetInnerHTML={{
-          __html: JSON.stringify(productJsonLd)
-        }}
-      />
-      <ProductView product={product} relatedProducts={[]} />;
-    </>
-  );
-}

app/(site)/[locale]/[...slug]/pages/single-page.tsx

@@ -1,13 +0,0 @@
-import DynamicContentManager from '@/components/layout/dynamic-content-manager/dynamic-content-manager';
-
-interface SinglePageParams {
-  data: object | any;
-}
-
-export default function SinglePage({ data }: SinglePageParams) {
-  return (
-    <>
-      <DynamicContentManager content={data?.content} />;
-    </>
-  );
-}

app/(site)/[locale]/page.tsx

@@ -1,17 +1,18 @@
-import DynamicContentManager from 'components/layout/dynamic-content-manager/dynamic-content-manager';
+import HomePage from '@/components/pages/home-page';
+import HomePagePreview from '@/components/pages/home-page-preview';
+import PreviewProvider from '@/components/preview-provider';
 import { homePageQuery } from 'lib/sanity/queries';
-import { clientFetch } from 'lib/sanity/sanity.client';
+import { getCachedClient } from 'lib/sanity/sanity.client';
 import { Metadata } from 'next';
+import { draftMode } from 'next/headers';
 import { notFound } from 'next/navigation';
 
-export const runtime = 'edge';
-
 export async function generateMetadata({
   params
 }: {
   params: { slug: string; locale: string };
 }): Promise<Metadata> {
-  const homePage = await clientFetch(homePageQuery, params);
+  const homePage = await getCachedClient()(homePageQuery, params);
 
   if (!homePage) return notFound();
 
@@ -20,19 +21,26 @@ export async function generateMetadata({
     description: homePage.seo.description || homePage.description
   };
 }
-
 interface HomePageParams {
   params: {
     locale: string;
   };
 }
 
-export default async function HomePage({ params }: HomePageParams) {
-  const data = await clientFetch(homePageQuery, params);
+export default async function IndexPage({ params }: HomePageParams) {
+  const preview = draftMode().isEnabled ? { token: process.env.SANITY_API_READ_TOKEN } : undefined;
 
-  return (
-    <>
-      <DynamicContentManager content={data?.content} />
-    </>
-  );
+  const data = await getCachedClient(preview)(homePageQuery, params);
+
+  if (!data) return notFound();
+
+  if (preview && preview.token) {
+    return (
+      <PreviewProvider token={preview.token}>
+        <HomePagePreview initialData={data} params={params} />
+      </PreviewProvider>
+    );
+  }
+
+  return <HomePage data={data} />;
 }

app/api/draft/route.ts

@@ -1,99 +0,0 @@
-// route handler enabling draft mode
-import { categoryQuery, homePageQuery, pageQuery, productQuery } from 'lib/sanity/queries';
-import { client } from 'lib/sanity/sanity.client';
-import { draftMode } from 'next/headers';
-
-const draftSecret = process.env.NEXT_PUBLIC_SANITY_DRAFT_TOKEN
-
-export async function GET(request: Request) {
-// Enable Draft Mode by setting the cookie
-draftMode().enable();
-  // Parse query string parameters
-  const { searchParams } = new URL(request.url);
-  const secret = searchParams.get('secret');
-  const slug = searchParams.get('slug');
-  const locale = searchParams.get('locale');
-  const type = searchParams.get('type');
-
-  // Make sure there's a valid draft token.
-  if (secret !== draftSecret) {
-    return new Response('Invalid token', { status: 401 });
-  }
-
-  // Make sure there's a slug provided.
-  if (!slug) {
-    return new Response('No slug provided', { status: 401 });
-  }
-
-  // Make sure there's a locale provided.
-  if (!locale) {
-    return new Response('No locale provided', { status: 401 });
-  }
-
-   // Make sure there's a type provided.
-   if (!type) {
-    return new Response('No type provided', { status: 401 });
-  }
-
-  // Types available for preview - Check if the post with the given `slug` exists
-  const home = await client.fetch(homePageQuery, {
-    slug: slug,
-    locale: locale,
-  })
-
-  const page = await client.fetch(pageQuery, {
-    slug: slug,
-    locale: locale,
-  })
-
-  const product = await client.fetch(productQuery, {
-    slug: slug,
-    locale: locale,
-  })
-
-  const category = await client.fetch(categoryQuery, {
-    slug: slug,
-    locale: locale,
-  })
-
-
-  draftMode().enable();
-
-   // Redirect to the path from the fetched post
-  // We don't redirect to req.query.slug as that might lead to open redirect vulnerabilities
-  if (home && type === 'home') {
-    return new Response(null, {
-        status: 307,
-        headers: {
-            Location: `/${home.locale}/${home.slug}`,
-        },
-    })
-  }
-
-  if (page && type === 'page') {
-    return new Response(null, {
-        status: 307,
-        headers: {
-            Location: `/${page.locale}/${page.slug}`,
-        },
-    })
-  }
-
-  if (product && type === 'product') {
-    return new Response(null, {
-        status: 307,
-        headers: {
-            Location: `/${product.locale}/product/${product.slug}`,
-        },
-    })
-  }
-
-  if (category && type === 'category') {
-    return new Response(null, {
-        status: 307,
-        headers: {
-            Location: `/${category.locale}/category/${category.slug}`,
-        },
-    })
-  }
-}

app/api/exit-draft/route.ts

@@ -1,12 +0,0 @@
-import { draftMode } from 'next/headers';
- 
-export async function GET() {
-  draftMode().disable();
-
-  return new Response(null, {
-      status: 307,
-      headers: {
-          Location: `/`,
-      },
-  })
-}

app/api/exit-preview/route.ts

@@ -0,0 +1,12 @@
+import { draftMode } from "next/headers";
+
+export async function GET() {
+  draftMode().disable();
+  
+  return new Response(null, {
+    status: 307,
+    headers: {
+        Location: `/`,
+    },
+  })
+}

app/api/preview/route.ts

@@ -0,0 +1,27 @@
+import { draftMode } from 'next/headers'
+
+export async function GET(request: Request) {
+  const { searchParams } = new URL(request.url)
+  const secret = searchParams.get('secret')
+  // const slug = searchParams.get('slug')
+  const type = searchParams.get('type')
+  const locale = searchParams.get('locale')
+
+  // Check the secret and next parameters
+  // This secret should only be known to this route handler and the CMS
+  if (secret !== process.env.SANITY_API_READ_TOKEN) {
+    return new Response('Invalid token', { status: 401 })
+  }
+
+  draftMode().enable()
+
+
+  if (type === 'home') {
+    return new Response(null, {
+        status: 307,
+        headers: {
+            Location: `/${locale}`,
+        },
+    })
+  }
+}