'I would like my child view to work, what must I do?

Here is my code

I have a parent and a child. My aim is to go from the parent's view to the child's view, but not sure how to accomplish it. Can someone explain how this works? The parent view is at the bottom and the child at the top. I think the problem might be the way I handle the update. I just want to wrap my head around the working of CMD and the working of subview in general.

// The child
module NetflixView =

  type Model = { Netflix: string }  // Is this really needed, because it's just a button function?

  type Message =
          | SetNetflix
          | CancelClick
          | LoginClickClick


  type Intent =
      | Cancel
      | LoginClick


  let init () =
      {
        Netflix = ""
      }
      , Cmd.none



  let update (message:Message)(model:Model) =
      match message with
      | SetNetflix ->
        ( { model with Netflix = "" }
        , Cmd.none
        , None
        )


      | CancelClick ->
        ( model
        , Cmd.none
        , Some Cancel
        )


      | LoginClickClick ->
        ( model
        , Cmd.none
        , None
        )


  let view (model:Model) (dispatch) =

          Field.div []
              [ Field.body [ ]
                  [ Container.container [ ]
                      [ Columns.columns [ Columns.CustomClass "has-text-centered"
                                          Columns.Props [ Style [ MarginTop "60px"]
                                          ]
                                        ]
                          [ Column.column [ Column.Width(Screen.All, Column.IsOneThird)
                                            Column.Offset(Screen.All, Column.IsOneThird) ]
                              [ Image.image [ Image.Is128x128
                                              Image.Props [ Style [ Margin "auto"] ] ]
                                  [
                                    img [ Src "assets/netflix.svg" ]
                                ]
                                Field.div [ ] [ Text.span [ Modifiers [ Modifier.TextWeight TextWeight.Bold ] ]
                                      [ str "Click Your Stream !!!" ] ]

                                Field.div [ ] [
                                div [ ClassName "block" ]
                                    [ Button.button [
                                      Button.Props [  Style [ MarginTop "3px" ]
                                                    ]
                                    ]
                                        [ str "Netflix" ]
                                      ]
                                    ]
                                  ]
                                ]
                              ]
                            ]
                          ]



// The Parent
module LoginClickOptionView =

  type SubModel =
    | NetflixViewModel of NetflixView.Model

  type Model =
    {
      Name: string
      Age:int
      SubModel: SubModel option
    }

  type Message =
      | SetName of string
      | SetAge of int
      | NetflixViewMessage of NetflixView.Message
      | LoginClick

  type Intent =
    | DoClose

  let init () =
    {
        Name = ""
        Age = 0
        SubModel = None
    }
    , Cmd.none


  let update (message:Message) (model:Model) =
      match message with
      | SetName input ->
        ( { model with Name = input }
        , Cmd.none
        )

      | SetAge input ->
        ( { model with Age = input }
        , Cmd.none
        )


      | NetflixViewMessage subMessage ->
          match model.SubModel with
          | Some (NetflixViewModel subModel) ->
              let (nextSubModel, nextSubMessage, anyIntent) = NetflixView.update subMessage subModel

              match anyIntent with
              | None ->
                  ( { model with
                          SubModel = Some(NetflixViewModel nextSubModel)
                    }
                  , Cmd.map NetflixViewMessage nextSubMessage
                  )

              | Some intent ->
                  match intent with
                  | NetflixView.Cancel ->
                      ( { model with
                              SubModel = None
                        }
                      , Cmd.map NetflixViewMessage nextSubMessage
                      )

                  | NetflixView.LoginClick ->
                      ( { model with
                              SubModel = Some(NetflixViewModel subModel)
                        }
                      , Cmd.map NetflixViewMessage nextSubMessage
                      )

            | None ->
                ( model
                , Cmd.none
                )


      | LoginClick ->
        let subModel = NetflixView.init ()

        ( model
         , Cmd.ofMsg LoginClick
        )



  let view (model: Model) (dispatch: Message -> unit) =

            let subViewContent =
              match model.SubModel with
              | None -> []
              | Some(NetflixViewModel subModel) ->
                  [ NetflixView.view subModel (NetflixViewMessage >> dispatch) ]

            div [] [
                    yield! subViewContent

                    yield
                      Field.div []
                          [ Field.body []
                              [ Container.container []
                                  [ Columns.columns [ Columns.CustomClass "has-text-centered"
                                                      Columns.Props [ Style [ MarginTop "60px"]
                                                      ]
                                                    ]
                                      [ Column.column [ Column.Width(Screen.All, Column.IsOneThird)
                                                        Column.Offset(Screen.All, Column.IsOneThird) ]
                                          [ Image.image [ Image.Is2by1
                                                          Image.Props [ Style [ Margin "auto"] ] ]
                                              [ img [ Src "assets/ntv.jpg" ]
                                            ]
                                            div [Style [ MarginTop "16px" ]] []
                                            Field.div []
                                              [ Label.label []
                                                  [ str "Enter your name" ]
                                                Control.div [ ]
                                                  [ Input.text [
                                                                  Input.OnChange (fun ev -> dispatch LoginClick)
                                                                  Input.Props [ AutoFocus true
                                                                                Style [ MarginTop "3px" ]
                                                                ]
                                                              ]
                                                            ]


                                                div [ Style [ MarginTop "24px" ] ] []
                                                Label.label []
                                                  [ str "Enter your age" ]
                                                Control.div [ ]
                                                  [ Input.text [
                                                                  Input.OnChange (fun ev -> dispatch LoginClick)
                                                                  Input.Props [ Style [ MarginTop "3px" ]
                                                                ]
                                                              ]
                                                            ]
                                                          ]


                                            Field.div [] [
                                                  Control.div [] [
                                                      Button.button [
                                                          Button.Props [ Style [ MarginLeft "16px" ]
                                                                         Style [ MarginTop "24px" ]
                                                          ]
                                                          Button.OnClick (fun _ -> dispatch LoginClick)
                                                      ] [
                                                          str "LoginClick"
                                                      ]
                                                  ]
                                              ]
                                            ]
                                          ]
                                        ]
                                      ]
                                    ]
                                  ]




  open Elmish.React
  open Elmish.Debug
  open Elmish.HMR

  Program.mkProgram init update view
  |> Program.withReactSynchronous "elmish-app"
  |> Program.withReactBatched "elmish-app"
  #if DEBUG
  |> Program.withDebugger
  #endif
  |> Program.run


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source