MaybeThisIsRu/category.svelte

## category.svelte
<!--
Problem statement:

I'm writing an interactive category field.

I have three major things on play here:

1. A text input that is described by a paragraph above it
2. A datalist of categories received from the server
3. A list of checked checkboxes for each new category

Why #3? Well, I don't want to have to manage my form on the frontend before sending it to the backend. A checkbox with the same name attribute automatically takes care of sending multiple categories.

1. My main concern is indicating to users that the list of entered categories is *here* -- how do I connect the two?
2. A secondary concern is also making sense of what this "x" button *does* and for which particular value.

-->

<script>
	import { onMount } from "svelte";

	let categories = [];
	$: userEnteredCategories = [];
	let currentCategoryName = "";

	onMount(async () => {
		const response = await fetch(
			"/api/v1/micropub/category/"
		).catch((error) => console.error(error));

		const data = await response
			.json()
			.catch((error) => console.error(error));

		if (data && data.error) console.error(data.error_description);
		else categories = data;
	});

	const handleKeyUp = (event) => {
		if (event.code === "Comma") {
			userEnteredCategories = [
				...userEnteredCategories,
				currentCategoryName.slice(0, -1),
			];
			currentCategoryName = "";
		}
	};

	const deleteUserCategory = (event) => {
		userEnteredCategories = userEnteredCategories.filter((cat) =>
			event.target.dataset.value === cat ? false : true
		);
	};
</script>

<input
	type="text"
	id="field-group__category"
	aria-describedby="field-group__description--category"
	list="category--suggestions"
	on:keyup|preventDefault={handleKeyUp}
	bind:value="{currentCategoryName}"
/>

<datalist class="category" id="category--suggestions">
	{#each categories as category}
	<option value="{category}">{category}</option>
	{/each}
</datalist>

<!-- To avoid handling the form manually just for categories, we build a list of checkboxes and have HTML do the heavy lifting for us -->
<!-- ! Concerns around accessibility -->
<div class="category" id="category--user">
    {#each userEnteredCategories as userEnteredCategory, i}
    <div class="user-category">
        <button
            class="user-category__remove"
            on:click|preventDefault={deleteUserCategory}
            data-value="{userEnteredCategory}"
        >
            x
        </button>
        <label class="user-category__name" for="{userEnteredCategory}_{i}"
            >{userEnteredCategory}</label
        >
        <input
            type="checkbox"
            name="category"
            id="{userEnteredCategory}_{i}"
            value="{userEnteredCategory}"
            class="user-category__value hidden"
            checked
        />
    </div>
	{/each}
</div>
	<!--
	Problem statement:

	I'm writing an interactive category field.

	I have three major things on play here:

	1. A text input that is described by a paragraph above it
	2. A datalist of categories received from the server
	3. A list of checked checkboxes for each new category

	Why #3? Well, I don't want to have to manage my form on the frontend before sending it to the backend. A checkbox with the same name attribute automatically takes care of sending multiple categories.

	1. My main concern is indicating to users that the list of entered categories is here -- how do I connect the two?
	2. A secondary concern is also making sense of what this "x" button does and for which particular value.

	-->

	<script>
	import { onMount } from "svelte";

	let categories = [];
	$: userEnteredCategories = [];
	let currentCategoryName = "";

	onMount(async () => {
	const response = await fetch(
	"/api/v1/micropub/category/"
	).catch((error) => console.error(error));

	const data = await response
	.json()
	.catch((error) => console.error(error));

	if (data && data.error) console.error(data.error_description);
	else categories = data;
	});

	const handleKeyUp = (event) => {
	if (event.code === "Comma") {
	userEnteredCategories = [
	...userEnteredCategories,
	currentCategoryName.slice(0, -1),
	];
	currentCategoryName = "";
	}
	};

	const deleteUserCategory = (event) => {
	userEnteredCategories = userEnteredCategories.filter((cat) =>
	event.target.dataset.value === cat ? false : true
	);
	};
	</script>

	<input
	type="text"
	id="field-group__category"
	aria-describedby="field-group__description--category"
	list="category--suggestions"
	on:keyup\|preventDefault={handleKeyUp}
	bind:value="{currentCategoryName}"
	/>

	<datalist class="category" id="category--suggestions">
	{#each categories as category}
	<option value="{category}">{category}</option>
	{/each}
	</datalist>

	<!-- To avoid handling the form manually just for categories, we build a list of checkboxes and have HTML do the heavy lifting for us -->
	<!-- ! Concerns around accessibility -->
	<div class="category" id="category--user">
	{#each userEnteredCategories as userEnteredCategory, i}
	<div class="user-category">
	<button
	class="user-category__remove"
	on:click\|preventDefault={deleteUserCategory}
	data-value="{userEnteredCategory}"
	>
	x
	</button>
	<label class="user-category__name" for="{userEnteredCategory}_{i}"
	>{userEnteredCategory}</label
	>
	<input
	type="checkbox"
	name="category"
	id="{userEnteredCategory}_{i}"
	value="{userEnteredCategory}"
	class="user-category__value hidden"
	checked
	/>
	</div>
	{/each}
	</div>