counter.hoon

/+  default-agent, server
|%
+$  card     card:agent:gall
+$  eyre-id  @ta
+$  state-0  @
--
=|  state-0
=*  state  -
=<
^-  agent:gall
|_  =bowl:gall
+*  this      .
    default  ~(. (default-agent this %|) bowl)
    actions  ~(. +> bowl)
::
++  on-init
  ^-  (quip card _this)
  :_  this
  [%pass /eyre/connect %arvo %e %connect [~ /[dap.bowl]] dap.bowl]~
:: 
++  on-save  !>(state)
++  on-load
  |=  =vase
  ^-  (quip card _this)
  =/  loaded  !<(state-0 vase)
  [~ this(state loaded)]
::
++  on-poke
  |=  [=mark =vase]
  ^-  (quip card _this)
  =^  cards  state
  ?+  mark  ~&(state (on-poke:default mark vase))
    %noun
  =.  state  +(state)
  `state
    %handle-http-request
  =^  cards  state
    %-  handle-http-request:actions
    !<([=eyre-id =inbound-request:eyre] vase)
  [cards state]
  ==
  [cards this]
::
++  on-watch
    |=  =path
    ?:  ?=([%http-response @ ~] path)
      [~ this]
    (on-watch:default path)
++  on-leave  on-leave:default
++  on-peek   on-peek:default
++  on-agent  on-agent:default
++  on-arvo
    |=  [=wire =sign-arvo]
    ^-  (quip card _this)
    ?+  sign-arvo  (on-arvo:default wire sign-arvo)
        [%eyre %bound *]
      ~?  !accepted.sign-arvo
        [dap.bowl 'bind rejected!' binding.sign-arvo]
      [~ this]
    ==
++  on-fail   on-fail:default
--
|_  =bowl:gall
++  handle-http-request
  |=  [=eyre-id =inbound-request:eyre]
  ^-  (quip card _state)
  =;  [[status=@ud out=(unit @t)] =_state]
    :_  state
    %+  give-simple-payload:app:server
      eyre-id
    :-  [status ~]
    ?~  out  ~
    `[(met 3 u.out) u.out]
  ?+  method.request.inbound-request  [[405 ~] state]
        %'GET'
          ?:  =(url.request.inbound-request `@t`(cat 3 '/' `@t`dap.bowl))
              :_  state
              ~&  state
              [200 `(crip (en-xml:html page))]
          ?:  =(url.request.inbound-request (cat 3 (cat 3 '/' `@t`dap.bowl) '/increment'))
              =/  newstate  +(state)
              :_  state(. newstate)
              ~&  newstate
              [200 ~]
          [[405 ~] state]
  ==
++  page
  ;html
    ;body
      Clicking on this button increments counter state both on DOM side and Urbit side. Note that there's no state declaration on js side; it's just modifying the DOM node value. State change on Urbit side is done by button click that sends HTTP request to Urbit with custom URL attribute set and then Urbit matches this URL with attribute to perform state modification Urbit side. No page refresh dynamic app!
      ;button(type "button", onclick "{onclick}"): increment
      ;div
        ; count is
        ;var#count: {<state>}
      ==
    ==
  ==
++  onclick  (eval-js :(weld "++" (get-element "count") ".textContent" "; {increment-request}"))
++  eval-js
  |=  expr=tape
  :(weld "eval(`" expr "`)")
++  get-element
  |=  elem=tape
  "document.getElementById(\"{elem}\")"
++  increment-request
  """
  var req = new XMLHttpRequest();
  req.open("GET", "http://localhost:8080/testpage3/increment");
  req.send();
  """
--