[feat] card grid is completely driven from search

src/pages/partials/cards.astro

@@ -1,7 +1,7 @@
 ---
 import { client } from '../../db/typesense';
-import { db } from '../../db';
 import RarityIcon from '../../components/RarityIcon.astro';
+import * as util from 'node:util';
 
 export const prerender = false;
 
@@ -55,6 +55,7 @@ let searchArray = [{
     facet_by: Object.keys(facetFields).join(','),
     page: Math.floor(start / 20) + 1,
     sort_by: '_text_match:asc, releaseDate:desc, number:asc',
+    include_fields: '$skus(*)',
 }];
 
 // on first load (start === 0) we want to get the facets for the filters
@@ -66,7 +67,8 @@ if (start === 0) {
             per_page: 0,
             facet_by: facet,
             page: 1,
-            sort_by: ''
+            sort_by: '',
+            include_fields: '',
         });
     }
 }
@@ -79,28 +81,19 @@ const commonSearchParams = {
 
 // use typesense to search for cards matching the query and return the productIds of the results
 const searchResults = await client.multiSearch.perform(searchRequests, commonSearchParams);
-//console.log(searchResults);
+console.log(util.inspect(searchResults.results[0], {depth: null}));
 const cardResults = searchResults.results[0] as any;
 
-const cardIds = cardResults.hits?.map((hit: any) => hit.document.cardId) ?? [];
+const pokemon = cardResults.hits?.map((hit: any) => hit.document) ?? [];
 const totalHits = cardResults?.found;
-//const facets = cardResults?.facet_counts;
 
-// get pokemon data with prices and set info using searchResults and then query the database for each card to get the prices and set info
-const pokemon = await db.query.cards.findMany({
-    where: { cardId: { in: cardIds, }, },
-    with: {
-        prices: true,
-        set: true,
-    }
-});
 
 // format price to 2 decimal places (or 0 if price >=100) and adds a $ sign, if the price is null it returns "–"
-const formatPrice = (price:any) => {
-    if (price === null) {
-        return "—";
-    }
-    price = Number(price);
+const formatPrice = (condition:string, skus: any) => {
+    const sku = skus.find(price => price.condition === condition);
+    if (typeof sku === 'undefined' || typeof sku.marketPrice === 'undefined') return '—';
+
+    const price = Number(sku.marketPrice) / 100.0;
     if (price > 99.99)  return `$${Math.round(price)}`;
     return `$${price.toFixed(2)}`;
 };
@@ -124,7 +117,6 @@ if (start === 0) {
     var facets = searchResults.results.slice(1).map((result: any) => {
         return result.facet_counts[0];
     });
-    console.log(facets);
 }
 
 ---
@@ -162,17 +154,11 @@ if (start === 0) {
             <img src={`/cards/${card.productId}.jpg`} alt={card.productName} id="cardImage" loading="lazy" decoding="async" class="img-fluid rounded-4 mb-2 card-image image-grow w-100" onerror="this.onerror=null;this.src='/cards/default.jpg'"/>
         </div>
         <div class="row row-cols-5 gx-1 price-row mb-2">
-        {card.prices
-            .slice()
-            .sort((a, b) => conditionOrder.indexOf(a.condition) - conditionOrder.indexOf(b.condition))
-            .filter((price, index, arr) =>
-            arr.findIndex(p => p.condition === price.condition) === index
-            )
-            .map((price) => (
-            <div class="col price-label ps-1">
-                { conditionShort(price.condition) }
-                <br />{formatPrice(price.marketPrice)}
-            </div>
+            {conditionOrder.map((condition) => (
+                <div class="col price-label ps-1">
+                    { conditionShort(condition) }
+                    <br />{formatPrice(condition, card.skus)}
+                </div>
             ))}
         </div>
         <div class="h5 my-0">{card.productName}</div>