[chore] move cards to htmx post

src/pages/partials/card-modal.astro

@@ -35,9 +35,11 @@ const nearMint = await db.query.skus.findFirst({
 
 const nearMintPrice = nearMint?.marketPrice ?? null;
 
-const calculatedAt = new Date(nearMint?.calculatedAt);
+const calculatedAt = new Date(nearMint?.calculatedAt || 0);
+
+function timeAgo(date: any) {
+  if (date==0) return "never";
 
-function timeAgo(date) {
   const seconds = Math.floor((Date.now() - date) / 1000);
 
   const intervals = {

src/pages/partials/cards.astro

@@ -0,0 +1,66 @@
+---
+import { client } from '../../db/typesense.ts';
+import { db } from '../../db';
+import RarityIcon from '../../components/RarityIcon.astro';
+
+export const prerender = false;
+
+// get the query from post request using form data
+const formData = await Astro.request.formData();
+const query = formData.get('q')?.toString() || '';
+
+// use typesense to search for cards matching the query and return the productIds of the results
+const searchResults = await client.collections('cards').documents().search({
+    q: query,
+    filter_by: 'sealed:false',
+    query_by: 'productLineName,productName,setName,number,rarityName',
+    per_page: 250,
+});
+const productIds = searchResults.hits?.map((hit: any) => hit.document.productId) ?? [];
+
+// 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: { productId: { in: productIds, }, },
+    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);
+    if (price > 99.99)  return `$${Math.round(price)}`;
+    return `$${price.toFixed(2)}`;
+};
+
+const conditionOrder = ["Near Mint", "Lightly Played", "Moderately Played", "Heavily Played", "Damaged"];
+---
+{pokemon.map((card) => (
+    <div class="col">
+        <div hx-get={`/partials/card-modal?productId=${card.productId}`} hx-target="#cardModal" hx-trigger="click" data-bs-toggle="modal" data-bs-target="#cardModal">
+            <img src={`/cards/${card.productId}.jpg`} alt={card.productName} loading="lazy" decoding="async" class="img-fluid rounded-3 mb-2 card-image w-100" onerror="this.onerror=null;this.src='/cards/noImage.webp'"/>
+        </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">
+                {price.condition.split(' ').map((w) => w[0]).join('')}
+                <br />{formatPrice(price.marketPrice)}
+            </div>
+            ))}
+        </div>
+        <div class="h5 my-0">{card.productName}</div>
+        <div class="d-flex flex-row lh-1 mt-1">
+            <div class="text-secondary flex-grow-1">{card.set?.setCode}</div>
+            <div class="text-secondary">{card.number}</div>
+            <span class="ps-2 small-icon"><RarityIcon rarity={card.rarityName} /></span>
+        </div>
+    </div>
+))}

src/pages/pokemon.astro

@@ -1,25 +1,18 @@
 ---
 import Layout from '../layouts/Main.astro';
 import CardGrid from "../components/CardGrid.astro";
-import Card from "../components/Card.astro";
 import StickyFilter from '../components/StickyFilter.astro';
 
 export const prerender = false;
 
-// super dirty form retrieval
-// TODO: need to prevent XSS here
-const searchParams = Astro.url.searchParams;
-const query = searchParams.get('q') || '*';
-
 ---
 
 <Layout>
-<StickyFilter query={ query } />
+<StickyFilter />
 <div class="container">
     <h1 class="my-5">Rigid's app thing</h1>
-    <CardGrid>
-        <Card slot="Card" query={query}></Card>
-    </CardGrid>
+
+    <CardGrid />
 
     <div class="modal fade card-modal" id="cardModal" tabindex="-1" aria-labelledby="cardModalLabel" aria-hidden="true">
         <div class="modal-dialog modal-dialog-centered modal-fullscreen-md-down modal-xl">