Using a Recipe in my Layout with elm-mdl

error message

-- TYPE MISMATCH ----------------------------------- ./src/components/Layout.elm

The 1st and 2nd branches of this `case` produce different types of values.

46|   case msg of
47|     Mdl msg' ->
48|       Material.update msg' model
49| 
50|     Update msg' ->
51|>      ( { model | recipe = Recipe.update msg' model.recipe }, Cmd.none )

The 1st branch has this type:

    ( { b
          | ...
          , recipe :
                { author : String
                , id : Int
                , intro : String
                , mdl : Material.Model
                , raised : Int
                , title : String
                }
    }
    , Cmd Msg
    )

But the 2nd is:

    ( { b | ..., recipe : ( Recipe.Model, Cmd Recipe.Msg ) }, Cmd b )

Hint: All branches in a `case` must have the same type. So no matter which one
we take, we always get back the same type of value.

Layout.elm

module Layout exposing ( .. )

import Html exposing ( .. )
import Html.App
import Html.Attributes exposing ( .. )

import Material
import Material.Scheme as Scheme
import Material.Layout as Layout
import Material.List as List'
import Material.Color as Color
import Material.Options exposing ( Style )
import Material.Options as Options exposing ( cs, css )

import Recipe



-- MODEL


type alias Model =
  { mdl : Material.Model
  , recipe : Recipe.Model
  }


init : Model
init =
  { mdl = Material.model
  , recipe = Recipe.init
  }



-- UPDATE


type Msg
  = Mdl (Material.Msg Msg)
  | Update Recipe.Msg


update : Msg -> Model -> (Model, Cmd Msg)
update msg model =
  case msg of
    Mdl msg' ->
      Material.update msg' model

    Update msg' ->
      ( { model | recipe = Recipe.update msg' model.recipe }, Cmd.none )


type alias Mdl =
  Material.Model



-- VIEW


drawer : List (Html a)
drawer =
  [
    List'.ul []
      [ List'.li []
          [ List'.content []
              [ text "Menus"
              ]
          ]
      , List'.li []
          [ List'.content []
              [ text "Recipes"
              ]
          ]
      , List'.li []
          [ List'.content []
              [ List'.icon "delete" []
              , text "Trash"
              ]
          ]
      ]
    ]


header : List (Html a)
header =
  [ h4 [ id "brand" ] [ text "Nimble Chef" ] ]


tabs : (List (Html m), List (Style m))
tabs =
  (
    [ text "Meal Plans"
    , text "Menus"
    , text "Recipes"
    , text "Ingredinets"
    , text "Nutrients"
    , text "News"
    ]
  , []
  )


main' : Model -> List (Html Msg)
main' model =
  [ Html.App.map Update ( Recipe.view model.recipe ) ]


view : Model -> Html Msg
view model =
  div []
    [ Scheme.topWithScheme Color.Green Color.DeepPurple
      ( Layout.render Mdl
        model.mdl
        [ Layout.fixedHeader
        ]
        { header = header
        , drawer = drawer
        , tabs = tabs
        , main = main' model
        }
      )
    ]
    |> Scheme.top

Main.elm

module Main exposing ( .. )

import Html.App as App

import Layout



--- MAIN


main : Program Never
main =
  App.program
    { init = ( Layout.init, Cmd.none )
    , view = Layout.view
    , update = Layout.update
    , subscriptions = always Sub.none
    }

Recipe.elm

module Recipe exposing ( .. )

import Html exposing ( .. )
import Html.Attributes exposing ( class, id )
import Html.Events exposing ( onClick, onMouseEnter, onMouseLeave )

import Material
import Material.Scheme
import Material.Card as Card
import Material.Options as Options exposing ( cs, css )
import Material.Textfield as Textfield
import Material.Elevation as Elevation


-- MODEL


type alias Model =
  { id : Int
  , mdl : Material.Model
  , raised : Int
  , title : String
  , author : String
  , intro : String
  }


init : Model
init =
  { id = 0
  , mdl = Material.model
  , raised = -1
  , title = ""
  , author = ""
  , intro = ""
  }



-- UPDATE


type Msg
  = Raise Int
  | Mdl ( Material.Msg Msg )
  | Title String
  | Author String
  | Intro String


update : Msg -> Model -> (Model, Cmd Msg)
update msg model =
  case msg of
    Raise k ->
      ( { model | raised = k }, Cmd.none )

    Mdl msg' ->
      Material.update msg' model

    Title title ->
      ( { model | title = title }, Cmd.none )

    Author author ->
      ( { model | author = author }, Cmd.none )

    Intro intro ->
      ( { model | intro = intro }, Cmd.none )



---- VEIW


view : Model -> Html Msg
view model =
  let
    k = 12
  in
    div [ id "content" ]
      [ Card.view
        [ css "width" "300px"
        --, Color.background (Color.color Color.Brown Color.S500)
        -- Elevation
        , if model.raised == k then Elevation.e8 else Elevation.e2
        , Elevation.transition 250
        , Options.attribute <| onMouseEnter ( Raise k )
        , Options.attribute <| onMouseLeave ( Raise -1 )
        ]
        [ Card.title
            [ css "flex-direction" "column"
            , css "height" "200px"
            , css "background" "url('assets/recipes/lg304.jpg') center / cover"
            ]
            [ Card.head [] [ text "Edit Recipe" ]
            ]
        , Card.actions []
          [ div [ class "js-recipe" ]
            [ Textfield.render Mdl [ 0 ] model.mdl
              [ Textfield.label "Title"
              , Textfield.floatingLabel
              , Textfield.onInput Title
              ]
            , Textfield.render Mdl [ 1 ] model.mdl
              [ Textfield.label "Author"
              , Textfield.floatingLabel
              , Textfield.onInput Author
              ]
            , Textfield.render Mdl [ 2 ] model.mdl
              [ Textfield.label "Introduction"
              , Textfield.floatingLabel
              , Textfield.textarea
              , Textfield.rows 6
              , Textfield.onInput Intro
              ]
            ]
          ]
        ]
      ]