chore(sm): cleanup

starters/shopify-meilisearch/app/actions/product.actions.ts

@@ -1,15 +1,10 @@
 "use server"
 
-import { unstable_cache } from "next/cache"
-import { env } from "env.mjs"
-
 import { meilisearch } from "clients/search"
-import type { Review } from "lib/reviews/types"
-
-import { ComparisonOperators, FilterBuilder } from "lib/meilisearch/filter-builder"
-import { getDemoProductReviews, getDemoSingleProduct, isDemoMode } from "utils/demo-utils"
+import { env } from "env.mjs"
+import { unstable_cache } from "next/cache"
 import type { CommerceProduct } from "types"
-import { notifyOptIn } from "utils/opt-in"
+import { isDemoMode } from "utils/demo-utils"
 
 export const searchProducts = unstable_cache(
   async (query: string, limit: number = 4) => {
@@ -33,52 +28,3 @@ export const searchProducts = unstable_cache(
   ["autocomplete-search"],
   { revalidate: 3600 }
 )
-
-export const getProduct = unstable_cache(
-  async (handle: string) => {
-    if (isDemoMode()) return getDemoSingleProduct(handle)
-
-    const { results } = await meilisearch.getDocuments<CommerceProduct>({
-      indexName: env.MEILISEARCH_PRODUCTS_INDEX,
-      options: {
-        filter: new FilterBuilder().where("handle", ComparisonOperators.Equal, handle).build(),
-        limit: 1,
-      },
-    })
-
-    return results.find(Boolean) || null
-  },
-  ["product-by-handle"],
-  { revalidate: 3600 }
-)
-
-export const getProductReviews = unstable_cache(
-  async (handle: string, { page = 1, limit = 10 } = { page: 1, limit: 10 }) => {
-    if (isDemoMode()) return getDemoProductReviews()
-
-    if (!env.MEILISEARCH_REVIEWS_INDEX) {
-      notifyOptIn({ feature: "reviews", source: "product.actions.ts" })
-      return { reviews: [], total: 0 }
-    }
-
-    const { results, total } = await meilisearch.getDocuments<Review>({
-      indexName: env.MEILISEARCH_REVIEWS_INDEX,
-      options: {
-        filter: new FilterBuilder()
-          .where("product_handle", ComparisonOperators.Equal, handle)
-          .and()
-          .where("published", ComparisonOperators.Equal, "true")
-          .and()
-          .where("hidden", ComparisonOperators.Equal, "false")
-          .build(),
-        limit,
-        offset: (page - 1) * limit,
-        fields: ["body", "rating", "verified", "reviewer", "published", "created_at", "hidden", "featured"],
-      },
-    })
-
-    return { reviews: results.sort((a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime()), total }
-  },
-  ["product-reviews-by-handle"],
-  { revalidate: 3600 }
-)

starters/shopify-meilisearch/app/api/redirects/route.ts

@@ -6,8 +6,6 @@ type RedirectEntry = {
   permanent: boolean
 }
 
-export const runtime = "edge"
-
 export function GET(request: NextRequest) {
   const pathname = request.nextUrl.searchParams.get("pathname")
 

starters/shopify-meilisearch/app/favorites/page.tsx

@@ -1,9 +1,9 @@
 import { cookies } from "next/headers"
 import { Suspense } from "react"
-import { getProduct } from "app/actions/product.actions"
 import { ProductCard } from "components/product-card"
 import { Skeleton } from "components/ui/skeleton"
 import { COOKIE_FAVORITES } from "constants/index"
+import { getProduct } from "clients/search"
 
 export const revalidate = 86400
 

starters/shopify-meilisearch/app/layout.tsx

@@ -1,6 +1,5 @@
 import "./globals.css"
 
-import nextDynamic from "next/dynamic"
 import Script from "next/script"
 import { Suspense } from "react"
 import { Toaster } from "sonner"
@@ -16,8 +15,7 @@ import { NavigationBar } from "components/navigation-bar/navigation-bar"
 import { mobileInlineScript } from "components/navigation-bar/mobile-inline-script"
 import { Footer } from "components/footer"
 import { Modals } from "components/modals/modals"
-
-const DraftToolbar = nextDynamic(() => import("views/draft-toolbar"), { ssr: false })
+import DraftToolbar from "views/draft-toolbar"
 
 export const revalidate = 86400
 
@@ -257,9 +255,7 @@ export default async function RootLayout({ children }: { children: React.ReactNo
           <FlagValues />
         </Suspense>
 
-        <Suspense>
-          <ThirdParties />
-        </Suspense>
+        <ThirdParties />
 
         <GithubBadge />
         <DemoModeAlert />

starters/shopify-meilisearch/app/pages/[slug]/metadata.ts

@@ -1,5 +1,5 @@
+import { getPage } from "clients/storefrontClient"
 import { Metadata } from "next"
-import { getPage } from "app/actions/page.actions"
 
 export async function generateMetadata({ params: { slug } }: { params: { slug: string } }): Promise<Metadata> {
   const page = await getPage(slug)

starters/shopify-meilisearch/app/pages/[slug]/page.tsx

@@ -1,5 +1,5 @@
 import { format } from "date-fns/format"
-import { getAllPages, getPage } from "app/actions/page.actions"
+import { getAllPages, getPage } from "clients/storefrontClient"
 
 export const revalidate = 86400
 export const dynamic = "force-static"

starters/shopify-meilisearch/app/product/[slug]/metadata.ts

@@ -1,10 +1,10 @@
+import { getProduct } from "clients/search"
+import { env } from "env.mjs"
 import { Metadata } from "next"
 import { Product, WithContext } from "schema-dts"
-import { getProduct } from "app/actions/product.actions"
-import { env } from "env.mjs"
+import type { CommerceProduct } from "types"
 import { makeKeywords } from "utils/make-keywords"
 import { removeOptionsFromUrl } from "utils/product-options-utils"
-import type { CommerceProduct } from "types"
 import { slugToName } from "utils/slug-name"
 
 interface ProductProps {

starters/shopify-meilisearch/app/product/[slug]/opengraph-image.tsx

@@ -2,9 +2,9 @@
 /* eslint-disable jsx-a11y/alt-text */
 
 import { ImageResponse } from "next/og"
-import { getProduct } from "app/actions/product.actions"
 import { removeOptionsFromUrl } from "utils/product-options-utils"
 import { env } from "env.mjs"
+import { getProduct } from "clients/search"
 
 export const revalidate = 86400
 

starters/shopify-meilisearch/app/product/[slug]/page.tsx

@@ -1,29 +1,32 @@
-import { notFound } from "next/navigation"
 import { Suspense } from "react"
-import { getProduct, getProductReviews } from "app/actions/product.actions"
-import { Breadcrumbs } from "components/breadcrumbs"
+import { notFound } from "next/navigation"
+
+import { getProduct, meilisearch } from "clients/search"
 
+import { env } from "env.mjs"
+
+import { isDemoMode } from "utils/demo-utils"
+import { slugToName } from "utils/slug-name"
+import { CurrencyType, mapCurrencyToSign } from "utils/map-currency-to-sign"
 import { getCombination, getOptionsFromUrl, hasValidOption, removeOptionsFromUrl } from "utils/product-options-utils"
+
+import { Breadcrumbs } from "components/breadcrumbs"
+
 import { BackButton } from "views/product/back-button"
 import { FavoriteMarker } from "views/product/favorite-marker"
 import { SimilarProductsSection } from "views/product/similar-products-section"
 import { SimilarProductsSectionSkeleton } from "views/product/similar-product-section-skeleton"
 import { VariantsSection } from "views/product/variants-section"
-import { slugToName } from "utils/slug-name"
-
-import { generateJsonLd } from "./metadata"
-import { ReviewsSection } from "views/product/reviews-section"
-
-import type { CommerceProduct } from "types"
-import { isDemoMode } from "utils/demo-utils"
-import { meilisearch } from "clients/search"
-import { env } from "env.mjs"
 import { ProductTitle } from "views/product/product-title"
-import { CurrencyType, mapCurrencyToSign } from "utils/map-currency-to-sign"
 import { ProductImages } from "views/product/product-images"
 import { RightSection } from "views/product/right-section"
 import { FaqSection } from "views/product/faq-section"
 import { AddToCartButton } from "views/product/add-to-cart-button"
+import { ReviewsSection } from "views/product/reviews-section"
+
+import type { CommerceProduct } from "types"
+
+import { generateJsonLd } from "./metadata"
 
 export const revalidate = 86400
 export const dynamic = "force-static"
@@ -33,8 +36,6 @@ interface ProductProps {
   params: { slug: string }
 }
 
-export { generateMetadata } from "./metadata"
-
 export async function generateStaticParams() {
   if (isDemoMode()) return []
 
@@ -50,7 +51,7 @@ export async function generateStaticParams() {
 }
 
 export default async function Product({ params: { slug } }: ProductProps) {
-  const [product, { reviews, total: totalReviews }] = await Promise.all([getProduct(removeOptionsFromUrl(slug)), getProductReviews(removeOptionsFromUrl(slug), { limit: 16 })])
+  const product = await getProduct(removeOptionsFromUrl(slug))
 
   const { color } = getOptionsFromUrl(slug)
   const hasInvalidOptions = !hasValidOption(product?.variants, "color", color)
@@ -97,14 +98,7 @@ export default async function Product({ params: { slug } }: ProductProps) {
           </RightSection>
         </div>
         <Suspense>
-          <ReviewsSection
-            avgRating={product.avgRating}
-            productHandle={product.handle}
-            productId={product.id}
-            reviews={reviews?.map((review) => ({ ...review, author: review.reviewer.name })) || []}
-            total={totalReviews}
-            summary={product.reviewsSummary}
-          />
+          <ReviewsSection avgRating={product.avgRating} productHandle={product.handle} productId={product.id} slug={slug} summary={product.reviewsSummary} />
         </Suspense>
         <Suspense fallback={<SimilarProductsSectionSkeleton />}>
           <SimilarProductsSection collectionHandle={lastCollection?.handle} slug={slug} />

starters/shopify-meilisearch/app/reviews/[slug]/metadata.ts

@@ -1,9 +1,9 @@
-import { getProduct } from "app/actions/product.actions"
-import { env } from "process"
 import { makeKeywords } from "utils/make-keywords"
 import { removeOptionsFromUrl } from "utils/product-options-utils"
 import type { ProductReviewsPageProps } from "./page"
 import { Metadata } from "next"
+import { getProduct } from "clients/search"
+import { env } from "env.mjs"
 
 export async function generateMetadata({ params: { slug } }: ProductReviewsPageProps): Promise<Metadata> {
   const product = await getProduct(removeOptionsFromUrl(slug))

starters/shopify-meilisearch/app/reviews/[slug]/page.tsx

@@ -1,5 +1,7 @@
 import { notFound, redirect } from "next/navigation"
-import { getProduct, getProductReviews } from "app/actions/product.actions"
+
+import { getProduct, getProductReviews } from "clients/search"
+
 import { Breadcrumbs } from "components/breadcrumbs"
 
 import { BackButton } from "views/product/back-button"
@@ -8,6 +10,7 @@ import { PaginationSection } from "views/listing/pagination-section"
 
 import { removeOptionsFromUrl } from "utils/product-options-utils"
 import type { CommerceProduct } from "types"
+import { HITS_PER_PAGE } from "constants/index"
 
 export { generateMetadata } from "./metadata"
 
@@ -19,29 +22,29 @@ export interface ProductReviewsPageProps {
 }
 
 export default async function ProductReviews({ params: { slug }, searchParams }: ProductReviewsPageProps) {
-  return <ProductReviewsView searchParams={searchParams} slug={slug} />
-}
-
-async function ProductReviewsView({ slug, searchParams }: { slug: string; searchParams: ProductReviewsPageProps["searchParams"] }) {
-  const limit = 20
   const page = searchParams.page ? parseInt(searchParams.page as string) : 1
 
-  const product = await getProduct(removeOptionsFromUrl(slug))
-  const { reviews, total: totalReviews } = await getProductReviews(removeOptionsFromUrl(slug), { limit, page })
+  const [product, { reviews, total: totalReviews }] = await Promise.all([
+    getProduct(removeOptionsFromUrl(slug)),
+    getProductReviews(removeOptionsFromUrl(slug), { HITS_PER_PAGE, page }),
+  ])
 
-  const totalPages = Math.ceil(totalReviews / limit)
+  const totalPages = Math.ceil(totalReviews / HITS_PER_PAGE)
 
   if (!product) {
     return notFound()
   }
 
+  if (page > Math.ceil(totalReviews / HITS_PER_PAGE)) {
+    redirect(`/reviews/${slug}`)
+  }
+
   if (totalReviews <= 0) {
     return (
       <div className="relative mx-auto mb-20 max-w-container-md px-4 xl:px-0">
         <div className="relative w-fit py-4 md:pt-12">
           <BackButton href={`/product/${product.handle}`} className="mb-8 hidden md:block" />
         </div>
-
         <main className="container mx-auto max-w-5xl px-4 md:px-6">
           <Breadcrumbs className="mb-8" items={makeBreadcrumbs(product)} />
           <div className="my-20 text-center">
@@ -53,10 +56,6 @@ async function ProductReviewsView({ slug, searchParams }: { slug: string; search
     )
   }
 
-  if (page > Math.ceil(totalReviews / limit)) {
-    redirect(`/reviews/${slug}`)
-  }
-
   return (
     <div className="relative mx-auto mb-20 max-w-container-md px-4 xl:px-0">
       <div className="relative w-fit py-4 md:pt-12">