badly paginated matches
This commit is contained in:
parent
00356d669c
commit
58c1c5f9fb
1 changed files with 47 additions and 1 deletions
|
@ -1,10 +1,14 @@
|
||||||
<script lang="ts" context="module">
|
<script lang="ts" context="module">
|
||||||
import { ApiClient } from "$lib/api_client";
|
import { ApiClient } from "$lib/api_client";
|
||||||
|
|
||||||
|
const PAGE_SIZE = "50";
|
||||||
|
|
||||||
export async function load({ fetch }) {
|
export async function load({ fetch }) {
|
||||||
try {
|
try {
|
||||||
const apiClient = new ApiClient(fetch);
|
const apiClient = new ApiClient(fetch);
|
||||||
const matches = await apiClient.get("/api/matches");
|
const matches = await apiClient.get("/api/matches", {
|
||||||
|
count: PAGE_SIZE,
|
||||||
|
});
|
||||||
|
|
||||||
return {
|
return {
|
||||||
props: {
|
props: {
|
||||||
|
@ -24,10 +28,46 @@
|
||||||
import MatchList from "$lib/components/matches/MatchList.svelte";
|
import MatchList from "$lib/components/matches/MatchList.svelte";
|
||||||
|
|
||||||
export let matches: object[];
|
export let matches: object[];
|
||||||
|
let loading = false;
|
||||||
|
|
||||||
|
async function loadNewer() {
|
||||||
|
if (matches.length == 0) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const firstTimestamp = matches[0]["timestamp"];
|
||||||
|
const apiClient = new ApiClient();
|
||||||
|
const reversedNewPage = await apiClient.get("/api/matches", {
|
||||||
|
count: PAGE_SIZE,
|
||||||
|
after: firstTimestamp,
|
||||||
|
});
|
||||||
|
|
||||||
|
if (reversedNewPage.length > 0) {
|
||||||
|
matches = reversedNewPage.reverse();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function loadOlder() {
|
||||||
|
if (matches.length == 0) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const lastTimestamp = matches[matches.length - 1]["timestamp"];
|
||||||
|
const apiClient = new ApiClient();
|
||||||
|
const newPage = await apiClient.get("/api/matches", {
|
||||||
|
count: PAGE_SIZE,
|
||||||
|
before: lastTimestamp,
|
||||||
|
});
|
||||||
|
if (newPage.length > 0) {
|
||||||
|
matches = newPage;
|
||||||
|
}
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<MatchList {matches} />
|
<MatchList {matches} />
|
||||||
|
<div class="page-controls">
|
||||||
|
<button on:click={loadNewer}>newer</button>
|
||||||
|
<button on:click={loadOlder}>older</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
|
@ -35,4 +75,10 @@
|
||||||
width: 800px;
|
width: 800px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.page-controls {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin: 12px;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
Loading…
Reference in a new issue