ImagePost.svelte

<script>
    import { fetchAPI } from "@/static/js/helper";
    import { paths } from "@/static/js/paths";
    import { user } from "@/stores";
    import { onMount } from "svelte";

    export let params = {};
    let imageMetadata = {};
    let addTag = false;
    let tag = "";
    let originalComment;
    let form;
    let edit = false;

    async function getImageMetadata() {
        return await fetchAPI(paths.ImageField(params.snowflake));
    }
    function imageTagAdd() {
        const options = {
            method: "PUT",
            headers: {
                secret: $user.secret,
            },
        };
        fetchAPI(paths.ImageTagField(params.snowflake, tag), options);
        tag = "";
    }
    // Serialize image metada fields into JSON string that can be sent to API endpoints
    function serializeForm(form) {
        return JSON.stringify(Object.fromEntries(new FormData(form)));
    }
    async function updateImageMetadata(snowflake, metadata) {
        const options = {
            method: "PATCH",
            headers: {
                secret: $user.secret,
            },
            body: metadata,
        };
        return fetchAPI(paths.ImageField(snowflake), options);
    }

    onMount(async () => {
        imageMetadata = await getImageMetadata();
        originalComment = imageMetadata.commentary ? true : false;
    });
</script>

<svelte:head>
    <title>{params.snowflake}</title>
</svelte:head>

<div class="flex flex-row space-x-12">
    <div class="pl-2">
        <ul>
            <li><strong>Snowflake: </strong> {imageMetadata.snowflake}</li>
            <li>
                <strong>Source: </strong>
                <a href={imageMetadata.source}>{imageMetadata.source}</a>
            </li>
            <li><strong>Image type: </strong> {imageMetadata.type}</li>
            <li><strong>Uploaded by: </strong> {imageMetadata.user}</li>
        </ul>
        <div><button on:click={() => (edit = !edit)}>Edit</button></div>
        <div><button on:click={() => (addTag = !addTag)}>Add tag</button></div>
        {#if addTag}
            <div class="space-x-2">
                <input type="text" placeholder="Add tag" bind:value={tag} />
                <button on:click={imageTagAdd}>Add</button>
            </div>