Elm, how to get current time and post it to server

Question

According to this answer and its helpful Ellie I now have an idea of how we get the current time in Elm 0.18.

I want to get the current time and then post it in JSON to my server. I already have a POST working with a hardcoded timestamp, but I just don't see how to get the current time and then include it in the JSON I am POSTing.

My guess is that I need to chain a couple of commands (get current time, make a POST to server).

[I have also read another SO which shows how you can run a few commands in a row by directly calling the update function, which sounds like a nice idea but I am not sure if it is what I need for my situation.]

Experiment ([edit] perhaps more of a distraction than was intended)

In order to get my head around this I thought I would try to solve a similar problem that I can more easily set up in Ellie.

In the original Ellie the current time is gotten, updated into the model, and then the view function shows it.

In my version I wanted this to be a two-step process and therefore have grown the model to be a Maybe Float for the time and a String message. The view function shows the message string and a button -- the plan is that when the button is pressed it tells the runtime to 'go get the current time and then copy it across into the message slot'.

If I can solve this problem then I feel like I can solve my original problem.

My Ellie does not do this yet. When you press the button the time is gotten and is put into the time slot in the model, but I do not know how to tell the runtime to '...now copy that time across into the message slot'. The PutTimeInMessage message is in place, but I don't know how to get it to run after the GetCurrentTime message/command.

Any suggestions?

Here is my code so far (it compiles), which you can run here in Ellie:

module Main exposing (..)

import Html exposing (..)
import Html.Events exposing (..)
import Time exposing (Time)
import Date
import Task


type alias Model =
    { time : Maybe Float
    , message : String
    }


type Msg
    = OnTime Time
    | GetCurrentTime
    | PutTimeInMessage


update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        OnTime t ->
            ( { model | time = Just t }, Cmd.none )

        GetCurrentTime ->
            ( model, getTime )

        PutTimeInMessage ->
            case model.time of
                Nothing ->
                    ( model, Cmd.none )

                Just t ->
                    ( { model | message = toString t }, Cmd.none )


view : Model -> Html Msg
view model =
    div []
        [ div []
            [ button [ onClick GetCurrentTime ] [ Html.text "Get now time." ]
            ]
        , model.message |> Html.text
        ]


getTime : Cmd Msg
getTime =
    Time.now
        |> Task.perform OnTime


main =
    Html.program
        { init = ( Model Nothing "Empty message.", Cmd.none )
        , update = update
        , view = view
        , subscriptions = always Sub.none
        }

Answer 1

I came across an SO which explained how to do a sequence of Http requests with Task.andThen. Since I can see the type of Time.now is a Task I figured that I could adapt that example for my purposes if I use Http.toTask.

Below is the solution I came up with and here it is in Ellie:

module Main exposing (..)

import Html exposing (..)
import Html.Events exposing (..)
import Http
import Json.Decode as JD
import Json.Encode as JE
import Task
import Time


type alias Model =
    { url : String
    }


type Msg
    = PostTimeToServer
    | PostDone (Result Http.Error String)


update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        PostTimeToServer ->
            ( model, postTimeToServer model.url )

        PostDone _ ->
            ( model, Cmd.none )


view : Model -> Html Msg
view model =
    div []
        [ div []
            [ button [ onClick PostTimeToServer ] [ Html.text "POST the current time." ]
            ]
        ]


postTimeToServer : String -> Cmd Msg
postTimeToServer url =
    let
        getTime =
            Time.now

        postTime t =
            JD.string
                |> Http.post url (JE.float t |> Http.jsonBody)
                |> Http.toTask

        request =
            getTime                                            <<-- Here is
                |> Task.andThen postTime                       <<-- the key bit.
    in
        Task.attempt PostDone request


main =
    Html.program
        { init = ( Model "url_here", Cmd.none )
        , update = update
        , view = view
        , subscriptions = always Sub.none
        }

Answer 2

The way I see it, you can just update message field along with time field, when OnTime message is received. Thus, the whole update function is going to look like this:

update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        OnTime t ->
            ( { model | time = Just t, message = toString t }, Cmd.none )

        GetCurrentTime ->
            ( model, getTime )

The message is set in OnTime action, because in the GetCurrentTime time is unknown and is known only after getTime function is perform and OnTime message is received.

If you still want to use a separate action for putting the message, then the following code is the option:

update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        OnTime t ->
            update PutTimeInMessage { model | time = Just t }

        GetCurrentTime ->
            ( model, getTime )

        PutTimeInMessage ->
            case model.time of
                Nothing ->
                    ( model, Cmd.none )

                Just t ->
                    ( { model | message = toString t }, Cmd.none )

But to be honest, the most preferable solution, would be just displaying the time in the view differently, so you don't need the message field (but probably I don't see the whole picture):

view : Model -> Html Msg
view model =
    div []
        [ div []
            [ button [ onClick GetCurrentTime ] [ Html.text "Get now time." ]
            ]
        , viewTime model.time
    ]

viewTime : Maybe Float -> Html Msg
viewTime time =
  case time of
    Nothing -> Html.text "Empty message."
    Just t -> Html.text (toString t)