to-do list

namespace Samples

open WebSharper
open WebSharper.JavaScript
open WebSharper.React

[<JavaScript; Require(typeof<Resources.React>)>]
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 }
    
    let Main =
        React.Class State.Default
        <| (fun this ->
          Element.Wrap [
            Element.Create "h3" [ Text ("Tasks (" + remainingItems this.State + ")") ]
            
            this.State.Tasks
            |> List.map (fun task ->
                Element.Create "li" [
                    (if task.Done then
                        Element.Create "s" [ Text task.Name ]
                    else
                        Text task.Name)
                ]
                |> OnClick (fun _ ->
                    this.SetState (toggleTask task.Name this.State)
                ) :> Component
            )
            |> Element.Create "ul"
            
            Element.Create "button" [ Text "Remove completed tasks" ]
            |> OnClick (fun _ ->
                this.SetState (removeCompletedTasks this.State)
            )
            
            Element.Create "h3" [ Text "Add task" ]
            
            Input
            |> OnChange (fun event ->
                { this.State with
                    Input = event?target?value }
                |> this.SetState
            )
            
            Element.Create "button" [ Text "+" ]
            |> OnClick (fun _ ->
                this.SetState (addTask this.State)
            )
          ]
        )
        |> React.Mount Document.Body