CRUD

import { html, mount, createState, each } from "@zoijs/core";
import { resource } from "@zoijs/resource";
import { action } from "@zoijs/action";

const API = "/api/todos";
const json = (r) => {
  if (!r.ok) throw new Error(`${r.status} ${r.statusText}`);
  return r.json();
};

function Todos() {
  // READ — loads once, refresh() reloads.
  const todos = resource(() => fetch(API).then(json));

  // WRITES — each is an action; on success, refresh the list.
  const create = action(async (title) => {
    await fetch(API, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ title, done: false }),
    }).then(json);
    todos.refresh();
  });

  const toggle = action(async (todo) => {
    await fetch(`${API}/${todo.id}`, {
      method: "PATCH",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ done: !todo.done }),
    }).then(json);
    todos.refresh();
  });

  const remove = action(async (id) => {
    await fetch(`${API}/${id}`, { method: "DELETE" });
    todos.refresh();
  });

  const draft = createState("");
  const submit = (e) => {
    e.preventDefault();
    const title = draft.get().trim();
    if (title) create.run(title).then(() => draft.set(""));
  };

  return html`
    <section>
      <form onsubmit=${submit}>
        <input
          value=${() => draft.get()}
          oninput=${(e) => draft.set(e.target.value)}
          placeholder="New todo"
        />
        <button type="submit" disabled=${() => create.pending()}>Add</button>
      </form>

      ${() => create.error() && html`<p class="error">Couldn't add that.</p>`}

      ${() => todos.loading() && !todos.data() && html`<p>Loading…</p>`}
      ${() => todos.error() && html`<p class="error">Failed to load. <button onclick=${() => todos.refresh()}>Retry</button></p>`}

      <ul>
        ${each(
          () => todos.data() ?? [],
          (t) => t.id,
          (t) => html`
            <li>
              <label>
                <input type="checkbox" checked=${() => t.done} onchange=${() => toggle.run(t)} />
                ${t.title}
              </label>
              <button onclick=${() => remove.run(t.id)}>Delete</button>
            </li>
          `
        )}
      </ul>
    </section>
  `;
}

mount(Todos, "#app");