Scalajs-react-independent/src/main/scala/com/example/playscalajsreact/component/NameChanger.scala

package com.example.playscalajsreact.component

import japgolly.scalajs.react.vdom.VdomElement
import japgolly.scalajs.react.Callback
import japgolly.scalajs.react._
import japgolly.scalajs.react.vdom.html_<^._
import com.example.playscalajsreact.route.AppRouter
import org.scalajs.dom
import scala.scalajs.js
import com.example.playscalajsreact.model.User
import japgolly.scalajs.react.extra.StateSnapshot
import com.softwaremill.quicklens._
import monocle.macros.Lenses

object NameChanger {
  import japgolly.scalajs.react.MonocleReact._

  @Lenses
  case class Name(firstName: String, surname: String)

  val NameChanger = ScalaComponent
    .builder[StateSnapshot[String]]
    .render_P { stateSnapshot =>
      <.input.text(
        ^.value := stateSnapshot.value,
        ^.onChange ==> ((e: ReactEventFromInput) =>
          stateSnapshot.setState(e.target.value)
        )
      )
    }
    .build

  val Main = ScalaComponent
    .builder[Unit]
    .initialState(Name("John", "Wick"))
    .render { $ =>
      val name = $.state
      val firstNameV = StateSnapshot.zoomL(Name.firstName).of($)
      val surnameV = StateSnapshot.zoomL(Name.surname).of($)
      <.div(
        <.label("First name:", NameChanger(firstNameV)),
        <.label("Surname:", NameChanger(surnameV)),
        <.p(s"My name is ${name.surname}, ${name.firstName} ${name.surname}.")
      )
    }
    .build
}