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.
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:
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...
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.)
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.
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.