widget.purs

-- Halogen 4

data State = { started :: Boolean, choice :: String }

data Query = Start | Choose String

component :: Monad m => H.Component HH.HTML Query Unit Void m
component =
  H.component
  { initialState: const { started: false, choice: "" }
  , render
  , eval
  , receiver: const Nothing
  }

  where

  render :: State -> H.ComponentHTML Query
  render s = HH.div_
    [ HH.button [ HE.onClick (HE.input_ Start)] [ HH.text "Start" ]
    , buttons s.started
    , text s
    ]

  buttons false = HH.div_ []
  buttons true = HH.div_ 
    [ HH.button [ HE.onClick (HE.input_ (Choose "One"))] [ HH.text "One"]
    , HH.button [ HE.onClick (HE.input_ (Choose "Two")] [ HH.text "Two" ]
    ]

  text { sarted: true, choice } = HH.span_ [ HH.text choice ]

  eval :: Query ~> H.ComponentDSL State Query Void m
  eval (Start next) = next <$ H.modify_ (_ { started = true })
  eval (Choose s next) next <$ H.modify_ (_ { choice = s })


-- Halogen 5

data State = { started :: Boolean, choice :: String }

data Action = Start | Choose String

component = 
  H.mkComponent
    { initialState: const { started: false, choice: "" }
    , render
    , eval: H.mkEval $ H.defaultEval { handleAction = handleAction }
    }

    where

    render state =
    render s = HH.div_
      [ HH.button [ HE.onClick (HE.input_ Start)] [ HH.text "Start" ]
      , buttons s.started
      , text s
      ]

    buttons false = HH.div_ []
    buttons true = HH.div_ 
      [ HH.button [ HE.onClick (HE.input_ (Choose "One"))] [ HH.text "One"]
      , HH.button [ HE.onClick (HE.input_ (Choose "Two")] [ HH.text "Two" ]
      ]

    text { sarted: true, choice } = HH.span_ [ HH.text choice ]

    handleAction = case _ of
      Start -> H.modify_ (_ { started = true })
      Choose s -> H.modify_ (_ { choice: s })

-- Concur

hello2 :: forall a. Widget HTML a
hello2 = do 
  first <- div' [ "Click" <$ button [onClick] [text "Start"] ]
  second <- div'
    [ "One" <$ button [onClick] [text "One"] 
    , "Two" <$ button [onClick] [text "Two"]
    ]
  text (first <> second)