Passing multiple complex parent actions to deeply nested child views - elm

Question

Disclaimer: I realized this was a maybe stupid question after I finished writing it. Please don't spend too much time reading it. I am very new to Elm, functional programming, and not a UI buff.
I have a view in Elm that returns Html Msg and takes in a model. Using the simple increment demo as en example, I have this typical setup:
module Main exposing (..)
import Browser
import Html exposing (Html, button, div, text)
import Html.Events exposing (onClick)
-- MAIN
main =
Browser.sandbox { init = init, update = update, view = view }
-- MODEL
type alias Model = Int
init : Model
init =
0
-- UPDATE
type Msg
= Increment
| Decrement
update : Msg -> Model -> Model
update msg model =
case msg of
Increment ->
model + 1
Decrement ->
model - 1
-- VIEW
view : Model -> Html Msg
view model =
div []
[ button [ onClick Decrement ] [ text "-" ]
, div [] [ text (String.fromInt model) ]
, button [ onClick Increment ] [ text "+" ]
]
I have a button component that's quite complex which I would like to extract into a separate function. I'm able to do this with normal Html, i.e.
-- VIEW
some_html : Html msg
some_html =
text "FOO"
view : Model -> Html Msg
view model =
div []
[ button [ onClick Decrement ] [ text "-" ]
, div [] [ text (String.fromInt model) ]
, button [ onClick Increment ] [ text "+" ]
, some_html
]
I can also pass the Msg type I've defined and have the "sub-function" call the action:
-- VIEW
make_button : Msg -> Html Msg
make_button msg =
button [ onClick msg ] [ text "-" ]
view : Model -> Html Msg
view model =
div []
[ make_button Decrement
, div [] [ text (String.fromInt model) ]
, button [ onClick Increment ] [ text "+" ]
]
My problem and question is:
I would like to be able to have my make_button function be able to handle multiple actions. One way I have found that works is to pass all possible actions and then a key, i.e.
-- VIEW
make_button : Msg -> Msg -> String -> Html Msg
make_button decr incr which =
if which == "Decrement" then
button [ onClick decr ] [ text "-" ]
else button [ onClick incr ] [ text "+" ]
view : Model -> Html Msg
view model =
div []
[ make_button Decrement Increment "Decrement"
, div [] [ text (String.fromInt model) ]
, make_button Decrement Increment "Increment" -- doesn't matter here.
]
But this becomes cumbersome when the number of actions is large (in my use case I have 20 or so actions).
Should I create a dictionary of sorts? Is there a way this is done? Is this a bad thing to do? Please give me grief.
I am imaging scenarios where many nested child components might want to have the ability to call any Action of the parent component on the fly without this being hard-coded, which is why I decided to still ask the question.
Thanks.

Answer 1

You're definitely over thinking things! The way you would do this is
-- camel case is the convention in Elm ;)
makeButton : Msg -> Html Msg
makeButton msg =
button
[ onClick msg ]
[ text <|
-- an if statement would also work in this case
case msg of
Increment ->
"+"
Decrement ->
"-"
]
view : Model -> Html Msg
view model =
div []
[ makeButton Decrement
, div [] [ text (String.fromInt model) ]
, makeButton Increment
]