diff --git a/src/lib/components/Recipies/machines/formMachine.ts b/src/lib/components/Recipies/machines/formMachine.ts new file mode 100644 index 0000000..9a47887 --- /dev/null +++ b/src/lib/components/Recipies/machines/formMachine.ts @@ -0,0 +1,35 @@ +import { createMachine } from 'xstate'; + +export const formMachine = createMachine( + { + id: 'validation', + initial: 'notValidated', + context: { + isValidated: false + }, + states: { + notValidated: { + on: { + VALIDATE: { + target: 'isValidated', + actions: 'setValidated' + } + } + }, + isValidated: { + on: { + INVALIDATE: { + target: 'notValidated', + actions: 'setNotValidated' + } + } + } + } + }, + { + actions: { + setValidated: (context) => (context.isValidated = true), + setNotValidated: (context) => (context.isValidated = false) + } + } +); \ No newline at end of file diff --git a/src/lib/components/Recipies/machines/authMachine.ts b/src/lib/components/Recipies/machines/recipeMachine.ts similarity index 84% rename from src/lib/components/Recipies/machines/authMachine.ts rename to src/lib/components/Recipies/machines/recipeMachine.ts index ab95a35..2798391 100644 --- a/src/lib/components/Recipies/machines/authMachine.ts +++ b/src/lib/components/Recipies/machines/recipeMachine.ts @@ -1,7 +1,8 @@ // src/lib/components/Recipies/machines/authMachine.ts import { createMachine } from 'xstate'; +import { formMachine } from './formMachine'; -export const authMachine = createMachine( +export const recipeMachine = createMachine( { id: 'auth', initial: 'notAuthenticated', @@ -82,6 +83,14 @@ export const authMachine = createMachine( }, logout: (context, event) => { console.log('Logging out...'); + }, + setValidated: (context, event) => { + console.log('Form is validated'); + // Add your logic here to update the visual representation + }, + setNotValidated: (context, event) => { + console.log('Form is not validated'); + // Add your logic here to update the visual representation } } } diff --git a/src/lib/components/Recipies/oForm.svelte b/src/lib/components/Recipies/oForm.svelte index 0e14700..b2056c7 100644 --- a/src/lib/components/Recipies/oForm.svelte +++ b/src/lib/components/Recipies/oForm.svelte @@ -4,6 +4,8 @@ import { afterUpdate } from 'svelte'; import { writable } from 'svelte/store'; import { RangeSlider, SlideToggle } from '@skeletonlabs/skeleton'; + import { interpret } from 'xstate'; + import { formMachine } from './machines/formMachine'; export let store; export let services; @@ -32,6 +34,14 @@ const successMessage = writable(null); + // Create a service to interpret the machine + const validationService = interpret(formMachine).start(); + + // Subscribe to state changes + validationService.subscribe((state) => { + $store.isValidated = state.context.isValidated; + }); + // Update the isValidated property of the store whenever the errors object changes $: { $store.isValidated = !( @@ -41,6 +51,13 @@ $errors.age || $errors.favoriteFood ); + + // Send events to the state machine based on the validation status + if ($store.isValidated) { + validationService.send('VALIDATE'); + } else { + validationService.send('INVALIDATE'); + } } async function handleSubmit() { diff --git a/src/routes/dashboard/+page.svelte b/src/routes/dashboard/+page.svelte index c3d86d8..954d200 100644 --- a/src/routes/dashboard/+page.svelte +++ b/src/routes/dashboard/+page.svelte @@ -1,6 +1,6 @@ - +