CODEWITHSUNDEEP
elm
DevNebulae
DevNebulae

Reputation: 4916

Route to another page from a sub-page

I am using Hop at the moment and I am wondering how you can route to another page outside the main / app module. If you follow the Hop documentation, there are two specific types of messages, well - they are called that in the docs, NavigateTo and SetQuery. How do you raise those messages from sub-modules?

I have tried the following:

view =
    button [ onClick (Main.Types.NavigateTo "test") ] []

However, this would mess up the typing.

Upvotes: 0

Views: 113

Answers (1)

DevNebulae
DevNebulae

Reputation: 4916

The problem wasn't with Hop, but my understanding of how parent-child communication works within Elm. To say lightly, you need to be careful for what and when you use this type of communication, but in my case, I read a few good blog posts by Brian Thicks and Alex Lew talking about this form of communication. Especially Alex' post is typical for my use case.

What I did is the following: I added a separate update statement for the type of message I want to route. This is not the best implementation and it can be done more elegantly like Alex describes with the translator pattern.

update msg model =
    case msg of
        NavigateTo path ->
            let
                command =
                    Hop.outputFromPath hopConfig path
                        |> Navigation.newUrl
            in
                ( model, command )

        SetQuery query ->
            let
                command =
                    model.address
                        |> Hop.setQuery query
                        |> Hop.output hopConfig
                        |> Navigation.newUrl
            in
                ( model, command )

        ExampleMsg InterestingMsg exampleInteger ->
            update (NavigateTo "<path here>") model --Update model in let-statement

        ExampleMsg subMsg ->
            let
                ( updatedExampleModel, pageCmd ) =
                    Page.Example.State.update subMsg model.exampleModel
            in
                ( { model | exampleModel = updatedExampleModel }, Cmd.map ExampleMsg pageCmd )

Upvotes: 1

Related Questions