Elm Example - Side-Effects Handling

api.js

const jsonServer = require('json-server')
const server = jsonServer.create()
const router = jsonServer.router('db.json')
const middlewares = jsonServer.defaults()

server.use(middlewares)
server.use(router)
server.listen(3000, () => {
  console.log('JSON Server is running. Listening at 3000.')
})

db.json

{
  "users": [
    { "id": 1, "username": "Foo", "role": "Admin" },
    { "id": 2, "username": "Bar", "role": "Guest" }
  ]
}

LoadUsers.elm

module LoadUsers exposing (..)

import Html exposing (Html, div, h1, text)
import Http
import Json.Decode as Decode


main =
  Html.program
    { init = init
    , update = update
    , view = view
    , subscriptions = \_ -> Sub.none
    }


-- MODEL


type alias User =
  { id : Int
  , username : String
  , role : String
  }


type alias Model = List User


-- INIT

init : (Model, Cmd Msg)
init =
  ([], loadUsers)


-- UPDATE


type Msg
  = LoadUsers
  | LoadedUsers (Result Http.Error (List User))


update : Msg -> Model -> (Model, Cmd Msg)
update msg model =
  case msg of
    LoadUsers ->
      (model, loadUsers)

    LoadedUsers (Ok users) ->
      (users, Cmd.none)

    LoadedUsers (Err _) ->
      (model, Cmd.none)


-- View


view : Model -> Html Msg
view model =
  let
    result =
      if ((List.isEmpty model)) then
        div [][ text "Currently no Users." ]
      else
        div [] (List.map userRow model)
  in
    div []
      [ h1 [] [ text "Users" ]
      , result
      ]


userRow : User -> Html Msg
userRow user =
  div [] [ text (user.username ++ " " ++ user.role) ]


decodeUser : Decode.Decoder User
decodeUser =
    Decode.map3 User
        (Decode.field "id" Decode.int)
        (Decode.field "username" Decode.string)
        (Decode.field "role" Decode.string)


decodeUserList : Decode.Decoder (List User)
decodeUserList =
      Decode.list decodeUser


loadUsers : Cmd Msg
loadUsers =
  Http.send LoadedUsers (Http.get "http://localhost:3000/users" decodeUserList)