From 2face1790f3e193581e05a6ee014fbf215d4b694 Mon Sep 17 00:00:00 2001
From: Trirst <abeces968@gmail.com>
Date: Mon, 18 Oct 2021 00:39:48 +0700
Subject: [PATCH] Persistent paging route
---
src/App.svelte | 1 +
src/lib/PaginationBar.svelte | 6 ++++++
src/routes.js | 2 ++
src/routes/Browse.svelte | 32 ++++++++++++++++++++++++++++++++
src/routes/Home.svelte | 29 -----------------------------
5 files changed, 41 insertions(+), 29 deletions(-)
create mode 100644 src/routes/Browse.svelte
diff --git a/src/App.svelte b/src/App.svelte
index b7c7266..13e1f2f 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -7,6 +7,7 @@
<div class="flex flex-row space-x-4 m-1.5">
<a href="#/" class="">Home</a>
+ <a href="#/browse?p=1">Browse</a>
<a href="#/upload">Upload</a>
<a href="#/tag">Tag</a>
<span>:|:</span>
diff --git a/src/lib/PaginationBar.svelte b/src/lib/PaginationBar.svelte
index 598e174..f554986 100644
--- a/src/lib/PaginationBar.svelte
+++ b/src/lib/PaginationBar.svelte
@@ -1,6 +1,9 @@
<script>
+ import { push } from "svelte-spa-router";
+
export let currentPage = 1;
export let lastPage = 1;
+ $: queryPageNumber(currentPage);
function pagePrompt() {
try {
@@ -18,6 +21,9 @@
alert(error);
}
}
+ function queryPageNumber(currentPage) {
+ push(`#/browse?p=${currentPage}`);
+ }
</script>
<nav class="flex justify-center">
diff --git a/src/routes.js b/src/routes.js
index 65ea066..c2ff3c5 100644
--- a/src/routes.js
+++ b/src/routes.js
@@ -2,10 +2,12 @@ import Home from '@/routes/Home.svelte';
import Upload from '@/routes/Upload.svelte';
import ImagePost from '@/routes/ImagePost.svelte';
import Tag from '@/routes/Tag.svelte';
+import Browse from '@/routes/Browse.svelte';
export default {
'/': Home,
'/upload': Upload,
'/image/:snowflake': ImagePost,
'/tag': Tag,
+ '/browse': Browse,
}
\ No newline at end of file
diff --git a/src/routes/Browse.svelte b/src/routes/Browse.svelte
new file mode 100644
index 0000000..0b6de17
--- /dev/null
+++ b/src/routes/Browse.svelte
@@ -0,0 +1,32 @@
+<script>
+ import { onMount } from "svelte";
+ import { paths } from "@/static/js/paths";
+ import { fetchAPI } from "@/static/js/helper";
+ import ImageList from "@/lib/ImageList.svelte";
+ import PaginationBar from "@/lib/PaginationBar.svelte";
+ import { querystring } from "svelte-spa-router";
+
+ let pageSnowflakes = [];
+ let currentPage;
+ let lastPage;
+ $: if ($querystring !== "")
+ currentPage = parseInt(new URLSearchParams($querystring).get("p"));
+ $: getPageSnowflakes(currentPage - 1).then(
+ (snowflakes) => (pageSnowflakes = snowflakes || [])
+ );
+
+ async function getPageSnowflakes(pageNumber) {
+ return await fetchAPI(paths.ImagePageField(pageNumber));
+ }
+ async function getTotalPages() {
+ return await fetchAPI(paths.ImagePage);
+ }
+
+ onMount(async () => {
+ lastPage = await getTotalPages();
+ });
+</script>
+
+<PaginationBar bind:currentPage bind:lastPage />
+<ImageList snowflakes={pageSnowflakes} />
+<PaginationBar bind:currentPage bind:lastPage />
diff --git a/src/routes/Home.svelte b/src/routes/Home.svelte
index 6b9c899..e69de29 100644
--- a/src/routes/Home.svelte
+++ b/src/routes/Home.svelte
@@ -1,29 +0,0 @@
-<script>
- import { onMount } from "svelte";
- import { paths } from "@/static/js/paths";
- import { fetchAPI } from "@/static/js/helper";
- import ImageList from "@/lib/ImageList.svelte";
- import PaginationBar from "@/lib/PaginationBar.svelte";
-
- let pageSnowflakes = [];
- let currentPage = 1;
- let lastPage = 1;
- $: getPageSnowflakes(currentPage - 1).then(
- (snowflakes) => (pageSnowflakes = snowflakes || [])
- );
-
- async function getPageSnowflakes(pageNumber) {
- return await fetchAPI(paths.ImagePageField(pageNumber));
- }
- async function getTotalPages() {
- return await fetchAPI(paths.ImagePage);
- }
-
- onMount(async () => {
- lastPage = await getTotalPages();
- });
-</script>
-
-<PaginationBar bind:currentPage {lastPage} />
-<ImageList snowflakes={pageSnowflakes} />
-<PaginationBar bind:currentPage {lastPage} />
--
GitLab