PeopleWatch.scala

package mywatch
import org.scalajs.dom
import dom.document
import outwatch.Sink

import scala.scalajs.js.JSApp
import outwatch.dom._
import outwatch.util.Store

import scala.scalajs.js.annotation.JSExportTopLevel


object Mywatch  {

  case class Person(name:String,surname:String)

  case class State(person: Person, people: Seq[Person])

  sealed trait Action
  case object AddTodo extends Action
  case class RemovePerson(person: Person) extends Action
  case class UpdatePerson(person: Person) extends Action

  val initialState = State(new Person("",""), Seq.empty[Person])

  def reducer(state: State, action: Action) = action match {
    case UpdatePerson(newValue) => state.copy(person = newValue)
    case RemovePerson(toKill) => state.copy(people = state.people.filter( p => !p.equals(toKill)))
    case AddTodo => state.copy(
      people = state.people :+ state.person,
      person = new Person("","")
    )
  }

  def todoComponent(person:Person) = {
    li(
      span(person.name),
           button(click(RemovePerson(person)) --> store, "Delete")
    )
  }

  val store = Store(initialState, reducer)

  val listViews = store
    .map(_.people.map(todoComponent))

  def textFieldComponent() = {

    val nameValue = store
      .map(_.person.name)

    val surValue = store
      .map(_.person.surname)

    val disabledValues = store
      .map(_.person.name.length < 4)
      .startWith(true)
    
    

    div(
      label("Person name: "),
      input(
        inputString(UpdatePerson) --> store,
        value <-- nameValue
      ),
      input(
        inputString(UpdatePerson) --> store,
        value <-- surValue
      ),
      button(
        click(AddTodo) --> store,
        disabled <-- disabledValues,
        "Submit"
      )
    )
  }


  def main(args: Array[String]): Unit = {
 val n = 6
    println("build " + n)

    val root = div(
      textFieldComponent(),
      ul(children <-- listViews)
    )

    OutWatch.render("#app", root)

  }
}