Tag.svelte

<script>
    import ImageList from "@/lib/ImageList.svelte";
    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",
        "character",
        "copyright",
        "generic",
        "group",
        "meta",
    ];
    let tag = "";
    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 = {
            method: "PUT",
            headers: {
                secret: $user.secret,
            },
        };
        return fetchAPI(paths.TagField(tag), options);
    }
    function patchTagType() {
        const options = {
            method: "PATCH",
            headers: {
                "Content-Type": "application/json",
                secret: $user.secret,
            },
            body: JSON.stringify({ type: tagType }),
        };
        return fetchAPI(paths.TagInfo(tag), options);
    }
    function addTag() {
        putTag()
            .then(() => patchTagType())
            .finally(() => {
                tag = "";
                tagType = tagTypes[0];
            });
    }
    function checkTag(tag) {
        const regex = /^[a-z0-9()_-]*$/g;
        return !tag.match(regex) || tag.length > 128;
    }
    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)}`);
    }