[bugfix] search moved to components

src/components/Card.astro

@@ -1,16 +1,22 @@
 ---
 //import { eq } from 'drizzle-orm';
 import { isConditionalExpression } from 'typescript';
+import { client } from '../db/typesense.ts';
 import { db } from '../db';
 import RarityIcon from './RarityIcon.astro';
 //import * as schema from '../db/schema.ts';
 
-// Get some sample Pokemon data from the database
-//const pokemon = await db.select().from(schema.cards).where(eq(schema.cards.productLineName, "pokemon")).limit(256);
+const { query } = Astro.props;
+const searchResults = await client.collections('cards').documents().search({
+    q: query,
+    query_by: 'productLineName,productName,setName,number,rarityName',
+    per_page: 250,
+});
+const productIds = searchResults.hits?.map(hit => 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: { productLineName: "pokemon", },
-    orderBy: (cards, { desc }) => [desc(cards.marketPrice)],
-    limit: 320,
+    where: { productId: { in: productIds, }, },
     with: {
         prices: true,
         set: true,

src/components/CardGrid.astro

@@ -1,6 +1,18 @@
+---
+const { query } = Astro.props;
+---
+
     <div class="row mb-5">
         <div class="col-md-3 display-sm-none">
             <div class="h5 d-none">Inventory management placeholder</div>
+            <form method="GET">
+                <div>
+                    <input type="text" name="q" class="form-control w-100 mb-2" placeholder="Search cards..." value={query} />
+                </div>
+                <div>
+                    <input type="button" class="btn btn-primary mb-2" value="Search" />
+                </div>
+            </form>
         </div>
         <div class="col-sm-12 col-md-9 mt-0">
             <div class="row g-3 row-cols-2 row-cols-lg-3 row-cols-xl-4 d-flex">

src/pages/pokemon.astro

@@ -3,14 +3,22 @@ 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 />
 <div class="container">
     <h1 class="my-5">Rigid's app thing</h1>
-    <CardGrid>
-        <Card slot="Card"></Card>
+    <CardGrid query={query}>
+        <Card slot="Card" query={query}></Card>
     </CardGrid>
 </div>
 </div>