Elm 0.18 material design

Question

I just started using elm for fun, and came across elm-mdl package. As of today, it is still not ported to elm 0.18, so I used this fork that seems to do the job until porting is done. As I'm still in the process of learning elm (seems quite fascinating IMHO :) ), I'm struggling to make a simple application compile. It's just a slightly changed example found at elm-lang's official guide documentation (the HTTP one).

Here is the code :

module Main exposing (..)

import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (..)
import Http
import Json.Decode as Decode
import Material.Spinner as Loading
import Json.Decode exposing (succeed)
import Material.Button as Button exposing (..)
import Material
import Json.Decode exposing (succeed)

main =
  Html.program
    { init = (init, getRandomGif "hello world")
    , view = view
    , update = update
    , subscriptions = subscriptions
    }

type alias Model =
  { topic : String
  , gifUrl : String
  , fetching : Bool
  , mdl : Material.Model
  }

init : Model
init =  { topic = "", gifUrl = "waiting.gif", fetching = False, mdl = Material.Model }

type Msg
  = MorePlease
  | NewGif (Result Http.Error String)
  | NewTopic String
  | ImageLoaded
  | Mdl (Material.Msg Msg)

update : Msg -> Model -> (Model, Cmd Msg)
update msg model =
  case msg of
    MorePlease ->
      ({ model | fetching = True }, getRandomGif model.topic)

    NewGif (Ok newUrl) ->
      (Model model.topic newUrl model.fetching model.mdl, Cmd.none)

    NewGif (Err _) ->
      (model, Cmd.none)

    NewTopic newTopic ->
       ({ model | topic = newTopic }, Cmd.none)

    ImageLoaded ->
        ({ model | fetching = False }, Cmd.none)

    Mdl message ->
              Material.update message model

view : Model -> Html Msg
view model =
  div []
    [ input [ placeholder "Topic :", onInput NewTopic ] []
    , Button.render Mdl [0] model.mdl
      [ Button.raised
      , Button.ripple
      , Button.onClick MorePlease
      ]
      [ text "Fetch new"]
    , br [] []
    , img [src model.gifUrl, on "load" (succeed ImageLoaded), style [ ( "visibility", visibilityFromBool model.fetching ) ]] []
    , Loading.spinner [ Loading.active model.fetching ]
    , br [] []
    ]

subscriptions : Model -> Sub Msg
subscriptions model = Sub.none

getRandomGif : String -> Cmd Msg
getRandomGif topic =
  let url = "https://api.giphy.com/v1/gifs/random?api_key=dc6zaTOxFJmzC&tag=" ++ topic
  in Http.send NewGif (Http.get url decodeGifUrl)

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

visibilityFromBool : Bool -> String
visibilityFromBool bool = if bool then "hidden" else "visible"

But I'm getting following error :

The definition of `init` does not match its type annotation.
29| init : Model
30|>init =  { topic = "", gifUrl = "waiting.gif", fetching = False, mdl = Material.Model }
The type annotation for `init` says it is a: 

Main.Model

But the definition (shown above) is a:
  { fetching : Bool
, gifUrl : String
, mdl :
     Parts.Indexed (List Int) Button.Model
      -> Parts.Indexed (List Int) Material.Textfield.Model
      -> Parts.Indexed (List Int) Material.Menu.Model
      -> Maybe (Material.Snackbar.Model Int)
      -> Material.Layout.Model
      -> Parts.Indexed (List Int) Material.Toggles.Model
      -> Parts.Indexed (List Int) Material.Tooltip.Model
      -> Parts.Indexed (List Int) Material.Tabs.Model
      -> Material.Model
  , topic : String
   }

 Hint: Problem in the `mdl` field. It looks like a function needs 8 more
arguments.

Detected errors in 1 module.

As if Material.Model is a function that needs 8 parameters (???)

Anyhow, these are the contents of 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": {
        "Fresheyeball/elm-guards": "1.0.1 <= v < 2.0.0",
        "MichaelCombs28/elm-mdl": "1.0.1 <= v < 2.0.0",
        "elm-lang/core": "5.0.0 <= v < 6.0.0",
        "elm-lang/html": "2.0.0 <= v < 3.0.0",
        "elm-lang/http": "1.0.0 <= v < 2.0.0"
    },
    "elm-version": "0.18.0 <= v < 0.19.0"
}

What am I missing (guessing that it might have something to do with imports, but I tried fiddling with those with no success)?

Answer 1

You are initializing mdl to Material.Model, which is a type alias. Type aliases can also be used as functions, which is why the compiler thinks you're trying to assign a function to mdl.

You should instead initialize to lowercase model: mdl = Material.model, which is the empty initial state.