nvm figured it out
parent
38653bf4a6
commit
08098fbf37
|
|
@ -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}"><Previous</a></li>
|
||||
<li in:fade>
|
||||
<a href="/?query={data.query}&page={data.page - 1}"><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></a></li>
|
||||
<li in:fade>
|
||||
<a href="/?query={data.query}&page={data.page + 1}">Next></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>
|
||||
|
|
|
|||
|
|
@ -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() || {};
|
||||
|
|
|
|||
Loading…
Reference in New Issue