Update status action - a toggle/switch action to send a form action

+page.svelte

<script lang="ts">
  import { updatestatus } from '$lib/UpdateStatus'
  import type { PageData } from './$types'

  export let data: PageData
</script>

{#each data.users as user}
  <input
    name="status"
    type="checkbox"
    class="toggle"
    formaction="/admin?/updatestatus"
    use:updatestatus={user.id}
  />
{/each}

UpdateStatus.ts

import { applyAction, deserialize } from '$app/forms'
import { invalidateAll } from '$app/navigation'

export function updatestatus(node: HTMLInputElement, id: string | number) {
  const url = node.formAction
  const controller = new AbortController()

  const handleChange = async () => {
    const data = new FormData()
    data.append('id', id.toString())
    data.append('status', node.checked.toString())

    const res = await fetch(url, {
      method: 'POST',
      body: data,
      signal: controller.signal,
    })

    const result = deserialize(await res.text())

    if (result.type === 'success') await invalidateAll()

    applyAction(result)
  }

  node.addEventListener('change', handleChange)

  return {
    destroy() {
      node.removeEventListener('change', handleChange)
      controller.abort()
    },
  }
}