diff --git a/src/routes/Tag.svelte b/src/routes/Tag.svelte index f68f392ef5ace7ed496f6d0303e64271eb551057..0ebd64426696a0abccb1275643339cdaec9d61f1 100644 --- a/src/routes/Tag.svelte +++ b/src/routes/Tag.svelte @@ -1,8 +1,9 @@ <script> import ImageList from "@/lib/ImageList.svelte"; - import { fetchAPI } from "@/static/js/helper"; + import { fetchAPI, getQueryValue } from "@/static/js/helper"; import { paths } from "@/static/js/paths"; import { user } from "@/stores"; + import { push, querystring } from "svelte-spa-router"; const tagTypes = [ "artist", @@ -16,7 +17,12 @@ let tagType = tagTypes[0]; $: validTag = checkTag(tag); let searchTags = ""; + $: queryValue = getQueryValue($querystring, "search") || ""; let searchSnowflakes = []; + $: if (queryValue.length > 0) + searchImagesByTags(queryValue).then( + (result) => (searchSnowflakes = result) + ); function putTag() { const options = { @@ -50,14 +56,18 @@ const regex = /^[a-z0-9()_-]*$/g; return !tag.match(regex) || tag.length > 128; } - async function searchImagesByTags() { - searchSnowflakes = + async function searchImagesByTags(searchTags) { + return ( (await fetchAPI(paths.SearchField(parseSearchTags(searchTags)))) || - []; + [] + ); } function parseSearchTags(searchTags) { return searchTags.split(" ").join("!"); } + function pushSearchTags() { + push(`#/tag?search=${parseSearchTags(searchTags)}`); + } </script> <section class="m-2 space-y-4"> @@ -84,7 +94,7 @@ <button disabled={searchTags === ""} class="disabled:opacity-50" - on:click={searchImagesByTags}>Search</button + on:click={pushSearchTags}>Search</button > <div>Delimit tags by space to search multiple</div> </div>