cerchez07/elm-0.19-workshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Revise tests

Browse Source 
Link to fuzz test docs and Fuzzer docs

Move part9 to be part12

Update part11

Update 12, and some other Mains

Rearrange things, drop 2 modules

Add a new part12

Fix READMEs

Move some things up a directory

Update part11

Use ! []

Update parts7-9

Fix part12g

Swap part11 and part12

Fix readmes for part11 and part12

Add HtmlRunner to part8

Update part8 and part9 READMEs

rm part10/test
This commit is contained in:
Richard Feldman
2016-06-26 01:00:27 -07:00
parent 00e641d186
commit b557ee0842
45 changed files with 481 additions and 883 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
part10/ElmHub.elm
View File

@@ -1,14 +1,15 @@
module ElmHub exposing (..)
import Html exposing (..)
import Html.Attributes exposing (class, target, href, property, defaultValue)
import Html.Attributes exposing (..)
import Html.Events exposing (..)
import Html.App
import Http
import Auth
import Task exposing (Task)
import Json.Decode exposing (Decoder)
import Dict exposing (Dict)
import SearchResult
import SearchResult exposing (ResultId)
searchFeed : String -> Cmd Msg
@@ -26,13 +27,13 @@ searchFeed query =
responseDecoder : Decoder (List SearchResult.Model)
responseDecoder =
-- TODO make use of SearchResult's decoder
Json.Decode.succeed []
Json.Decode.at [ "items" ] (Json.Decode.list SearchResult.decoder)
type alias Model =
{ query : String
, results : Dict SearchResult.ResultId SearchResult.Model
, results : Dict ResultId SearchResult.Model
, errorMessage : Maybe String
}
@@ -40,6 +41,7 @@ initialModel : Model
initialModel =
{ query = "tutorial"
, results = Dict.empty
, errorMessage = Nothing
}
@@ -52,23 +54,42 @@ view model =
]
, input [ class "search-query", onInput SetQuery, defaultValue model.query ] []
, button [ class "search-button", onClick Search ] [ text "Search" ]
, viewErrorMessage model.errorMessage
, ul [ class "results" ] (viewSearchResults model.results)
]
viewSearchResults : Dict SearchResult.ResultId SearchResult.Model -> List (Html a)
viewErrorMessage : Maybe String -> Html a
viewErrorMessage errorMessage =
case errorMessage of
Just message ->
div [ class "error" ] [ text message ]
Nothing ->
text ""
viewSearchResults : Dict ResultId SearchResult.Model -> List (Html Msg)
viewSearchResults results =
results
|> Dict.values
|> List.sortBy (.stars >> negate)
|> List.map (\_ -> div [] [ text "TODO replace this line with view logic from SearchResult" ])
|> List.map viewSearchResult
viewSearchResult : SearchResult.Model -> Html Msg
viewSearchResult result =
-- TODO call SearchResult.view to render a search result.
--
-- Hint: Use Html.App.map and UpdateSearchResult to translate from
-- SearchResult.Msg into the Msg type we have defined in this module.
div [] []
type Msg
= Search
| SetQuery String
| DeleteById SearchResult.ResultId
| SetResults (List SearchResult.Model)
| UpdateSearchResult ResultId SearchResult.Msg
| HandleSearchResponse (List SearchResult.Model)
| HandleSearchError Http.Error
@@ -77,24 +98,43 @@ update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
case msg of
Search ->
( model, searchFeed model.query )
model ! [ searchFeed model.query ]
SetQuery query ->
( { model | query = query }, Cmd.none )
{ model | query = query, errorMessage = Nothing } ! []
SetResults results ->
HandleSearchError error ->
case error of
Http.UnexpectedPayload str ->
{ model | errorMessage = Just str } ! []
_ ->
{ model | errorMessage = Just "Error loading search results" } ! []
HandleSearchResponse results ->
let
resultsById : Dict SearchResult.ResultId SearchResult.Model
resultsById : Dict ResultId SearchResult.Model
resultsById =
results
|> List.map (\result -> ( result.id, result ))
|> Dict.fromList
in
( { model | results = resultsById }, Cmd.none )
{ model | results = resultsById } ! []
DeleteById id ->
UpdateSearchResult id childMsg ->
case Dict.get id model.results of
Nothing ->
model ! []
Just childModel ->
let
newModel =
{ model | results = Dict.remove id model.results }
( newChildModel, childCmd ) =
SearchResult.update childMsg childModel
cmd =
Cmd.map (UpdateSearchResult id) childCmd
newResults =
Dict.insert id newChildModel model.results
in
( newModel, Cmd.none )
{ model | results = newResults } ! [ cmd ]

3
part10/Main.elm
View File

@@ -1,6 +1,7 @@
module Main exposing (..)
import ElmHub exposing (..)
import Html.App
main : Program Never
@@ -9,5 +10,5 @@ main =
{ view = view
, update = update
, init = ( initialModel, searchFeed initialModel.query )
, inputs = []
, subscriptions = \_ -> Sub.none
}

4
part10/README.md
View File

@@ -18,3 +18,7 @@ to fail; in that case, just run `elm-package install` again.)
```bash
elm-live Main.elm --open --output=elm.js
```
## References
* [Elm Architecture Tutorial](https://github.com/evancz/elm-architecture-tutorial)

49
part10/SearchResult.elm
View File

@@ -2,19 +2,26 @@ module SearchResult exposing (..)
import Html exposing (..)
import Html.Attributes exposing (class, target, href, property, defaultValue)
import Html.Events exposing (..)
import Json.Decode exposing (Decoder)
import Json.Decode.Pipeline exposing (..)
type alias Model =
{ id : Int
, name : String
, stars : Int
, expanded : Bool
}
type alias ResultId =
Int
type alias Model =
{ id : ResultId
, name : String
, stars : Int
}
type Msg
= Expand
| Collapse
decoder : Decoder Model
@@ -23,19 +30,29 @@ decoder =
|> required "id" Json.Decode.int
|> required "full_name" Json.Decode.string
|> required "stargazers_count" Json.Decode.int
|> hardcoded True
view : Model -> Html a
view result =
update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
-- TODO implement Expand and Collapse logic
model ! []
view : Model -> Html Msg
view model =
if model.expanded then
li []
[ span [ class "star-count" ] [ text (toString result.stars) ]
, a
[ href ("https://github.com/" ++ result.name)
, target "_blank"
]
[ text result.name ]
, button
-- TODO onClick, send a delete action to the address
[ class "hide-result" ]
[ span [ class "star-count" ] [ text (toString model.stars) ]
, a [ href ("https://github.com/" ++ model.name), target "_blank" ]
[ text model.name ]
-- TODO send a Collapse message on click
, button [ class "hide-result" ]
[ text "X" ]
]
else
li []
-- TODO send an Expand message on click
[ button [ class "expand-result" ]
[ text "Show" ]
]

9
part10/style.css
View File

@@ -90,12 +90,3 @@ a:hover {
button:focus, input:focus {
outline: none;
}
.error {
background-color: #FF9632;
padding: 20px;
box-sizing: border-box;
overflow-x: auto;
font-family: monospace;
font-size: 18px;
}

15
part10/test/TestRunner.elm
View File

@@ -1,15 +0,0 @@
module Main where
import Signal exposing (Signal)
import ElmTest exposing (consoleRunner)
import Console exposing (IO, run)
import Task
import Tests
console : IO ()
console = consoleRunner Tests.all
port runner : Signal (Task.Task x ())
port runner = run console

35
part10/test/Tests.elm
View File

@@ -1,35 +0,0 @@
module Tests (..) where
import ElmTest exposing (..)
import ElmHub exposing (responseDecoder)
import Json.Decode exposing (decodeString)
all : Test
all =
suite
"Decoding responses from GitHub"
[ test "they can decode empty responses"
<| let
emptyResponse =
"""{ "items": [] }"""
in
assertEqual
(decodeString responseDecoder emptyResponse)
(Ok [])
, test "they can decode responses with results in them"
<| let
response =
"""{ "items": [
{ "id": 5, "full_name": "foo", "stargazers_count": 42 },
{ "id": 3, "full_name": "bar", "stargazers_count": 77 }
] }"""
in
assertEqual
(decodeString responseDecoder response)
(Ok
[ { id = 5, name = "foo", stars = 42 }
, { id = 3, name = "bar", stars = 77 }
]
)
]

18
part10/test/elm-package.json
View File

@@ -1,18 +0,0 @@
{
"version": "1.0.0",
"summary": "Like GitHub, but for Elm stuff.",
"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-version": "0.17.0 <= v < 0.18.0"
}

74
part11/ElmHub.elm
View File

@@ -3,13 +3,13 @@ module ElmHub exposing (..)
import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (..)
import Html.App
import Http
import Auth
import Task exposing (Task)
import Json.Decode exposing (Decoder)
import Json.Encode
import Dict exposing (Dict)
import SearchResult
import SearchResult exposing (ResultId)
searchFeed : String -> Cmd Msg
@@ -27,12 +27,13 @@ searchFeed query =
responseDecoder : Decoder (List SearchResult.Model)
responseDecoder =
"items" := Json.Decode.list SearchResult.decoder
Json.Decode.at [ "items" ] (Json.Decode.list SearchResult.decoder)
type alias Model =
{ query : String
, results : Dict SearchResult.ResultId SearchResult.Model
, results : Dict ResultId SearchResult.Model
, errorMessage : Maybe String
}
@@ -40,6 +41,7 @@ initialModel : Model
initialModel =
{ query = "tutorial"
, results = Dict.empty
, errorMessage = Nothing
}
@@ -52,17 +54,28 @@ view model =
]
, input [ class "search-query", onInput SetQuery, defaultValue model.query ] []
, button [ class "search-button", onClick Search ] [ text "Search" ]
, viewErrorMessage model.errorMessage
, ul [ class "results" ] (viewSearchResults model.results)
]
viewSearchResults : Dict SearchResult.ResultId SearchResult.Model -> List (Html a)
viewErrorMessage : Maybe String -> Html a
viewErrorMessage errorMessage =
case errorMessage of
Just message ->
div [ class "error" ] [ text message ]
Nothing ->
text ""
viewSearchResults : Dict ResultId SearchResult.Model -> List (Html Msg)
viewSearchResults results =
results
|> Dict.values
|> List.sortBy (.stars >> negate)
|> filterResults
|> List.map (SearchResult.view address DeleteById)
|> List.map viewSearchResult
filterResults : List SearchResult.Model -> List SearchResult.Model
@@ -72,35 +85,62 @@ filterResults results =
results
viewSearchResult : SearchResult.Model -> Html Msg
viewSearchResult result =
result
|> SearchResult.view
|> Html.App.map (UpdateSearchResult result.id)
type Msg
= Search
| SetQuery String
| DeleteById SearchResult.ResultId
| SetResults (List SearchResult.Model)
| UpdateSearchResult ResultId SearchResult.Msg
| HandleSearchResponse (List SearchResult.Model)
| HandleSearchError Http.Error
update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
case msg of
Search ->
( model, searchFeed model.query )
model ! [ searchFeed model.query ]
SetQuery query ->
( { model | query = query }, Cmd.none )
{ model | query = query, errorMessage = Nothing } ! []
SetResults results ->
HandleSearchError error ->
case error of
Http.UnexpectedPayload str ->
{ model | errorMessage = Just str } ! []
_ ->
{ model | errorMessage = Just "Error loading search results" } ! []
HandleSearchResponse results ->
let
resultsById : Dict SearchResult.ResultId SearchResult.Model
resultsById : Dict ResultId SearchResult.Model
resultsById =
results
|> List.map (\result -> ( result.id, result ))
|> Dict.fromList
in
( { model | results = resultsById }, Cmd.none )
{ model | results = resultsById } ! []
DeleteById id ->
UpdateSearchResult id childMsg ->
case Dict.get id model.results of
Nothing ->
model ! []
Just childModel ->
let
newModel =
{ model | results = Dict.remove id model.results }
( newChildModel, childCmd ) =
SearchResult.update childMsg childModel
cmd =
Cmd.map (UpdateSearchResult id) childCmd
newResults =
Dict.insert id newChildModel model.results
in
( newModel, Cmd.none )
{ model | results = newResults } ! [ cmd ]

3
part11/Main.elm
View File

@@ -1,6 +1,7 @@
module Main exposing (..)
import ElmHub exposing (..)
import Html.App
main : Program Never
@@ -9,5 +10,5 @@ main =
{ view = view
, update = update
, init = ( initialModel, searchFeed initialModel.query )
, inputs = []
, subscriptions = \_ -> Sub.none
}

56
part11/SearchResult.elm
View File

@@ -1,45 +1,67 @@
module SearchResult exposing (..)
import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Attributes exposing (class, target, href, property, defaultValue)
import Html.Events exposing (..)
import Json.Decode exposing (Decoder)
import Dict exposing (Dict)
import Json.Decode.Pipeline exposing (..)
type alias Model =
{ id : Int
, name : String
, stars : Int
, expanded : Bool
}
type alias ResultId =
Int
type alias Model =
{ id : ResultId
, name : String
, stars : Int
}
type Msg
= Expand
| Collapse
decoder : Decoder Model
decoder =
Json.Decode.object3 Model
("id" := Json.Decode.int)
("full_name" := Json.Decode.string)
("stargazers_count" := Json.Decode.int)
decode Model
|> required "id" Json.Decode.int
|> required "full_name" Json.Decode.string
|> required "stargazers_count" Json.Decode.int
|> hardcoded True
view : Address a -> (Int -> a) -> Model -> Html
view address delete result =
update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
case msg of
Expand ->
{ model | expanded = True } ! []
Collapse ->
{ model | expanded = False } ! []
view : Model -> Html Msg
view model =
li []
[ span [ class "star-count" ] [ text (toString result.stars) ]
<| if model.expanded then
[ span [ class "star-count" ] [ text (toString model.stars) ]
, a
[ href
("https://github.com/"
++ (Debug.log "TODO we should not see this when typing in the search box!"
result.name
model.name
)
)
, target "_blank"
]
[ text result.name ]
, button [ class "hide-result", onClick (delete result.id) ]
[ text model.name ]
, button [ class "hide-result", onClick Collapse ]
[ text "X" ]
]
else
[ button [ class "expand-result", onClick Expand ]
[ text "Show" ]
]

78
part12/ElmHub.elm
View File

@@ -3,42 +3,37 @@ module ElmHub exposing (..)
import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (..)
import Html.Lazy exposing (..)
import Html.App
import Http
import Auth
import Task exposing (Task)
import Json.Decode exposing (Decoder)
import Json.Encode
import Dict exposing (Dict)
import SearchResult exposing (ResultId)
searchFeed : String -> Task x Msg
searchFeed : String -> Cmd Msg
searchFeed query =
let
-- See https://developer.github.com/v3/search/#example for how to customize!
url =
"https://api.github.com/search/repositories?access_token="
++ Auth.token
++ "&q="
++ query
++ "+language:elm&sort=stars&order=desc"
task =
Http.get responseDecoder url
|> Task.map SetResults
in
Task.onError task (\_ -> Task.succeed (SetResults []))
Task.perform HandleSearchError HandleSearchResponse (Http.get responseDecoder url)
responseDecoder : Decoder (List SearchResult.Model)
responseDecoder =
"items" := Json.Decode.list SearchResult.decoder
Json.Decode.at [ "items" ] (Json.Decode.list SearchResult.decoder)
type alias Model =
{ query : String
, results : Dict SearchResult.ResultId SearchResult.Model
, results : Dict ResultId SearchResult.Model
, errorMessage : Maybe String
}
@@ -46,6 +41,7 @@ initialModel : Model
initialModel =
{ query = "tutorial"
, results = Dict.empty
, errorMessage = Nothing
}
@@ -58,67 +54,85 @@ view model =
]
, input [ class "search-query", onInput SetQuery, defaultValue model.query ] []
, button [ class "search-button", onClick Search ] [ text "Search" ]
, viewErrorMessage model.errorMessage
, ul [ class "results" ] (viewSearchResults model.results)
]
viewSearchResults : Dict ResultId SearchResult.Model -> List Html
viewErrorMessage : Maybe String -> Html a
viewErrorMessage errorMessage =
case errorMessage of
Just message ->
div [ class "error" ] [ text message ]
Nothing ->
text ""
viewSearchResults : Dict ResultId SearchResult.Model -> List (Html Msg)
viewSearchResults results =
results
|> Dict.values
|> List.sortBy (.stars >> negate)
|> List.map (viewSearchResult address)
|> List.map viewSearchResult
viewSearchResult : SearchResult.Model -> Html Msg
viewSearchResult result =
SearchResult.view (Signal.forwardTo address (UpdateSearchResult result.id))
result
|> SearchResult.view
|> Html.App.map (UpdateSearchResult result.id)
type Msg
= Search
| SetQuery String
| SetResults (List SearchResult.Model)
| UpdateSearchResult ResultId SearchResult.Msg
| HandleSearchResponse (List SearchResult.Model)
| HandleSearchError Http.Error
update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
case msg of
Search ->
( model, searchFeed model.query )
model ! [ searchFeed model.query ]
SetQuery query ->
( { model | query = query }, Cmd.none )
{ model | query = query, errorMessage = Nothing } ! []
SetResults results ->
HandleSearchError error ->
case error of
Http.UnexpectedPayload str ->
{ model | errorMessage = Just str } ! []
_ ->
{ model | errorMessage = Just "Error loading search results" } ! []
HandleSearchResponse results ->
let
resultsById : Dict SearchResult.ResultId SearchResult.Model
resultsById : Dict ResultId SearchResult.Model
resultsById =
results
|> List.map (\result -> ( result.id, result ))
|> Dict.fromList
in
( { model | results = resultsById }, Cmd.none )
{ model | results = resultsById } ! []
UpdateSearchResult id childMsg ->
let
updated =
model.results
|> Dict.get id
|> Maybe.map (SearchResult.update childMsg)
in
case updated of
case Dict.get id model.results of
Nothing ->
( model, Cmd.none )
model ! []
Just ( newChildModel, childEffects ) ->
Just childModel ->
let
effects =
Effects.map (UpdateSearchResult id) childEffects
( newChildModel, childCmd ) =
SearchResult.update childMsg childModel
cmd =
Cmd.map (UpdateSearchResult id) childCmd
newResults =
Dict.insert id newChildModel model.results
in
( { model | results = newResults }, effects )
{ model | results = newResults } ! [ cmd ]

0
part13/ElmHub/Css.elm → part12/ElmHub/Css.elm
View File

3
part12/Main.elm
View File

@@ -1,6 +1,7 @@
module Main exposing (..)
import ElmHub exposing (..)
import Html.App
main : Program Never
@@ -9,5 +10,5 @@ main =
{ view = view
, update = update
, init = ( initialModel, searchFeed initialModel.query )
, inputs = []
, subscriptions = \_ -> Sub.none
}

8
part12/README.md
View File

@@ -19,6 +19,12 @@ to fail; in that case, just run `elm-package install` again.)
elm-live Main.elm --open --output=elm.js
```
## Compiling CSS
```bash
elm css Stylesheets.elm
```
## References
* [Elm Architecture Tutorial](https://github.com/evancz/elm-architecture-tutorial)
* [Elm CSS documentation](http://package.elm-lang.org/packages/rtfeldman/elm-css/1.1.0/)

20
part12/SearchResult.elm
View File

@@ -35,25 +35,25 @@ decoder =
update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
-- TODO implement Expand and Collapse logic
( model, Cmd.none )
case msg of
Expand ->
{ model | expanded = True } ! []
Collapse ->
{ model | expanded = False } ! []
view : Model -> Html Msg
view model =
li [] <|
if model.expanded then
li []
<| if model.expanded then
[ span [ class "star-count" ] [ text (toString model.stars) ]
, a [ href ("https://github.com/" ++ model.name), target "_blank" ]
[ text model.name ]
, button
-- TODO when the user clicks, send a Collapse action
[ class "hide-result" ]
, button [ class "hide-result", onClick Collapse ]
[ text "X" ]
]
else
[ button
-- TODO when the user clicks, send an Expand action
[ class "expand-result" ]
[ button [ class "expand-result", onClick Expand ]
[ text "Show" ]
]

0
part13/Stylesheets.elm → part12/Stylesheets.elm
View File

3
part12/elm-package.json
View File

@@ -12,7 +12,8 @@
"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"
"evancz/elm-http": "3.0.1 <= v < 4.0.0",
"rtfeldman/elm-css": "3.1.0 <= v < 4.0.0"
},
"elm-version": "0.17.0 <= v < 0.18.0"
}

86
part12/style.css
View File

@@ -1,92 +1,6 @@
.content {
width: 960px;
margin: 0 auto;
padding: 30px;
font-family: Helvetica, Arial, serif;
}
header {
position: relative;
padding: 6px 12px;
height: 36px;
background-color: rgb(96, 181, 204);
}
h1 {
color: white;
font-weight: normal;
margin: 0;
}
.tagline {
color: #eee;
position: absolute;
right: 16px;
top: 12px;
font-size: 24px;
font-style: italic;
}
.results {
list-style-image: url('http://img-cache.cdn.gaiaonline.com/76bd5c99d8f2236e9d3672510e933fdf/http://i278.photobucket.com/albums/kk81/d3m3nt3dpr3p/Tiny-Star-Icon.png');
list-style-position: inside;
padding: 0;
}
.results li {
font-size: 18px;
margin-bottom: 16px;
}
.star-count {
font-weight: bold;
margin-right: 16px;
}
a {
color: rgb(96, 181, 204);
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.search-query {
padding: 8px;
font-size: 24px;
margin-bottom: 18px;
margin-top: 36px;
}
.search-button {
padding: 8px 16px;
font-size: 24px;
color: white;
border: 1px solid #ccc;
background-color: rgb(96, 181, 204);
margin-left: 12px
}
.search-button:hover {
color: rgb(96, 181, 204);
background-color: white;
}
.hide-result {
background-color: transparent;
border: 0;
font-weight: bold;
font-size: 18px;
margin-left: 18px;
cursor: pointer;
}
.hide-result:hover {
color: rgb(96, 181, 204);
}
button:focus, input:focus {
outline: none;
}

1
part12/test/elm-package.json
View File

@@ -12,6 +12,7 @@
"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",
"rtfeldman/elm-css": "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"

124
part13/ElmHub.elm
View File

@@ -1,124 +0,0 @@
module ElmHub exposing (..)
import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (..)
import Html.Lazy exposing (..)
import Http
import Auth
import Task exposing (Task)
import Json.Decode exposing (Decoder)
import Json.Encode
import Dict exposing (Dict)
import SearchResult exposing (ResultId)
searchFeed : String -> Task x Msg
searchFeed query =
let
-- See https://developer.github.com/v3/search/#example for how to customize!
url =
"https://api.github.com/search/repositories?access_token="
++ Auth.token
++ "&q="
++ query
++ "+language:elm&sort=stars&order=desc"
task =
Http.get responseDecoder url
|> Task.map SetResults
in
Task.onError task (\_ -> Task.succeed (SetResults []))
responseDecoder : Decoder (List SearchResult.Model)
responseDecoder =
"items" := Json.Decode.list SearchResult.decoder
type alias Model =
{ query : String
, results : Dict SearchResult.ResultId SearchResult.Model
}
initialModel : Model
initialModel =
{ query = "tutorial"
, results = Dict.empty
}
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" ]
, ul [ class "results" ] (viewSearchResults model.results)
]
viewSearchResults : Dict ResultId SearchResult.Model -> List Html
viewSearchResults results =
results
|> Dict.values
|> List.sortBy (.stars >> negate)
|> List.map (viewSearchResult address)
viewSearchResult : Address Action -> SearchResult.Model -> Html
viewSearchResult result =
SearchResult.view (Signal.forwardTo address (UpdateSearchResult result.id))
result
type Msg
= Search
| SetQuery String
| SetResults (List SearchResult.Model)
| UpdateSearchResult ResultId SearchResult.Action
update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
case msg of
Search ->
( model, searchFeed model.query )
SetQuery query ->
( { model | query = query }, Cmd.none )
SetResults results ->
let
resultsById : Dict SearchResult.ResultId SearchResult.Model
resultsById =
results
|> List.map (\result -> ( result.id, result ))
|> Dict.fromList
in
( { model | results = resultsById }, Cmd.none )
UpdateSearchResult id childAction ->
let
updated =
model.results
|> Dict.get id
|> Maybe.map (SearchResult.update childAction)
in
case updated of
Nothing ->
( model, Cmd.none )
Just ( newChildModel, childEffects ) ->
let
effects =
Effects.map (UpdateSearchResult id) childEffects
newResults =
Dict.insert id newChildModel model.results
in
( { model | results = newResults }, effects )

13
part13/Main.elm
View File

@@ -1,13 +0,0 @@
module Main exposing (..)
import ElmHub exposing (..)
main : Program Never
main =
Html.App.program
{ view = view
, update = update
, init = ( initialModel, searchFeed initialModel.query )
, inputs = []
}

30
part13/README.md
View File

@@ -1,30 +0,0 @@
Part 13
=======
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` at the prompt. In rare cases a known issue can cause the download
to fail; in that case, just run `elm-package install` again.)
## Building
```bash
elm-live Main.elm --open --output=elm.js
```
## Compiling CSS
```bash
elm css Stylesheets.elm
```
## References
* [Elm CSS documentation](http://package.elm-lang.org/packages/rtfeldman/elm-css/1.1.0/)

59
part13/SearchResult.elm
View File

@@ -1,59 +0,0 @@
module SearchResult exposing (..)
import Html exposing (..)
import Html.Attributes exposing (class, target, href, property, defaultValue)
import Html.Events exposing (..)
import Json.Decode exposing (Decoder)
import Json.Decode.Pipeline exposing (..)
type alias Model =
{ id : Int
, name : String
, stars : Int
, expanded : Bool
}
type alias ResultId =
Int
type Msg
= Expand
| Collapse
decoder : Decoder Model
decoder =
decode Model
|> required "id" Json.Decode.int
|> required "full_name" Json.Decode.string
|> required "stargazers_count" Json.Decode.int
|> hardcoded True
update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
case msg of
Expand ->
( { model | expanded = True }, Cmd.none )
Collapse ->
( { model | expanded = False }, Cmd.none )
view : Model -> Html Msg
view model =
li []
<| if model.expanded then
[ span [ class "star-count" ] [ text (toString model.stars) ]
, a [ href ("https://github.com/" ++ model.name), target "_blank" ]
[ text model.name ]
, button [ class "hide-result", onClick Collapse ]
[ text "X" ]
]
else
[ button [ class "expand-result", onClick Expand ]
[ text "Show" ]
]

19
part13/asdf/elm-package.json
View File

@@ -1,19 +0,0 @@
{
"version": "1.0.0",
"summary": "Like GitHub, but for Elm stuff.",
"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",
"rtfeldman/elm-css": "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"
}

101
part13/asdf/style.css
View File

@@ -1,101 +0,0 @@
.content {
width: 960px;
margin: 0 auto;
padding: 30px;
font-family: Helvetica, Arial, serif;
}
header {
position: relative;
padding: 6px 12px;
height: 36px;
background-color: rgb(96, 181, 204);
}
h1 {
color: white;
font-weight: normal;
margin: 0;
}
.tagline {
color: #eee;
position: absolute;
right: 16px;
top: 12px;
font-size: 24px;
font-style: italic;
}
.results {
list-style-image: url('http://img-cache.cdn.gaiaonline.com/76bd5c99d8f2236e9d3672510e933fdf/http://i278.photobucket.com/albums/kk81/d3m3nt3dpr3p/Tiny-Star-Icon.png');
list-style-position: inside;
padding: 0;
}
.results li {
font-size: 18px;
margin-bottom: 16px;
}
.star-count {
font-weight: bold;
margin-right: 16px;
}
a {
color: rgb(96, 181, 204);
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.search-query {
padding: 8px;
font-size: 24px;
margin-bottom: 18px;
margin-top: 36px;
}
.search-button {
padding: 8px 16px;
font-size: 24px;
color: white;
border: 1px solid #ccc;
background-color: rgb(96, 181, 204);
margin-left: 12px
}
.search-button:hover {
color: rgb(96, 181, 204);
background-color: white;
}
.hide-result {
background-color: transparent;
border: 0;
font-weight: bold;
font-size: 18px;
margin-left: 18px;
cursor: pointer;
}
.hide-result:hover {
color: rgb(96, 181, 204);
}
button:focus, input:focus {
outline: none;
}
.error {
background-color: #FF9632;
padding: 20px;
box-sizing: border-box;
overflow-x: auto;
font-family: monospace;
font-size: 18px;
}

BIN
part13/elm-hub.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.1 KiB

19
part13/elm-package.json
View File

@@ -1,19 +0,0 @@
{
"version": "1.0.0",
"summary": "Like GitHub, but for Elm stuff.",
"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",
"rtfeldman/elm-css": "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"
}

20
part13/index.html
View File

@@ -1,20 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>ElmHub</title>
<script type="text/javascript" src="elm.js"></script>
<link rel="stylesheet" href="style.css">
<link rel="icon" type="image/png" href="elm-hub.png">
</head>
<body>
</body>
<script type="text/javascript">
var app = Elm.Main.fullscreen();
</script>
</html>

6
part13/style.css
View File

@@ -1,6 +0,0 @@
.content {
width: 960px;
margin: 0 auto;
padding: 30px;
font-family: Helvetica, Arial, serif;
}

15
part13/test/TestRunner.elm
View File

@@ -1,15 +0,0 @@
module Main where
import Signal exposing (Signal)
import ElmTest exposing (consoleRunner)
import Console exposing (IO, run)
import Task
import Tests
console : IO ()
console = consoleRunner Tests.all
port runner : Signal (Task.Task x ())
port runner = run console

35
part13/test/Tests.elm
View File

@@ -1,35 +0,0 @@
module Tests (..) where
import ElmTest exposing (..)
import ElmHub exposing (responseDecoder)
import Json.Decode exposing (decodeString)
all : Test
all =
suite
"Decoding responses from GitHub"
[ test "they can decode empty responses"
<| let
emptyResponse =
"""{ "items": [] }"""
in
assertEqual
(decodeString responseDecoder emptyResponse)
(Ok [])
, test "they can decode responses with results in them"
<| let
response =
"""{ "items": [
{ "id": 5, "full_name": "foo", "stargazers_count": 42 },
{ "id": 3, "full_name": "bar", "stargazers_count": 77 }
] }"""
in
assertEqual
(decodeString responseDecoder response)
(Ok
[ { id = 5, name = "foo", stars = 42 }
, { id = 3, name = "bar", stars = 77 }
]
)
]

19
part13/test/elm-package.json
View File

@@ -1,19 +0,0 @@
{
"version": "1.0.0",
"summary": "Like GitHub, but for Elm stuff.",
"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",
"rtfeldman/elm-css": "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"
}

29
part7/ElmHub.elm
View File

@@ -6,7 +6,6 @@ import Html.Events exposing (..)
import Auth
import Json.Decode exposing (Decoder)
import Json.Decode.Pipeline exposing (..)
import Json.Encode
getQueryString : String -> String
@@ -97,9 +96,8 @@ type Msg
= Search
| SetQuery String
| DeleteById ResultId
| SetResults (List SearchResult)
| SetErrorMessage (Maybe String)
| DoNothing
| HandleSearchResponse (List SearchResult)
| HandleSearchError (Maybe String)
update : (String -> Cmd Msg) -> Msg -> Model -> ( Model, Cmd Msg )
@@ -111,31 +109,28 @@ update searchFeed msg model =
SetQuery query ->
( { model | query = query }, Cmd.none )
SetResults results ->
HandleSearchResponse results ->
( { model | results = results }, Cmd.none )
SetErrorMessage errorMessage ->
( { model | errorMessage = errorMessage }, Cmd.none )
HandleSearchError error ->
( { model | errorMessage = error }, Cmd.none )
DeleteById idToHide ->
DeleteById idToDelete ->
let
newResults =
model.results
|> List.filter (\{ id } -> id /= idToHide)
|> List.filter (\{ id } -> id /= idToDelete)
newModel =
{ model | results = newResults }
in
( newModel, Cmd.none )
DoNothing ->
( model, Cmd.none )
decodeGithubResponse : Json.Encode.Value -> Msg
decodeGithubResponse : Json.Decode.Value -> Msg
decodeGithubResponse value =
-- TODO use Json.Decode.DecodeValue to decode the response into an Action.
-- TODO use Json.Decode.DecodeValue to decode the response into a Msg.
--
-- Hint: look at ElmHub.elm, specifically the definition of Action and
-- the deefinition of responseDecoder
SetErrorMessage (Just "TODO decode the response!")
-- Hint: look at the definition of Msg and
-- the definition of responseDecoder
HandleSearchError (Just "TODO decode the response!")

4
part7/Main.elm
View File

@@ -19,10 +19,10 @@ decodeResponse : Json.Decode.Value -> Msg
decodeResponse json =
case Json.Decode.decodeValue responseDecoder json of
Err err ->
SetErrorMessage (Just err)
HandleSearchError (Just err)
Ok results ->
SetResults results
HandleSearchResponse results
port githubSearch : String -> Cmd msg

24
part8/ElmHub.elm
View File

@@ -6,7 +6,6 @@ import Html.Events exposing (..)
import Auth
import Json.Decode exposing (Decoder)
import Json.Decode.Pipeline exposing (..)
import Json.Encode
getQueryString : String -> String
@@ -97,8 +96,8 @@ type Msg
= Search
| SetQuery String
| DeleteById ResultId
| SetResults (List SearchResult)
| SetErrorMessage (Maybe String)
| HandleSearchResponse (List SearchResult)
| HandleSearchError (Maybe String)
| DoNothing
@@ -111,11 +110,11 @@ update searchFeed msg model =
SetQuery query ->
( { model | query = query }, Cmd.none )
SetResults results ->
HandleSearchResponse results ->
( { model | results = results }, Cmd.none )
SetErrorMessage errorMessage ->
( { model | errorMessage = errorMessage }, Cmd.none )
HandleSearchError error ->
( { model | errorMessage = error }, Cmd.none )
DeleteById idToHide ->
let
@@ -132,10 +131,11 @@ update searchFeed msg model =
( model, Cmd.none )
decodeGithubResponse : Json.Encode.Value -> Msg
decodeGithubResponse : Json.Decode.Value -> Msg
decodeGithubResponse value =
-- TODO use Json.Decode.DecodeValue to decode the response into an Action.
--
-- Hint: look at ElmHub.elm, specifically the definition of Action and
-- the deefinition of responseDecoder
SetErrorMessage (Just "TODO decode the response!")
case Json.Decode.decodeValue responseDecoder value of
Ok results ->
HandleSearchResponse results
Err err ->
HandleSearchError (Just err)

4
part8/Main.elm
View File

@@ -19,10 +19,10 @@ decodeResponse : Json.Decode.Value -> Msg
decodeResponse json =
case Json.Decode.decodeValue responseDecoder json of
Err err ->
SetErrorMessage (Just err)
HandleSearchError (Just err)
Ok results ->
SetResults results
HandleSearchResponse results
port githubSearch : String -> Cmd msg

19
part8/README.md
View File

@@ -21,12 +21,29 @@ elm-live Main.elm --open --output=elm.js
## Running Tests
First do this:
```bash
cd test
elm-package install
elm-test Test.elm
```
Then do either (or both!) of the following:
#### Running tests on the command line
```bash
elm-test NodeRunner.elm
```
#### Running tests in a browser
```bash
elm-reactor
```
Then visit [localhost:8000](http://localhost:8000) and choose `Html.elm`.
## References
* [Using Elm packages](https://github.com/elm-lang/elm-package/blob/master/README.md#basic-usage)

16
part8/test/HtmlRunner.elm Normal file
View File

@@ -0,0 +1,16 @@
module HtmlRunner exposing (..)
import Tests
import Test.Runner.Html as Runner
-- To run this:
--
-- cd into part8/test
-- elm-reactor
-- navigate to HtmlRunner.elm
main : Program Never
main =
Runner.run Tests.all

19
part8/test/NodeRunner.elm Normal file
View File

@@ -0,0 +1,19 @@
port module Main exposing (..)
import Tests
import Test.Runner.Node as Runner
import Json.Decode exposing (Value)
-- To run this:
--
-- cd into part8/test
-- elm-test NodeRunner.elm
main : Program Never
main =
Runner.run emit Tests.all
port emit : ( String, Value ) -> Cmd msg

85
part8/test/Tests.elm
View File

@@ -1,55 +1,70 @@
port module Main exposing (..)
module Tests exposing (..)
import Test exposing (..)
import Fuzz exposing (..)
import Expect exposing (Expectation)
import ElmHub exposing (responseDecoder)
import Json.Decode exposing (decodeString, Value)
import Test.Runner.Node as Runner
import String
main : Program Never
main =
describe "Decoding responses from GitHub"
[ test "they can decode empty responses"
all : Test
all =
describe "GitHub Response Decoder"
[ test "it results in an Err for invalid JSON"
<| \() ->
let
emptyResponse =
"""{ "items": [] }"""
in
Expect.equal (Ok [])
(decodeString responseDecoder emptyResponse)
, test "they can decode responses with results in them"
<| \() ->
let
response =
"""{ "items": [
/* TODO: dummy JSON goes here */
] }"""
in
Expect.equal
(Ok
[ { id = 5, name = "foo", stars = 42 }
, { id = 3, name = "bar", stars = 77 }
]
)
(decodeString responseDecoder response)
, test "they result in an error for invalid JSON"
<| \() ->
let
response =
json =
"""{ "pizza": [] }"""
isErrorResult result =
-- TODO return True if the given Result is an Err of some sort,
-- and False if it is an Ok of some sort.
--
-- Result docs: http://package.elm-lang.org/packages/elm-lang/core/3.0.0/Result
-- Result docs: http://package.elm-lang.org/packages/elm-lang/core/4.0.1/Result
False
in
Expect.true "Expected decoding an invalid response to return an Err."
(isErrorResult (decodeString responseDecoder response))
json
|> decodeString responseDecoder
|> isErrorResult
|> Expect.true "Expected decoding an invalid response to return an Err."
, test "it successfully decodes a valid response"
<| \() ->
"""{ "items": [
/* TODO: put JSON here! */
] }"""
|> decodeString responseDecoder
|> Expect.equal
(Ok
[ { id = 5, name = "foo", stars = 42 }
, { id = 3, name = "bar", stars = 77 }
]
|> Runner.run emit
)
, test "it decodes one SearchResult for each 'item' in the JSON"
<| \() ->
let
-- TODO convert this to a fuzz test that generates a random
-- list of ids instead of this hardcoded list of three ids.
--
-- fuzz test docs: http://package.elm-lang.org/packages/project-fuzzball/test/2.0.1/Test#fuzz
-- Fuzzer docs: http://package.elm-lang.org/packages/project-fuzzball/test/2.0.1/Fuzz
ids =
[ 12, 5, 76 ]
jsonFromId id =
"""{"id": """ ++ toString id ++ """, "full_name": "foo", "stargazers_count": 42}"""
port emit : ( String, Value ) -> Cmd msg
jsonItems =
String.join ", " (List.map jsonFromId ids)
json =
"""{ "items": [""" ++ jsonItems ++ """] }"""
in
case decodeString responseDecoder json of
Ok results ->
List.length results
|> Expect.equal (List.length ids)
Err err ->
Expect.fail ("JSON decoding failed unexpectedly: " ++ err)
]

7
part8/test/elm-package.json
View File

@@ -9,12 +9,13 @@
],
"exposed-modules": [],
"dependencies": {
"project-fuzzball/test": "2.0.1 <= v < 3.0.0",
"project-fuzzball/node": "1.0.2 <= 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"
"evancz/elm-http": "3.0.1 <= v < 4.0.0",
"project-fuzzball/node": "1.0.2 <= v < 2.0.0",
"project-fuzzball/test": "1.0.1 <= v < 2.0.0",
"project-fuzzball/test-runner": "1.0.1 <= v < 2.0.0"
},
"elm-version": "0.17.0 <= v < 0.18.0"
}

42
part9/ElmHub.elm
View File

@@ -7,16 +7,21 @@ import Auth
import Json.Decode exposing (Decoder)
import Json.Decode.Pipeline exposing (..)
import Dict exposing (Dict)
import Http
import Task
getQueryUrl : String -> String
getQueryUrl query =
-- See https://developer.github.com/v3/search/#example for how to customize!
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"
in
Task.perform HandleSearchError HandleSearchResponse (Http.get responseDecoder url)
responseDecoder : Decoder (List SearchResult)
@@ -92,35 +97,40 @@ type Msg
= Search
| SetQuery String
| DeleteById ResultId
| SetResults (List SearchResult)
| SetErrorMessage (Maybe String)
| HandleSearchResponse (List SearchResult)
| HandleSearchError Http.Error
| DoNothing
update : (String -> Cmd Msg) -> Msg -> Model -> ( Model, Cmd Msg )
update searchFeed msg model =
update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
case msg of
Search ->
( model, searchFeed (getQueryUrl model.query) )
model ! [ searchFeed model.query ]
SetQuery query ->
( { model | query = query }, Cmd.none )
{ model | query = query } ! []
SetResults results ->
HandleSearchError error ->
case error of
Http.UnexpectedPayload str ->
{ model | errorMessage = Just str } ! []
_ ->
{ model | errorMessage = Just "Error loading search results" } ! []
HandleSearchResponse results ->
let
resultsById : Dict ResultId SearchResult
resultsById =
-- TODO convert results list into a Dict
Dict.empty
in
( { model | results = resultsById }, Cmd.none )
{ model | results = resultsById } ! []
DeleteById id ->
-- TODO delete the result with the given id
( model, Cmd.none )
SetErrorMessage errorMessage ->
( { model | errorMessage = errorMessage }, Cmd.none )
model ! []
DoNothing ->
( model, Cmd.none )
model ! []

25
part9/Main.elm
View File

@@ -1,31 +1,14 @@
port module Main exposing (..)
module Main exposing (..)
import ElmHub exposing (..)
import Html.App
import Json.Decode exposing (Value)
main : Program Never
main =
Html.App.program
{ view = view
, update = update githubSearch
, init = ( initialModel, githubSearch (getQueryUrl initialModel.query) )
, subscriptions = \_ -> githubResponse decodeResponse
, update = update
, init = ( initialModel, searchFeed initialModel.query )
, subscriptions = \_ -> Sub.none
}
decodeResponse : Json.Decode.Value -> Msg
decodeResponse json =
case Json.Decode.decodeValue responseDecoder json of
Err err ->
SetErrorMessage (Just err)
Ok results ->
SetResults results
port githubSearch : String -> Cmd msg
port githubResponse : (Json.Decode.Value -> msg) -> Sub msg

19
part9/README.md
View File

@@ -21,8 +21,25 @@ elm-live Main.elm --open --output=elm.js
## Running Tests
First do this:
```bash
cd test
elm-package install
elm-test Test.elm
```
Then do either (or both!) of the following:
#### Running tests on the command line
```bash
elm-test NodeRunner.elm
```
#### Running tests in a browser
```bash
elm-reactor
```
Then visit [localhost:8000](http://localhost:8000) and choose `Html.elm`.