07 Oct 2015

After part 1 and part 2, I thought I was finished with this feature, but Ariarooo Efe rightly comments:

[in] the online demo of the app, if there are no results the user isn’t told anything.

This feedback is trivial to add, so let’s just see what quick work Elm makes of it.

The Model

Recapping on the model of the app:

type alias Model =
  {...
  ,places : Maybe (Result Error (List Place))
  ...}

Part 1 explains how places models the data we’re loading, and makes a clear, type-checked distinction between these cases:

  • We haven’t loaded any data yet.
  • We have loaded data, but that failed.
  • We’ve loaded data and it’s available.

What it also gives us, which in many frontend frameworks we might not get, is a very clear distinction of, “we loaded some data and it was empty”. If places is an empty list, there’s no confusion - it doesn’t mean “not asked” or “there was an error”, it only means there are zero results.

Armed with a correct data model, we’re going to find the rest easy…

The View

In the case of “no results”, the value of places will be Just (Ok []). That is:

  • Just ... - we’ve got some data.
  • Ok ... - we got it successfully.
  • [] - it was the empty list.

We can update our rootView to add an extra case in:

rootView : Address Action -> Maybe LatLng -> Model -> Html
rootView uiChannel currentLocation model =
  div []
      [...
      ,case model.places of
        Nothing -> span [] []
        Just (Err err) -> div [class "alert alert-danger"] [text <| toString err]

        -- This is the new case:
        Just (Ok []) -> div [class "alert alert-warning"] [text "No results found."]

        Just (Ok xs) -> resultsList uiChannel currentLocation xs
      ...]

(Note that we put the more specific match Just (Ok []) before the more general one Just (Ok xs), because patterns are checked in order and the first one wins.)

We’re done.

Yup, there’s almost no work to do. Why? Because we had a good data model to begin with - one that was clearly defined and correctly represented the different states our app could be in.

Say it long, say it loud, programming begins with data-modeling.

Code

The whole app is a little larger, and I’ll be writing up other pieces. In the meantime, you can see the geocoding part in action by playing with the finished hackday app here and then read the source code to learn more.

comments powered by Disqus