chore(sm): cleanup

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/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, getProductReviews, 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"

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"
 
 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"

starters/shopify-meilisearch/clients/search.ts

@@ -1,7 +1,90 @@
+import { unstable_cache } from "next/cache"
+
 import { env } from "env.mjs"
+
+import { getDemoProductReviews, getDemoSingleProduct, isDemoMode } from "utils/demo-utils"
+import { notifyOptIn } from "utils/opt-in"
+
 import { meilisearch as searchClient } from "lib/meilisearch"
+import { ComparisonOperators, FilterBuilder } from "lib/meilisearch/filter-builder"
+
+import type { Review } from "lib/reviews/types"
+
+import type { CommerceProduct } from "types"
 
 export const meilisearch: ReturnType<typeof searchClient> = searchClient({
   host: env.MEILISEARCH_HOST || "",
   adminApiKey: env.MEILISEARCH_ADMIN_KEY || "",
 })
+
+export const searchProducts = unstable_cache(
+  async (query: string, limit: number = 4) => {
+    if (isDemoMode())
+      return {
+        hits: [],
+        hasMore: false,
+      }
+
+    const { hits, estimatedTotalHits } = await meilisearch.searchDocuments<CommerceProduct>({
+      indexName: env.MEILISEARCH_PRODUCTS_INDEX,
+      query,
+      options: {
+        limit,
+        attributesToRetrieve: ["id", "handle", "title", "featuredImage", "images", "variants"],
+      },
+    })
+
+    return { hits, hasMore: estimatedTotalHits > limit }
+  },
+  ["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/clients/storefrontClient.ts

@@ -1,5 +1,6 @@
 import "server-only"
 
+import { unstable_cache } from "next/cache"
 import { createShopifyClient } from "lib/shopify"
 import { env } from "../env.mjs"
 
@@ -8,3 +9,7 @@ export const storefrontClient = createShopifyClient({
   storefrontAccessToken: env.SHOPIFY_STOREFRONT_ACCESS_TOKEN || "",
   adminAccessToken: env.SHOPIFY_ADMIN_ACCESS_TOKEN || "",
 })
+
+export const getPage = unstable_cache(async (handle: string) => await storefrontClient.getPage(handle), ["page"], { revalidate: 3600 })
+
+export const getAllPages = unstable_cache(async () => await storefrontClient.getAllPages(), ["page"], { revalidate: 3600 })

starters/shopify-meilisearch/components.json

@@ -11,7 +11,7 @@
     "prefix": ""
   },
   "aliases": {
-    "ui": "components",
+    "ui": "components/ui",
     "components": "components",
     "utils": "utils"
   }

starters/shopify-meilisearch/package.json

@@ -3,7 +3,7 @@
   "version": "1.0.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
+    "dev": "NODE_OPTIONS='--trace-warnings' next dev",
     "build": "next build",
     "start": "next start",
     "lint": "next lint",

starters/shopify-meilisearch/utils/use-autocomplete.ts

@@ -2,8 +2,8 @@ import { type ChangeEvent, useEffect, useState, useTransition } from "react"
 
 import { useDebounce } from "@uidotdev/usehooks"
 
-import { searchProducts } from "app/actions/product.actions"
 import type { CommerceProduct } from "types"
+import { searchProducts } from "clients/search"
 
 /*
  * Callback is optional to be called every time the query changes