Skip to content

Commit

Permalink
Frontend: actually submit email
Browse files Browse the repository at this point in the history
  • Loading branch information
@ingara
ingara committed Dec 1, 2019
1 parent e3ce2c3 commit bc36b0d
Show file tree
Hide file tree
Showing 2 changed files with 127 additions and 71 deletions.
56 changes: 31 additions & 25 deletions elm.json
View file
Original file line number Diff line number Diff line change
@@ -1,29 +1,35 @@
{
"type": "application",
"source-directories": ["src"],
"elm-version": "0.19.1",
"dependencies": {
"direct": {
"elm/browser": "1.0.2",
"elm/core": "1.0.2",
"elm/html": "1.0.0",
"rtfeldman/elm-validate": "4.0.1",
"tesk9/accessible-html": "4.0.0"
"type": "application",
"source-directories": [
"src"
],
"elm-version": "0.19.1",
"dependencies": {
"direct": {
"elm/browser": "1.0.2",
"elm/core": "1.0.2",
"elm/html": "1.0.0",
"elm/http": "2.0.0",
"elm/json": "1.1.2",
"krisajenkins/remotedata": "6.0.1",
"rtfeldman/elm-validate": "4.0.1",
"tesk9/accessible-html": "4.0.0"
},
"indirect": {
"elm/bytes": "1.0.8",
"elm/file": "1.0.5",
"elm/regex": "1.0.0",
"elm/time": "1.0.0",
"elm/url": "1.0.0",
"elm/virtual-dom": "1.0.2"
}
},
"indirect": {
"elm/json": "1.1.2",
"elm/regex": "1.0.0",
"elm/time": "1.0.0",
"elm/url": "1.0.0",
"elm/virtual-dom": "1.0.2"
"test-dependencies": {
"direct": {
"elm-explorations/test": "1.0.0"
},
"indirect": {
"elm/random": "1.0.0"
}
}
},
"test-dependencies": {
"direct": {
"elm-explorations/test": "1.0.0"
},
"indirect": {
"elm/random": "1.0.0"
}
}
}
142 changes: 96 additions & 46 deletions src/Main.elm
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,14 @@
module Main exposing (Model, Msg(..), init, main, update, view)

import Accessibility as Html exposing (..)
import Accessibility exposing (..)
import Browser
import Html exposing (Html)
import Html.Attributes exposing (class, href, id, placeholder, type_)
import Html.Attributes exposing (class, disabled, href, id, placeholder, type_)
import Html.Events exposing (onClick, onInput)
import Http
import Json.Decode as Decode
import Json.Encode as Encode
import RemoteData exposing (RemoteData(..), WebData)
import Validate


Expand All @@ -15,26 +19,49 @@ import Validate
type alias Model =
{ email : String
, validationError : Maybe String
, submitStatus : WebData ()
}


init : ( Model, Cmd Msg )
init =
( { email = "", validationError = Nothing }, Cmd.none )
( { email = ""
, validationError = Nothing
, submitStatus = NotAsked
}
, Cmd.none
)



---- UPDATE ----


submitEmail : String -> Cmd msg
submitEmail : String -> Cmd Msg
submitEmail email =
Cmd.none
let
url =
"/.netlify/functions/save-email"

body =
Http.jsonBody <|
Encode.object
[ ( "email", Encode.string email ) ]
in
Http.post
{ url = url
, body = body
, expect =
Http.expectJson
(RemoteData.fromResult >> SubmitCompleted)
(Decode.succeed ())
}


type Msg
= EmailUpdated String
| SubmitClicked
| SubmitCompleted (WebData ())


update : Msg -> Model -> ( Model, Cmd Msg )
Expand All @@ -47,13 +74,22 @@ update msg model =

SubmitClicked ->
if Validate.isValidEmail model.email then
( model, submitEmail model.email )
( { model
| submitStatus = Loading
}
, submitEmail model.email
)

else
( { model | validationError = Just "This looks like an invalid email address" }
, Cmd.none
)

SubmitCompleted data ->
( { model | submitStatus = data }
, Cmd.none
)



---- VIEW ----
Expand All @@ -66,54 +102,68 @@ view model =
, p [ class "intro" ]
[ text "May 15 and 16 in Oslo, Norway"
]
, form [ class "form" ]
[ p [ class "newsletterIntro" ]
[ div [] [ text "Want to stay up to date with the latest news?" ]
, div [] [ text "Sign up for our newsletter!" ]
]
, div [ class "inputContainer" ]
[ labelHidden "email-input"
[]
(text "[email protected]")
(inputText model.email
[ id "email-input"
, placeholder "[email protected]"
, class "email"
, onInput EmailUpdated
]
)
]
, case model.validationError of
Just err ->
div [ class "validationError" ] [ text err ]

Nothing ->
text ""
, button [ class "submitButton", type_ "button", onClick SubmitClicked ]
[ text "Submit" ]
]
, case model.submitStatus of
Success _ ->
p [] [ text "Thanks for subscribing!" ]

_ ->
viewSignupForm model
, p [ class "removeFromNewsletter" ]
[ span []
[ text "If you want to be removed from the newsletter, send an email to "
]
, a [ href "mailto:[email protected]" ]
[ text "[email protected]" ]
]
]


viewSignupForm : Model -> Html Msg
viewSignupForm model =
form [ class "form" ]
[ p [ class "newsletterIntro" ]
[ div [] [ text "Want to stay up to date with the latest news?" ]
, div [] [ text "Sign up for our newsletter!" ]
]
, div [ class "inputContainer" ]
[ labelHidden "email-input"
[]
(text "[email protected]")
(inputText model.email
[ id "email-input"
, placeholder "[email protected]"
, class "email"
, onInput EmailUpdated
]
)
]
, case model.validationError of
Just err ->
div [ class "validationError" ] [ text err ]

Nothing ->
text ""
, case model.submitStatus of
Failure _ ->
div [ class "validationError" ]
[ text "Something went wrong while submitting" ]

_ ->
text ""
, button
[ class "submitButton"
, type_ "button"
, onClick SubmitClicked
, disabled <| RemoteData.isLoading model.submitStatus
]
[ text <|
case model.submitStatus of
Loading ->
"Submitting..."

-- , Element.paragraph [ Font.size 16 ]
-- [ Element.text "If you want to be removed from the newsletter, send an email to "
-- , Element.link
-- [ Font.underline
-- , Element.mouseOver
-- [ Font.color <| color.yellow
-- ]
-- , Element.htmlAttribute <|
-- HtmlA.style "transition" "all 0.2s ease-in-out"
-- ]
-- { url = "mailto:[email protected]"
-- , label = Element.text "[email protected]"
-- }
-- ]
_ ->
"Submit"
]
]


Expand Down

0 comments on commit bc36b0d

Please sign in to comment.