Actions and signals

// Package route holds the route types of the todo slice. A route
// package holds only route types.
package route

import "github.com/alternayte/gx"

// Index is the list page.
type Index struct {
	gx.Route `GET /todo`
}

// Add adds one item. Title comes from the Title signal of the page.
type Add struct {
	gx.Route `POST /todo/add`
	Title    string `signal:"title"`
}

// Rules checks the title. The browser controls each signal value.
func (in *Add) Rules() gx.Rules {
	return gx.Rules{gx.Field(&in.Title, gx.Required, gx.MaxLen(80))}
}

// Clear removes every item.
type Clear struct {
	gx.Route `POST /todo/clear`
}

// Count gives the number of items. The page asks for it when the count
// comes into view.
type Count struct {
	gx.Route `GET /todo/count`
}

package todo

import "acme/todo/route"

props {
  // Items is the list at the first load.
  Items []string = nil
}

signals {
  // Title is the text of the new item.
  Title string = ""
  // Open shows the help text.
  Open bool = false
}

<gx.Head title="To do" />
<h1 class="text-2xl font-semibold">To do</h1>
<div class="mt-4 flex gap-2">
  <input type="text" bind:value={$Title} class="rounded-md border border-border px-3 py-2" />
  <button class="rounded-md bg-primary px-3 py-1.5 text-sm text-primary-foreground" on:click={route.Add{}}>Add</button>
  <button class="rounded-md border border-border px-3 py-1.5 text-sm" on:click={route.Clear{}}>Clear</button>
</div>
<p class="mt-2 text-sm text-muted-foreground">New item: <span text={$Title}></span></p>
items := p.Items
<ul #items(items []string) class="mt-4 list-disc pl-5">
  for _, item := range items {
    <li>{item}</li>
  }
</ul>
<button class="mt-4 text-sm underline" on:click={$Open = !$Open} attr:aria-expanded={$Open}>Help</button>
<p show={$Open} class:font-semibold={$Open}>Write a title and press Add.</p>
<p class="mt-4 text-sm" on:visible={route.Count{}}>
  <span id="todo-count">Counting</span>
</p>

// Package todo is the todo slice: its pages, actions and views.
package todo

import (
	"strconv"
	"sync"

	"github.com/alternayte/gx"
	"acme/todo/route"
)

// The items live in memory. A real app uses a database.
var (
	mu    sync.Mutex
	items []string
)

// IndexPage is the list page.
var IndexPage = gx.Page(func(c *gx.Ctx, in route.Index) (IndexViewProps, error) {
	mu.Lock()
	defer mu.Unlock()
	return IndexViewProps{Items: append([]string(nil), items...)}, nil
}, IndexView)

// Add adds one item, patches the list and empties the text field.
var Add = gx.Action(func(c *gx.Ctx, in route.Add) error {
	mu.Lock()
	items = append(items, in.Title)
	list := append([]string(nil), items...)
	mu.Unlock()
	key := gx.ScopeKey(gx.Scope(c.R), "todo.IndexView")
	if err := c.Patch(IndexViewItems(key, list)); err != nil {
		return err
	}
	return c.SetSignals(IndexViewSignals{Title: ""})
})

// Clear removes every item and patches the empty list.
var Clear = gx.Action(func(c *gx.Ctx, in route.Clear) error {
	mu.Lock()
	items = nil
	mu.Unlock()
	key := gx.ScopeKey(gx.Scope(c.R), "todo.IndexView")
	return c.Patch(IndexViewItems(key, nil))
})

// Count patches the count. The element has the id that the patch names.
var Count = gx.Action(func(c *gx.Ctx, in route.Count) error {
	mu.Lock()
	n := len(items)
	mu.Unlock()
	return c.Patch(gx.El("span", gx.Attrs{{Key: "id", Value: "todo-count"}}, gx.Text(strconv.Itoa(n)+" items")))
})

// Routes lists every page, action and form of the slice.
var Routes = gx.Collect(IndexPage, Add, Clear, Count)

data-signals
Counting