#elmlang – Navigating the pages – part 2 Update

In our previous blog, we looked at the application’s model side when building a SPA with navigation. In this blog, we will look at the update.

To summarize, the model changes, when building a SPA with navigations, are

• The model needs to know the current page.
• Instead of representing the page as a string, in Elm explicitly state the page by union type.
• Setup initial page that we need to load during application startup

In an  update, there are two things we need to do

• Define all the events our application is going to support
• Define the actions when the events occur

Defining events:

We moved away from the beginner program in our navigation program, and now we are using Navigation.program. As mentioned in the previous blog, this function has all the beginner program’s goodies and more. When we use Navigation.program, one of the things it does when there is a URL change will trigger an event called UrlChange with location details. Since we removed all the noise in the application, UrlChange is the only interesting event. So let’s define the events.

type Msg

= UrlChange Navigation.Location

Whenever a user clicks a hyperlink in a program that triggers a URL change, the Navigation function will trigger the UrlChange event with all the information regarding the new URL and its attributes. Everything regarding how to fire the event is all wrapped up in the Navigation package.

Define actions:

When a user clicks a hyperlink to a new page, on clicking a hyperlink, the navigation function will create an event called UrlChange with the new location the user wants to go to. Anytime a new event is fired, our update function will be called first, and there we need to satisfy the user request. The update is where we act on the URL change request. Let’s take a moment to talk about what are the things we would need to display a new page

• in Elm architecture; one will not call the rendered page directly
• In Elm architecture, you modify the model which will trigger rendering a page
• In the update, all we need to do is identify the page user intends to go and modify the current page with page user’s requested page

update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
case msg of
UrlChange location –>
({ model | page = (findpage location.hash) },  Cmd.none )

As usual, we are updating the model with the appropriate value in the update. When someone clicks on the hyperlink, the clicked hyperlink string will be available in the location.hash, we will use that to identify the page user wants to navigate to. Identifying the page user wants to navigate is encapsulated in the findpage function as shown below

findpage: String –> Page

findpage hash =

case (hash) of

“#alltimebest” –>

AllTimeBest

“#login” –>

Login

– ->

AllTimeBest

This is a straightforward function, which takes URL location as an input string and returns the page union type.

In summary, when using Navigation.Program,

• one clicks a navigation link, elm will trigger UrlChange event with the URL link user clicked
• when an event is fired, elm will call the programs update function
• in the update, the function identifies the page user wants to navigate to and update the model with the page name
• when a model is updated rendering page will be triggered by calling view

In the next blog, we will see how to modify the view to handle page navigation