Skip to content
Snippets Groups Projects
Commit 2face179 authored by Trirst's avatar Trirst
Browse files

Persistent paging route

parent 7eb85ba7
Branches
No related tags found
No related merge requests found
...@@ -7,6 +7,7 @@ ...@@ -7,6 +7,7 @@
<div class="flex flex-row space-x-4 m-1.5"> <div class="flex flex-row space-x-4 m-1.5">
<a href="#/" class="">Home</a> <a href="#/" class="">Home</a>
<a href="#/browse?p=1">Browse</a>
<a href="#/upload">Upload</a> <a href="#/upload">Upload</a>
<a href="#/tag">Tag</a> <a href="#/tag">Tag</a>
<span>:|:</span> <span>:|:</span>
......
<script> <script>
import { push } from "svelte-spa-router";
export let currentPage = 1; export let currentPage = 1;
export let lastPage = 1; export let lastPage = 1;
$: queryPageNumber(currentPage);
function pagePrompt() { function pagePrompt() {
try { try {
...@@ -18,6 +21,9 @@ ...@@ -18,6 +21,9 @@
alert(error); alert(error);
} }
} }
function queryPageNumber(currentPage) {
push(`#/browse?p=${currentPage}`);
}
</script> </script>
<nav class="flex justify-center"> <nav class="flex justify-center">
......
...@@ -2,10 +2,12 @@ import Home from '@/routes/Home.svelte'; ...@@ -2,10 +2,12 @@ import Home from '@/routes/Home.svelte';
import Upload from '@/routes/Upload.svelte'; import Upload from '@/routes/Upload.svelte';
import ImagePost from '@/routes/ImagePost.svelte'; import ImagePost from '@/routes/ImagePost.svelte';
import Tag from '@/routes/Tag.svelte'; import Tag from '@/routes/Tag.svelte';
import Browse from '@/routes/Browse.svelte';
export default { export default {
'/': Home, '/': Home,
'/upload': Upload, '/upload': Upload,
'/image/:snowflake': ImagePost, '/image/:snowflake': ImagePost,
'/tag': Tag, '/tag': Tag,
'/browse': Browse,
} }
\ No newline at end of file
<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 />
<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} />
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment