Formulaires

POST https://lekalao.example.com/subscribe/{id de la liste}

import { useState } from 'react';

const ACTION =
    'https://lekalao.example.com/subscribe/9d5c2a1e-8f3b-4c7a-9e21-3b8f0c6d4a12';

export function Newsletter() {
    const [state, setState] = useState<
        'idle' | 'sending' | 'pending' | 'subscribed' | 'error'
    >('idle');

    async function subscribe(event: React.FormEvent<HTMLFormElement>) {
        event.preventDefault();
        setState('sending');

        const form = new FormData(event.currentTarget);
        const response = await fetch(ACTION, {
            method: 'POST',
            headers: { Accept: 'application/json' },
            body: form,
        });

        if (!response.ok) return setState('error');

        const { status } = await response.json();
        setState(status);
    }

    if (state === 'pending')
        return <p>Vérifiez votre boîte mail pour confirmer.</p>;
    if (state === 'subscribed') return <p>Merci, vous êtes inscrit.</p>;

    return (
        <form onSubmit={subscribe}>
            <input
                type="email"
                name="email"
                required
                placeholder="vous@exemple.com"
            />
            <input type="hidden" name="locale" value={navigator.language} />
            <input
                type="text"
                name="website"
                tabIndex={-1}
                autoComplete="off"
                hidden
            />
            <button disabled={state === 'sending'}>S'abonner</button>
            {state === 'error' && (
                <p>Ça n'a pas marché. Réessayez dans un instant.</p>
            )}
        </form>
    );
}