Tiltfile

@@ -59,7 +59,7 @@ def bh_client(service="", port_forwards=[], labels=['2-services'], deps=['ingres
         dockerfile='./src/Dockerfile.frontend'.format(service),
         target='development',
         build_args={
-            "service": '{}-client'.format(service)
+            "service": service
         },
         entrypoint='vite dev --port=80 --host=0.0.0.0 --strictPort --logLevel info',
         live_update=[

src/admin-client/src/lib/Pager.svelte

@@ -1,38 +0,0 @@
-<script lang="ts">
-	import { fade } from 'svelte/transition';
-
-	export let page: number = 1;
-	export let itemCount: number = 0;
-	export let pageSize: number = 1;
-
-	interface PagerParams {
-		page: number;
-		pageCount: number;
-		pageSize: number;
-	}
-
-	export let createUrl: (
-		//<reference types="svelte" />
-		arg0: PagerParams
-	) => string = (): string => '';
-
-	$: pageCount = Math.max(1, Math.ceil(itemCount / pageSize));
-</script>
-
-<ol class="flex justify-between w-full center text-lg" style="padding: 0 10%;">
-	{#if page > 1}
-		<li in:fade>
-			<a href={createUrl({ page: page - 1, pageCount, pageSize })}> &lt;Previous </a>
-		</li>
-	{:else}
-		<li />
-	{/if}
-	<li>Page {page} of {pageCount}</li>
-	{#if page < pageCount}
-		<li in:fade>
-			<a href={createUrl({ page: page + 1, pageCount, pageSize })}> Next&gt; </a>
-		</li>
-	{:else}
-		<li />
-	{/if}
-</ol>

src/admin-client/src/routes/+page.svelte

@@ -3,7 +3,6 @@
 	import { fade } from 'svelte/transition';
 	import StartScrapeForm from '$lib/StartScrapeForm.svelte';
 	import ScrapeJobResult from '$lib/ScrapeJobResult.svelte';
-	import Pager from '$lib/Pager.svelte';
 
 	export let data: PageData;
 
@@ -29,30 +28,10 @@
 			console.log(scrapeJob);
 		} catch (error) {}
 	}
-
-	function buildQueryString({ page, pageSize }: { page: number; pageSize: number }): string {
-		const qs = [
-			data.query === '' ? data.query : `query=${data.query}`,
-			page <= 1 ? '' : `page=${page}`,
-			`limit=${pageSize}`
-		]
-			.filter((x) => x !== '')
-			.join('&');
-
-		return qs !== '' ? `?${qs}` : qs;
-	}
 </script>
 
 <section class="flex w-full flex-col justify-center" in:fade out:fade>
-	<section in:fade class="pb-10">
+	<h1 class="text-2xl mb-8">Sync Status</h1>
-		<h1 class="text-2xl pb-5 mb-8">Sync Status</h1>
-		<Pager
-			page={data.page}
-			itemCount={data.found}
-			pageSize={data.limit}
-			createUrl={buildQueryString}
-		/>
-	</section>
 	<div class="mb-8">
 		<StartScrapeForm on:scrape={onScrape} />
 	</div>
@@ -78,13 +57,4 @@
 			{/each}
 		</ul>
 	</section>
-
-	<section class="pt-10">
-		<Pager
-			page={data.page}
-			itemCount={data.found}
-			pageSize={data.limit}
-			createUrl={buildQueryString}
-		/>
-	</section>
 </section>

src/web-client/src/lib/Pager.svelte

@@ -1,38 +0,0 @@
-<script lang="ts">
-	import { fade } from 'svelte/transition';
-
-	export let page: number = 1;
-	export let itemCount: number = 0;
-	export let pageSize: number = 1;
-
-	interface PagerParams {
-		page: number;
-		pageCount: number;
-		pageSize: number;
-	}
-
-	export let createUrl: (
-		//<reference types="svelte" />
-		arg0: PagerParams
-	) => string = (): string => '';
-
-	$: pageCount = Math.max(1, Math.ceil(itemCount / pageSize));
-</script>
-
-<ol class="flex justify-between w-full center text-lg" style="padding: 0 10%;">
-	{#if page > 1}
-		<li in:fade>
-			<a href={createUrl({ page: page - 1, pageCount, pageSize })}> &lt;Previous </a>
-		</li>
-	{:else}
-		<li />
-	{/if}
-	<li>Page {page} of {pageCount}</li>
-	{#if page < pageCount}
-		<li in:fade>
-			<a href={createUrl({ page: page + 1, pageCount, pageSize })}> Next&gt; </a>
-		</li>
-	{:else}
-		<li />
-	{/if}
-</ol>

src/web-client/src/routes/+page.svelte

@@ -1,35 +1,43 @@
 <script lang="ts">
 	import type { PageData } from './$types';
 	import AuctionResult from '$lib/AuctionResult.svelte';
-	import Pager from '$lib/Pager.svelte';
 	import { fade } from 'svelte/transition';
 
 	export let data: PageData;
 
-	function buildQueryString({ page, pageSize }: { page: number; pageSize: number }): string {
+	function buildQueryString({ query, page }: { query: string; page: number }): string {
-		const qs = [
+		const qs = [query === '' ? query : `query=${query}`, page <= 1 ? '' : `page=${page}`]
-			data.query === '' ? data.query : `query=${data.query}`,
-			page <= 1 ? '' : `page=${page}`,
-			`limit=${pageSize}`
-		]
 			.filter((x) => x !== '')
 			.join('&');
 
-		return qs !== '' ? `/?${qs}` : qs;
+		return qs !== '' ? `?${qs}` : qs;
 	}
 
-	$: hasResults = data?.results?.length || 0;
+	$: hasResults = (data.results || []).length > 0;
+	$: currentPage = data.page + 1;
+	$: pageCount = Math.max(1, Math.ceil(data.found / data.limit));
 </script>
 
 {#if hasResults}
 	<section in:fade>
 		<h1 class="pb-5 text-lg">Found {data.found} Upcoming & Live Auctions</h1>
-		<Pager
+		<ol class="flex justify-between w-full center" style="padding: 0 10%;">
-			page={data.page + 1}
+			{#if currentPage > 1}
-			itemCount={data.found}
+				<li in:fade>
-			pageSize={data.limit}
+					<a href="/{buildQueryString({ query: data.query, page: currentPage - 1 })}"
-			createUrl={buildQueryString}
+						>&lt;Previous</a
-		/>
+					>
+				</li>
+			{:else}
+				<li />
+			{/if}
+			<li>Page {currentPage} of {pageCount}</li>
+			{#if currentPage < pageCount}
+				<li in:fade>
+					<a href="/{buildQueryString({ query: data.query, page: currentPage + 1 })}">Next&gt;</a>
+				</li>
+			{/if}
+		</ol>
 	</section>
 
 	{#key data.results}
@@ -41,13 +49,6 @@
 			{/each}
 		</ul>
 	{/key}
-
-	<Pager
-		page={data.page + 1}
-		itemCount={data.found}
-		pageSize={data.limit}
-		createUrl={buildQueryString}
-	/>
 {:else}
 	<section class="flex w-full flex-col justify-center text-center" in:fade out:fade>
 		<h1 class="text-2xl">No auctions found.</h1>