From 7038cf50cf4ce319af7a503c99c0b8d46d3dd4d3 Mon Sep 17 00:00:00 2001
From: Samuel Andert <samuel@ora.earth>
Date: Tue, 8 Aug 2023 10:16:38 +0200
Subject: [PATCH] Fixed dynamic summary page and storing of context formData
 values.

---
 .../components/refactor/ComposerForm.svelte   | 30 +++++++++----------
 src/lib/types/UserSchema.ts                   |  2 +-
 2 files changed, 15 insertions(+), 17 deletions(-)

diff --git a/src/lib/components/refactor/ComposerForm.svelte b/src/lib/components/refactor/ComposerForm.svelte
index caaf1f3..cd1c04b 100644
--- a/src/lib/components/refactor/ComposerForm.svelte
+++ b/src/lib/components/refactor/ComposerForm.svelte
@@ -29,30 +29,23 @@
 
 	const formMachine = createMachine({
 		id: 'form',
-		initial: 'start',
+		initial: 'input',
 		context: {
 			currentField: 0,
 			formData: initialFormData
 		},
 		states: {
-			start: {
-				on: {
-					NEXT: 'input'
-				}
-			},
 			input: {
 				on: {
 					NEXT: [
 						{
 							target: 'submitting',
-							actions: [
-								assign({
-									formData: (context) => ({
-										...context.formData,
-										[fields[context.currentField].name]: form[fields[context.currentField].name]
-									})
+							actions: assign({
+								formData: (context, event) => ({
+									...context.formData,
+									[fields[context.currentField].name]: event.fieldValue
 								})
-							],
+							}),
 							cond: (context) => context.currentField === fields.length - 1
 						},
 						{
@@ -60,9 +53,9 @@
 							actions: [
 								assign({
 									currentField: (context) => context.currentField + 1,
-									formData: (context) => ({
+									formData: (context, event) => ({
 										...context.formData,
-										[fields[context.currentField].name]: form[fields[context.currentField].name]
+										[fields[context.currentField].name]: event.fieldValue
 									})
 								})
 							]
@@ -98,7 +91,12 @@
 			return;
 		}
 
-		send('NEXT');
+		const fieldValue = $form[currentFieldName];
+		console.log(`Current input value: ${fieldValue}`);
+		send('NEXT', { fieldValue });
+
+		// Log the context formData
+		console.log(`Context formData: ${JSON.stringify($state.context.formData)}`);
 	}
 
 	function handleKeyDown(event) {
diff --git a/src/lib/types/UserSchema.ts b/src/lib/types/UserSchema.ts
index a5b5c74..80e4dc4 100644
--- a/src/lib/types/UserSchema.ts
+++ b/src/lib/types/UserSchema.ts
@@ -30,7 +30,7 @@ const validationMessages = {
 
 export const UserSchema = z.object({
     name: z.string().nonempty('Name is required.').min(3, validationMessages.name.minLength).max(10, validationMessages.name.maxLength),
-    email: z.string().nonempty('Email is required.').email(validationMessages.email.isEmail),
+    email: z.string().email(validationMessages.email.isEmail),
     about: z.string().max(500, validationMessages.about.maxLength),
     age: z.number().min(18, validationMessages.age.min).max(120, validationMessages.age.max),
     favoriteFood: z.enum(['apple', 'banana', 'coconut', 'strawberry', 'mango']).refine(value => value !== '', validationMessages.favoriteFood.invalid),