samuelandert.eth/auth.andert.me
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

abstracting the xstate towards a more generic flow

Browse Source
This commit is contained in:
Samuel Andert 2023-07-30 12:40:00 +02:00
parent 7cd7506e1d
commit 61cb8c8bc3
1 changed files with 147 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

133
src/lib/components/examples/Recipies.svelte
View File

@ -36,13 +36,26 @@
initial: 'start', initial: 'start',
context: { context: {
name: '', name: '',
email: '' email: '',
constraints: {} // <- New addition
}, },
states: { states: {
start: { start: {
meta: {
title: 'Welcome!',
description: 'Start your registration process by clicking next.'
},
on: { NEXT: 'nameInput' } on: { NEXT: 'nameInput' }
}, },
nameInput: { nameInput: {
meta: {
title: 'Name Input',
description: 'Please enter your name.',
fieldLabel: 'Name'
},
entry: assign({
constraints: (context) => constraints.name || {}
}),
on: { on: {
NEXT: { NEXT: {
target: 'emailInput', target: 'emailInput',
@ -52,6 +65,14 @@
} }
}, },
emailInput: { emailInput: {
meta: {
title: 'Email Input',
description: 'Please enter your email address.',
fieldLabel: 'Email'
},
entry: assign({
constraints: (context) => constraints.email || {}
}),
on: { on: {
NEXT: { NEXT: {
target: 'summary', target: 'summary',
@ -61,19 +82,45 @@
} }
}, },
summary: { summary: {
meta: {
title: 'Summary',
description: 'Review your details before submission.'
},
on: { on: {
SUBMIT: 'submitting' SUBMIT: 'submitting'
} }
}, },
submitting: { submitting: {
meta: {
title: 'Submitting...'
},
invoke: { invoke: {
src: 'createUserService', src: 'createUserService',
onDone: 'success', onDone: 'success',
onError: 'failure' onError: {
target: 'failure',
actions: assign({
error: (context, event) => event.data
})
}
} }
}, },
success: {}, success: {
failure: {} meta: {
title: 'Success'
},
on: {
RESTART: 'start'
}
},
failure: {
meta: {
title: 'Submission Failed'
},
on: {
RESTART: 'start'
}
}
} }
}, },
{ {
@ -86,7 +133,10 @@
}) })
}, },
services: { services: {
createUserService: (context) => createUser(context.name, context.email) createUserService: (context) => {
console.log('Attempting to create user...');
return createUser(context.name, context.email);
}
} }
} }
); );
@ -100,24 +150,30 @@
</script> </script>
<main> <main>
<h1 class="text-2xl">
{$state.value in stateMachine.states && stateMachine.states[$state.value].meta
? stateMachine.states[$state.value].meta.title
: 'Unknown state'}
</h1>
<p>
{$state.value in stateMachine.states ? stateMachine.states[$state.value].meta.description : ''}
</p>
{#if $state.value === 'start'} {#if $state.value === 'start'}
<!-- Step 1 -->
<div>
<h1 class="text-2xl">Step 1 - Start</h1>
<button class="px-4 py-2 mt-4 text-white bg-blue-500 rounded" on:click={() => send('NEXT')}> <button class="px-4 py-2 mt-4 text-white bg-blue-500 rounded" on:click={() => send('NEXT')}>
Next Next
</button> </button>
</div>
{:else if $state.value === 'nameInput'} {:else if $state.value === 'nameInput'}
<!-- Step 2 -->
<div>
<h1 class="text-2xl">Step 2 - Name Input</h1>
<form on:submit|preventDefault={handleSubmit} class="w-full max-w-md"> <form on:submit|preventDefault={handleSubmit} class="w-full max-w-md">
<div class="mb-4"> <div class="mb-4">
{#if $errors.name} {#if $errors.name}
<span class="block mb-2 font-semibold text-red-500">{$errors.name}</span> <span class="block mb-2 font-semibold text-red-500">{$errors.name}</span>
{:else} {:else}
<label for="name" class="block mb-2 font-semibold text-white">Name</label> <label for="name" class="block mb-2 font-semibold text-white"
>{$state.value in stateMachine.states
? stateMachine.states[$state.value].meta.fieldLabel
: ''}</label
>
{/if} {/if}
<input <input
@ -126,7 +182,7 @@
class="w-full px-3 py-2 bg-transparent border-gray-100 rounded-md border-1 ring-0 ring-white focus:outline-none focus:ring-2 focus:ring-blue-500" class="w-full px-3 py-2 bg-transparent border-gray-100 rounded-md border-1 ring-0 ring-white focus:outline-none focus:ring-2 focus:ring-blue-500"
bind:value={$form.name} bind:value={$form.name}
aria-invalid={$errors.name ? 'true' : undefined} aria-invalid={$errors.name ? 'true' : undefined}
{...constraints.name} {...$state.context.constraints}
/> />
</div> </div>
<button <button
@ -138,16 +194,17 @@
Next Next
</button> </button>
</form> </form>
</div>
{:else if $state.value === 'emailInput'} {:else if $state.value === 'emailInput'}
<div>
<h1 class="text-2xl">Step 3 - Email Input</h1>
<form on:submit|preventDefault={handleSubmit} class="w-full max-w-md"> <form on:submit|preventDefault={handleSubmit} class="w-full max-w-md">
<div class="mb-4"> <div class="mb-4">
{#if $errors.email} {#if $errors.email}
<span class="block mb-2 font-semibold text-red-500">{$errors.email}</span> <span class="block mb-2 font-semibold text-red-500">{$errors.email}</span>
{:else} {:else}
<label for="email" class="block mb-2 font-semibold text-white">Email</label> <label for="email" class="block mb-2 font-semibold text-white"
>{$state.value in stateMachine.states
? stateMachine.states[$state.value].meta.fieldLabel
: ''}</label
>
{/if} {/if}
<input <input
@ -156,7 +213,7 @@
class="w-full px-3 py-2 bg-transparent border-gray-100 rounded-md border-1 ring-0 ring-white focus:outline-none focus:ring-2 focus:ring-blue-500" class="w-full px-3 py-2 bg-transparent border-gray-100 rounded-md border-1 ring-0 ring-white focus:outline-none focus:ring-2 focus:ring-blue-500"
bind:value={$form.email} bind:value={$form.email}
aria-invalid={$errors.email ? 'true' : undefined} aria-invalid={$errors.email ? 'true' : undefined}
{...constraints.email} {...$state.context.constraints}
/> />
</div> </div>
<button <button
@ -168,33 +225,31 @@
Next Next
</button> </button>
</form> </form>
</div>
<!-- Add a Summary Section -->
{:else if $state.value === 'summary'} {:else if $state.value === 'summary'}
<div>
<h1 class="text-2xl">Summary</h1>
<p>Name: {$form.name}</p> <p>Name: {$form.name}</p>
<p>Email: {$form.email}</p> <p>Email: {$form.email}</p>
<button class="px-4 py-2 mt-4 text-white bg-blue-500 rounded" on:click={() => send('SUBMIT')}> <button
class="px-4 py-2 mt-4 text-white bg-blue-500 rounded"
on:click={() => {
console.log('Submit button clicked');
send('SUBMIT');
}}
>
Submit Submit
</button> </button>
</div>
{:else if $state.value === 'submitting'} {:else if $state.value === 'submitting'}
<div> <!-- You can optionally add a spinner or some visual indication here -->
<h1 class="text-2xl">Submitting...</h1>
</div>
{:else if $state.value === 'success'} {:else if $state.value === 'success'}
<div> <p>Thank you for your submission!</p>
<h1 class="text-2xl">User created successfully!</h1> <button class="px-4 py-2 mt-4 text-white bg-green-500 rounded" on:click={() => send('RESTART')}>
<!-- You can add a button to reset the form or navigate to another page --> Start Again
</div> </button>
{:else if $state.value === 'failure'} {:else if $state.value === 'failure'}
<div> <p class="text-red-500">
<h1 class="text-2xl">Failed to create user. Please try again.</h1> Error: {$state.context.error?.message || 'An unknown error occurred.'}
<button class="px-4 py-2 mt-4 text-white bg-red-500 rounded" on:click={() => send('SUBMIT')}> </p>
Retry <button class="px-4 py-2 mt-4 text-white bg-red-500 rounded" on:click={() => send('RESTART')}>
Try Again
</button> </button>
</div>
{/if} {/if}
</main> </main>