More Sophisticated Navigation Example

Main.elm

module Main exposing (..)

import Html exposing (text, div)
import UrlParser exposing (..)
-- UrlParser > elm package install evancz/url-parser -y

import Navigation exposing (..)


location : String -> Location
location pathname =
    { pathname = pathname
    , search = ""
    , host = ""
    , hostname = ""
    , protocol = ""
    , origin = ""
    , port_ = ""
    , hash = ""
    , username = ""
    , password = ""
    , href = ""
    }


type Page
    = PageOne
    | PageTwo Int
    | PageThree String
    | PageNotFound


route : Parser (Page -> a) a
route =
    oneOf
        [ UrlParser.map PageOne (s "pageone")
        , UrlParser.map PageTwo (s "pagetwo" </> int)
        , UrlParser.map PageThree (s "pagethree" </> string)
        ]


locationToPage : Location -> ( String, Page )
locationToPage location =
    parsePath route location
        |> Maybe.map (\p -> ( location.pathname, p ))
        |> Maybe.withDefault ( location.pathname, PageNotFound )


locations : List String
locations =
    [ "/junk"
    , "/pageone"
    , "/pagetwo/1234"
    , "/pagethree/something"
    ]


pages : List ( String, Page )
pages =
    List.map (location >> locationToPage) locations


main : Html.Html msg
main =
    pages
        |> List.map
            (\( path, page ) ->
                div []
                    [ text <| path ++ " -> " ++ toString (page) ]
            )
        |> div []