PureScript Thermite agenda (TryThermite)

Main.purs

module Main where

import Prelude

import React as R
import React.DOM as R
import React.DOM (text, a, h1', p', div)
import React.DOM.Props as RP
import React.DOM.Props (style, onClick, href, target)
import Thermite hiding (defaultMain) as T
import Thermite.Try as T

type State = { msg :: String }

data Action = EventInfo String

initialState :: State
initialState = { msg: "" }

render :: T.Render State _ _
render dispatch _ state _ =
  [ h1' [ text "Agenda" ]
  , p'  [ text "visit the "
        , a [ href "http://www.shinsetsu.nl", target "_top" ] [ text "Shinsetsu website" ]
        , text "."
        ]
  , p' [ text "Application state: ", text state.msg ]
  , div [ style { display: "table-row", height: "100px" } ]
        [ div [ style { display: "table-cell", width: "100px", border: "1px solid #ddd" } ]
              [ div [ style { background: "orange" }, onClick \e -> dispatch (EventInfo "I'm red!") ]
                    [ text "red" ]
              , div [ style { background: "purple" }, onClick \e -> dispatch (EventInfo $ "I'm purple!") ]
                    [ text "purple" ]
              ]
        , div [ style { display: "table-cell", width: "100px", border: "1px solid #ddd" } ]
              [ div [ style { background: "lightgreen" }, onClick \e -> dispatch (EventInfo "I'm green!") ]
                    [ text "green" ]
              , div [ style { background: "pink" }
                    , onClick \e -> dispatch (EventInfo $ "I'm pink!") ]
                    [ text "pink" ]
              ]
        ]
  ]

performAction :: T.PerformAction _ State _ Action
performAction (EventInfo s) _ _ = void $ T.modifyState $ \state -> state { msg = s }

spec :: T.Spec _ State _ Action
spec = T.simpleSpec performAction render

main = T.defaultMain spec initialState