From 6d696eb4cca7a29b540b1744e175c97dea5831f5 Mon Sep 17 00:00:00 2001
From: Samuel Andert <samuel@ora.earth>
Date: Tue, 8 Aug 2023 07:19:43 +0200
Subject: [PATCH] further cleaning up

---
 package.json                                  |  1 -
 src/app.html                                  |  1 -
 src/lib/components/Terminal.svelte            |  2 +-
 .../components/refactor/ComposerForm.svelte   | 20 +++++++------------
 src/routes/composer/form/+page.svelte         | 15 +++++++++-----
 5 files changed, 18 insertions(+), 21 deletions(-)

diff --git a/package.json b/package.json
index 7040cbc..a45fe90 100644
--- a/package.json
+++ b/package.json
@@ -55,7 +55,6 @@
         "@sveltejs/vite-plugin-svelte": "^2.4.3",
         "@wagmi/core": "^1.3.8",
         "@xstate/svelte": "^2.1.0",
-        "chokidar": "^3.5.3",
         "viem": "^1.4.2",
         "xstate": "^4.38.2"
     }
diff --git a/src/app.html b/src/app.html
index fc4b1a3..8d65526 100644
--- a/src/app.html
+++ b/src/app.html
@@ -15,7 +15,6 @@
 		%sveltekit.head%
 	</head>
 	<script>
-		// Fix `global is not defined` error
 		global = window;
 		window.process = {
 			env: {
diff --git a/src/lib/components/Terminal.svelte b/src/lib/components/Terminal.svelte
index fc7b077..0cb1e3e 100644
--- a/src/lib/components/Terminal.svelte
+++ b/src/lib/components/Terminal.svelte
@@ -50,7 +50,7 @@
 
 <div class="input-group input-group-divider grid-cols-[auto_1fr_auto] rounded-container-token h-14">
 	<button class="input-group-shim" on:drawer{closeDrawer} on:click={openDrawer}>
-		<Avatar src="logo.png" width="w-10" rounded="rounded-full" />
+		<Avatar src="/logo.png" width="w-10" rounded="rounded-full" />
 	</button>
 
 	<input
diff --git a/src/lib/components/refactor/ComposerForm.svelte b/src/lib/components/refactor/ComposerForm.svelte
index 275343c..d458876 100644
--- a/src/lib/components/refactor/ComposerForm.svelte
+++ b/src/lib/components/refactor/ComposerForm.svelte
@@ -1,28 +1,19 @@
 <script lang="ts">
 	import { superForm } from 'sveltekit-superforms/client';
-	import { UserSchema } from '$lib/types/UserSchema';
 	import { afterUpdate } from 'svelte';
 	import { writable } from 'svelte/store';
 	import { RangeSlider, SlideToggle } from '@skeletonlabs/skeleton';
 
 	export let me;
 
-	const initialFormData = {
-		name: '',
-		email: '',
-		about: '',
-		age: '',
-		favoriteFood: ''
-	};
-
-	const fields = ['name', 'email', 'about', 'age', 'favoriteFood'];
+	const { initialFormData, fields, validators } = $me.context;
 
 	const { form, errors, validate, constraints } = superForm(initialFormData, {
-		validators: UserSchema,
+		validators: validators,
 		warnings: {
 			noValidationAndConstraints: false
 		},
-		validationMethod: 'oninput', // Trigger validation on input events
+		validationMethod: 'oninput',
 		clearOnSubmit: 'errors-and-message'
 	});
 
@@ -69,9 +60,12 @@
 	});
 </script>
 
-<div class="w-full p-6 border-2 border-red-500">
+<div class="p-6">
 	My ID is: {$me.id} <br />
 	My state is: {$me.state}
+</div>
+
+<div class="flex items-center justify-center w-full h-full p-6">
 	{#if $successMessage}
 		<aside class="w-full max-w-md p-4 alert variant-ghost" id="message-container">
 			<div class="alert-message">
diff --git a/src/routes/composer/form/+page.svelte b/src/routes/composer/form/+page.svelte
index 218bbc4..7a87d05 100644
--- a/src/routes/composer/form/+page.svelte
+++ b/src/routes/composer/form/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import Composer from '$lib/core/Composer.svelte';
+	import { UserSchema } from '$lib/types/UserSchema';
 
 	let composer = {
 		id: 'FormContainer',
@@ -19,7 +20,15 @@
 					id: 'validation',
 					initial: 'notValidated',
 					context: {
-						isValidated: false
+						initialFormData: {
+							name: '',
+							email: '',
+							about: '',
+							age: '',
+							favoriteFood: ''
+						},
+						fields: ['name', 'email', 'about', 'age', 'favoriteFood'],
+						validators: UserSchema
 					},
 					states: {
 						notValidated: {
@@ -38,10 +47,6 @@
 								}
 							}
 						}
-					},
-					services: {
-						setValidated: (context) => (context.isValidated = true),
-						setNotValidated: (context) => (context.isValidated = false)
 					}
 				}
 			},