JSON Fetch and Filtering

Main.elm

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)
        }