diff options
Diffstat (limited to 'example/src/lustre_counter.gleam')
-rw-r--r-- | example/src/lustre_counter.gleam | 95 |
1 files changed, 95 insertions, 0 deletions
diff --git a/example/src/lustre_counter.gleam b/example/src/lustre_counter.gleam new file mode 100644 index 0000000..25872a4 --- /dev/null +++ b/example/src/lustre_counter.gleam @@ -0,0 +1,95 @@ +import gleam/int +import lustre +import lustre/element.{button, div, p, span, text} +import lustre/event.{dispatch, on_click} +import lustre/cmd +import gleam/map.{Map} +import gleam/list +import gleam/option + +pub fn main() { + let app = lustre.application(#(init_state(), cmd.none()), update, render) + lustre.start(app, "#app") +} + +type State { + State(ctr: Int, counters: Map(Int, Int)) +} + +fn init_state() { + State(ctr: 2, counters: map.from_list([#(1, 0)])) +} + +pub type Action { + Add + Remove(id: Int) + Increment(id: Int) + Decrement(id: Int) +} + +fn update(state, action) { + case action { + Add -> #( + State( + ..state, + ctr: state.ctr + 1, + counters: state.counters + |> map.insert(state.ctr, 0), + ), + cmd.none(), + ) + Remove(id) -> #( + State( + ..state, + counters: state.counters + |> map.delete(id), + ), + cmd.none(), + ) + Increment(id) -> #( + State( + ..state, + counters: state.counters + |> map.update(id, fn(opt_ctr) { option.unwrap(opt_ctr, 0) + 1 }), + ), + cmd.none(), + ) + Decrement(id) -> #( + State( + ..state, + counters: state.counters + |> map.update(id, fn(opt_ctr) { option.unwrap(opt_ctr, 0) - 1 }), + ), + cmd.none(), + ) + } +} + +fn render(state) { + let render_counter = fn(pair) { + let #(id, value) = pair + p( + [], + [ + button([on_click(dispatch(Decrement(id)))], [text("-")]), + span([], [text(" "), text(int.to_string(value)), text(" ")]), + button([on_click(dispatch(Increment(id)))], [text("+")]), + span([], [text(" ")]), + button([on_click(dispatch(Remove(id)))], [text("remove")]), + ], + ) + } + + div( + [], + [ + div( + [], + state.counters + |> map.to_list + |> list.map(render_counter), + ), + p([], [button([on_click(dispatch(Add))], [text("add")])]), + ], + ) +} |