Sixty seconds: one form that works both ways

import { Array, Schema } from 'effect'
import type { HtmlBuilder } from 'foldkit/html'
import { defineMessageUnion } from 'foldkit/message'
import { modifyFields } from 'foldkit/struct'
import { Resume, SSR } from 'foldkit-ssr'
import { Projection, Surface } from 'foldkit-surface'

const Model = Schema.Struct({ cart: Schema.Array(Schema.String) })
type Model = typeof Model.Type

const Message = defineMessageUnion({
  Added: { name: Schema.String.check(Schema.isMaxLength(128)) },
})
type Message = typeof Message.Type

const initial: Model = { cart: [] }
const App = Surface.application({ Model, Message, initial, update: model => ({ model }) })

const update = (model: Model, message: Message) =>
  Message.match(message, {
    Added: ({ name }) => ({
      model: Array.contains(model.cart, name)
        ? model
        : modifyFields(model, { cart: cart => Array.append(cart, name) }),
    }),
  })

const view = (model: Model, h: HtmlBuilder<Message>) => {
  const rh = Resume.builder(h)
  return {
    title: 'Cart',
    body: rh.main(
      [],
      [
        rh.p([], [`${model.cart.length} in the cart`]),
        rh.form(
          [rh.OnSubmit(Message.Added({ name: 'acme.com' }))],
          [rh.button([rh.Type('submit')], ['Add acme.com'])],
        ),
      ],
    ),
  }
}

/** The Messages a posted form may carry: what the cart's controls send. */
const CartControls = App.surface('CartControls', {
  model: ({ model }) => ({ cart: model.cart }),
  messages: [Message.Added],
})

const plan = SSR.plan(App, {
  id: 'cart',
  state: Projection.pick(App.model.cart),
  surfaces: [Surface.at(CartControls, undefined)],
  fallback: 'server',
})

export const { renderPage } = SSR.entry(
  { Model, init: () => ({ model: initial }), update, view, container: null },
  plan,
  { buildId: 'build-1', origins: ['https://shop.example'] },
)