aboutsummaryrefslogtreecommitdiff
path: root/test/example/application/counter.gleam
diff options
context:
space:
mode:
Diffstat (limited to 'test/example/application/counter.gleam')
-rw-r--r--test/example/application/counter.gleam43
1 files changed, 36 insertions, 7 deletions
diff --git a/test/example/application/counter.gleam b/test/example/application/counter.gleam
index 0433c1e..40c93e3 100644
--- a/test/example/application/counter.gleam
+++ b/test/example/application/counter.gleam
@@ -3,6 +3,7 @@
import gleam/int
import lustre
import lustre/attribute.{ style }
+import lustre/cmd.{ Cmd }
import lustre/element.{ button, div, p, text }
import lustre/event.{ dispatch, on_click }
@@ -22,11 +23,16 @@ pub fn main () -> Nil {
// STATE -----------------------------------------------------------------------
-pub type State
- = Int
+pub type State {
+ State(
+ count: Int,
+ clock: Bool,
+ timer_id: Int
+ )
+}
-pub fn init () -> State {
- 0
+pub fn init () -> #(State, Cmd(Action)) {
+ #(State(0, True, 0), tick())
}
// UPDATE ----------------------------------------------------------------------
@@ -34,24 +40,47 @@ pub fn init () -> State {
pub type Action {
Incr
Decr
+ Tick
}
pub fn update (state, action) {
case action {
Incr ->
- state + 1
+ #(State(..state, count: state.count + 1), cmd.none())
Decr ->
- state - 1
+ #(State(..state, count: state.count - 1), cmd.none())
+
+ Tick ->
+ #(State(..state, count: state.count + 1),
+ case state.clock {
+ True ->
+ tick()
+
+ False ->
+ cmd.none()
+ }
+ )
}
}
+external fn after (f: fn () -> any, delay: Int) -> Nil
+ = "" "window.setTimeout"
+
+fn tick () -> Cmd(Action) {
+ cmd.from(fn (dispatch) {
+ after(fn () {
+ dispatch(Tick)
+ }, 1000)
+ })
+}
+
// RENDER ----------------------------------------------------------------------
pub fn render (state) {
div([ style([ #("display", "flex") ]) ], [
button([ on_click(dispatch(Decr)) ], [ text("-") ]),
- p([], [ int.to_string(state) |> text ]),
+ p([], [ int.to_string(state.count) |> text ]),
button([ on_click(dispatch(Incr)) ], [ text("+") ])
])
}