elm-architecture separate signal handling? - elm

Question

I can't find an example anywhere online that answers the question: how does a parent component respond to different actions coming out of a child module?
Consider a simple chat message input with a submit button:
// child component: text input w/ a submit button
type Action
= InputChanged String
| MessageSent String
view : Signal.Address Action -> Model -> Html
view addr model =
div []
[ input
[ type' "text"
, value model.content
, on "input" targetValue (\val -> Signal.message addr (InputChanged val))
]
[]
, button
[ type' "submit"
, onClick addr (MessageSent model.content)
]
[ text "Send" ]
]
How does the parent component holding onto this input box respond to the two actions that might come out of that input box? A traditional "just passing through" looks like this:
// parent component, holds onto a list of posts and the child component
-- update
type Action
= MessageBoxAction MessageBox.Action
update : Action -> Model -> Model
update act model =
case act of
MessageBoxAction msg ->
{ model |
currentMessage = MessageBox.update msg model.currentMessage
}
-- view
view : Signal.Address Action -> Model -> Html
view addr model =
div []
[ MessageBox.view (Signal.forwardTo addr MessageBoxAction) model.currentMessage ]
What I want to be able to do is capture a message coming out of that child component and respond to it beyond the normal "just passing through". Something like this:
case act of
MessageBoxSubmit msg ->
let updatedMessage = MessageBox.update msg model.currentMessage
newPost = Posts.update msg model.posts
in
{ model |
posts = model.posts :: [ newPost ]
, currentMessage = updatedMessage
}
But I have no idea how to do this, particularly because when forwarding the address to a child it's not like you have the opportunity to provide more than one address...
MessageBox.view (Signal.forwardTo addr MessageBoxAction) model.currentMessage

Answer 1

There are two main routes to do this.
You can change the signature of MessageBox update to return a parent action that you provide to MessageBox init.
init : (String -> parentAction) -> Model
init onSend =
{ onSend = onSend
, content = ""
}
update : Action -> Model -> (Model, Maybe parentAction)
update action model =
case action of
MessageSent msg ->
let
model' = ...
in
(model', Just (model.onSend msg))
InputChanged str ->
let
model' = ...
in
(model', Nothing)
and in the parent module you do:
init =
{ posts = []
, currentMessage = MessageBox.init HandleSent
}
update : Action -> Model -> Model
update act model =
case act of
MessageBoxAction msg ->
let
(currentMessage', send) = MessageBox.update msg model.currentMessage
model' = {model | currentMessage = currentMessage'}
in
case send of
Nothing -> model'
Just act -> update act model' -- you recursively call the update function with the new action that you received from the MessageBox.update
HandleSent str -> { model | posts = str::model.posts }
You can provide a decoder for the action in the MessageBox module.
in MessageBox module
sentMessage action =
case action of
MessageSent msg -> Just msg
_ -> Nothing
in parent
update : Action -> Model -> Model
update act model =
case act of
MessageBoxAction msg ->
let
currentMessage' = MessageBox.update msg model.currentMessage
model' = {model | currentMessage = currentMessage'}
in
case MessageBox.sentMessage msg of
Nothing -> model'
Just str -> update (HandleSent str) model'
HandleSent str -> { model | posts = str::model.posts }