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,

components/pages/category-page-preview.tsx

@@ -0,0 +1,24 @@
+'use client';
+
+import dynamic from 'next/dynamic';
+import PreviewBanner from '../ui/preview-banner/preview-banner';
+import { CategoryPageParams } from './category-page';
+
+const CategoryPage = dynamic(() => import('./category-page'));
+
+export default function CategoryPagePreview({ data }: CategoryPageParams) {
+  if (!data) {
+    return (
+      <div className="text-center">
+        Please start editing your Product document to see the preview!
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <CategoryPage data={data} />
+      <PreviewBanner title={data?.title ? data.title : ''} />
+    </>
+  );
+}

components/pages/category-page.tsx

@@ -2,9 +2,9 @@ import Search from '@/components/search/search';
 import SearchResult from '@/components/search/search-result';
 import Text from '@/components/ui/text/text';
 
-interface CategoryPageParams {
+export type CategoryPageParams = {
   data: object | any;
-}
+};
 
 export default function CategoryPage({ data }: CategoryPageParams) {
   const category = data;

components/pages/product-page-preview.tsx

@@ -0,0 +1,24 @@
+'use client';
+
+import dynamic from 'next/dynamic';
+import PreviewBanner from '../ui/preview-banner/preview-banner';
+import type { ProductPageParams } from './product-page';
+
+const ProductPage = dynamic(() => import('./product-page'));
+
+export default function ProductPagePreview({ data }: ProductPageParams) {
+  if (!data) {
+    return (
+      <div className="text-center">
+        Please start editing your Product document to see the preview!
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <ProductPage data={data} />
+      <PreviewBanner title={data?.title ? data.title : ''} />
+    </>
+  );
+}

components/pages/product-page.tsx

@@ -1,7 +1,7 @@
 import ProductView from '@/components/product/product-view';
-interface ProductPageParams {
+export type ProductPageParams = {
   data: object | any;
-}
+};
 
 export default function ProductPage({ data }: ProductPageParams) {
   const product = data;

components/pages/search-page-preview.tsx

@@ -1,26 +1,24 @@
 'use client';
 
-import PreviewBanner from '@/components/ui/preview-banner';
-import { searchPageQuery } from '@/lib/sanity/queries';
-import { useLiveQuery } from '@sanity/preview-kit';
-import SearchPage from './search-page';
+import dynamic from 'next/dynamic';
+import PreviewBanner from '../ui/preview-banner';
+import type { SearchPageParams } from './search-page';
 
-interface SearchPagePreviewParams {
-  initialData: [];
-  params: {
-    locale: string;
-    slug: string;
-  };
-}
+const SearchPage = dynamic(() => import('./search-page'));
 
-export default function SearchPagePreview({ initialData, params }: SearchPagePreviewParams) {
-  const [data] = useLiveQuery(initialData, searchPageQuery, params);
+export default function SearchPagePreview({ data }: SearchPageParams) {
+  if (!data) {
+    return (
+      <div className="text-center">
+        Please start editing your Search page document to see the preview!
+      </div>
+    );
+  }
 
   return (
     <>
-      <SearchPage data={data && data} />
-      {/* @ts-ignore */}
-      <PreviewBanner title={data?.title} type={data?._type} />
+      <SearchPage data={data} />
+      <PreviewBanner title={data?.title ? data.title : ''} />
     </>
   );
 }

components/pages/search-page.tsx

@@ -2,9 +2,9 @@ import Search from '@/components/search/search';
 import SearchResult from '@/components/search/search-result';
 import Text from '@/components/ui/text/text';
 
-interface SearchPageParams {
+export type SearchPageParams = {
   data: object | any;
-}
+};
 
 export default function SearchPage({ data }: SearchPageParams) {
   return (

components/pages/single-page-preview.tsx

@@ -1,26 +1,22 @@
 'use client';
 
-import PreviewBanner from '@/components/ui/preview-banner';
-import { pageQuery } from '@/lib/sanity/queries';
-import { useLiveQuery } from '@sanity/preview-kit';
-import SinglePage from './single-page';
+import dynamic from 'next/dynamic';
+import { SinglePageParams } from './single-page';
 
-interface SinglePagePreviewParams {
-  initialData: [];
-  params: {
-    locale: string;
-    slug: string;
-  };
-}
+const SinglePage = dynamic(() => import('./single-page'));
+const PreviewBanner = dynamic(() => import('../ui/preview-banner/preview-banner'));
 
-export default function SinglePagePreview({ initialData, params }: SinglePagePreviewParams) {
-  const [data] = useLiveQuery(initialData, pageQuery, params);
+export default function SinglePagePreview({ data }: SinglePageParams) {
+  if (!data) {
+    return (
+      <div className="text-center">Please start editing your Page document to see the preview!</div>
+    );
+  }
 
   return (
     <>
-      <SinglePage data={data && data} />
-      {/* @ts-ignore */}
-      <PreviewBanner title={data?.title} type={data?._type} />
+      <SinglePage data={data} />
+      <PreviewBanner title={data?.title ? data.title : ''} />
     </>
   );
 }

components/pages/single-page.tsx

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

components/preview/preview-provider.tsx

@@ -13,17 +13,12 @@ export default function PreviewProvider({
   token
 }: {
   children: React.ReactNode;
-  token: string;
+  token?: string;
 }) {
   const { client } = suspend(() => import('@/lib/sanity/sanity.client'), [UniqueKey]);
   if (!token) throw new TypeError('Missing token');
   return (
-    <LiveQueryProvider
-      client={client}
-      token={token}
-      // Uncomment below to see debug reports
-      logger={console}
-    >
+    <LiveQueryProvider client={client} token={token} logger={console}>
       {children}
     </LiveQueryProvider>
   );