chuck.eve

Implementation of the example used to show react:

~~~
bind
  [#ui/div | children:
    [#ui/div text: "Jokes"]
    [#ui/div | children:
      [#ui/ul #joke-list]]
    [#ui/div | children:
      [#ui/input #add-joke, placeholder: "Insert an id"]
      [#ui/button #add-btn, text: "Add joke"]]]
~~~


Add the joke on clicking the add button
~~~
search
  [#html/event/click element: [#add-btn]]
  [#add-joke value]
  url = "http://api.icndb.com/jokes/" + value

commit
  [#joke id: value, state: "added", url]
~~~


We show each joke as a list entry containing it's content and a delete button
~~~
search
  joke = [#joke id state url]
  not(joke.state = "deleted")
  parent = [#joke-list]
  text = if state = "fetched" then joke.joke else "-"

bind
  parent.children +=
    [#ui/li id: "joke-" + id, sort: id | children:
      [#ui/span text: "{{id}}: {{text}} ({{state}})"]
      [#ui/button #del-btn, text: "Delete", data-id: id]]
~~~


When we have added a joke, we want to fetch the content from the API.
~~~
search
  joke = [#joke state: "added", url, id]

commit
  [#http/get url, reqtype: "joke"]
  joke.state := "loading"
~~~


When the request is returned successfully, we add the joke and set it's state accordingly.
~~~
search
  data = [#http/response reqtype: "joke", id]
  joke = [#joke id: "" + id, state: "loading"]

commit
  joke.joke := data.joke
  joke.state := "fetched"
~~~


We can mark a joke as "deleted" to hide it.
~~~
search
  [#html/event/click element: [#del-btn data-id]]
  joke = [#joke id: data-id]

commit
  joke.state := "deleted"
~~~