fix: temporarily remove next-rsc-search and make meilisearch direct d…

…epend
Blazity · Feb 17, 2024 · e9559d2 · e9559d2
1 parent f6cb80e
commit e9559d2
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 44 deletions.
diff --git a/apps/web/app/api/sync/route.ts b/apps/web/app/api/sync/route.ts
@@ -22,7 +22,7 @@ export async function POST(req: Request) {
 
   let index = await getMeilisearchIndex("products")
 
-  await updateAttributesSettings(index)
+  // await updateAttributesSettings(index)
 
   if (!product?.id) {
     return Response.json({ status: "error", message: "Could not create product" })
@@ -50,6 +50,7 @@ function normalizeId(id: string) {
   return id.replace(shopifyIdPrefix, "")
 }
 
+// TODO: remove, move to docs
 async function updateAttributesSettings(index: Index) {
   const sortableAttributes = await index.getSortableAttributes()
   const filterableAttributes = await index.getFilterableAttributes()

diff --git a/apps/web/package.json b/apps/web/package.json
@@ -54,7 +54,7 @@
     "lucide-react": "^0.312.0",
     "meilisearch": "^0.37.0",
     "next-compose-plugins": "^2.2.1",
-    "next-rsc-search": "1.0.4",
+    "next-rsc-search": "1.0.5",
     "nuqs": "^1.17.0",
     "p-retry": "^6.2.0",
     "playwright": "^1.40.1",

diff --git a/apps/web/views/Search/SearchView.tsx b/apps/web/views/Search/SearchView.tsx
@@ -1,22 +1,26 @@
+import { meilisearch } from "client/meilisearch"
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "components/ui/Accordion"
 import { Button } from "components/ui/Button"
 import { Checkbox } from "components/ui/Checkbox"
 import { Label } from "components/ui/Label"
 import Link from "next/link"
 
-import NextInstantSearch from "next-rsc-search"
-import { createSearchParamsCache, parseAsString, parseAsStringEnum } from "nuqs/server"
+import { createSearchParamsCache, parseAsString } from "nuqs/server"
 import { SearchBar } from "./SearchBar"
-import { Sorter, Sorting } from "./Sorter"
+import { Sorter } from "./Sorter"
 
 const searchParamsCache = createSearchParamsCache({
   q: parseAsString.withDefault(" "),
-  sortBy: parseAsStringEnum(Object.values(Sorting)),
+  sortBy: parseAsString.withDefault(""),
 })
 
-export function SearchView({ searchParams }: { searchParams: Record<string, string | string[] | undefined> }) {
+export async function SearchView({ searchParams }: { searchParams: Record<string, string | string[] | undefined> }) {
   const parsedSearchParams = searchParamsCache.parse(searchParams)
 
+  const index = await meilisearch?.getIndex("products")
+
+  const hits = await (await index.search(parsedSearchParams.q, { sort: parsedSearchParams.sortBy ? [parsedSearchParams.sortBy] : undefined, limit: 50 })).hits
+
   return (
     <div className="container mx-auto px-4 py-6 md:px-6 lg:px-8">
       <div className="grid gap-6 md:grid-cols-[240px_1fr]">
@@ -92,44 +96,45 @@ export function SearchView({ searchParams }: { searchParams: Record<string, stri
             <h1 className="text-2xl font-semibold">Products</h1>
             <Sorter />
           </div>
-          <NextInstantSearch
+          {/* <NextInstantSearch
             meilisearchOptions={{ sort: parsedSearchParams.sortBy ? [parsedSearchParams.sortBy] : [] }}
             searchParams={{ q: parsedSearchParams.q || " " }}
             options={{ revalidate: 60 }}
+            cacheKey={parsedSearchParams.sortBy || ""}
             indexName="products"
             render={({ hits }: any) => (
-              <>
-                {/* <pre>xdxd {JSON.stringify(payload.hits, null, 2)}</pre> */}
-                <div className="mt-6 grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
-                  {hits.map((singleResult) => (
-                    <div className="group relative overflow-hidden rounded-lg" key={singleResult.id}>
-                      <Link className="absolute inset-0 z-10" href={`/products/${singleResult.handle}`}>
-                        <span className="sr-only">View</span>
-                      </Link>
-                      <img
-                        alt="Product 1"
-                        className="h-60 w-full object-cover"
-                        height={singleResult.images[0].height || 300}
-                        src={singleResult.images[0].url}
-                        style={{
-                          aspectRatio: "400/300",
-                          objectFit: "cover",
-                        }}
-                        width={singleResult.images[0].width || 400}
-                      />
-                      <div className="bg-white p-4 dark:bg-gray-950">
-                        <h3 className="text-lg font-semibold md:text-xl">{singleResult.title}</h3>
-                        <h4 className="text-base font-semibold md:text-lg">${singleResult?.variants?.find(Boolean)?.price.amount || 1337}</h4>
-                        <Button className="mt-2" size="sm">
-                          Add to Cart
-                        </Button>
-                      </div>
-                    </div>
-                  ))}
+              <> */}
+          {/* <pre>xdxd {JSON.stringify(payload.hits, null, 2)}</pre> */}
+          <div className="mt-6 grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+            {hits.map((singleResult) => (
+              <div className="group relative overflow-hidden rounded-lg" key={singleResult.id}>
+                <Link className="absolute inset-0 z-10" href={`/products/${singleResult.handle}`}>
+                  <span className="sr-only">View</span>
+                </Link>
+                <img
+                  alt="Product 1"
+                  className="h-60 w-full object-cover"
+                  height={singleResult.images[0].height || 300}
+                  src={singleResult.images[0].url}
+                  style={{
+                    aspectRatio: "400/300",
+                    objectFit: "cover",
+                  }}
+                  width={singleResult.images[0].width || 400}
+                />
+                <div className="bg-white p-4 dark:bg-gray-950">
+                  <h3 className="text-lg font-semibold md:text-xl">{singleResult.title}</h3>
+                  <h4 className="text-base font-semibold md:text-lg">${singleResult.minPrice || 1337}</h4>
+                  <Button className="mt-2" size="sm">
+                    Add to Cart
+                  </Button>
                 </div>
-              </>
-            )}
-          />
+              </div>
+            ))}
+          </div>
+          {/* </> */}
+          {/* )}
+          /> */}
         </div>
       </div>
     </div>

diff --git a/packages/core/platform/shopify/normalize.ts b/packages/core/platform/shopify/normalize.ts
@@ -14,9 +14,9 @@ export function normalizeProduct(product: SingleProductQuery["product"]): Platfo
     options,
     priceRange,
     tags,
-    updatedAt,
     featuredImage,
     seo,
+    updatedAt,
     createdAt,
     updatedAtTimestamp: new Date(updatedAt).getTime() / 1000,
     createdAtTimestamp: new Date(createdAt).getTime() / 1000,

diff --git a/yarn.lock b/yarn.lock
@@ -13945,10 +13945,10 @@ next-compose-plugins@^2.2.1:
   resolved "https://registry.yarnpkg.com/next-compose-plugins/-/next-compose-plugins-2.2.1.tgz#020fc53f275a7e719d62521bef4300fbb6fde5ab"
   integrity sha512-OjJ+fV15FXO2uQXQagLD4C0abYErBjyjE0I0FHpOEIB8upw0hg1ldFP6cqHTJBH1cZqy96OeR3u1dJ+Ez2D4Bg==
 
-[email protected].4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/next-rsc-search/-/next-rsc-search-1.0.4.tgz#8219140a180c4753a0a5ba4ac4c7524f38875f8a"
-  integrity sha512-6sdJQMrPQ1uDXX62eoMCSIQ7nu69PKiLEPIY8xeUpUBhHSF6o5yLdCaBcpyRjSxd8fHp8GqpQDv7gflrd18Hyw==
+[email protected].5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/next-rsc-search/-/next-rsc-search-1.0.5.tgz#33509f9d87a52892ca373f6d83603fcfa0e8f7de"
+  integrity sha512-bHCGTcKYhQILesy3+wFLO+xYsstwYKMsu++C89VHP2vvo+Od7NH9coW3VjYiY/a5rp3CFoXwvvBQlsHTATnaGg==
   dependencies:
     deepmerge "^4.3.1"
     meilisearch "^0.37.0"