diff --git a/src/App.svelte b/src/App.svelte index b7c72662ce46dac6f943c3710a6f904e0353ebf9..13e1f2f11fa89b96df535c462e944abe79acae4b 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 598e1744803354e726f315dcd0cfe6131243eaa6..f55498659bbb6fb78eaf4060f36ffcfc160575b8 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 65ea06640d81b1da5831432ebcb83f7962892835..c2ff3c5fcea3eeb3d6ca3482b140a9399ec5554a 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 0000000000000000000000000000000000000000..0b6de178b3d246b9554b901b34bca6f757437700 --- /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 6b9c899afe155304b57b6e3bf8748d3925eae471..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 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} />