Send HTTP request with Elm

Sample.elm

module Sample exposing (..)

import Html exposing (Html, input, button, div, text, program)
import Html.Events exposing (onInput, onClick)
import Http exposing (post, jsonBody)
import Json.Encode as Encode exposing (..)
import Json.Decode as Decode exposing (Decoder, int, string)
import Json.Decode.Pipeline exposing (decode, required)
import Debug exposing (log)

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

init : ( Model, Cmd Msg )
init =
    ( model, Cmd.none )

type alias Model =
  { name: String
  , errorMsg: String
  }

model: Model
model =
  { name = ""
  , errorMsg = ""
  }

type alias UserName = String

type alias UserId = Int

type alias AddUserResponse =
  { id: UserId
  , name: UserName
  }

addUserRequestEncoder: Model -> Encode.Value
addUserRequestEncoder model = 
    Encode.object 
        [ ("name", Encode.string model.name)
        ]

addUserResponseDecoder: Decoder AddUserResponse
addUserResponseDecoder =
  decode AddUserResponse
    |> required "id" Decode.int
    |> required "name" Decode.string

addUserUrl : String
addUserUrl =
  "http://localhost:3000/users"

addUser: Model -> String -> Http.Request AddUserResponse
addUser model addUserUrl =
  let
    body =
      model
        |> addUserRequestEncoder
        |> Http.jsonBody
  in
    Http.post addUserUrl body addUserResponseDecoder

-- Update

type Msg
  = Change String
  | AddUser
  | AddUserCompleted (Result Http.Error AddUserResponse)

update: Msg -> Model -> (Model, Cmd Msg)
update msg model =
  case msg of
    Change newName ->
      ( { model | name = newName}, Cmd.none )
    AddUser ->
      ( model, addUserCmd model addUserUrl )
    AddUserCompleted result ->
      addUserCompleted model result

addUserCmd : Model -> String -> Cmd Msg
addUserCmd model addUserUrl
  = Http.send AddUserCompleted (addUser model addUserUrl)

addUserCompleted: Model -> Result Http.Error AddUserResponse -> (Model, Cmd Msg)
addUserCompleted model result =
  case result of
    Ok addUserResponse ->
      ( model |> Debug.log "User added", Cmd.none )
    Err error ->
      ( { model | errorMsg = (toString error) }, Cmd.none )

-- View

view: Model -> Html Msg
view model =
  div []
  [ input [ onInput Change ] []
  , button [ onClick AddUser ] [ text "Click" ]
  , div [] [ text model.errorMsg ]
  ]