diff --git a/part0/Main.elm b/part0/Main.elm deleted file mode 100644 index 3b7c10a..0000000 --- a/part0/Main.elm +++ /dev/null @@ -1,23 +0,0 @@ -module Main exposing (..) - -import Html exposing (..) -import Html.Attributes exposing (..) - - -elmHubHeader = - header [] - [ -- TODO wrap the following text in an

- text "ElmHub" - , span [ class "tagline" ] - [{- TODO put some text in here that says: - "Like GitHub, but for Elm things." - -} - ] - ] - - -main = - div [ class "content" ] - [ -- TODO put the header here - ul [ class "results" ] [] - ] diff --git a/part0/README.md b/part0/README.md deleted file mode 100644 index be9681c..0000000 --- a/part0/README.md +++ /dev/null @@ -1,25 +0,0 @@ -Part 1 -====== - -The instructor will paste notes from the lesson, including code examples from -Q&A, in [this document](https://docs.google.com/document/d/1ApuSOk9DP0YsQrxhW7-WE8UOEAV4PPnLDDeqUOL2o5k/edit?usp=sharing). - -## Installation - -```bash -elm-package install -``` - -(Answer `y` when prompted.) - - -## Building - -```bash -elm-live Main.elm --open --output=elm.js -``` - -## References -* [html-to-elm](http://mbylstra.github.io/html-to-elm/) - paste in HTML, get elm-html code -* [elm-html documentation](http://package.elm-lang.org/packages/elm-lang/html/latest) -* [record syntax](http://elm-lang.org/docs/syntax#records) (e.g. `{ foo = 1, bar = 2 }`) diff --git a/part1/Main.elm b/part1/Main.elm index 604c950..3b7c10a 100644 --- a/part1/Main.elm +++ b/part1/Main.elm @@ -4,35 +4,20 @@ import Html exposing (..) import Html.Attributes exposing (..) -model = - { result = - { id = 1 - , name = "TheSeamau5/elm-checkerboardgrid-tutorial" - , stars = 66 - } - } - - elmHubHeader = header [] - [ h1 [] [ text "ElmHub" ] - , span [ class "tagline" ] [ text "Like GitHub, but for Elm things." ] - ] - - -view model = - div [ class "content" ] - [ elmHubHeader - , ul [ class "results" ] - [ li [] - [ span [ class "star-count" ] [{- TODO display the number of stars -}] - -- TODO use the model to put a link here that points to - -- https://github.com/TheSeamau5/elm-checkerboardgrid-tutorial - -- by prepending the "https://github.com/" part. - ] + [ -- TODO wrap the following text in an

+ text "ElmHub" + , span [ class "tagline" ] + [{- TODO put some text in here that says: + "Like GitHub, but for Elm things." + -} ] ] main = - view model + div [ class "content" ] + [ -- TODO put the header here + ul [ class "results" ] [] + ] diff --git a/part11/index.html b/part11/index.html deleted file mode 100644 index 93fc00c..0000000 --- a/part11/index.html +++ /dev/null @@ -1,20 +0,0 @@ - - - - - - ElmHub - - - - - - - - - - - - diff --git a/part11/ElmHub.elm b/part12/part11/ElmHub.elm similarity index 100% rename from part11/ElmHub.elm rename to part12/part11/ElmHub.elm diff --git a/part11/Main.elm b/part12/part11/Main.elm similarity index 100% rename from part11/Main.elm rename to part12/part11/Main.elm diff --git a/part11/README.md b/part12/part11/README.md similarity index 100% rename from part11/README.md rename to part12/part11/README.md diff --git a/part11/SearchResult.elm b/part12/part11/SearchResult.elm similarity index 100% rename from part11/SearchResult.elm rename to part12/part11/SearchResult.elm diff --git a/part0/elm-hub.png b/part12/part11/elm-hub.png similarity index 100% rename from part0/elm-hub.png rename to part12/part11/elm-hub.png diff --git a/part11/elm-package.json b/part12/part11/elm-package.json similarity index 100% rename from part11/elm-package.json rename to part12/part11/elm-package.json diff --git a/part0/index.html b/part12/part11/index.html similarity index 100% rename from part0/index.html rename to part12/part11/index.html diff --git a/part0/style.css b/part12/part11/style.css similarity index 100% rename from part0/style.css rename to part12/part11/style.css diff --git a/part2/Main.elm b/part2/Main.elm index 6fe6d18..604c950 100644 --- a/part2/Main.elm +++ b/part2/Main.elm @@ -1,35 +1,15 @@ module Main exposing (..) import Html exposing (..) -import Html.App as Html import Html.Attributes exposing (..) -import Html.Events exposing (onClick) -initialModel = - { query = "tutorial" - , results = - [ { id = 1 - , name = "TheSeamau5/elm-checkerboardgrid-tutorial" - , stars = 66 - } - , { id = 2 - , name = "grzegorzbalcerek/elm-by-example" - , stars = 41 - } - , { id = 3 - , name = "sporto/elm-tutorial-app" - , stars = 35 - } - , { id = 4 - , name = "jvoigtlaender/Elm-Tutorium" - , stars = 10 - } - , { id = 5 - , name = "sporto/elm-tutorial-assets" - , stars = 7 - } - ] +model = + { result = + { id = 1 + , name = "TheSeamau5/elm-checkerboardgrid-tutorial" + , stars = 66 + } } @@ -43,31 +23,16 @@ elmHubHeader = view model = div [ class "content" ] [ elmHubHeader - , ul [ class "results" ] (List.map viewSearchResult model.results) + , ul [ class "results" ] + [ li [] + [ span [ class "star-count" ] [{- TODO display the number of stars -}] + -- TODO use the model to put a link here that points to + -- https://github.com/TheSeamau5/elm-checkerboardgrid-tutorial + -- by prepending the "https://github.com/" part. + ] + ] ] -viewSearchResult result = - li [] - [ span [ class "star-count" ] [ text (toString result.stars) ] - , a [ href ("https://github.com/" ++ result.name), target "_blank" ] - [ text result.name ] - , button - -- TODO add an onClick handler that sends a DELETE_BY_ID msg - [ class "hide-result" ] - [ text "X" ] - ] - - -update msg model = - -- TODO if msg.operation == "DELETE_BY_ID", - -- then return a new model without the given ID present anymore. - model - - main = - Html.beginnerProgram - { view = view - , update = update - , model = initialModel - } + view model diff --git a/part2/README.md b/part2/README.md index e68a0e2..be9681c 100644 --- a/part2/README.md +++ b/part2/README.md @@ -1,4 +1,4 @@ -Part 2 +Part 1 ====== The instructor will paste notes from the lesson, including code examples from @@ -20,7 +20,6 @@ elm-live Main.elm --open --output=elm.js ``` ## References - -* [Type Annotation syntax reference](http://elm-lang.org/docs/syntax#type-annotations) -* [`type alias` syntax reference](http://elm-lang.org/docs/syntax#type-aliases) -* [`List.map` documentation](http://package.elm-lang.org/packages/elm-lang/core/3.0.0/List#map) +* [html-to-elm](http://mbylstra.github.io/html-to-elm/) - paste in HTML, get elm-html code +* [elm-html documentation](http://package.elm-lang.org/packages/elm-lang/html/latest) +* [record syntax](http://elm-lang.org/docs/syntax#records) (e.g. `{ foo = 1, bar = 2 }`) diff --git a/part3/Main.elm b/part3/Main.elm index 154beaf..6fe6d18 100644 --- a/part3/Main.elm +++ b/part3/Main.elm @@ -6,27 +6,6 @@ import Html.Attributes exposing (..) import Html.Events exposing (onClick) -type alias Model = - { query : String - , results : List SearchResult - } - - -type alias SearchResult = - { id : Int - , name : String - , stars : Int - } - - -type alias Msg = - { operation : String - , data : Int - } - - -{-| TODO add a type annotation to this value --} initialModel = { query = "tutorial" , results = @@ -54,8 +33,6 @@ initialModel = } -{-| TODO add a type annotation to this function --} elmHubHeader = header [] [ h1 [] [ text "ElmHub" ] @@ -63,8 +40,6 @@ elmHubHeader = ] -{-| TODO add a type annotation to this function --} view model = div [ class "content" ] [ elmHubHeader @@ -72,28 +47,22 @@ view model = ] -{-| TODO add a type annotation to this function --} viewSearchResult result = li [] [ span [ class "star-count" ] [ text (toString result.stars) ] , a [ href ("https://github.com/" ++ result.name), target "_blank" ] [ text result.name ] , button - [ class "hide-result", onClick { operation = "DELETE_BY_ID", data = result.id } ] + -- TODO add an onClick handler that sends a DELETE_BY_ID msg + [ class "hide-result" ] [ text "X" ] ] -{-| TODO add a type annotation to this function --} update msg model = - if msg.operation == "DELETE_BY_ID" then - { model - | results = List.filter (\result -> result.id /= msg.data) model.results - } - else - model + -- TODO if msg.operation == "DELETE_BY_ID", + -- then return a new model without the given ID present anymore. + model main = diff --git a/part3/README.md b/part3/README.md index b835eec..e68a0e2 100644 --- a/part3/README.md +++ b/part3/README.md @@ -1,4 +1,4 @@ -Part 3 +Part 2 ====== The instructor will paste notes from the lesson, including code examples from @@ -21,5 +21,6 @@ elm-live Main.elm --open --output=elm.js ## References -* [`onClick` documentation](http://package.elm-lang.org/packages/evancz/elm-html/4.0.2/Html-Events#onClick) -* [record update syntax reference](http://elm-lang.org/docs/syntax#records) (e.g. `{ model | query = "foo" }`) +* [Type Annotation syntax reference](http://elm-lang.org/docs/syntax#type-annotations) +* [`type alias` syntax reference](http://elm-lang.org/docs/syntax#type-aliases) +* [`List.map` documentation](http://package.elm-lang.org/packages/elm-lang/core/3.0.0/List#map) diff --git a/part4/Main.elm b/part4/Main.elm index 47b2fb3..154beaf 100644 --- a/part4/Main.elm +++ b/part4/Main.elm @@ -3,7 +3,7 @@ module Main exposing (..) import Html exposing (..) import Html.App as Html import Html.Attributes exposing (..) -import Html.Events exposing (onClick, onInput) +import Html.Events exposing (onClick) type alias Model = @@ -19,12 +19,14 @@ type alias SearchResult = } -type Msg - = SetQuery String - | DeleteById Int +type alias Msg = + { operation : String + , data : Int + } -initialModel : Model +{-| TODO add a type annotation to this value +-} initialModel = { query = "tutorial" , results = @@ -52,7 +54,8 @@ initialModel = } -elmHubHeader : Html Msg +{-| TODO add a type annotation to this function +-} elmHubHeader = header [] [ h1 [] [ text "ElmHub" ] @@ -60,45 +63,39 @@ elmHubHeader = ] -view : Model -> Html Msg +{-| TODO add a type annotation to this function +-} view model = div [ class "content" ] - [ header [] - [ h1 [] [ text "ElmHub" ] - , span [ class "tagline" ] [ text "Like GitHub, but for Elm things." ] - ] - , input - [ class "search-query" - -- TODO onInput, set the query in the model - , defaultValue model.query - ] - [] - , button [ class "search-button" ] [ text "Search" ] + [ elmHubHeader , ul [ class "results" ] (List.map viewSearchResult model.results) ] -viewSearchResult : SearchResult -> Html Msg +{-| TODO add a type annotation to this function +-} viewSearchResult result = li [] [ span [ class "star-count" ] [ text (toString result.stars) ] , a [ href ("https://github.com/" ++ result.name), target "_blank" ] [ text result.name ] , button - -- TODO add an onClick handler that sends a DeleteById action - [ class "hide-result" ] + [ class "hide-result", onClick { operation = "DELETE_BY_ID", data = result.id } ] [ text "X" ] ] -update : Msg -> Model -> Model +{-| TODO add a type annotation to this function +-} update msg model = - -- TODO if we get a SetQuery action, use it to set the model's query field, - -- and if we get a DeleteById action, delete the appropriate result - model + if msg.operation == "DELETE_BY_ID" then + { model + | results = List.filter (\result -> result.id /= msg.data) model.results + } + else + model -main : Program Never main = Html.beginnerProgram { view = view diff --git a/part4/README.md b/part4/README.md index 38918b7..b835eec 100644 --- a/part4/README.md +++ b/part4/README.md @@ -1,4 +1,4 @@ -Part 4 +Part 3 ====== The instructor will paste notes from the lesson, including code examples from @@ -21,4 +21,5 @@ elm-live Main.elm --open --output=elm.js ## References -* [Union Types syntax reference](http://elm-lang.org/docs/syntax#union-types) +* [`onClick` documentation](http://package.elm-lang.org/packages/evancz/elm-html/4.0.2/Html-Events#onClick) +* [record update syntax reference](http://elm-lang.org/docs/syntax#records) (e.g. `{ model | query = "foo" }`) diff --git a/part5/Main.elm b/part5/Main.elm index c4e62fe..47b2fb3 100644 --- a/part5/Main.elm +++ b/part5/Main.elm @@ -2,79 +2,8 @@ module Main exposing (..) import Html exposing (..) import Html.App as Html -import Html.Attributes exposing (class, target, href, property, defaultValue) -import Html.Events exposing (..) -import Json.Decode exposing (Decoder) -import Json.Decode.Pipeline exposing (..) - - -main : Program Never -main = - Html.beginnerProgram - { view = view - , update = update - , model = initialModel - } - - -sampleJson : String -sampleJson = - """ - { - "total_count": 40, - "incomplete_results": false, - "items": [ - { - "id": 3081286, - "name": "Tetris", - "full_name": "dtrupenn/Tetris", - "owner": { - "login": "dtrupenn", - "id": 872147, - "avatar_url": "https://secure.gravatar.com/avatar/e7956084e75f239de85d3a31bc172ace?d=https://a248.e.akamai.net/assets.github.com%2Fimages%2Fgravatars%2Fgravatar-user-420.png", - "gravatar_id": "", - "url": "https://api.github.com/users/dtrupenn", - "received_events_url": "https://api.github.com/users/dtrupenn/received_events", - "type": "User" - }, - "private": false, - "html_url": "https://github.com/dtrupenn/Tetris", - "description": "A C implementation of Tetris using Pennsim through LC4", - "fork": false, - "url": "https://api.github.com/repos/dtrupenn/Tetris", - "created_at": "2012-01-01T00:31:50Z", - "updated_at": "2013-01-05T17:58:47Z", - "pushed_at": "2012-01-01T00:37:02Z", - "homepage": "", - "size": 524, - "stargazers_count": 1, - "watchers_count": 1, - "language": "Assembly", - "forks_count": 0, - "open_issues_count": 0, - "master_branch": "master", - "default_branch": "master", - "score": 10.309712 - } - ] - } - """ - - -responseDecoder : Decoder (List SearchResult) -responseDecoder = - Json.Decode.at [ "items" ] (Json.Decode.list searchResultDecoder) - - -searchResultDecoder : Decoder SearchResult -searchResultDecoder = - -- See https://developer.github.com/v3/search/#example - -- and http://package.elm-lang.org/packages/NoRedInk/elm-decode-pipeline/latest - -- TODO replace these calls to `hardcoded` with calls to `require` - decode SearchResult - |> hardcoded 0 - |> hardcoded "" - |> hardcoded 0 +import Html.Attributes exposing (..) +import Html.Events exposing (onClick, onInput) type alias Model = @@ -90,22 +19,45 @@ type alias SearchResult = } +type Msg + = SetQuery String + | DeleteById Int + + initialModel : Model initialModel = { query = "tutorial" - , results = decodeResults sampleJson + , results = + [ { id = 1 + , name = "TheSeamau5/elm-checkerboardgrid-tutorial" + , stars = 66 + } + , { id = 2 + , name = "grzegorzbalcerek/elm-by-example" + , stars = 41 + } + , { id = 3 + , name = "sporto/elm-tutorial-app" + , stars = 35 + } + , { id = 4 + , name = "jvoigtlaender/Elm-Tutorium" + , stars = 10 + } + , { id = 5 + , name = "sporto/elm-tutorial-assets" + , stars = 7 + } + ] } -decodeResults : String -> List SearchResult -decodeResults json = - -- TODO use Json.Decode.decodeString to translate this into either: - -- - -- * the search results, if decoding succeeded - -- * an empty list if decoding failed - -- - -- see http://package.elm-lang.org/packages/elm-lang/core/4.0.0/Json-Decode#decodeString - [] +elmHubHeader : Html Msg +elmHubHeader = + header [] + [ h1 [] [ text "ElmHub" ] + , span [ class "tagline" ] [ text "Like GitHub, but for Elm things." ] + ] view : Model -> Html Msg @@ -115,10 +67,14 @@ view model = [ h1 [] [ text "ElmHub" ] , span [ class "tagline" ] [ text "Like GitHub, but for Elm things." ] ] - , input [ class "search-query", onInput SetQuery, defaultValue model.query ] [] + , input + [ class "search-query" + -- TODO onInput, set the query in the model + , defaultValue model.query + ] + [] , button [ class "search-button" ] [ text "Search" ] - , ul [ class "results" ] - (List.map viewSearchResult model.results) + , ul [ class "results" ] (List.map viewSearchResult model.results) ] @@ -128,25 +84,24 @@ viewSearchResult result = [ span [ class "star-count" ] [ text (toString result.stars) ] , a [ href ("https://github.com/" ++ result.name), target "_blank" ] [ text result.name ] - , button [ class "hide-result", onClick (DeleteById result.id) ] + , button + -- TODO add an onClick handler that sends a DeleteById action + [ class "hide-result" ] [ text "X" ] ] -type Msg - = SetQuery String - | DeleteById Int - - update : Msg -> Model -> Model update msg model = - case msg of - SetQuery query -> - { model | query = query } + -- TODO if we get a SetQuery action, use it to set the model's query field, + -- and if we get a DeleteById action, delete the appropriate result + model - DeleteById idToHide -> - let - newResults = - List.filter (\{ id } -> id /= idToHide) model.results - in - { model | results = newResults } + +main : Program Never +main = + Html.beginnerProgram + { view = view + , update = update + , model = initialModel + } diff --git a/part5/README.md b/part5/README.md index 75c3024..38918b7 100644 --- a/part5/README.md +++ b/part5/README.md @@ -1,4 +1,4 @@ -Part 5 +Part 4 ====== The instructor will paste notes from the lesson, including code examples from @@ -18,3 +18,7 @@ elm-package install ```bash elm-live Main.elm --open --output=elm.js ``` + +## References + +* [Union Types syntax reference](http://elm-lang.org/docs/syntax#union-types) diff --git a/part5/elm-package.json b/part5/elm-package.json index a9183a1..cb15a2e 100644 --- a/part5/elm-package.json +++ b/part5/elm-package.json @@ -4,15 +4,12 @@ "repository": "https://github.com/rtfeldman/elm-workshop.git", "license": "BSD-3-Clause", "source-directories": [ - ".", - ".." + ".", ".." ], "exposed-modules": [], "dependencies": { - "NoRedInk/elm-decode-pipeline": "1.1.2 <= v < 2.0.0", - "elm-lang/core": "4.0.1 <= v < 5.0.0", - "elm-lang/html": "1.0.0 <= v < 2.0.0", - "evancz/elm-http": "3.0.1 <= v < 4.0.0" + "elm-lang/core": "4.0.5 <= v < 5.0.0", + "elm-lang/html": "1.1.0 <= v < 2.0.0" }, "elm-version": "0.17.0 <= v < 0.18.0" } diff --git a/part6/Main.elm b/part6/Main.elm index 98c7b5e..c4e62fe 100644 --- a/part6/Main.elm +++ b/part6/Main.elm @@ -1,49 +1,64 @@ module Main exposing (..) -import Auth import Html exposing (..) +import Html.App as Html import Html.Attributes exposing (class, target, href, property, defaultValue) import Html.Events exposing (..) -import Http -import Html.App as Html -import Task exposing (Task) import Json.Decode exposing (Decoder) import Json.Decode.Pipeline exposing (..) main : Program Never main = - Html.program + Html.beginnerProgram { view = view , update = update - , init = ( initialModel, searchFeed initialModel.query ) - , subscriptions = \_ -> Sub.none + , model = initialModel } -searchFeed : String -> Cmd Msg -searchFeed query = - let - url = - "https://api.github.com/search/repositories?access_token=" - ++ Auth.token - ++ "&q=" - ++ query - ++ "+language:elm&sort=stars&order=desc" - - -- Hint: responseDecoder may be useful here - task = - "TODO replace this String with a Task using http://package.elm-lang.org/packages/evancz/elm-http/latest/Http#get" - in - -- TODO replace this Cmd.none with a call to Task.perform - -- http://package.elm-lang.org/packages/elm-lang/core/4.0.1/Task#perform - -- - -- Hint: pass these to Task.perform, but in a different order than this! - -- - -- task - -- HandleSearchResponse - -- HandleSearchError - Cmd.none +sampleJson : String +sampleJson = + """ + { + "total_count": 40, + "incomplete_results": false, + "items": [ + { + "id": 3081286, + "name": "Tetris", + "full_name": "dtrupenn/Tetris", + "owner": { + "login": "dtrupenn", + "id": 872147, + "avatar_url": "https://secure.gravatar.com/avatar/e7956084e75f239de85d3a31bc172ace?d=https://a248.e.akamai.net/assets.github.com%2Fimages%2Fgravatars%2Fgravatar-user-420.png", + "gravatar_id": "", + "url": "https://api.github.com/users/dtrupenn", + "received_events_url": "https://api.github.com/users/dtrupenn/received_events", + "type": "User" + }, + "private": false, + "html_url": "https://github.com/dtrupenn/Tetris", + "description": "A C implementation of Tetris using Pennsim through LC4", + "fork": false, + "url": "https://api.github.com/repos/dtrupenn/Tetris", + "created_at": "2012-01-01T00:31:50Z", + "updated_at": "2013-01-05T17:58:47Z", + "pushed_at": "2012-01-01T00:37:02Z", + "homepage": "", + "size": 524, + "stargazers_count": 1, + "watchers_count": 1, + "language": "Assembly", + "forks_count": 0, + "open_issues_count": 0, + "master_branch": "master", + "default_branch": "master", + "score": 10.309712 + } + ] + } + """ responseDecoder : Decoder (List SearchResult) @@ -53,16 +68,18 @@ responseDecoder = searchResultDecoder : Decoder SearchResult searchResultDecoder = + -- See https://developer.github.com/v3/search/#example + -- and http://package.elm-lang.org/packages/NoRedInk/elm-decode-pipeline/latest + -- TODO replace these calls to `hardcoded` with calls to `require` decode SearchResult - |> required "id" Json.Decode.int - |> required "full_name" Json.Decode.string - |> required "stargazers_count" Json.Decode.int + |> hardcoded 0 + |> hardcoded "" + |> hardcoded 0 type alias Model = { query : String , results : List SearchResult - , errorMessage : Maybe String } @@ -76,11 +93,21 @@ type alias SearchResult = initialModel : Model initialModel = { query = "tutorial" - , results = [] - , errorMessage = Nothing + , results = decodeResults sampleJson } +decodeResults : String -> List SearchResult +decodeResults json = + -- TODO use Json.Decode.decodeString to translate this into either: + -- + -- * the search results, if decoding succeeded + -- * an empty list if decoding failed + -- + -- see http://package.elm-lang.org/packages/elm-lang/core/4.0.0/Json-Decode#decodeString + [] + + view : Model -> Html Msg view model = div [ class "content" ] @@ -89,22 +116,12 @@ view model = , span [ class "tagline" ] [ text "Like GitHub, but for Elm things." ] ] , input [ class "search-query", onInput SetQuery, defaultValue model.query ] [] - , button [ class "search-button", onClick Search ] [ text "Search" ] - , viewErrorMessage model.errorMessage - , ul [ class "results" ] (List.map viewSearchResult model.results) + , button [ class "search-button" ] [ text "Search" ] + , ul [ class "results" ] + (List.map viewSearchResult model.results) ] -viewErrorMessage : Maybe String -> Html a -viewErrorMessage errorMessage = - case errorMessage of - Just message -> - div [ class "error" ] [ text message ] - - Nothing -> - text "" - - viewSearchResult : SearchResult -> Html Msg viewSearchResult result = li [] @@ -117,42 +134,19 @@ viewSearchResult result = type Msg - = Search - | SetQuery String + = SetQuery String | DeleteById Int - | HandleSearchResponse (List SearchResult) - | HandleSearchError Http.Error -update : Msg -> Model -> ( Model, Cmd Msg ) +update : Msg -> Model -> Model update msg model = case msg of - Search -> - ( model, searchFeed model.query ) - - HandleSearchResponse results -> - ( { model | results = results }, Cmd.none ) - - HandleSearchError error -> - -- TODO if decoding failed, store the message in model.errorMessage - -- - -- Hint 1: look for "decode" in the documentation for this union type: - -- http://package.elm-lang.org/packages/evancz/elm-http/latest/Http#Error - -- - -- Hint 2: to check if this is working, break responseDecoder - -- by changing "stargazers_count" to "description" - ( model, Cmd.none ) - SetQuery query -> - ( { model | query = query }, Cmd.none ) + { model | query = query } DeleteById idToHide -> let newResults = - model.results - |> List.filter (\{ id } -> id /= idToHide) - - newModel = - { model | results = newResults } + List.filter (\{ id } -> id /= idToHide) model.results in - ( newModel, Cmd.none ) + { model | results = newResults } diff --git a/part6/README.md b/part6/README.md index 971419f..75c3024 100644 --- a/part6/README.md +++ b/part6/README.md @@ -1,4 +1,4 @@ -Part 6 +Part 5 ====== The instructor will paste notes from the lesson, including code examples from @@ -18,11 +18,3 @@ elm-package install ```bash elm-live Main.elm --open --output=elm.js ``` - -## References - -* [**let-expressions**](http://elm-lang.org/docs/syntax#let-expressions) -* [**case-expressions** and **if-expressions**](http://elm-lang.org/docs/syntax#conditionals) -* [HTTP Tasks tutorial](http://elm-lang.org/guide/reactivity#http-tasks) -* [HTTP Error documentation](http://package.elm-lang.org/packages/evancz/elm-http/3.0.0/Http#Error) -* [Modules syntax reference](http://elm-lang.org/docs/syntax#modules) diff --git a/part7/Main.elm b/part7/Main.elm index 3e4fd9f..98c7b5e 100644 --- a/part7/Main.elm +++ b/part7/Main.elm @@ -1,11 +1,12 @@ -port module Main exposing (..) +module Main exposing (..) -import Html.App as Html -import Json.Decode exposing (..) +import Auth import Html exposing (..) import Html.Attributes exposing (class, target, href, property, defaultValue) import Html.Events exposing (..) -import Auth +import Http +import Html.App as Html +import Task exposing (Task) import Json.Decode exposing (Decoder) import Json.Decode.Pipeline exposing (..) @@ -15,19 +16,34 @@ main = Html.program { view = view , update = update - , init = ( initialModel, githubSearch (getQueryString initialModel.query) ) - , subscriptions = \_ -> githubResponse decodeResponse + , init = ( initialModel, searchFeed initialModel.query ) + , subscriptions = \_ -> Sub.none } -getQueryString : String -> String -getQueryString query = - -- See https://developer.github.com/v3/search/#example for how to customize! - "access_token=" - ++ Auth.token - ++ "&q=" - ++ query - ++ "+language:elm&sort=stars&order=desc" +searchFeed : String -> Cmd Msg +searchFeed query = + let + url = + "https://api.github.com/search/repositories?access_token=" + ++ Auth.token + ++ "&q=" + ++ query + ++ "+language:elm&sort=stars&order=desc" + + -- Hint: responseDecoder may be useful here + task = + "TODO replace this String with a Task using http://package.elm-lang.org/packages/evancz/elm-http/latest/Http#get" + in + -- TODO replace this Cmd.none with a call to Task.perform + -- http://package.elm-lang.org/packages/elm-lang/core/4.0.1/Task#perform + -- + -- Hint: pass these to Task.perform, but in a different order than this! + -- + -- task + -- HandleSearchResponse + -- HandleSearchError + Cmd.none responseDecoder : Decoder (List SearchResult) @@ -100,51 +116,43 @@ viewSearchResult result = ] -update : Msg -> Model -> ( Model, Cmd Msg ) -update msg model = - case msg of - Search -> - ( model, githubSearch (getQueryString model.query) ) - - SetQuery query -> - ( { model | query = query }, Cmd.none ) - - HandleSearchResponse results -> - ( { model | results = results }, Cmd.none ) - - HandleSearchError error -> - ( { model | errorMessage = error }, Cmd.none ) - - DeleteById idToDelete -> - let - newResults = - model.results - |> List.filter (\{ id } -> id /= idToDelete) - - newModel = - { model | results = newResults } - in - ( newModel, Cmd.none ) - - type Msg = Search | SetQuery String | DeleteById Int | HandleSearchResponse (List SearchResult) - | HandleSearchError (Maybe String) + | HandleSearchError Http.Error -decodeResponse : Value -> Msg -decodeResponse json = - -- TODO use decodeValue to decode the response into a Msg. - -- - -- Hint: look at the definition of Msg and - -- the definition of responseDecoder - HandleSearchError (Just "TODO decode the response!") +update : Msg -> Model -> ( Model, Cmd Msg ) +update msg model = + case msg of + Search -> + ( model, searchFeed model.query ) + HandleSearchResponse results -> + ( { model | results = results }, Cmd.none ) -port githubSearch : String -> Cmd msg + HandleSearchError error -> + -- TODO if decoding failed, store the message in model.errorMessage + -- + -- Hint 1: look for "decode" in the documentation for this union type: + -- http://package.elm-lang.org/packages/evancz/elm-http/latest/Http#Error + -- + -- Hint 2: to check if this is working, break responseDecoder + -- by changing "stargazers_count" to "description" + ( model, Cmd.none ) + SetQuery query -> + ( { model | query = query }, Cmd.none ) -port githubResponse : (Value -> msg) -> Sub msg + DeleteById idToHide -> + let + newResults = + model.results + |> List.filter (\{ id } -> id /= idToHide) + + newModel = + { model | results = newResults } + in + ( newModel, Cmd.none ) diff --git a/part7/README.md b/part7/README.md index 268898f..971419f 100644 --- a/part7/README.md +++ b/part7/README.md @@ -1,4 +1,4 @@ -Part 7 +Part 6 ====== The instructor will paste notes from the lesson, including code examples from @@ -18,3 +18,11 @@ elm-package install ```bash elm-live Main.elm --open --output=elm.js ``` + +## References + +* [**let-expressions**](http://elm-lang.org/docs/syntax#let-expressions) +* [**case-expressions** and **if-expressions**](http://elm-lang.org/docs/syntax#conditionals) +* [HTTP Tasks tutorial](http://elm-lang.org/guide/reactivity#http-tasks) +* [HTTP Error documentation](http://package.elm-lang.org/packages/evancz/elm-http/3.0.0/Http#Error) +* [Modules syntax reference](http://elm-lang.org/docs/syntax#modules) diff --git a/part7/index.html b/part7/index.html index 0b7441a..93fc00c 100644 --- a/part7/index.html +++ b/part7/index.html @@ -4,33 +4,17 @@ ElmHub - + -
diff --git a/part8/Main.elm b/part8/Main.elm index 6c8a8fe..3e4fd9f 100644 --- a/part8/Main.elm +++ b/part8/Main.elm @@ -1,31 +1,150 @@ port module Main exposing (..) -import ElmHub exposing (..) import Html.App as Html -import Json.Decode +import Json.Decode exposing (..) +import Html exposing (..) +import Html.Attributes exposing (class, target, href, property, defaultValue) +import Html.Events exposing (..) +import Auth +import Json.Decode exposing (Decoder) +import Json.Decode.Pipeline exposing (..) main : Program Never main = Html.program { view = view - , update = update githubSearch + , update = update , init = ( initialModel, githubSearch (getQueryString initialModel.query) ) , subscriptions = \_ -> githubResponse decodeResponse } -decodeResponse : Json.Decode.Value -> Msg -decodeResponse json = - case Json.Decode.decodeValue responseDecoder json of - Err err -> - HandleSearchError (Just err) +getQueryString : String -> String +getQueryString query = + -- See https://developer.github.com/v3/search/#example for how to customize! + "access_token=" + ++ Auth.token + ++ "&q=" + ++ query + ++ "+language:elm&sort=stars&order=desc" - Ok results -> - HandleSearchResponse results + +responseDecoder : Decoder (List SearchResult) +responseDecoder = + Json.Decode.at [ "items" ] (Json.Decode.list searchResultDecoder) + + +searchResultDecoder : Decoder SearchResult +searchResultDecoder = + decode SearchResult + |> required "id" Json.Decode.int + |> required "full_name" Json.Decode.string + |> required "stargazers_count" Json.Decode.int + + +type alias Model = + { query : String + , results : List SearchResult + , errorMessage : Maybe String + } + + +type alias SearchResult = + { id : Int + , name : String + , stars : Int + } + + +initialModel : Model +initialModel = + { query = "tutorial" + , results = [] + , errorMessage = Nothing + } + + +view : Model -> Html Msg +view model = + div [ class "content" ] + [ header [] + [ h1 [] [ text "ElmHub" ] + , span [ class "tagline" ] [ text "Like GitHub, but for Elm things." ] + ] + , input [ class "search-query", onInput SetQuery, defaultValue model.query ] [] + , button [ class "search-button", onClick Search ] [ text "Search" ] + , viewErrorMessage model.errorMessage + , ul [ class "results" ] (List.map viewSearchResult model.results) + ] + + +viewErrorMessage : Maybe String -> Html a +viewErrorMessage errorMessage = + case errorMessage of + Just message -> + div [ class "error" ] [ text message ] + + Nothing -> + text "" + + +viewSearchResult : SearchResult -> Html Msg +viewSearchResult result = + li [] + [ span [ class "star-count" ] [ text (toString result.stars) ] + , a [ href ("https://github.com/" ++ result.name), target "_blank" ] + [ text result.name ] + , button [ class "hide-result", onClick (DeleteById result.id) ] + [ text "X" ] + ] + + +update : Msg -> Model -> ( Model, Cmd Msg ) +update msg model = + case msg of + Search -> + ( model, githubSearch (getQueryString model.query) ) + + SetQuery query -> + ( { model | query = query }, Cmd.none ) + + HandleSearchResponse results -> + ( { model | results = results }, Cmd.none ) + + HandleSearchError error -> + ( { model | errorMessage = error }, Cmd.none ) + + DeleteById idToDelete -> + let + newResults = + model.results + |> List.filter (\{ id } -> id /= idToDelete) + + newModel = + { model | results = newResults } + in + ( newModel, Cmd.none ) + + +type Msg + = Search + | SetQuery String + | DeleteById Int + | HandleSearchResponse (List SearchResult) + | HandleSearchError (Maybe String) + + +decodeResponse : Value -> Msg +decodeResponse json = + -- TODO use decodeValue to decode the response into a Msg. + -- + -- Hint: look at the definition of Msg and + -- the definition of responseDecoder + HandleSearchError (Just "TODO decode the response!") port githubSearch : String -> Cmd msg -port githubResponse : (Json.Decode.Value -> msg) -> Sub msg +port githubResponse : (Value -> msg) -> Sub msg diff --git a/part8/README.md b/part8/README.md index e388cbe..268898f 100644 --- a/part8/README.md +++ b/part8/README.md @@ -1,4 +1,4 @@ -Part 8 +Part 7 ====== The instructor will paste notes from the lesson, including code examples from @@ -18,28 +18,3 @@ elm-package install ```bash elm-live Main.elm --open --output=elm.js ``` - -## Running Tests - -Do either (or both!) of the following: - -#### Running tests on the command line - -```bash -elm-test -``` - -#### Running tests in a browser - -```bash -cd tests -elm-reactor -``` - -Then visit [localhost:8000](http://localhost:8000) and choose `HtmlRunner.elm`. - -## References - -* [Using Elm packages](https://github.com/elm-lang/elm-package/blob/master/README.md#basic-usage) -* [elm-test documentation](http://package.elm-lang.org/packages/project-fuzzball/test/latest) -* [`(<|)` documentation](http://package.elm-lang.org/packages/elm-lang/core/4.0.0/Basics#<|) diff --git a/part8/index.html b/part8/index.html index a30f61e..0b7441a 100644 --- a/part8/index.html +++ b/part8/index.html @@ -26,11 +26,11 @@ github.getSearch(query).repositories({}, function (err, repositories) { console.log("Got response", repositories); - app.ports.githubResponse.send(repositories); + // TODO: app.ports.portNameGoesHere.send(repositories); }); } - app.ports.githubSearch.subscribe(searchGithub); + // TODO app.ports.portNameGoesHere.subscribe(searchGithub); diff --git a/part8/.gitignore b/part9/.gitignore similarity index 100% rename from part8/.gitignore rename to part9/.gitignore diff --git a/part8/ElmHub.elm b/part9/ElmHub.elm similarity index 100% rename from part8/ElmHub.elm rename to part9/ElmHub.elm diff --git a/part9/Main.elm b/part9/Main.elm new file mode 100644 index 0000000..6c8a8fe --- /dev/null +++ b/part9/Main.elm @@ -0,0 +1,31 @@ +port module Main exposing (..) + +import ElmHub exposing (..) +import Html.App as Html +import Json.Decode + + +main : Program Never +main = + Html.program + { view = view + , update = update githubSearch + , init = ( initialModel, githubSearch (getQueryString initialModel.query) ) + , subscriptions = \_ -> githubResponse decodeResponse + } + + +decodeResponse : Json.Decode.Value -> Msg +decodeResponse json = + case Json.Decode.decodeValue responseDecoder json of + Err err -> + HandleSearchError (Just err) + + Ok results -> + HandleSearchResponse results + + +port githubSearch : String -> Cmd msg + + +port githubResponse : (Json.Decode.Value -> msg) -> Sub msg diff --git a/part9/README.md b/part9/README.md new file mode 100644 index 0000000..e388cbe --- /dev/null +++ b/part9/README.md @@ -0,0 +1,45 @@ +Part 8 +====== + +The instructor will paste notes from the lesson, including code examples from +Q&A, in [this document](https://docs.google.com/document/d/1ApuSOk9DP0YsQrxhW7-WE8UOEAV4PPnLDDeqUOL2o5k/edit?usp=sharing). + +## Installation + +```bash +elm-package install +``` + +(Answer `y` when prompted.) + + +## Building + +```bash +elm-live Main.elm --open --output=elm.js +``` + +## Running Tests + +Do either (or both!) of the following: + +#### Running tests on the command line + +```bash +elm-test +``` + +#### Running tests in a browser + +```bash +cd tests +elm-reactor +``` + +Then visit [localhost:8000](http://localhost:8000) and choose `HtmlRunner.elm`. + +## References + +* [Using Elm packages](https://github.com/elm-lang/elm-package/blob/master/README.md#basic-usage) +* [elm-test documentation](http://package.elm-lang.org/packages/project-fuzzball/test/latest) +* [`(<|)` documentation](http://package.elm-lang.org/packages/elm-lang/core/4.0.0/Basics#<|) diff --git a/part11/elm-hub.png b/part9/elm-hub.png similarity index 100% rename from part11/elm-hub.png rename to part9/elm-hub.png diff --git a/part0/elm-package.json b/part9/elm-package.json similarity index 57% rename from part0/elm-package.json rename to part9/elm-package.json index cb15a2e..a9183a1 100644 --- a/part0/elm-package.json +++ b/part9/elm-package.json @@ -4,12 +4,15 @@ "repository": "https://github.com/rtfeldman/elm-workshop.git", "license": "BSD-3-Clause", "source-directories": [ - ".", ".." + ".", + ".." ], "exposed-modules": [], "dependencies": { - "elm-lang/core": "4.0.5 <= v < 5.0.0", - "elm-lang/html": "1.1.0 <= v < 2.0.0" + "NoRedInk/elm-decode-pipeline": "1.1.2 <= v < 2.0.0", + "elm-lang/core": "4.0.1 <= v < 5.0.0", + "elm-lang/html": "1.0.0 <= v < 2.0.0", + "evancz/elm-http": "3.0.1 <= v < 4.0.0" }, "elm-version": "0.17.0 <= v < 0.18.0" } diff --git a/part7/github.js b/part9/github.js similarity index 100% rename from part7/github.js rename to part9/github.js diff --git a/part9/index.html b/part9/index.html new file mode 100644 index 0000000..a30f61e --- /dev/null +++ b/part9/index.html @@ -0,0 +1,36 @@ + + + + + + ElmHub + + + + + + + +
+ + + + + diff --git a/part11/style.css b/part9/style.css similarity index 100% rename from part11/style.css rename to part9/style.css diff --git a/part8/tests/Auth.elm b/part9/tests/Auth.elm similarity index 100% rename from part8/tests/Auth.elm rename to part9/tests/Auth.elm diff --git a/part8/tests/HtmlRunner.elm b/part9/tests/HtmlRunner.elm similarity index 100% rename from part8/tests/HtmlRunner.elm rename to part9/tests/HtmlRunner.elm diff --git a/part8/tests/Main.elm b/part9/tests/Main.elm similarity index 100% rename from part8/tests/Main.elm rename to part9/tests/Main.elm diff --git a/part8/tests/Tests.elm b/part9/tests/Tests.elm similarity index 100% rename from part8/tests/Tests.elm rename to part9/tests/Tests.elm diff --git a/part8/tests/elm-package.json b/part9/tests/elm-package.json similarity index 100% rename from part8/tests/elm-package.json rename to part9/tests/elm-package.json