version 2.0.0-next.173

Author: [bot]

src/lib/form.js

@@ -35,28 +35,32 @@ export const load = async ({ locals }) => {
 	throw error(response.status);
 };
 
-/** @type {import('./$types').Action} */
-export const POST = async ({ request, locals }) => {
-	const form = await request.formData();
+/** @type {import('./$types').Actions} */
+export const actions = {
+	add: async ({ request, locals }) => {
+		const form = await request.formData();
 
-	await api('POST', `todos/${locals.userid}`, {
-		text: form.get('text')
-	});
-};
-
-/** @type {import('./$types').Action} */
-export const PATCH = async ({ request, locals }) => {
-	const form = await request.formData();
+		await api('POST', `todos/${locals.userid}`, {
+			text: form.get('text')
+		});
+	},
+	edit: async ({ request, locals }) => {
+		const form = await request.formData();
 
-	await api('PATCH', `todos/${locals.userid}/${form.get('uid')}`, {
-		text: form.has('text') ? form.get('text') : undefined,
-		done: form.has('done') ? !!form.get('done') : undefined
-	});
-};
+		await api('PATCH', `todos/${locals.userid}/${form.get('uid')}`, {
+			text: form.get('text')
+		});
+	},
+	toggle: async ({ request, locals }) => {
+		const form = await request.formData();
 
-/** @type {import('./$types').Action} */
-export const DELETE = async ({ request, locals }) => {
-	const form = await request.formData();
+		await api('PATCH', `todos/${locals.userid}/${form.get('uid')}`, {
+			done: !!form.get('done')
+		});
+	},
+	delete: async ({ request, locals }) => {
+		const form = await request.formData();
 
-	await api('DELETE', `todos/${locals.userid}/${form.get('uid')}`);
+		await api('DELETE', `todos/${locals.userid}/${form.get('uid')}`);
+	}
 };

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

@@ -1,10 +1,12 @@
 <script>
-	import { enhance } from '$lib/form';
+	import { enhance } from '$app/forms';
+	import { invalidateAll } from '$app/navigation';
 	import { scale } from 'svelte/transition';
 	import { flip } from 'svelte/animate';
 
 	/** @type {import('./$types').PageData} */
 	export let data;
+	$: todos = data.todos;
 </script>
 
 <svelte:head>
@@ -17,49 +19,50 @@
 
 	<form
 		class="new"
-		action="/todos"
+		action="/todos?/add"
 		method="post"
-		use:enhance={{
-			result: async ({ form }) => {
-				form.reset();
-			}
+		use:enhance={({ form }) => {
+			return (result) => {
+				if (result.type === 'success') {
+					form.reset();
+					invalidateAll();
+				}
+			};
 		}}
 	>
 		<input name="text" aria-label="Add todo" placeholder="+ tap to add a todo" />
 	</form>
 
-	{#each data.todos as todo (todo.uid)}
+	{#each todos as todo (todo.uid)}
 		<div
 			class="todo"
 			class:done={todo.done}
 			transition:scale|local={{ start: 0.7 }}
 			animate:flip={{ duration: 200 }}
 		>
 			<form
-				action="/todos?_method=PATCH"
+				action="/todos?/toggle"
 				method="post"
-				use:enhance={{
-					pending: ({ data }) => {
-						todo.done = !!data.get('done');
-					}
+				use:enhance={({ data }) => {
+					todo.done = !!data.get('done');
 				}}
 			>
 				<input type="hidden" name="uid" value={todo.uid} />
 				<input type="hidden" name="done" value={todo.done ? '' : 'true'} />
 				<button class="toggle" aria-label="Mark todo as {todo.done ? 'not done' : 'done'}" />
 			</form>
 
-			<form class="text" action="/todos?_method=PATCH" method="post" use:enhance>
+			<form class="text" action="/todos?/edit" method="post" use:enhance>
 				<input type="hidden" name="uid" value={todo.uid} />
 				<input aria-label="Edit todo" type="text" name="text" value={todo.text} />
 				<button class="save" aria-label="Save todo" />
 			</form>
 
 			<form
-				action="/todos?_method=DELETE"
+				action="/todos?/delete"
 				method="post"
-				use:enhance={{
-					pending: () => (todo.pending_delete = true)
+				use:enhance={() => {
+					todo.pending_delete = true;
 				}}
 			>
 				<input type="hidden" name="uid" value={todo.uid} />

src/routes/todos/+page.svelte

@@ -3,12 +3,7 @@ import adapter from '@sveltejs/adapter-auto';
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
 	kit: {
-		adapter: adapter(),
-
-		// Override http methods in the Todo forms
-		methodOverride: {
-			allowed: ['PATCH', 'DELETE']
-		}
+		adapter: adapter()
 	}
 };