[feat] infinite scolling complete

src/pages/partials/cards.astro

@@ -8,15 +8,18 @@ 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() || '';
+const start = Number(formData.get('start')?.toString() || '0');
 
 // 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,
+    per_page: 20,
+    page: Math.floor(start / 20) + 1,
 });
 const productIds = searchResults.hits?.map((hit: any) => hit.document.productId) ?? [];
+const totalHits = searchResults.found;
 
 // 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({
@@ -39,6 +42,11 @@ const formatPrice = (price:any) => {
 
 const conditionOrder = ["Near Mint", "Lightly Played", "Moderately Played", "Heavily Played", "Damaged"];
 ---
+{(start === 0) &&
+    <script define:vars={{ totalHits }} is:inline>
+        let hits = totalHits;
+    </script>
+}
 {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">
@@ -66,3 +74,8 @@ const conditionOrder = ["Near Mint", "Lightly Played", "Moderately Played", "Hea
         </div>
     </div>
 ))}
+{start + 20 < totalHits &&
+    <div hx-post="/partials/cards" hx-trigger="revealed" hx-include="#searchform" hx-target="#cardGrid" hx-swap="beforeend" hx-on--after-request="afterUpdate(event)">
+        Loading...
+    </div>
+}