Chain Html.App.map Error - Start from WidgetList.elm

elm-package.json

{
    "version": "1.0.0",
    "summary": "helpful summary of your project, less than 80 characters",
    "repository": "https://github.com/user/project.git",
    "license": "BSD3",
    "source-directories": [
        "."
    ],
    "exposed-modules": [],
    "dependencies": {
        "elm-lang/core": "4.0.0 <= 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"
}

RandomGif.elm

module RandomGif exposing (..)

import Html exposing (..)
import Html.Attributes exposing (style)
import Html.Events exposing (onClick)
import Http
import Json.Decode as Json
import Task


-- MODEL

type alias Model =
    { topic : String
    , gifUrl : String
    }


init : String -> (Model, Cmd Msg)
init topic =
  ( Model topic "waiting.gif"
  , getRandomGif topic
  )


-- UPDATE

type Msg
  = MorePlease
  | FetchSucceed String
  | FetchFail


update : Msg -> Model -> (Model, Cmd Msg)
update msg model =
  case msg of
    MorePlease ->
      (model, getRandomGif model.topic)

    FetchSucceed newUrl ->
      (Model model.topic newUrl, Cmd.none)

    FetchFail ->
      (model, Cmd.none)

-- VIEW

(=>) = (,)


view : Model -> Html Msg
view model =
  div [ style [ "width" => "200px" ] ]
    [ h2 [headerStyle] [text model.topic]
    , div [imgStyle model.gifUrl] []
    , button [ onClick MorePlease ] [ text "More Please!" ]
    ]


headerStyle : Attribute Msg
headerStyle =
  style
    [ "width" => "200px"
    , "text-align" => "center"
    ]


imgStyle : String -> Attribute Msg
imgStyle url =
  style
    [ "display" => "inline-block"
    , "width" => "200px"
    , "height" => "200px"
    , "background-position" => "center center"
    , "background-size" => "cover"
    , "background-image" => ("url('" ++ url ++ "')")
    ]


-- EFFECTS

getRandomGif : String -> Cmd Msg
getRandomGif topic =
  let
    url =
      "http://api.giphy.com/v1/gifs/random?api_key=dc6zaTOxFJmzC&tag=" ++ topic
  in
    Http.get decodeGifUrl url
    |> Task.perform (\_ -> FetchFail) FetchSucceed

decodeGifUrl : Json.Decoder String
decodeGifUrl =
  Json.at ["data", "image_url"] Json.string

Widget.elm

module Widget exposing (..)

import RandomGif
import Html.App as App
import Html exposing (..)


type WidgetType
    = RandomGifType


type Model
    = AGif RandomGif.Model


initGif topic =
    let
        ( gifMdl, cmd ) =
            RandomGif.init topic
    in
        AGif gifMdl ! [ Cmd.map AGifMsg cmd ]


type Msg
    = AGifMsg RandomGif.Msg


update msg model =
    case ( msg, model ) of
        ( AGifMsg m, AGif mdl ) ->
            let
                ( newMdl, cmd ) =
                    RandomGif.update m mdl
            in
                AGif newMdl ! [ Cmd.map AGifMsg cmd ]


view : Model -> Html Msg
view model =
    case model of
        AGif mdl ->
            App.map AGifMsg (RandomGif.view mdl)

WidgetList.elm

module WidgetList exposing (..)

import Html.App as App
import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (..)
import Json.Decode as Json
import Widget


-- MODEL


type alias Model =
    { topic : String
    , gifList : List ( Int, Widget.Model )
    , uid : Int
    }


init : ( Model, Cmd Msg )
init =
    ( Model "" [] 0
    , Cmd.none
    )



-- UPDATE


type Msg
    = Topic String
    | Create Widget.WidgetType
    | SubMsg Int Widget.Msg


update : Msg -> Model -> ( Model, Cmd Msg )
update message model =
    case (Debug.log "msg" message) of
        Topic topic ->
            ( { model | topic = topic }
            , Cmd.none
            )

        Create widgetType ->
            let
                ( newWidget, fx ) =
                    case widgetType of
                        Widget.RandomGifType ->
                            Widget.initGif model.topic

                newModel =
                    Model "" (model.gifList ++ [ ( model.uid, newWidget ) ]) (model.uid + 1)
            in
                newModel ! [ Cmd.map (SubMsg model.uid) fx ]

        SubMsg msgId msg ->
            let
                subUpdate (( id, widget ) as entry) =
                    if id == msgId then
                        let
                            ( newWidget, fx ) =
                                Widget.update msg widget
                        in
                            ( ( id, newWidget )
                            , Cmd.map (SubMsg id) fx
                            )
                    else
                        ( entry, Cmd.none )

                ( newGifList, fxList ) =
                    model.gifList
                        |> List.map subUpdate
                        |> List.unzip
            in
                { model | gifList = newGifList } ! fxList



-- VIEW


(=>) =
    (,)


view : Model -> Html Msg
view model =
    div []
        [ input
            [ placeholder "What kind of gifs do you want?"
            , value model.topic
            , onEnter model.topic
            , on "input" (Json.map Topic targetValue)
            , inputStyle
            ]
            []
        , div [ style [ "display" => "flex", "flex-wrap" => "wrap" ] ]
            (List.map elementView model.gifList)
        ]


elementView : ( Int, Widget.Model ) -> Html Msg
elementView ( id, model ) =
    App.map (SubMsg id) <| Widget.view model


inputStyle : Attribute Msg
inputStyle =
    style
        [ ( "width", "100%" )
        , ( "height", "40px" )
        , ( "padding", "10px 0" )
        , ( "font-size", "2em" )
        , ( "text-align", "center" )
        ]


onEnter : String -> Attribute Msg
onEnter topic =
    let
        createOnEnter code =
            if code == 13 then
                Create Widget.RandomGifType
            else
                (Topic topic)
    in
        on "keydown" (Json.map createOnEnter keyCode)


main : Program Never
main =
    App.program
        { init = init
        , update = update
        , view = view
        , subscriptions = (\_ -> Sub.none)
        }