From b5cd51e1252ff7c9939c70323f7ba38287fdb738 Mon Sep 17 00:00:00 2001
From: Samuel Andert <samuel@ora.earth>
Date: Tue, 8 Aug 2023 09:48:12 +0200
Subject: [PATCH] fixed automatic enter button and add a summary state

---
 .../components/refactor/ComposerForm.svelte   | 100 +++++++++++++-----
 1 file changed, 71 insertions(+), 29 deletions(-)

diff --git a/src/lib/components/refactor/ComposerForm.svelte b/src/lib/components/refactor/ComposerForm.svelte
index 70593dc..caaf1f3 100644
--- a/src/lib/components/refactor/ComposerForm.svelte
+++ b/src/lib/components/refactor/ComposerForm.svelte
@@ -42,24 +42,47 @@
 			},
 			input: {
 				on: {
-					NEXT: {
-						target: 'input',
-						actions: assign({
-							currentField: (context) => context.currentField + 1
-						}),
-						cond: (context) => context.currentField < fields.length - 1
-					},
+					NEXT: [
+						{
+							target: 'submitting',
+							actions: [
+								assign({
+									formData: (context) => ({
+										...context.formData,
+										[fields[context.currentField].name]: form[fields[context.currentField].name]
+									})
+								})
+							],
+							cond: (context) => context.currentField === fields.length - 1
+						},
+						{
+							target: 'input',
+							actions: [
+								assign({
+									currentField: (context) => context.currentField + 1,
+									formData: (context) => ({
+										...context.formData,
+										[fields[context.currentField].name]: form[fields[context.currentField].name]
+									})
+								})
+							]
+						}
+					],
 					PREV: {
 						target: 'input',
 						actions: assign({
 							currentField: (context) => context.currentField - 1
 						}),
 						cond: (context) => context.currentField > 0
-					},
-					SUBMIT: 'submitting'
+					}
 				}
 			},
 			submitting: {
+				on: {
+					SUBMIT: 'submitted'
+				}
+			},
+			submitted: {
 				// Add your submission logic here
 			}
 		}
@@ -67,20 +90,27 @@
 
 	const { state, send } = useMachine(formMachine);
 
-	async function handleSubmit() {
-		const validationResult = await validate();
+	async function handleNext() {
+		const currentFieldName = fields[$state.context.currentField].name;
+		const validationResult = await validate(currentFieldName);
 
-		if (!validationResult.valid) {
+		if (validationResult && !validationResult.valid) {
 			return;
 		}
 
-		console.log(form);
-		send('SUBMIT');
+		send('NEXT');
+	}
+
+	function handleKeyDown(event) {
+		if (event.key === 'Enter') {
+			event.preventDefault();
+			handleNext();
+		}
 	}
 </script>
 
 <div class="p-6">
-	<form on:submit|preventDefault={handleSubmit} class="w-full max-w-md">
+	<form on:submit|preventDefault={handleNext} on:keydown={handleKeyDown} class="w-full max-w-md">
 		<div class="mb-4">
 			{#if $errors[fields[$state.context.currentField].name]}
 				<span class="block mb-2 font-semibold text-red-500">
@@ -153,6 +183,14 @@
 				/>
 			{/if}
 		</div>
+		{#if $state.matches('submitting')}
+			<div class="mb-4">
+				<h2 class="text-lg font-semibold text-white">Summary</h2>
+				{#each Object.entries($state.context.formData) as [key, value]}
+					<p class="mt-1 text-white">{key}: {value}</p>
+				{/each}
+			</div>
+		{/if}
 		<div class="flex justify-between mt-4">
 			<button
 				type="button"
@@ -162,20 +200,24 @@
 			>
 				Previous
 			</button>
-			<button
-				type="button"
-				on:click={() => send('NEXT')}
-				class="px-4 py-2 text-white bg-blue-500 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500"
-				disabled={$errors[fields[$state.context.currentField].name]}
-			>
-				Next
-			</button>
-			<button
-				type="submit"
-				class="px-4 py-2 text-white bg-green-500 rounded-md hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-500"
-			>
-				Submit
-			</button>
+			{#if !$state.matches('submitting')}
+				<button
+					type="button"
+					on:click={() => send('NEXT')}
+					class="px-4 py-2 text-white bg-blue-500 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500"
+					disabled={$errors[fields[$state.context.currentField].name]}
+				>
+					Next
+				</button>
+			{/if}
+			{#if $state.matches('submitting')}
+				<button
+					type="submit"
+					class="px-4 py-2 text-white bg-green-500 rounded-md hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-500"
+				>
+					Submit
+				</button>
+			{/if}
 		</div>
 	</form>
 </div>