set up elm form http request #18

elm-package.json

@@ -1,18 +1,18 @@
 {
-    "version": "1.0.0",
-    "summary": "an elm boilerplate",
-    "repository": "https://github.com/astroash/elm-spa-boiler-plate.git",
-    "license": "BSD3",
-    "source-directories": [
-        "src/elm"
-    ],
-    "exposed-modules": [],
-    "dependencies": {
-        "elm-lang/core": "5.1.1 <= v < 6.0.0",
-        "elm-lang/dom": "1.1.1 <= v < 2.0.0",
-        "elm-lang/html": "2.0.0 <= v < 3.0.0",
-        "elm-lang/navigation": "2.1.0 <= v < 3.0.0",
-        "elm-lang/virtual-dom": "2.0.4 <= v < 3.0.0"
-    },
-    "elm-version": "0.18.0 <= v < 0.19.0"
+  "version": "1.0.0",
+  "summary": "an elm boilerplate",
+  "repository": "https://github.com/astroash/elm-spa-boiler-plate.git",
+  "license": "BSD3",
+  "source-directories": ["src/elm"],
+  "exposed-modules": [],
+  "dependencies": {
+    "elm-lang/core": "5.1.1 <= v < 6.0.0",
+    "elm-lang/dom": "1.1.1 <= v < 2.0.0",
+    "elm-lang/html": "2.0.0 <= v < 3.0.0",
+    "elm-lang/http": "1.0.0 <= v < 2.0.0",
+    "elm-lang/navigation": "2.1.0 <= v < 3.0.0",
+    "elm-lang/virtual-dom": "2.0.4 <= v < 3.0.0",
+    "NoRedInk/elm-decode-pipeline": "3.0.0 <= v < 4.0.0"
+  },
+  "elm-version": "0.18.0 <= v < 0.19.0"
 }

src/elm/Commands.elm

@@ -0,0 +1,69 @@
+module Commands exposing (..)
+
+import Types exposing (..)
+import Json.Decode as Decode
+import Json.Decode.Pipeline exposing (decode, required)
+import Http exposing (..)
+import Json.Decode as Decode
+import Json.Encode as Encode
+
+
+formEncoder : Model -> Encode.Value
+formEncoder model =
+    let
+        attributes =
+            [ ( "Name", Encode.string model.airtableForm.name )
+            , ( "Contact Number", Encode.string model.airtableForm.contactNumber )
+            , ( "Email", Encode.string model.airtableForm.email )
+            , ( "Role", Encode.string model.airtableForm.role )
+            , ( "Role (Other)", Encode.string model.airtableForm.roleOther )
+            , ( "Start Date", Encode.string model.airtableForm.startDate )
+            , ( "Contract Length", Encode.string model.airtableForm.contractLength )
+            , ( "Contract Length (Other)", Encode.string model.airtableForm.contractOther )
+            , ( "Min Rate", Encode.int model.airtableForm.minRate )
+            , ( "Max Rate", Encode.int model.airtableForm.maxRate )
+            , ( "CV", Encode.string model.airtableForm.cv )
+            , ( "LinkedIn", Encode.string model.airtableForm.linkedIn )
+            , ( "Twitter", Encode.string model.airtableForm.twitter )
+            , ( "GitHub", Encode.string model.airtableForm.gitHub )
+            , ( "Personal Website", Encode.string model.airtableForm.website )
+            , ( "Q1", Encode.string model.airtableForm.q1 )
+            , ( "Q2", Encode.string model.airtableForm.q2 )
+            , ( "Q3", Encode.string model.airtableForm.q3 )
+            ]
+    in
+        Encode.object attributes
+
+
+methodRequest : String -> String -> Encode.Value -> Decode.Decoder a -> Http.Request a
+methodRequest method url encodedBody decoder =
+    Http.request
+        { body = encodedBody |> Http.jsonBody
+        , expect = Http.expectJson decoder
+        , headers = []
+        , method = method
+        , timeout = Nothing
+        , url = url
+        , withCredentials = False
+        }
+
+
+formResponseDecoder : Decode.Decoder FormResponse
+formResponseDecoder =
+    decode FormResponse
+        |> Json.Decode.Pipeline.required "success" Decode.bool
+
+
+postFormRequest : Model -> Http.Request FormResponse
+postFormRequest model =
+    let
+        baseUrl =
+            "/upload-form"
+    in
+        methodRequest "POST" baseUrl (formEncoder model) formResponseDecoder
+
+
+sendFormCmd : Model -> Cmd Msg
+sendFormCmd model =
+    postFormRequest model
+        |> Http.send OnFormSent

src/elm/State.elm

@@ -3,25 +3,33 @@ port module State exposing (..)
 import Dom.Scroll exposing (..)
 import Task
 import Time exposing (Time, second)
+import Json.Decode as Decode
+import Json.Decode.Pipeline exposing (decode, required)
+import Http exposing (..)
+import Json.Decode as Decode
+import Json.Encode as Encode
 import Types exposing (..)
+import Commands exposing (..)
 
 
 -- MODEL
 
 
+initForm : Form
+initForm =
+    Form "" "" "" "" "" "" "" "" 0 0 "" "" "" "" "" "" "" ""
+
+
 initModel : Model
 initModel =
-    let
-        initForm =
-            Form "" "" "" "" "" "" "" "" 0 0 "" "" "" "" "" "" "" ""
-    in
-        { route = Home
-        , videoStage = StagePreRecord
-        , videoMessage = ""
-        , messageLength = 0
-        , paused = True
-        , airtableForm = initForm
-        }
+    { route = Home
+    , videoStage = StagePreRecord
+    , videoMessage = ""
+    , messageLength = 0
+    , paused = True
+    , airtableForm = initForm
+    , formSent = NotSent
+    }
 
 
 
@@ -171,6 +179,26 @@ update msg model =
                 , Task.attempt (always NoOp) (toTop "container")
                 )
 
+        SendForm ->
+            ( { model | formSent = Pending }, sendFormCmd model )
+
+        OnFormSent (Ok result) ->
+            case result.success of
+                True ->
+                    ( { model
+                        | airtableForm = initForm
+                        , formSent = Success
+                        , route = ThankYou
+                      }
+                    , Cmd.none
+                    )
+
+                False ->
+                    ( { model | formSent = FailureServer }, Cmd.none )
+
+        OnFormSent (Err _) ->
+            ( { model | formSent = FailureServer }, Cmd.none )
+
         NoOp ->
             ( model, Cmd.none )
 

src/elm/Types.elm

@@ -1,6 +1,7 @@
 module Types exposing (..)
 
 import Navigation
+import Http exposing (..)
 
 
 -- Model
@@ -23,9 +24,18 @@ type alias Model =
     , messageLength : Int
     , paused : Bool
     , airtableForm : Form
+    , formSent : FormState
     }
 
 
+type FormState
+    = NotSent
+    | Pending
+    | Failure
+    | FailureServer
+    | Success
+
+
 type alias Form =
     { name : String
     , contactNumber : String
@@ -48,6 +58,11 @@ type alias Form =
     }
 
 
+type alias FormResponse =
+    { success : Bool
+    }
+
+
 type FormField
     = Name
     | ContactNumber
@@ -87,11 +102,8 @@ type Msg
     | RecordStop String
     | RecordError String
     | RecieveVideo String
+    | OnFormSent (Result Http.Error FormResponse)
     | ToggleVideo Stage
     | Increment
+    | SendForm
     | UpdateForm FormField String
-
-
-
--- | UpdateRole String
--- | UpdateLength String