The whole web stack in one binary.

local t = require "effortless.types"

return {
  -- users, sessions, jobs and user_tokens come with the scaffold
  todos = {
    id = t.pk,
    user_id = t.ref "users" { required = true, owner = true },
    title = t.text { required = true },
    completed = t.boolean { default = false },
    created_at = t.now,

    indexes = { "user_id", "completed", "created_at" },
  },
}

local auth = require "effortless.auth"
local eql = require "effortless.eql"
local response = require "effortless.response"

guard = auth.check

function get(request)
  return { todos = eql "select todos { id, title, completed } where .user_id = $auth.id order by .id" }
end

actions = {
  add = function(request)
    local todo = eql "insert todos { title: $form.title, user_id: $auth.id } returning { id, title, completed }"
    return response.json(todo)
  end,
  toggle = function(request)
    eql "update todos set { completed: not .completed } where .id = $form.id and .user_id = $auth.id"
    return response.empty(204)
  end,
  remove = function(request)
    eql "delete todos where .id = $form.id and .user_id = $auth.id"
    return response.empty(204)
  end,
}

<title>Todos</title>
<main class="max-w:560 mx:auto py:48 px:16">
  <h1 class="f:28 fw:600 mb:24">Todos</h1>
  <todo-list todos={todos} />
</main>

<script>
  export let todos

  let title = ''
  let filter = 'all'
  let error = ''

  function visible() {
    if (filter === 'open') return todos.filter((todo) => !todo.completed)
    if (filter === 'done') return todos.filter((todo) => todo.completed)
    return todos
  }

  function remaining() {
    return todos.filter((todo) => !todo.completed).length
  }

  function pick(name) {
    filter = name
  }

  async function add() {
    const result = await inlay.post('/todos', { action: 'add', title })
    if (result.ok) {
      todos = todos.concat([result.data])
      title = ''
      error = ''
    } else {
      error = result.errors?.title || result.error
    }
  }

  async function toggle(todo) {
    todo.completed = !todo.completed
    const result = await inlay.post('/todos', { action: 'toggle', id: todo.id })
    if (!result.ok) todo.completed = !todo.completed
  }

  async function remove(todo) {
    todos = todos.filter((each) => each.id !== todo.id)
    const result = await inlay.post('/todos', { action: 'remove', id: todo.id })
    if (!result.ok) todos = todos.concat([todo])
  }
</script>

<section class="bg:white b:#e5e7eb|1 r:12 overflow:hidden">
  <form class="flex gap:8 p:12 bb:#e5e7eb|1" @submit.prevent={add}>
    <input bind:value={title} aria-label="New todo" placeholder="What needs doing?" class="flex:1 px:12 py:8 b:#d1d5db|1 r:8">
    <button class="px:16 py:8 bg:#111827 c:white r:8">Add</button>
  </form>
  <p role="alert" class="px:16 pt:12 f:14 c:#b91c1c" @if={error}>{error}</p>
  <ul>
    <li class="flex:between|center gap:12 px:16 py:10 bb:#f3f4f6|1" @each={visible() as todo (todo.id)}>
      <label class="flex:center gap:10 pointer">
        <input type="checkbox" checked={todo.completed} @change={toggle(todo)}>
        <span class:line-through={todo.completed} style:opacity={todo.completed ? 0.5 : 1}>{todo.title}</span>
      </label>
      <button type="button" aria-label="Delete {todo.title}" class="c:#9ca3af c:#b91c1c:hover" @click={remove(todo)}>✕</button>
    </li>
  </ul>
  <p class="px:16 py:12 f:14 c:#6b7280" @if={!visible().length}>Nothing here.</p>
  <footer class="flex:between|center px:16 py:10 f:13 c:#6b7280 bt:#e5e7eb|1">
    <span>{remaining()} left</span>
    <span class="flex gap:12">
      <button type="button" class:fw:600={filter === 'all'} @click={pick('all')}>All</button>
      <button type="button" class:fw:600={filter === 'open'} @click={pick('open')}>Open</button>
      <button type="button" class:fw:600={filter === 'done'} @click={pick('done')}>Done</button>
    </span>
  </footer>
</section>

local function post(user, form)
  return app.post("/todos", { as = user.id, form = form, headers = { Accept = "application/json" } })
end

test("the island adds, toggles and removes a todo", function(t)
  local ada = t.user("[email protected]")
  local added = post(ada, { action = "add", title = "Ship the website" })
  t.eq(added.status, 200)
  t.eq(added.json.title, "Ship the website")

  t.eq(post(ada, { action = "toggle", id = added.json.id }).status, 204)
  t.eq(app.get("/todos", { as = ada.id }).data.todos[1].completed, true)

  t.eq(post(ada, { action = "remove", id = added.json.id }).status, 204)
  t.eq(#app.get("/todos", { as = ada.id }).data.todos, 0)
end)

test("an empty title comes back as a field error", function(t)
  local res = post(t.user("[email protected]"), { action = "add", title = "" })
  t.eq(res.status, 422)
  t.truthy(res.json.errors.title)
end)

test("one user cannot toggle another's todo", function(t)
  local ada = t.user("[email protected]")
  local todo = post(ada, { action = "add", title = "Mine" }).json
  post(t.user("[email protected]"), { action = "toggle", id = todo.id })
  t.eq(app.get("/todos", { as = ada.id }).data.todos[1].completed, false)
end)