to-do list

namespace Samples

open WebSharper
open WebSharper.JavaScript
open WebSharper.React
open WebSharper.React.Html

[<JavaScript>]
module HelloWorld =
    
    type Task =
      {
        Name : string
        Done : bool
      }
    
    type State =
      {
        Input : string
        Tasks : Task list
      }
      
      static member Default =
        { Input = ""; Tasks = [ { Name = "buy milk"; Done = true } ] }

let remainingItems (state: State) : string =
        let length =
            List.filter (fun task -> not task.Done) state.Tasks
            |> List.length
    
        sprintf "%i %s left" length (if length = 1 then "item" else "items")
    
    let inline contains name = List.exists (fun task -> task.Name = name)
        
    let inline createTask (name: string) : Task =
        { Name = name; Done = false }
        
    let addTask (state: State) : State =
        if state.Input.Length > 0 && not (contains state.Input state.Tasks) then
            { state with
                Tasks = createTask state.Input :: state.Tasks }
        else
            state
            
    let removeCompletedTasks (state: State) : State =
        { state with
            Tasks = List.filter (fun task -> not task.Done) state.Tasks }
          
    let toggleTask (name: string) (state: State) : State =
        { state with
            Tasks =
              List.map (fun task ->
                if task.Name = name then
                  { task with Done = not task.Done }
                else
                  task
              ) state.Tasks }

type Main() as this =
        inherit React.Component<unit, State>(())
        
        do this.SetInitialState State.Default
        
        override this.Render() =
            div [] [
                h3 [] [text ("Tasks (" + remainingItems this.State + ")")]
                
                this.State.Tasks
                |> List.map (fun task ->
                    li [on.click (fun _ -> this.SetState (toggleTask task.Name this.State))] [
                        (if task.Done then
                            Tags.s [] [text task.Name]
                        else
                            text task.Name)
                    ]
                )
                |> ul []
                
                button [on.click (fun _ -> this.SetState (removeCompletedTasks this.State))] [
                    text "Remove completed tasks"
                ]
                
                h3 [] [text "Add task"]
                input [
                    on.change (fun ev ->
                        this.SetState { this.State with Input = ev.Target?value })
                ] []
                button [on.click (fun _ -> this.SetState (addTask this.State))] [
                    text "+"
                ]
            ]
    
    let Main =
        React.Make Main ()
        |> React.Mount (JS.Document.QuerySelector "#main")