xerbalind/planetwars.dev
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages 1 Wiki Activity

consume matches pagination api

Browse source
This commit is contained in:
Ilion Beyst 2022-08-16 20:00:49 +02:00
parent 03ca884c40
commit 87f6a9c455
2 changed files with 16 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
web/pw-server/src/routes/bots/[bot_name].svelte
View file

@ -5,7 +5,7 @@
const apiClient = new ApiClient(fetch); const apiClient = new ApiClient(fetch);
try { try {
const [botData, matches] = await Promise.all([ const [botData, matchesPage] = await Promise.all([
apiClient.get(`/api/bots/${params["bot_name"]}`), apiClient.get(`/api/bots/${params["bot_name"]}`),
apiClient.get("/api/matches", { bot: params["bot_name"], count: "20" }), apiClient.get("/api/matches", { bot: params["bot_name"], count: "20" }),
]); ]);
@ -19,7 +19,7 @@
bot, bot,
owner, owner,
versions, versions,
matches, matches: matchesPage["matches"],
}, },
}; };
} catch (error) { } catch (error) {

19
web/pw-server/src/routes/matches/index.svelte
View file

@ -15,7 +15,7 @@
bot: botName, bot: botName,
}; };
let matches = await apiClient.get("/api/matches", removeUndefined(query)); let { matches, has_next } = await apiClient.get("/api/matches", removeUndefined(query));
// TODO: should this be done client-side? // TODO: should this be done client-side?
if (query["after"]) { if (query["after"]) {
@ -26,6 +26,8 @@
props: { props: {
matches, matches,
botName, botName,
hasNext: has_next,
query,
}, },
}; };
} catch (error) { } catch (error) {
@ -47,12 +49,13 @@
</script> </script>
<script lang="ts"> <script lang="ts">
import { goto } from "$app/navigation";
import MatchList from "$lib/components/matches/MatchList.svelte"; import MatchList from "$lib/components/matches/MatchList.svelte";
export let matches: object[]; export let matches: object[];
export let botName: string | null; export let botName: string | null;
// whether a next page exists in the current iteration direction (before/after)
export let hasNext: boolean;
export let query: object;
type Cursor = { type Cursor = {
before?: string; before?: string;
@ -71,7 +74,7 @@
} }
function olderMatchesLink(matches: object[]): string { function olderMatchesLink(matches: object[]): string {
if (matches.length == 0) { if (matches.length == 0 || (query["before"] && !hasNext)) {
return null; return null;
} }
const lastTimestamp = matches[matches.length - 1]["timestamp"]; const lastTimestamp = matches[matches.length - 1]["timestamp"];
@ -79,7 +82,13 @@
} }
function newerMatchesLink(matches: object[]): string { function newerMatchesLink(matches: object[]): string {
if (matches.length == 0) { if (
matches.length == 0 ||
(query["after"] && !hasNext) ||
// we are viewing the first page, so there should be no newer matches.
// alternatively, we could show a "refresh" here.
(!query["before"] && !query["after"])
) {
return null; return null;
} }
const firstTimestamp = matches[0]["timestamp"]; const firstTimestamp = matches[0]["timestamp"];