A reusable rater for Elm (1 year later)

Show and Tell
1

Firstly, thanks to @pdamoc, @Herteby and @FranzSkuffka for the helpful feedback they gave me when I first announced elm-rater about 1 year ago.

Links

Before

import Rater
import Rater.Rating as Rating exposing (Rating)

type alias Model =
  { rating : Rating
  , rater : Rater.State
  }

init : Model
init =
  { rating = Rating.rate 3 5
  , rater = Rater.init
  }

type Msg
  = NewRaterMsg Rater.Msg
  | ChangedRater Int

update : Msg -> Model -> Model
update msg model =
  case msg of
    NewRaterMsg raterMsg ->
      let
        (newState, maybeMsg) =
          Rater.update ChangedRater model.rating raterMsg model.rater

        newModel =
          { model | rater = newState }
      in
        case maybeMsg of
          Nothing ->
            newModel

          Just newMsg ->
            update newMsg newModel

    ChangedRater newAmount ->
      { model | rating = Rating.change newAmount model.rating }

view : Model -> Html Msg
view model =
  div
    []
    [ Html.map NewRaterMsg (Rater.view model.rating model.rater) ]

Points of note:

  • Rater.State was required even when it wasn’t needed.
  • You had to configure custom event handlers in the update function.
  • You had to use Html.map in the view function.
  • The API included a custom Msg type (which on retrospect led to the previously mentioned problems).
  • The API did not present a smooth learning curve.
  • For better or worse I used inline styles.

After

import Rater
import Rater.Rating as Rating exposing (Rating)

type alias Model =
  { rating : Rating }

init =
  { rating = Rating.outOf5 3 }

type Msg
  = ChangedRating Rating

update msg model =
  case msg of
    ChangedRating newRating ->
      { model | rating = newRating }

view { rating } =
  div []
    [ Rater.viewSimple ChangedRating rating ]

Points of note:

  • Rater.State is only used when needed. It’s only needed to support hovering. See this example.
  • Custom event handlers are configured in the view now.
  • No Html.map is needed in the view function.
  • No custom Msg type (which led to the above improvements)
  • I try to present a smooth learning curve.
  • I use BEM to structure the CSS.

Read more about the API Design Principles.

Reusable view learning resources

12 Likes
2

Good work! It is nice to see projects evolve and mature!

1 Like
3

Thx for sharing. This will come in handy later.

4

Nice, how would you give a zero rating though? (I’m thinking Adam Sandler movies etc : )

1 Like
5

Lol. Though Uncut Gems was good and Hubie Halloween was stupidly funny.

You can clear the rating.

3 Likes
6

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.