JSON Fetch and Filtering
module Main exposing (..) | |
import Html exposing (Html, div, button, text, img, br, p) | |
import Html.Attributes exposing (src, width) | |
import Html.Events exposing (onClick) | |
import Html.App | |
import Http | |
import Task exposing (Task) | |
import Json.Decode as Decode exposing (Decoder(..), string, (:=), succeed, list) | |
import Extra exposing ((|:)) | |
-- MODEL | |
type alias Model = | |
{ allTips : List Tip | |
, category : Category | |
, filteredTips : List Tip | |
} | |
init : ( Model, Cmd Msg ) | |
init = | |
( { allTips = [], category = "all", filteredTips = [] }, fetchCmd ) | |
-- MESSAGES | |
type Msg | |
= Fetch | |
| FetchSuccess (List Tip) | |
| FetchError Http.Error | |
| CategoryFilter Category | |
type alias Tip = | |
{ title : String | |
, date : String | |
, tags : String | |
, image : String | |
, thumbnail : String | |
} | |
type alias Category = | |
String | |
type alias Tips = | |
List Tip | |
-- VIEW | |
view : Model -> Html Msg | |
view model = | |
div [] | |
[ button [ onClick (CategoryFilter "all") ] | |
[ text "All" ] | |
, button [ onClick (CategoryFilter "food") ] | |
[ text "Food" ] | |
, button [ onClick (CategoryFilter "computers") ] | |
[ text "Computers" ] | |
, button [ onClick (CategoryFilter "music") ] | |
[ text "Music" ] | |
, button [ onClick (CategoryFilter "life") ] | |
[ text "Life" ] | |
, div | |
[] | |
(List.map | |
(\x -> | |
div [] | |
[ text x.title | |
, p [] [] | |
, img [ src x.thumbnail, width 150 ] [] | |
] | |
) | |
model.filteredTips | |
) | |
] | |
decodeTip : Decode.Decoder Tip | |
decodeTip = | |
Decode.succeed Tip | |
|: ("title" := string) | |
|: ("date" := string) | |
|: ("tags" := string) | |
|: ("image" := string) | |
|: ("thumbnail" := string) | |
decode : Decode.Decoder (List Tip) | |
decode = | |
Decode.list decodeTip | |
url : String | |
url = | |
"https://api.myjson.com/bins/498wk" | |
fetchTask : Task Http.Error (List Tip) | |
fetchTask = | |
Http.get decode url | |
fetchCmd : Cmd Msg | |
fetchCmd = | |
Task.perform FetchError FetchSuccess fetchTask | |
filterTips : Tips -> Category -> Tips | |
filterTips tips category = | |
case category of | |
"all" -> | |
tips | |
_ -> | |
(List.filter (\x -> (x.tags == category)) tips) | |
-- UPDATE | |
update : Msg -> Model -> ( Model, Cmd Msg ) | |
update msg model = | |
case msg of | |
Fetch -> | |
( model, fetchCmd ) | |
FetchSuccess tips -> | |
( { allTips = tips, filteredTips = tips, category = "" }, Cmd.none ) | |
FetchError error -> | |
( { allTips = [], filteredTips = [], category = "Error" }, Cmd.none ) | |
CategoryFilter category -> | |
( { allTips = model.allTips, filteredTips = (filterTips model.allTips category), category = category }, Cmd.none ) | |
-- MAIN | |
main : Program Never | |
main = | |
Html.App.program | |
{ init = init | |
, view = view | |
, update = update | |
, subscriptions = (always Sub.none) | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment