Preview of document types

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

@@ -1,15 +1,20 @@
 import CategoryPage from '@/components/pages/category-page';
+import CategoryPagePreview from '@/components/pages/category-page-preview';
 import ProductPage from '@/components/pages/product-page';
+import ProductPagePreview from '@/components/pages/product-page-preview';
 import SearchPage from '@/components/pages/search-page';
+import SearchPagePreview from '@/components/pages/search-page-preview';
 import SinglePage from '@/components/pages/single-page';
 // import PreviewProvider from '@/components/preview-provider';
+import SinglePagePreview from '@/components/pages/single-page-preview';
 import getQueryFromSlug from '@/helpers/get-query-from-slug';
+import { categoryQuery, pageQuery, productQuery, searchPageQuery } from '@/lib/sanity/queries';
 import { getCategory, getPage, getProduct, getSearch } from '@/lib/sanity/sanity.fetch';
 import type { Metadata } from 'next';
+import { LiveQuery } from 'next-sanity/preview/live-query';
+import { draftMode } from 'next/headers';
 import { notFound } from 'next/navigation';
 
-export const runtime = 'edge';
-
 export async function generateMetadata({
   params
 }: {
@@ -21,10 +26,15 @@ export async function generateMetadata({
 
   let page;
 
-  docType === 'page' && (page = await getPage(queryParams.slug, queryParams.locale));
-  docType === 'product' && (page = await getProduct(queryParams.slug, queryParams.locale));
-  docType === 'category' && (page = await getCategory(queryParams.slug, queryParams.locale));
-  docType === 'search' && (page = await getSearch(queryParams.slug, queryParams.locale));
+  if (docType === 'page') {
+    page = await getPage(queryParams.slug, queryParams.locale);
+  } else if (docType === 'product') {
+    page = await getProduct(queryParams.slug, queryParams.locale);
+  } else if (docType === 'category') {
+    page = await getCategory(queryParams.slug, queryParams.locale);
+  } else if (docType === 'search') {
+    page = await getSearch(queryParams.slug, queryParams.locale);
+  }
 
   if (!page) return notFound();
 
@@ -63,16 +73,48 @@ export default async function Page({ params }: PageParams) {
     data = await getSearch(queryParams.slug, queryParams.locale);
   }
 
-  if (!data) {
+  let PagePreview;
+
+  if (docType === 'page') {
+    PagePreview = SinglePagePreview;
+  } else if (docType === 'product') {
+    PagePreview = ProductPagePreview;
+  } else if (docType === 'category') {
+    PagePreview = CategoryPagePreview;
+  } else if (docType === 'search') {
+    PagePreview = SearchPagePreview;
+  }
+
+  let query = '';
+
+  if (docType === 'page') {
+    query = pageQuery;
+  } else if (docType === 'product') {
+    query = productQuery;
+  } else if (docType === 'category') {
+    query = categoryQuery;
+  } else if (docType === 'search') {
+    query = searchPageQuery;
+  }
+
+  if (!query && !PagePreview && !data && !draftMode().isEnabled) {
     notFound();
   }
 
   return (
-    <>
-      {docType === 'page' && <SinglePage data={data} />}
-      {docType === 'product' && <ProductPage data={data} />}
-      {docType === 'category' && <CategoryPage data={data} />}
-      {docType === 'search' && <SearchPage data={data} />}
-    </>
+    <LiveQuery
+      enabled={draftMode().isEnabled}
+      query={query}
+      params={{ slug: queryParams.slug, locale: queryParams.locale }}
+      initialData={data}
+      as={PagePreview}
+    >
+      <>
+        {docType === 'page' && <SinglePage data={data} />}
+        {docType === 'product' && <ProductPage data={data} />}
+        {docType === 'category' && <CategoryPage data={data} />}
+        {docType === 'search' && <SearchPage data={data} />}
+      </>
+    </LiveQuery>
   );
 }

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

@@ -7,8 +7,6 @@ import { LiveQuery } from 'next-sanity/preview/live-query';
 import { draftMode } from 'next/headers';
 import { notFound } from 'next/navigation';
 
-export const runtime = 'edge';
-
 export async function generateMetadata({
   params
 }: {

app/api/preview/route.ts

@@ -1,10 +1,6 @@
-// import { previewSecretId } from '@/lib/sanity/sanity.api'
-// import { client } from '@/lib/sanity/sanity.client'
 import { token } from '@/lib/sanity/sanity.fetch'
 import { draftMode } from 'next/headers'
 
-export const runtime = 'edge'
-
 export async function GET(request: Request) {
   const { searchParams } = new URL(request.url)
   const secret = searchParams.get('secret')
@@ -18,26 +14,12 @@ export async function GET(request: Request) {
     )
   }
 
-  if (!secret) {
-    return new Response('Invalid secret', { status: 401 })
+  if (secret !== process.env.SANITY_API_READ_TOKEN) {
+    return new Response('Invalid token', { status: 401 })
   }
 
-  // const authenticatedClient = client.withConfig({ token })
-  
-  // const validSecret = await isValidSecret(
-  //   authenticatedClient,
-  //   previewSecretId,
-  //   secret,
-  // )
-
-  // if (!validSecret) {
-  //   return new Response('Invalid secret', { status: 401 })
-  // }
-
   draftMode().enable()
 
-  console.log(draftMode())
-
   if (type === 'home') {
     return new Response(null, {
         status: 307,