setup the vacation rentals with real data

components/common/banners/FeaturedPropertyBanner.tsx

@@ -1,3 +1,5 @@
+import { Listing } from 'lib/sanity.queries/listings';
+
 import CTAButton from '../buttons/CTAButton';
 import FeaturedPropertyCard, { FeaturedPropertyCardProps } from '../cards/FeaturedPorpertyCard';
 import SectionHeader from '../headers/SectionHeader';
@@ -26,7 +28,7 @@ interface FeaturedProperty {
 
 type FeaturedPropertyCardBannerProps = {
   title: string;
-  listings: FeaturedProperty[];
+  listings: Listing[];
   ctaLink: string;
   resource: string;
 };

components/listings/ListingPage.tsx

@@ -59,7 +59,7 @@ export default function ListingPage(props: ListingPageProps) {
         {/* <FeaturedPropertyCardBanner title='Popular Properties For You' listings={demo.featuredListingsMock} /> */}
         {/* <ListingsContainer>{moreListings?.length > 0 && <MoreListings listings={moreListings} />}</ListingsContainer> */}
         <ListingsContainer>
-          <FeaturedPropertyCardBanner resource={resource} ctaLink={`/${resource}`} title='Popular Properties For You' listings={demo.featuredListingsMock} />
+          <FeaturedPropertyCardBanner resource={resource} ctaLink={`/${resource}`} title='Popular Properties For You' listings={moreListings} />
         </ListingsContainer>
         <SectionSeparator />
       </ListingsLayout>

lib/sanity.client.ts

@@ -128,7 +128,7 @@ export async function getVacationRentalsBySlug(slug: string): Promise<VacationRe
   return {} as any;
 }
 
-export async function getVacationRentalsAndMoreVacationRentals(slug: string, token?: string | null): Promise<{ listing: VacationRental; moreListings: VacationRental[] }> {
+export async function getVacationRentalsAndMoreVacationRentals(slug: string, token?: string | null): Promise<{ vacationRental: VacationRental; moreListings: VacationRental[] }> {
   if (projectId) {
     const client = createClient({
       projectId,
@@ -137,9 +137,11 @@ export async function getVacationRentalsAndMoreVacationRentals(slug: string, tok
       useCdn,
       token: token || undefined,
     });
+
     return await client.fetch(vacationRentalsAndMoreVacationRentalsQuery, { slug });
   }
-  return { listing: null, moreListings: [] };
+
+  return { vacationRental: null, moreListings: [] };
 }
 
 // Long Term Rentals

lib/sanity.queries/vacation-rentals.ts

@@ -85,7 +85,7 @@ export const vacationRentalsIndexQuery = groq`
 
 export const vacationRentalsAndMoreVacationRentalsQuery = groq`
 {
-  "vacationRentals": *[_type == "vacationRentals" && slug.current == $slug] | order(_updatedAt desc) [0] {
+  "vacationRental": *[_type == "vacationRentals" && slug.current == $slug] | order(_updatedAt desc) [0] {
     ${listingFields}
   },
   "moreListings": *[_type == "vacationRentals" && slug.current != $slug] | order(date desc, _updatedAt desc) [0...2] {

pages/api/revalidate.ts

@@ -32,7 +32,7 @@ export default async function revalidate(req: NextApiRequest, res: NextApiRespon
     const { body, isValidSignature } = await parseBody(req, process.env.SANITY_REVALIDATE_SECRET);
     if (isValidSignature === false) {
       const message = 'Invalid signature';
-      console.log(message);
+
       return res.status(401).send(message);
     }
 
@@ -46,7 +46,7 @@ export default async function revalidate(req: NextApiRequest, res: NextApiRespon
     await Promise.all(staleRoutes.map((route) => res.revalidate(route)));
 
     const updatedRoutes = `Updated routes: ${staleRoutes.join(', ')}`;
-    console.log(updatedRoutes);
+
     return res.status(200).send(updatedRoutes);
   } catch (err) {
     console.error(err);

pages/index.tsx

@@ -61,11 +61,11 @@ const Homepage: NextPage = () => {
             </h1>
           </div>
         </section>
-        <FeaturedPropertyCardBanner title='Popular Properties For You' listings={featuredListingsMock} ctaLink='/listings' />
+        <FeaturedPropertyCardBanner resource={'listings'} title='Popular Properties For You' listings={featuredListingsMock} ctaLink='/listings' />
         <WhyUsSection />
-        <FeaturedPropertyCardBanner title='Long Term Rentals For You' listings={featuredListingsMock} ctaLink='/rentals' />
+        <FeaturedPropertyCardBanner resource='rentals' title='Long Term Rentals For You' listings={featuredListingsMock} ctaLink='/rentals' />
         <Newsletter />
-        <FeaturedPropertyCardBanner title='Vacation Rentals For You' listings={featuredListingsMock} ctaLink='/vacation-rentals' />
+        <FeaturedPropertyCardBanner resource='vacation-rentals' title='Vacation Rentals For You' listings={featuredListingsMock} ctaLink='/vacation-rentals' />
         {/* <PropertiesByCategorySection /> */}
         <LatestNewsBanner featuredBlogCards={featuredBlogPostsMock} />
         {/* <NearbyPropertiesSection /> */}

pages/vacation-rentals/[slug].tsx

@@ -2,18 +2,18 @@
 import { PreviewSuspense } from '@sanity/preview-kit';
 import ListingPage from 'components/listings/ListingPage';
 // Sanity Client
-import { getAllListingsSlugs, getListingAndMoreListings, getSettings } from 'lib/sanity.client';
-import { Listing } from 'lib/sanity.queries/listings';
+import { getAllVacationRentalsSlugs, getSettings, getVacationRentalsAndMoreVacationRentals } from 'lib/sanity.client';
 import { Settings } from 'lib/sanity.queries/settings';
+import { VacationRental } from 'lib/sanity.queries/vacation-rentals';
 // React & Next
 import { GetStaticProps } from 'next';
 import { lazy } from 'react';
 
 const PreviewListingPage = lazy(() => import('components/listings/PreviewListingPage'));
 
 interface PageProps {
-  listing: Listing;
-  moreListings: Listing[];
+  vacationRental: VacationRental;
+  moreListings: VacationRental[];
   settings?: Settings;
   preview: boolean;
   token: string | null;
@@ -28,45 +28,47 @@ interface PreviewData {
 }
 
 export default function VacationRentalShowPage(props: PageProps) {
-  const { settings, listing, moreListings, preview, token } = props;
+  const { settings, vacationRental, moreListings, preview, token } = props;
 
   if (preview) {
     return (
-      <PreviewSuspense fallback={<ListingPage resource='vacation-rentals' loading preview listing={listing} moreListings={moreListings} settings={settings} />}>
-        <PreviewListingPage resource='vacation-rentals' token={token} listing={listing} moreListings={moreListings} settings={settings} />
+      <PreviewSuspense fallback={<ListingPage resource='vacation-rentals' loading preview listing={vacationRental} moreListings={moreListings} settings={settings} />}>
+        <PreviewListingPage resource='vacation-rentals' token={token} listing={vacationRental} moreListings={moreListings} settings={settings} />
       </PreviewSuspense>
     );
   }
 
-  return <ListingPage resource='vacation-rentals' listing={listing} moreListings={moreListings} settings={settings} />;
+  return <ListingPage resource='vacation-rentals' listing={vacationRental} moreListings={moreListings} settings={settings} />;
 }
 
 export const getStaticProps: GetStaticProps<PageProps, Query, PreviewData> = async (ctx) => {
   const { preview = false, previewData = {}, params = {} } = ctx;
 
   const token = previewData.token;
 
-  const [settings, { listing, moreListings }] = await Promise.all([getSettings(), getListingAndMoreListings(params.slug, token)]);
+  const [settings, data] = await Promise.all([getSettings(), getVacationRentalsAndMoreVacationRentals(params.slug, token)]);
+  const { vacationRental, moreListings } = data;
 
-  if (!listing) {
+  if (!vacationRental) {
     return {
       notFound: true,
     };
   }
 
   return {
     props: {
-      listing,
+      vacationRental,
       moreListings,
       settings,
       preview,
       token: previewData.token ?? null,
     },
+    revalidate: 10,
   };
 };
 
 export const getStaticPaths = async () => {
-  const slugs = await getAllListingsSlugs();
+  const slugs = await getAllVacationRentalsSlugs();
 
   return {
     paths: slugs?.map(({ slug }) => `/vacation-rentals/${slug}`) || [],

plugins/productionUrl/index.ts

@@ -4,51 +4,49 @@
  * @TODO the code in this plugin is a candidate for moving into `@sanity/preview-kit/studio`
  */
 
-import { definePlugin, type Slug } from 'sanity'
+import { definePlugin, type Slug } from 'sanity';
 
-import { getSecret } from './utils'
+import { getSecret } from './utils';
 
 export const productionUrl = definePlugin<{
-  previewSecretId: `${string}.${string}`
-  types: string[]
-  apiVersion?: string
+  previewSecretId: `${string}.${string}`;
+  types: string[];
+  apiVersion?: string;
 }>(({ previewSecretId, types: _types, apiVersion = '2022-11-17' }) => {
   if (!previewSecretId) {
-    throw new TypeError('`previewSecretId` is required')
+    throw new TypeError('`previewSecretId` is required');
   }
   if (!previewSecretId.includes('.')) {
-    throw new TypeError(
-      '`previewSecretId` must contain a `.` to ensure it can only be queried by authenticated users'
-    )
+    throw new TypeError('`previewSecretId` must contain a `.` to ensure it can only be queried by authenticated users');
   }
   if (!_types || _types.length === 0) {
-    throw new TypeError('`types` is required')
+    throw new TypeError('`types` is required');
   }
-  const types = new Set(_types)
+  const types = new Set(_types);
   return {
     name: 'productionUrl',
     document: {
       productionUrl: async (prev, { document, getClient }) => {
-        const url = new URL('/api/preview', location.origin)
+        const url = new URL('/api/preview', location.origin);
 
-        const client = getClient({ apiVersion })
-        const secret = await getSecret(client, previewSecretId, true)
+        const client = getClient({ apiVersion });
+        const secret = await getSecret(client, previewSecretId, true);
         if (secret) {
-          url.searchParams.set('secret', secret)
+          url.searchParams.set('secret', secret);
         }
-        const slug = (document.slug as Slug)?.current
+        const slug = (document.slug as Slug)?.current;
         if (slug) {
-          url.searchParams.set('slug', slug)
+          url.searchParams.set('slug', slug);
         }
 
         if (types.has(document._type)) {
-          url.searchParams.set('type', document._type)
-          console.log('Open preview URL', url.toString())
-          return url.toString()
+          url.searchParams.set('type', document._type);
+          console.log('Open preview URL', url.toString());
+          return url.toString();
         }
 
-        return prev
+        return prev;
       },
     },
-  }
-})
+  };
+});