nvm figured it out

pull/5/head
Adam Veldhousen 2023-05-20 01:44:47 -05:00
parent 38653bf4a6
commit 08098fbf37
Signed by: adam
GPG Key ID: 6DB29003C6DD1E4B
2 changed files with 24 additions and 16 deletions

View File

@ -1,42 +1,48 @@
<script lang="ts">
import type { PageData } from './$types';
import { fade } from 'svelte/transition';
import AuctionResult from '$lib/AuctionResult.svelte';
import { invalidateAll } from '$app/navigation';
export let data: PageData;
$: hasResults = (data?.results || []).length > 0;
$: hasResults = (data.results || []).length > 0;
$: currentPage = data.page + 1;
$: pageCount = Math.floor(data.total / 64);
</script>
{#if hasResults}
<section>
<h1 class="pb-5 text-lg">{data?.results.length} of {data?.total} Upcoming & Live Auctions</h1>
<section in:fade>
<h1 class="pb-5 text-lg">{data.results.length} of {data.total} Upcoming & Live Auctions</h1>
<ol class="flex justify-between w-full center" style="padding: 0 10%;">
{#if currentPage > 1}
<li><a href="/?query={data.query}&page={data.page - 1}">&lt;Previous</a></li>
<li in:fade>
<a href="/?query={data.query}&page={data.page - 1}">&lt;Previous</a>
</li>
{:else}
<li />
{/if}
<li>Page {currentPage} of {pageCount}</li>
{#if currentPage < pageCount}
<li><a href="/?query={data.query}&page={data.page + 1}">Next&gt;</a></li>
<li in:fade>
<a href="/?query={data.query}&page={data.page + 1}">Next&gt;</a>
</li>
{/if}
</ol>
</section>
<ul class="flex flex-col m-0 p-0 justify-between pr-10">
{#each data?.results as auction, i}
<li id="catalog-{auction.id}" class="pb-5">
<AuctionResult {auction} />
</li>
{/each}
</ul>
{#key data.results}
<ul class="flex flex-col m-0 p-0 justify-between pr-10">
{#each data.results as auction, i}
<li id="catalog-{auction.id}" class="pb-5" in:fade={{ delay: i * 90 }}>
<AuctionResult {auction} />
</li>
{/each}
</ul>
{/key}
{:else}
<section class="flex w-full flex-col justify-center text-center">
<section class="flex w-full flex-col justify-center text-center" in:fade out:fade>
<h1 class="text-2xl">No auctions found.</h1>
{#if data?.query !== 'watch'}
{#if data.query !== 'watch'}
<p>
Try searching <em><a href="/?query=watch">Watch</a></em>
</p>

View File

@ -2,11 +2,13 @@ import type { PageLoad } from './$types';
const API_HOST = 'http://localhost:8000/api/v1'
export const load = (async ({ fetch, url }) => {
export const load = (async ({ fetch, url, depends }) => {
const searchTerm = url.searchParams.get('query') || '';
const currentPage = url.searchParams.get('page') || 0;
const currentLimit = url.searchParams.get('limit') || 64;
depends('search');
try {
const response = await fetch(API_HOST + `/upcoming?searchTerm=${searchTerm}&page=${currentPage}&limit=${currentLimit}`);
const { page, total, results } = await response.json() || {};