Elm navigation jumps after navigation

Question

I have a problem with navigation in the browser using elm. The error occurs as I navigate to a certain page /thing/sufflist which flickers by and then I get transfered to the path /home. Using my browser back button I can visit the /thing/stufflist page without any problems.

The /thing is a main page regarding the thing and it then has equalents of tabs at /thing/xxx

I have the following routing set up with elm navigation:

        case routePath of
            DefaultRoute ->
                notFoundPage model

            HomeRoute ->
                homePage model

            ...

            ThingTab id page ->
                case String.toInt id of
                    Ok thingId ->
                        ThingMain.page thingId model page

                    Err error ->
                        ThingMain.page 0 model page

            NotFoundRoute ->
                notFoundPage model

The ThingMain.page is

page : Int -> Model -> String -> Html Msg
page thingId model page =

    let
        maybeThing =
            model.thingList
                |> List.filter (\thing -> thing.id == thingId)
                |> List.head
    in
        case maybeThing of
            Just thing ->
                    case page of
                        "info" ->
                            thingView thing (thingInfoView thing)

                        "stuffs" ->
                            let
                                stuffs =
                                    model.stuffList
                                    |> List.filter (\stuff -> stuff.ting.id == thingId)
                            in
                                thingView thing (stuffsView stuffs)

                        _ -> 
                            Error.notFoundPage model

            Nothing ->
                Error.notFoundPage model 

This suffsView:

stuffsView : List Stuff.Stuff -> Html Msg
stuffsView stuffs =
    div [class "dialog-large"][
        div [class "list"][
            renderStuffList stuffs
        ]
    ]

Use this method to render the list:

renderStuffList : List Stuff.Stuff -> Html Msg
renderStuffList stuffs =
    if List.isEmpty stuffs then
        text "No stuff"
    else 
        stuffs 
            |> List.map ( \stuff -> listStuff stuff )
            |> ol [ class "stuff-list" ]

And is fed into this general page method:

thingView : Thing.Thing -> Html Msg -> Html Msg
thingView thing tabContent =
     div [class "mr-main flex-column flex-start"][
        h4 [][ text (thing.name) ]
        , tabContent        
        ,div [class "dialog-large split-choice"][
            button [class "input", onClick (Msg.Navigate("thing/" ++ toString thing.id )) ][
            text ("Info")
            ]
            ,button [class "input", onClick (Msg.PostAndNavigate (stuffListRequest thing.id)) ][
            text ("Stuffs")
            ]
        ]
        ,div [class "dialog-large split-choice"][
            button [class "input half-width", onClick ( Msg.Navigate("home") ) ][ 
                text ("Home") 
            ]
        ]
    ]

It all works fine in all cases except when it gets the stufflist tab with an empty list. And as stated I can even browse back and view my No stuff page.

It all seems rather (black)magic to me and I have no idea where to look?

Answer 1

There is nothing wrong with this code. As I suspected it turns out to be my own fault.

There is a human error in my logic as I do a get(ish) request to sync data when I navigate to /thing/stufflist. Turns out I did not get a list if there was nothing in it.