forms and database actions

src/lib/server/database.js

@@ -0,0 +1,42 @@
+//@ts-nocheck
+
+const db = new Map();
+
+export function getTodos(userid) {
+    if (!db.get(userid)) {
+        db.set(userid, [{
+            id: crypto.randomUUID(),
+            description: 'Learn SvelteKit',
+            done: false
+        }])
+    }
+
+    return db.get(userid)
+}
+
+export function createTodo(userid, description) {
+    if (description === '') {
+		throw new Error('todo must have a description');
+	}
+
+	const todos = db.get(userid);
+
+    if (todos.find((todo) => todo.description === description)) {
+		throw new Error('todos must be unique');
+	}
+
+	todos.push({
+		id: crypto.randomUUID(),
+		description,
+		done: false
+	});
+}
+
+export function deleteTodo(userid, todoid) {
+	const todos = db.get(userid);
+	const index = todos.findIndex((todo) => todo.id === todoid);
+
+	if (index !== -1) {
+		todos.splice(index, 1);
+	}
+}

src/routes/todo/+page.server.js

@@ -0,0 +1,38 @@
+//@ts-nocheck
+
+import { fail } from '@sveltejs/kit';
+import * as db from '$lib/server/database';
+
+export function load({ cookies }) {
+    let id = cookies.get('userid');
+
+	if (!id) {
+		id = crypto.randomUUID();
+		cookies.set('userid', id, { path: '/' });
+	}
+
+	return {
+		todos: db.getTodos(id)
+	};
+}
+
+export const actions = {
+    create: async ({ cookies, request }) => {
+        await new Promise((fulfill) => setTimeout(fulfill, 1000));
+        const data = await request.formData();
+        try {
+			db.createTodo(cookies.get('userid'), data.get('description'));
+		} catch (error) {
+			return fail(422, {
+				description: data.get('description'),
+				error: error.message
+			});
+		}
+    },
+
+    delete: async({ cookies, request }) => {
+        await new Promise((fulfill) => setTimeout(fulfill, 1000));
+        const data = await request.formData();
+        db.deleteTodo(cookies.get('userid'), data.get('id'));
+    }
+}

src/routes/todo/+page.svelte

@@ -0,0 +1,107 @@
+<script>
+// @ts-nocheck
+
+    import { fly, slide } from "svelte/transition";
+    import { enhance } from "$app/forms";
+    let { data, form } = $props();
+
+    let creating = $state(false);
+    let deleting = $state([]);
+</script>
+
+<div class="centered">
+    <h1>todos</h1>
+
+    {#if form?.error}
+		<p class="error">{form.error}</p>
+	{/if}
+
+    <form 
+        method="POST" 
+        action="?/create" 
+        use:enhance={() => {
+            creating = true
+
+            return async ({ update }) => {
+                await update();
+                creating = false;
+            }
+        }}
+    >
+        <label>
+            add a todo:
+            <input
+                disabled={creating}
+                name="description"
+                value={form?.description ?? ''}
+                autocomplete="off"
+                required
+            />
+        </label>
+    </form>
+
+    <ul class="todos">
+        {#each data.todos.filter((todo) => !deleting.includes(todo.id)) as todo (todo.id)}
+            <li in:fly={{ y: 20 }} out:slide>
+                <form 
+                    method="POST" 
+                    action="?/delete" 
+                    use:enhance={() => {
+                        deleting = [...deleting, todo.id];
+                        return async ({ update }) => {
+                            await update();
+                            deleting = deleting.filter((id) => id !== todo.id)
+                        }
+                    }}
+                >
+                    <input type="hidden" name="id" value={todo.id} />
+                    <span>{todo.description}</span>
+                    <button aria-label="Mark as complete"></button>
+			    </form>
+            </li>
+        {/each}
+    </ul>
+
+    {#if creating}
+        <span class="saving">saving...</span>
+    {/if}
+</div>
+
+<style>
+    .centered {
+        max-width: 20em;
+        margin: 0 auto;
+    }
+
+    label {
+        width: 100%;
+    }
+
+    input {
+        flex: 1;
+    }
+
+    span {
+        flex: 1;
+    }
+
+    button {
+        border: none;
+        background: url(./remove.svg) no-repeat 50% 50%;
+        background-size: 1rem 1rem;
+        cursor: pointer;
+        height: 100%;
+        width: 20px; /* needed to add some width for the svg to show up */
+        aspect-ratio: 1;
+        opacity: 0.5;
+        transition: opacity 0.2s;
+    }
+
+    button:hover {
+        opacity: 1;
+    }
+
+    .saving {
+        opacity: 0.5;
+    }
+</style>

src/routes/todo/remove.svg

@@ -0,0 +1 @@
+<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='#888' stroke='none' d='M22 4.2h-5.6L15 1.6c-.1-.2-.4-.4-.7-.4H9.6c-.2 0-.5.2-.6.4L7.6 4.2H2c-.4 0-.8.4-.8.8s.4.8.8.8h1.8V22c0 .4.3.8.8.8h15c.4 0 .8-.3.8-.8V5.8H22c.4 0 .8-.3.8-.8s-.4-.8-.8-.8zM10.8 16.5c0 .4-.3.8-.8.8s-.8-.3-.8-.8V10c0-.4.3-.8.8-.8s.8.3.8.8v6.5zm4 0c0 .4-.3.8-.8.8s-.8-.3-.8-.8V10c0-.4.3-.8.8-.8s.8.3.8.8v6.5z' /></svg>