Skip to content

Instantly share code, notes, and snippets.

@kittykatattack
Last active August 22, 2016 16:32
Show Gist options
  • Save kittykatattack/f2717f5b8111d7dd3bc5bbfdc4ccf309 to your computer and use it in GitHub Desktop.
Save kittykatattack/f2717f5b8111d7dd3bc5bbfdc4ccf309 to your computer and use it in GitHub Desktop.
Flat Elm UI Component Architecture Experiment
import Html exposing (Html, button, div, text)
import Html.App as Html
import Html.Events exposing (onClick)
main =
Html.beginnerProgram
{ model = model
, view = view
, update = update
}
-- MODEL
type alias Model =
{ buttonOne : ButtonModel
, buttonTwo : ButtonModel
}
model : Model
model =
{ buttonOne = buttonModel
, buttonTwo = buttonModel
}
-- The button component
type alias ButtonModel = Int
buttonModel : ButtonModel
buttonModel =
0
type Msg
= Increment
| Decrement
buttonUpdate : Msg -> ButtonModel -> ButtonModel
buttonUpdate msg model =
case msg of
Increment ->
model + 1
Decrement ->
model - 1
buttonView : ButtonModel -> Html Msg
buttonView model =
div []
[ button [ onClick Decrement ] [ text "-" ]
, div [] [ text (toString model) ]
, button [ onClick Increment ] [ text "+" ]
]
-- UPDATE
update : Msg -> Model -> Model
update msg model =
--{ model | buttons = List.map buttonUpdate (msg model.buttons) }
{ model
| buttonOne = buttonUpdate msg model.buttonOne
, buttonTwo = buttonUpdate msg model.buttonTwo
}
-- VIEW
view : Model -> Html Msg
view model =
div []
[ buttonView model.buttonOne
, buttonView model.buttonTwo
]
@pdamoc
Copy link

pdamoc commented Aug 22, 2016

Working version

module Main exposing (..)

import Html exposing (Html, button, div, text)
import Html.App as Html
import Html.Events exposing (onClick)


main : Program Never
main =
    Html.beginnerProgram
        { model = model
        , view = view
        , update = update
        }



-- MODEL


type alias Model =
    { buttonOne : ButtonModel
    , buttonTwo : ButtonModel
    }


model : Model
model =
    { buttonOne = buttonModel
    , buttonTwo = buttonModel
    }



-- The button component


type alias ButtonModel =
    Int


buttonModel : ButtonModel
buttonModel =
    0


type ButtonMsg
    = Increment
    | Decrement


buttonUpdate : ButtonMsg -> ButtonModel -> ButtonModel
buttonUpdate msg model =
    case msg of
        Increment ->
            model + 1

        Decrement ->
            model - 1


buttonView : ButtonModel -> Html ButtonMsg
buttonView model =
    div []
        [ button [ onClick Decrement ] [ text "-" ]
        , div [] [ text (toString model) ]
        , button [ onClick Increment ] [ text "+" ]
        ]



-- UPDATE


type Msg
    = One ButtonMsg
    | Two ButtonMsg


update : Msg -> Model -> Model
update msg model =
    case msg of
        One bMsg ->
            { model | buttonOne = buttonUpdate bMsg model.buttonOne }

        Two bMsg ->
            { model | buttonTwo = buttonUpdate bMsg model.buttonTwo }



-- VIEW


view : Model -> Html Msg
view model =
    div []
        [ Html.map One (buttonView model.buttonOne)
        , Html.map Two (buttonView model.buttonTwo)
        ]

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment