diff --git a/app/(site)/[locale]/[...slug]/page.tsx b/app/(site)/[locale]/[...slug]/page.tsx index 9de1f216b..4edc95878 100644 --- a/app/(site)/[locale]/[...slug]/page.tsx +++ b/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; } diff --git a/app/(site)/[locale]/page.tsx b/app/(site)/[locale]/page.tsx index 850653a94..939a1da35 100644 --- a/app/(site)/[locale]/page.tsx +++ b/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 { - 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 ( - <> - - - ); + const data = await getCachedClient(preview)(homePageQuery, params); + + if (!data) return notFound(); + + if (preview && preview.token) { + return ( + + + + ); + } + + return ; } diff --git a/app/api/draft/route.ts b/app/api/draft/route.ts deleted file mode 100644 index 16c67d5d4..000000000 --- a/app/api/draft/route.ts +++ /dev/null @@ -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}`, - }, - }) - } -} \ No newline at end of file diff --git a/app/api/exit-draft/route.ts b/app/api/exit-draft/route.ts deleted file mode 100644 index 6cb3d88f0..000000000 --- a/app/api/exit-draft/route.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { draftMode } from 'next/headers'; - -export async function GET() { - draftMode().disable(); - - return new Response(null, { - status: 307, - headers: { - Location: `/`, - }, - }) -} \ No newline at end of file diff --git a/app/api/exit-preview/route.ts b/app/api/exit-preview/route.ts new file mode 100644 index 000000000..7a9e316b2 --- /dev/null +++ b/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: `/`, + }, + }) +} \ No newline at end of file diff --git a/app/api/preview/route.ts b/app/api/preview/route.ts new file mode 100644 index 000000000..95cb581ef --- /dev/null +++ b/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}`, + }, + }) + } +} \ No newline at end of file diff --git a/components/layout/dynamic-content-manager/dynamic-content-manager.tsx b/components/layout/dynamic-content-manager/dynamic-content-manager.tsx index a815067bb..eafa16706 100644 --- a/components/layout/dynamic-content-manager/dynamic-content-manager.tsx +++ b/components/layout/dynamic-content-manager/dynamic-content-manager.tsx @@ -9,81 +9,6 @@ import USPSection from '@/components/modules/usp-section/usp-section'; import { InformationCircleIcon } from '@heroicons/react/24/outline'; import { Suspense } from 'react'; -// interface getContentComponentProps { -// _type: string; -// _key: number; -// disabled: boolean; -// } - -// const getContentComponent = ({ _type, _key, disabled, ...rest }: getContentComponentProps) => { -// let Component: any; - -// switch (_type) { -// case 'hero': -// if (disabled !== true) { -// Component = Hero; -// } else { -// return; -// } -// break; -// case 'slider': -// if (disabled !== true) { -// Component = Slider; -// } else { -// return; -// } -// break; -// case 'filteredProductList': -// if (disabled !== true) { -// Component = FilteredProductList; -// } else { -// return; -// } -// break; -// case 'blurbSection': -// if (disabled !== true) { -// Component = BlurbSection; -// } else { -// return; -// } -// break; -// case 'uspSection': -// if (disabled !== true) { -// Component = USPSection; -// } else { -// return; -// } -// break; -// case 'reusableSection': -// if (disabled !== true) { -// Component = ReusableSection; -// } else { -// return; -// } -// break; -// default: -// return ( -//
-// -// -// {`No matching component (Type: ${_type})`} -// -//
-// ); -// } - -// return Component ? ( -// -// ) : ( -//
Something else
-// ); -// }; - interface dynamicContentManagerProps { content: [] | any; } @@ -91,7 +16,7 @@ interface dynamicContentManagerProps { const DynamicContentManager = ({ content }: dynamicContentManagerProps) => { return (
- {content.map( + {content?.map( ( component: { _type: string; _key: number; disabled: boolean; rest: any } | any, index: number diff --git a/components/layout/footer/footer.tsx b/components/layout/footer/footer.tsx index f4bad6c00..27155e3f1 100644 --- a/components/layout/footer/footer.tsx +++ b/components/layout/footer/footer.tsx @@ -1,6 +1,6 @@ import Text from '@/components/ui/text'; import { footerMenusQuery } from '@/lib/sanity/queries'; -import { clientFetch } from '@/lib/sanity/sanity.client'; +import { getCachedClient } from '@/lib/sanity/sanity.client'; import LocaleSwitcher from 'components/ui/locale-switcher/locale-switcher'; import Logo from 'components/ui/logo/logo'; import Link from 'next/link'; @@ -15,7 +15,7 @@ export default async function Footer({ locale }: FooterProps) { locale: locale }; - const footerMenus = await clientFetch(footerMenusQuery, params); + const footerMenus = await getCachedClient()(footerMenusQuery, params); return (