Halogen click

Main.purs

module Main where

import Prelude

import Data.Array (cons, drop, length)
import Effect (Effect)
import Effect.Aff (Aff, delay, makeAff, Milliseconds(..))
import Halogen as H
import Halogen.Aff as HA
import Halogen.HTML as HH
import Halogen.HTML.Events as HE
import Halogen.VDom.Driver (runUI)
import Type.Proxy (Proxy(..))

type State = Int

type Slots = ( foo :: forall q i. H.Slot q i Unit )

main :: Effect Unit
main = HA.runHalogenAff do
  body <- HA.awaitBody
  runUI component unit body

data Action = Increment | Decrement

component =
  H.mkComponent
    { initialState
    , render
    , eval: H.mkEval $ H.defaultEval { handleAction = handleAction }
    }
  where
  initialState _ = 0

  render :: State -> H.ComponentHTML Action Slots Aff
  render state =
    HH.div_
      [ HH.button [ HE.onClick \_ -> Decrement ] [ HH.text "-" ]
      , HH.div_ [ HH.text $ show state ]
      , HH.button [ HE.onClick \_ -> Increment ] [ HH.text "+" ]
      , HH.slot_ (Proxy :: _ "foo") unit button unit
      ]

  handleAction = case _ of
    Increment -> H.modify_ \state -> state + 1
    Decrement -> H.modify_ \state -> state - 1


button =
  H.mkComponent
    { initialState: \_ -> []
    , render
    , eval: H.mkEval $ H.defaultEval { handleAction = handleAction }
    }
    
  where
  render :: Array Unit -> H.ComponentHTML Unit () Aff
  render state =
    HH.button [ HE.onClick \_ -> unit ] [ HH.text (if length state > 0 then "Clicked" else "Click me!") ]

  handleAction _ = do
    H.modify_ (cons unit)
    H.liftAff do
      delay (1_000.0 # Milliseconds)
    H.modify_ (drop 1)