refactor(sm): further cleanup (#84)

starters/shopify-meilisearch/.eslintrc.js

@@ -6,7 +6,7 @@ module.exports = {
     React: true,
     JSX: true,
   },
-  extends: ["next", "prettier", "react-app", "react-app/jest", "plugin:storybook/recommended", "plugin:tailwindcss/recommended"],
+  extends: ["next", "prettier", "react-app", "react-app/jest", "plugin:tailwindcss/recommended"],
   parserOptions: {
     babelOptions: {
       presets: [require.resolve("next/babel")],

starters/shopify-meilisearch/README.md

@@ -32,7 +32,6 @@ $ yarn create commerce
 - Highly Scalable SEO Redirects ([Bloom Filters](https://nextjs.org/docs/app/building-your-application/routing/redirecting#managing-redirects-at-scale-advanced))
 - Easy migration - migrate your existing solution in minutes
 - Playwright - write end-to-end tests like a pro
-- Storybook - create, test, and showcase your components
 - T3 Env - manage your environment variables with ease
 - Patch-package - fix external dependencies without losing your mind
 - Components coupling and cohesion graph - a tool for managing component relationships

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

@@ -1,6 +1,6 @@
 "use server"
 
-import { meilisearch } from "clients/search"
+import { searchClient } from "lib/meilisearch/client"
 import { env } from "env.mjs"
 import { unstable_cache } from "next/cache"
 import type { CommerceProduct } from "types"
@@ -14,7 +14,7 @@ export const searchProducts = unstable_cache(
         hasMore: false,
       }
 
-    const { hits, estimatedTotalHits } = await meilisearch.searchDocuments<CommerceProduct>({
+    const { hits, estimatedTotalHits } = await searchClient.searchDocuments<CommerceProduct>({
       indexName: env.MEILISEARCH_PRODUCTS_INDEX,
       query,
       options: {

starters/shopify-meilisearch/app/api/feed/sync/route.ts

@@ -1,9 +1,9 @@
 import type { PlatformProduct } from "lib/shopify/types"
-import { meilisearch } from "clients/search"
 import { storefrontClient } from "clients/storefrontClient"
 import { env } from "env.mjs"
 import { compareHmac } from "utils/compare-hmac"
 import { enrichProduct } from "utils/enrich-product"
+import { deleteCategories, deleteProducts, updateCategories, updateProducts } from "lib/meilisearch"
 
 type SupportedTopic = "products/update" | "products/delete" | "products/create" | "collections/update" | "collections/delete" | "collections/create"
 
@@ -54,21 +54,13 @@ async function handleCollectionTopics(topic: SupportedTopic, { id }: Record<stri
         console.error(`Collection ${id} not found`)
         return new Response(JSON.stringify({ message: "Collection not found" }), { status: 404, headers: { "Content-Type": "application/json" } })
       }
-      await meilisearch.updateDocuments({
-        indexName: env.MEILISEARCH_CATEGORIES_INDEX,
-        documents: [{ ...collection, id: `${id}` }],
-        options: {
-          primaryKey: "id",
-        },
-      })
+
+      await updateCategories([{ ...collection, id: `${id}` }])
 
       break
 
     case "collections/delete":
-      await meilisearch.deleteDocuments({
-        indexName: env.MEILISEARCH_CATEGORIES_INDEX,
-        params: [id],
-      })
+      await deleteCategories([id])
       break
 
     default:
@@ -91,20 +83,12 @@ async function handleProductTopics(topic: SupportedTopic, { id }: Record<string,
       }
 
       const enrichedProduct = await enrichProduct(product, items)
-      await meilisearch.updateDocuments({
-        indexName: env.MEILISEARCH_PRODUCTS_INDEX,
-        documents: [normalizeProduct(enrichedProduct, id)],
-        options: {
-          primaryKey: "id",
-        },
-      })
+
+      await updateProducts([normalizeProduct(enrichedProduct, id)])
 
       break
     case "products/delete":
-      await meilisearch.deleteDocuments({
-        indexName: env.MEILISEARCH_PRODUCTS_INDEX,
-        params: [id],
-      })
+      await deleteProducts([id])
       break
 
     default:

starters/shopify-meilisearch/app/api/reviews/ai-summary/route.ts

@@ -2,13 +2,12 @@ import { generateObject } from "ai"
 import z from "zod"
 import { openai } from "@ai-sdk/openai"
 import type { Review } from "lib/reviews/types"
-import type { CommerceProduct } from "types"
-import { meilisearch } from "clients/search"
 import { env } from "env.mjs"
 import { authenticate } from "utils/authenticate-api-route"
 import { isOptIn, notifyOptIn } from "utils/opt-in"
 import { unstable_noStore } from "next/cache"
 import { isDemoMode } from "utils/demo-utils"
+import { getAllProducts, getAllReviews, updateProducts } from "lib/meilisearch"
 
 const summarySchema = z.object({
   products: z.array(
@@ -46,25 +45,17 @@ export async function GET(req: Request) {
     return new Response(JSON.stringify({ message: "Sorry, something went wrong" }), { status: 500 })
   }
 
-  const [allReviews, allProducts] = await Promise.all([
-    meilisearch.getDocuments<Review>({
-      indexName: env.MEILISEARCH_REVIEWS_INDEX,
-      options: {
-        limit: 10000,
-        fields: ["body", "title", "product_handle", "rating"],
-        filter: "published=true AND hidden=false",
-      },
+  const [{ reviews }, allProducts] = await Promise.all([
+    getAllReviews({
+      fields: ["body", "title", "product_handle", "rating"],
+      filter: "published=true AND hidden=false",
     }),
-    meilisearch.getDocuments<CommerceProduct>({
-      indexName: env.MEILISEARCH_PRODUCTS_INDEX,
-      options: {
-        limit: 10000,
-        fields: ["handle", "title", "id", "totalReviews"],
-      },
+    getAllProducts({
+      fields: ["handle", "title", "id", "totalReviews"],
     }),
   ])
 
-  const mappedReviews: Record<string, Review[]> = allReviews?.results.reduce(
+  const mappedReviews: Record<string, Review[]> = reviews.reduce(
     (acc, review) => {
       const productHandle = review.product_handle
       if (acc[productHandle]) {
@@ -126,7 +117,7 @@ export async function GET(req: Request) {
     })
     .filter(Boolean)
 
-  await meilisearch.updateDocuments<CommerceProduct>({ indexName: env.MEILISEARCH_PRODUCTS_INDEX, documents: updatedProducts, options: { primaryKey: "id" } })
+  await updateProducts(updatedProducts)
 
   return new Response(JSON.stringify({ message: "Reviews synced" }), { status: 200 })
 }

starters/shopify-meilisearch/app/api/reviews/sync/route.ts

@@ -1,12 +1,10 @@
 import { unstable_noStore } from "next/cache"
-import { meilisearch } from "clients/search"
 import { reviewsClient } from "clients/reviews"
 import { env } from "env.mjs"
 import { authenticate } from "utils/authenticate-api-route"
 import { isOptIn, notifyOptIn } from "utils/opt-in"
-import type { Review } from "lib/reviews/types"
-import type { CommerceProduct } from "types"
 import { isDemoMode } from "utils/demo-utils"
+import { getAllProducts, getAllReviews, updateProducts, updateReviews } from "lib/meilisearch"
 
 export const maxDuration = 60
 
@@ -31,31 +29,23 @@ export async function GET(req: Request) {
     return new Response(JSON.stringify({ message: "Sorry, something went wrong" }), { status: 500 })
   }
 
-  const [allReviews, allProducts, allIndexReviews] = await Promise.all([
+  const [allReviews, { results: allProducts }, { reviews }] = await Promise.all([
     reviewsClient.getAllProductReviews(),
-    meilisearch.getDocuments<CommerceProduct>({
-      indexName: env.MEILISEARCH_PRODUCTS_INDEX,
-      options: {
-        limit: 10000,
-        fields: ["handle", "totalReviews", "avgRating", "id"],
-      },
+    getAllProducts({
+      fields: ["handle", "title", "avgRating", "totalReviews"],
     }),
-    meilisearch.getDocuments<Review>({
-      indexName: env.MEILISEARCH_REVIEWS_INDEX,
-      options: {
-        limit: 10000,
-        fields: ["updated_at", "id"],
-      },
+    getAllReviews({
+      fields: ["updated_at", "id"],
     }),
   ])
 
   const reviewsDelta = allReviews.filter((review) => {
-    const indexReview = allIndexReviews?.results.find((r) => r.id === review.id)
+    const indexReview = reviews?.find((r) => r.id === review.id)
     return indexReview?.updated_at !== review.updated_at
   })
 
-  const productTotalReviewsDelta = allProducts?.results
-    .map((product) => {
+  const productTotalReviewsDelta = allProducts
+    ?.map((product) => {
       const productReviews = allReviews.filter((review) => review.product_handle === product.handle && review.published && !review.hidden)
       if (!!productReviews.length && productReviews.length !== product.totalReviews) {
         const avgRating = productReviews.reduce((acc, review) => acc + review.rating, 0) / productReviews.length || 0
@@ -66,32 +56,12 @@ export async function GET(req: Request) {
     })
     .filter(Boolean)
 
-  if (!reviewsDelta.length && !productTotalReviewsDelta.length) {
+  if (!reviewsDelta.length && !productTotalReviewsDelta?.length) {
     return new Response(JSON.stringify({ message: "Nothing to sync" }), { status: 200 })
   }
 
-  !!reviewsDelta.length &&
-    (async () => {
-      meilisearch.updateDocuments({
-        indexName: env.MEILISEARCH_REVIEWS_INDEX!,
-        documents: reviewsDelta,
-        options: {
-          primaryKey: "id",
-        },
-      })
-      console.log("API/sync: Reviews synced", reviewsDelta.length)
-    })()
-  !!productTotalReviewsDelta.length &&
-    (async () => {
-      meilisearch.updateDocuments({
-        indexName: env.MEILISEARCH_PRODUCTS_INDEX,
-        documents: productTotalReviewsDelta,
-        options: {
-          primaryKey: "id",
-        },
-      })
-      console.log("API/sync:Products synced", productTotalReviewsDelta.length)
-    })()
+  !!reviewsDelta.length && updateReviews(reviewsDelta)
+  !!productTotalReviewsDelta?.length && updateProducts(productTotalReviewsDelta)
 
   return new Response(JSON.stringify({ message: "All synced" }), { status: 200 })
 }

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

@@ -1,9 +1,7 @@
-import { PlatformCollection } from "lib/shopify/types"
-import { meilisearch } from "clients/search"
-import { env } from "env.mjs"
 import type { Metadata } from "next"
 import { isDemoMode } from "utils/demo-utils"
 import { CategoryView } from "views/category/category-view"
+import { getCategories } from "lib/meilisearch"
 
 export const revalidate = 86400
 export const dynamic = "force-static"
@@ -22,15 +20,12 @@ export async function generateMetadata({ params }: CategoryPageProps): Promise<M
 export async function generateStaticParams() {
   if (isDemoMode()) return []
 
-  const { hits } = await meilisearch.searchDocuments<PlatformCollection>({
-    indexName: env.MEILISEARCH_CATEGORIES_INDEX,
-    options: {
-      limit: 50,
-      attributesToRetrieve: ["handle"],
-    },
+  const { results } = await getCategories({
+    limit: 50,
+    fields: ["handle"],
   })
 
-  return hits.map(({ handle }) => ({ slug: handle }))
+  return results.map(({ handle }) => ({ slug: handle }))
 }
 
 export default async function CategoryPage({ params }: CategoryPageProps) {

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

@@ -3,7 +3,7 @@ import { Suspense } from "react"
 import { ProductCard } from "components/product-card"
 import { Skeleton } from "components/ui/skeleton"
 import { COOKIE_FAVORITES } from "constants/index"
-import { getProduct } from "clients/search"
+import { getProduct } from "lib/meilisearch"
 
 export const revalidate = 86400