Next.js

pnpm create caldera my-app --next

import { back, defineRequest, defineRoutes, NotFoundError } from '@caldera/http'
import { z } from 'zod'
import { mw } from '../route-middleware'
import { Note } from '../models/note'

const NoteForm = defineRequest({
  body: z.object({
    title: z.string().trim().min(1, 'Give the note a title.').max(200),
    body: z.string().max(10_000).default(''),
  }),
})

export const notes = defineRoutes('notes', { prefix: '/notes', middleware: [mw.auth()] })
  .get('index', '/', async (c) => {
    const mine = await Note.findMany({ where: { userId: c.var.user!.id }, orderBy: { createdAt: 'desc' } })
    return c.json({
      notes: mine.map((note) => ({ id: note.id, title: note.title, body: note.body, createdAt: note.createdAt.toISOString() })),
    })
  })
  .post('store', '/', { request: NoteForm }, async (c) => {
    await Note.create({ ...c.req.valid('json'), userId: c.var.user!.id })
    return back(c).with('success', 'Note added.')
  })
  .delete('destroy', '/:note', { bind: { note: Note } }, async (c) => {
    // Only your own notes: anyone else's is "not found".
    if (c.var.note.userId !== c.var.user!.id) throw new NotFoundError()
    await Note.delete(c.var.note)
    return back(c)
  })

import { load } from '@caldera/next'
import type { Metadata } from 'next'
import { http } from '@/src/http'
import { type Note, Notes } from './notes'

export const metadata: Metadata = { title: 'Notes' }

export default async function NotesPage() {
  const { notes } = await load<{ notes: Note[] }>(http, '/notes')
  return <Notes notes={notes} />
}

'use server'

import { submit } from '@caldera/next'
import { http } from '@/src/http'

export const addNote = async (data: { title: string; body: string }) => submit(http, '/notes', data)
export const deleteNote = async (id: string) => submit(http, `/notes/${encodeURIComponent(id)}`, {}, { method: 'DELETE' })

'use client'

import { useForm } from '@caldera/next/client'
import type { FormEvent } from 'react'
import { addNote, deleteNote } from '@/app/actions/notes'
import { FormField } from '@/components/form-field'
import { Section } from '@/components/section'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'

export type Note = { id: string; title: string; body: string; createdAt: string }

export function Notes({ notes }: { notes: Note[] }) {
  const form = useForm({ title: '', body: '' })
  const submit = (event: FormEvent) => {
    event.preventDefault()
    form.submit(addNote, { onSuccess: () => form.reset() })
  }
  return (
    <>
      <Section title="New note">
        <form onSubmit={submit} className="space-y-4">
          <FormField label="Title" error={form.errors.title}>
            <Input value={form.data.title} onChange={(e) => form.setData('title', e.target.value)} />
          </FormField>
          <FormField label="Body" error={form.errors.body}>
            <Input value={form.data.body} onChange={(e) => form.setData('body', e.target.value)} />
          </FormField>
          <Button type="submit" loading={form.processing}>
            Add note
          </Button>
        </form>
      </Section>
      <Section title="Your notes">
        {notes.length === 0 ? (
          <p className="text-muted-foreground text-sm">No notes yet.</p>
        ) : (
          <ul className="divide-y rounded-lg border">
            {notes.map((note) => (
              <li key={note.id} className="flex items-center gap-3 p-3 text-sm">
                <div className="min-w-0 flex-1">
                  <p className="font-medium">{note.title}</p>
                  {note.body && <p className="text-muted-foreground">{note.body}</p>}
                </div>
                <Button variant="ghost" size="sm" onClick={() => void deleteNote(note.id)}>
                  Delete
                </Button>
              </li>
            ))}
          </ul>
        )}
      </Section>
    </>
  )
}

{ title: 'Notes', href: '/notes', icon: NotebookPen },

const user = await requireUser()
const latest = await Note.findFirst({ where: { userId: user.id }, orderBy: { createdAt: 'desc' } })

'use client'

import { createClient } from '@caldera/next/client'
import { useEffect, useState } from 'react'
import type { AppType } from '@/src/http'

const api = createClient<AppType>()

export function NoteCount() {
  const [count, setCount] = useState<number>()
  useEffect(() => {
    void api.notes.$get().then(async (res) => {
      if (res.ok) setCount((await res.json()).notes.length)
    })
  }, [])
  return <span>{count ?? '…'} notes</span>
}

import { setupApp } from '@caldera/testing'
import { expect, it } from 'vitest'
import { app } from '../src/app'
import { http } from '../src/http'
import { createUser } from './helpers'

const t = setupApp(app)

it('lists, adds and deletes your notes', async () => {
  const ann = await t.client(http).actingAs(await createUser(t))
  ;(await ann.post('/api/notes', { json: { title: 'Groceries', body: 'Milk, eggs' } })).assertRedirect()
  const page = await ann.get('/api/notes')
  page.assertOk().assertJson({ notes: [{ title: 'Groceries', body: 'Milk, eggs' }] })

  // A note needs a title.
  await (await ann.post('/api/notes', { json: { title: '' } })).assertValidationErrors(['title'])

  // Nobody else can delete it.
  const [note] = page.json<{ notes: { id: string }[] }>().notes
  const bob = await t.client(http).actingAs(await createUser(t, { name: 'Bob', email: 'bob@example.test' }))
  ;(await bob.delete(`/api/notes/${note!.id}`)).assertNotFound()
  ;(await ann.delete(`/api/notes/${note!.id}`)).assertRedirect()
  expect((await ann.get('/api/notes')).json().notes).toEqual([])
})

it('keeps guests out', async () => {
  ;(await t.client(http).get('/api/notes')).assertUnauthorized()
})