radio4000 / migrate-tool

A website for managing a Radio4000 channel migration, from firebase (realtime) to supabase
https://migrate.radio4000.com/
0 stars 0 forks source link

Refactor channel+track forms with useForm hook #28

Closed oskarrough closed 3 years ago

oskarrough commented 3 years ago

Playing around with our own useForm hook (after talking to the falxa) that removes boilerplate around fetching something async while handling error + loading states.

Refactored the channel and track forms with it.

Here's an example of how to use the hook:

function ExampleForm({database, apiCall}) {
    const {form, loading, error, bind, handleSubmit} = useForm(
        {title: 'Hello World'},
        {onSubmit: apiCall}
    )

    return (
        <form onSubmit={handleSubmit}>
            <p>
                <label htmlFor="title">Title</label>
                <input id="title" type="text" defaultValue={form.title} required onChange={bind} />
            </p>
            <p>
                <button type="submit" disabled={loading}>
                    {loading ? 'Loading...' : 'Create track'}
                </button>
            </p>
            <ErrorDisplay error={error}></ErrorDisplay>
        </form>
    )
}