Reading radio button value in Haskell Miso

Question

I added radio buttons to the miso sample-app: https://gist.github.com/razvan-flavius-panda/913c1e1c2a12ebd33eb33e6efb55dafe#file-main-hs-L46-L49

-- | Haskell language pragma
{-# LANGUAGE OverloadedStrings #-}
{-# LANGUAGE RecordWildCards #-}

-- | Haskell module declaration
module Main where

-- | Miso framework import
import Miso
import Miso.String
import Language.Javascript.JSaddle.Warp as JSaddle
import Control.Monad.IO.Class (liftIO)

-- | Type synonym for an application model
type Model = Int

-- | Sum type for application events
data Action
  = NoOp
  | Install
  deriving (Show, Eq)

-- | Entry point for a miso application
main :: IO ()
main = JSaddle.run 8080 $ startApp App {..}
  where
    initialAction = NoOp -- initial action to be executed on application load
    model  = 0                    -- initial model
    update = updateModel          -- update function
    view   = viewModel            -- view function
    events = defaultEvents        -- default delegated events
    subs   = []                   -- empty subscription list
    mountPoint = Nothing          -- mount point for application (Nothing defaults to 'body')

-- | Updates model, optionally introduces side effects
updateModel :: Action -> Model -> Effect Action Model
updateModel NoOp m = noEff m
updateModel Install m = m <# do
  liftIO (putStrLn "Hello World") >> pure NoOp

-- | Constructs a virtual DOM from a model
viewModel :: Model -> View Action
viewModel x = div_ [] [
   label_ [] [ text "Editor / IDE" ]
 , br_ []
 , label_ [] [ text "Atom" ]
 , input_ [ type_ "radio", name_ "editor", value_ "Atom" ]
 , label_ [] [ text "Visual Studio Code" ]
 , input_ [ type_ "radio", name_ "editor", value_ "VSCode", disabled_ True ]
 , br_ []
 , text (ms x)
 , button_ [ onClick Install ] [ text "Install" ]
 ]

What changes do I need to make to be able to read the state of the selected radio button inside the updateModel Install m function?

I'm not a frontend or `miso` expert. But you probably can use one of the events. Like `onChecked` or `onClick`. Just need to check which one works... http://hackage.haskell.org/package/miso-1.2.0.0/docs/Miso-Html-Event.html#v:onChecked — Shersh, Oct 19 '19 at 20:50

score 1 · Answer 1 · answered Oct 23 '19 at 18:03

I got a solution thanks to dmjio. Here's an example:

newtype Model = Model
  { _editorOrIde :: EditorOrIde
  } deriving (Show, Eq)

data EditorOrIde =
    Atom
  | VisualStudioCode
  | IntelliJIdeaCommunity
  | SublimeText3
  | Leksah
  deriving (Show, Eq)

makeLenses ''Model

-- | Sum type for application events
data Action
  = NoOp
  | SetChecked EditorOrIde Checked
  | Install
  deriving (Show, Eq)

-- | Entry point for a miso application
main :: IO ()
main = JSaddle.run 8080 $ startApp App {..}
  where
    initialAction = NoOp -- initial action to be executed on application load
    model  = Model Atom           -- initial model
    update = updateModel          -- update function
    view   = viewModel            -- view function
    events = defaultEvents        -- default delegated events
    subs   = []                   -- empty subscription list
    mountPoint = Nothing          -- mount point for application (Nothing defaults to 'body')

-- | Updates model, optionally introduces side effects
updateModel :: Action -> Model -> Effect Action Model
updateModel NoOp m = noEff m
updateModel (SetChecked editorOrIde_ (Checked True)) m = noEff $ m & editorOrIde .~ editorOrIde_
updateModel (SetChecked _ _) m = noEff m
updateModel Install m = m <# do
  liftIO runSetup >> pure NoOp
  where
    runSetup = case _editorOrIde m of
                 Atom -> nixOsAtom
                 _    -> putStrLn "Not implemented yet"

clickHandler :: action -> Attribute action
clickHandler action = onWithOptions (defaultOptions { preventDefault = True }) "click" emptyDecoder $ \() -> action

-- | Constructs a virtual DOM from a model
viewModel :: Model -> View Action
viewModel m = form_ [] [
   link_ [ rel_ "stylesheet", href_ "https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css" ]
 , h5_ [ class_ "title is-5" ] [ text "Easy Haskell Editor / IDE Setup" ]
 , div_ [ class_ "control" ] [
     "Editor / IDE"
   , br_ []
   , label_ [ class_ "radio" ] [
         input_ [ type_ "radio", name_ "editor", checked_ (_editorOrIde m == Atom), onChecked (SetChecked Atom) ]
       , "Atom"
     ]
   , label_ [ class_ "radio" ] [
         input_ [ type_ "radio", name_ "editor", checked_ (_editorOrIde m == VisualStudioCode), onChecked (SetChecked VisualStudioCode) ]
       , "Visual Studio Code"
     ]
   , label_ [ class_ "radio" ] [
         input_ [ type_ "radio", name_ "editor", checked_ (_editorOrIde m == IntelliJIdeaCommunity), onChecked (SetChecked IntelliJIdeaCommunity), disabled_ True ]
       , "IntelliJ IDEA Community"
     ]
   , label_ [ class_ "radio" ] [
         input_ [ type_ "radio", name_ "editor", checked_ (_editorOrIde m == SublimeText3), onChecked (SetChecked SublimeText3), disabled_ True ]
       , "Sublime Text 3"
     ]
   , label_ [ class_ "radio" ] [
         input_ [ type_ "radio", name_ "editor", checked_ (_editorOrIde m == Leksah), onChecked (SetChecked Leksah), disabled_ True ]
       , "Leksah"
     ]
 ]
 , br_ []
 , button_ [ clickHandler Install , class_ "button" ] [ text "Install" ]
 ]

Reading radio button value in Haskell Miso

1 Answers1