Skip to content

Instantly share code, notes, and snippets.

@aspnetde

aspnetde/App.fs

Last active February 13, 2022 21:33
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save aspnetde/0e7b71bd7108ee62dac4d2783653c141 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save aspnetde/0e7b71bd7108ee62dac4d2783653c141 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. aspnetde revised this gist Jun 12, 2020. 2 changed files with 4 additions and 8 deletions.
    6 changes: 2 additions & 4 deletions Dashboard.fs
    View file
    Original file line number Diff line number Diff line change
    @@ -20,7 +20,7 @@ let update props msg state =
    match msg with
    | SignOut -> state, Cmd.ofSub (fun _ -> props.SignOut())

    let render = React.functionComponent("Dashboard", fun props ->
    let dashboard = React.functionComponent("Dashboard", fun props ->
    let state, dispatch = React.useElmish(init props, update props, [||])
    Html.div [
    Html.h1 (sprintf "Hi, %s!" state.User)
    @@ -30,6 +30,4 @@ let render = React.functionComponent("Dashboard", fun props ->
    prop.onClick (fun _ -> SignOut |> dispatch)
    ]
    ]
    )

    let dashboard props = render(props)
    )
    6 changes: 2 additions & 4 deletions Login.fs
    View file
    Original file line number Diff line number Diff line change
    @@ -25,7 +25,7 @@ let update props msg state =
    | SetPassword password -> { state with Password = password }, Cmd.none
    | SignIn -> state, Cmd.ofSub (fun _ -> props.SignIn(state.UserName))

    let render = React.functionComponent("LoginForm", fun props ->
    let login = React.functionComponent("LoginForm", fun props ->
    let state, dispatch = React.useElmish(init, update props, [||])

    let signInPossible =
    @@ -58,6 +58,4 @@ let render = React.functionComponent("LoginForm", fun props ->
    prop.disabled (not signInPossible)
    ]
    ]
    )

    let login props = render(props)
    )
  2. aspnetde revised this gist Jun 12, 2020. 2 changed files with 9 additions and 13 deletions.
    14 changes: 6 additions & 8 deletions Dashboard.fs
    View file
    Original file line number Diff line number Diff line change
    @@ -13,17 +13,17 @@ type Props =

    type Msg = | SignOut

    let private init props =
    let init props =
    { User = props.User }, Cmd.none

    let private update props msg state =
    let update props msg state =
    match msg with
    | SignOut -> state, Cmd.ofSub (fun _ -> props.SignOut())

    let private render props hook = React.functionComponent("Dashboard", fun () ->
    let (state:State), dispatch = hook()
    let render = React.functionComponent("Dashboard", fun props ->
    let state, dispatch = React.useElmish(init props, update props, [||])
    Html.div [
    Html.h1 (sprintf "Hallo, %s!" state.User)
    Html.h1 (sprintf "Hi, %s!" state.User)
    Html.hr []
    Html.button [
    prop.text "Sign out"
    @@ -32,6 +32,4 @@ let private render props hook = React.functionComponent("Dashboard", fun () ->
    ]
    )

    let dashboard props =
    let hook () = React.useElmish(init props, update props, [||])
    (render props hook)()
    let dashboard props = render(props)
    8 changes: 3 additions & 5 deletions Login.fs
    View file
    Original file line number Diff line number Diff line change
    @@ -25,8 +25,8 @@ let update props msg state =
    | SetPassword password -> { state with Password = password }, Cmd.none
    | SignIn -> state, Cmd.ofSub (fun _ -> props.SignIn(state.UserName))

    let render props hook = React.functionComponent("LoginForm", fun () ->
    let state, dispatch = hook()
    let render = React.functionComponent("LoginForm", fun props ->
    let state, dispatch = React.useElmish(init, update props, [||])

    let signInPossible =
    (not (String.IsNullOrWhiteSpace(state.UserName))) &&
    @@ -60,6 +60,4 @@ let render props hook = React.functionComponent("LoginForm", fun () ->
    ]
    )

    let login props =
    let hook () = React.useElmish(init, update props, [||])
    (render props hook)()
    let login props = render(props)
  3. aspnetde revised this gist Jun 12, 2020. 2 changed files with 13 additions and 9 deletions.
    14 changes: 8 additions & 6 deletions Dashboard.fs
    View file
    Original file line number Diff line number Diff line change
    @@ -13,17 +13,17 @@ type Props =

    type Msg = | SignOut

    let init props =
    let private init props =
    { User = props.User }, Cmd.none

    let update props msg state =
    let private update props msg state =
    match msg with
    | SignOut -> state, Cmd.ofSub (fun _ -> props.SignOut())

    let render props = React.functionComponent("Dashboard", fun () ->
    let state, dispatch = React.useElmish(init props, update props, [||])
    let private render props hook = React.functionComponent("Dashboard", fun () ->
    let (state:State), dispatch = hook()
    Html.div [
    Html.h1 (sprintf "Hello, %s!" state.User)
    Html.h1 (sprintf "Hallo, %s!" state.User)
    Html.hr []
    Html.button [
    prop.text "Sign out"
    @@ -32,4 +32,6 @@ let render props = React.functionComponent("Dashboard", fun () ->
    ]
    )

    let dashboard props = render(props)()
    let dashboard props =
    let hook () = React.useElmish(init props, update props, [||])
    (render props hook)()
    8 changes: 5 additions & 3 deletions Login.fs
    View file
    Original file line number Diff line number Diff line change
    @@ -25,8 +25,8 @@ let update props msg state =
    | SetPassword password -> { state with Password = password }, Cmd.none
    | SignIn -> state, Cmd.ofSub (fun _ -> props.SignIn(state.UserName))

    let render props = React.functionComponent("LoginForm", fun () ->
    let state, dispatch = React.useElmish(init, update props, [||])
    let render props hook = React.functionComponent("LoginForm", fun () ->
    let state, dispatch = hook()

    let signInPossible =
    (not (String.IsNullOrWhiteSpace(state.UserName))) &&
    @@ -60,4 +60,6 @@ let render props = React.functionComponent("LoginForm", fun () ->
    ]
    )

    let login props = render(props)()
    let login props =
    let hook () = React.useElmish(init, update props, [||])
    (render props hook)()
  4. aspnetde created this gist Jun 12, 2020.
    22 changes: 22 additions & 0 deletions App.fs
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,22 @@
    module App

    open Elmish

    type State =
    { CurrentUser: string option }

    type Msg =
    | SignIn of string
    | SignOut

    let init() = { CurrentUser = None }, Cmd.none

    let update (msg: Msg) (state: State) =
    match msg with
    | SignIn user -> { state with CurrentUser = Some (user) }, Cmd.none
    | SignOut -> { state with CurrentUser = None }, Cmd.none

    let render (state: State) (dispatch: Msg -> unit) =
    match state.CurrentUser with
    | Some -> Dashboard.dashboard { User = state.CurrentUser.Value; SignOut = fun () -> SignOut |> dispatch }
    | None -> Login.login { SignIn = fun user -> SignIn(user) |> dispatch }
    35 changes: 35 additions & 0 deletions Dashboard.fs
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,35 @@
    module Dashboard

    open Elmish
    open Feliz.UseElmish
    open Feliz

    type State =
    { User: string }

    type Props =
    { User: string
    SignOut: unit -> unit }

    type Msg = | SignOut

    let init props =
    { User = props.User }, Cmd.none

    let update props msg state =
    match msg with
    | SignOut -> state, Cmd.ofSub (fun _ -> props.SignOut())

    let render props = React.functionComponent("Dashboard", fun () ->
    let state, dispatch = React.useElmish(init props, update props, [||])
    Html.div [
    Html.h1 (sprintf "Hello, %s!" state.User)
    Html.hr []
    Html.button [
    prop.text "Sign out"
    prop.onClick (fun _ -> SignOut |> dispatch)
    ]
    ]
    )

    let dashboard props = render(props)()
    63 changes: 63 additions & 0 deletions Login.fs
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,63 @@
    module Login

    open Feliz
    open Feliz.UseElmish
    open Elmish
    open System

    type State =
    { UserName: string
    Password: string }

    type Props =
    { SignIn: string -> unit }

    type Msg =
    | SetUserName of string
    | SetPassword of string
    | SignIn

    let init() = { UserName = ""; Password = "" }, Cmd.none

    let update props msg state =
    match msg with
    | SetUserName userName -> { state with UserName = userName }, Cmd.none
    | SetPassword password -> { state with Password = password }, Cmd.none
    | SignIn -> state, Cmd.ofSub (fun _ -> props.SignIn(state.UserName))

    let render props = React.functionComponent("LoginForm", fun () ->
    let state, dispatch = React.useElmish(init, update props, [||])

    let signInPossible =
    (not (String.IsNullOrWhiteSpace(state.UserName))) &&
    (not (String.IsNullOrWhiteSpace(state.Password)))

    Html.div [
    Html.label [ prop.text "User name"; prop.htmlFor "user" ]
    Html.br []
    Html.input [
    prop.id "user"
    prop.type'.text
    prop.onChange (SetUserName >> dispatch)
    ]

    Html.br []
    Html.label [ prop.text "Password"; prop.htmlFor "password" ]
    Html.br []
    Html.input [
    prop.id "password"
    prop.type'.password
    prop.onChange (SetPassword >> dispatch)
    ]

    Html.br []
    Html.br []
    Html.button [
    prop.onClick (fun _ -> SignIn |> dispatch)
    prop.text "Sign in"
    prop.disabled (not signInPossible)
    ]
    ]
    )

    let login props = render(props)()