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

package com.example.playscalajsreact.component

import com.example.playscalajsreact.model.MyGlobalState
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
import com.example.playscalajsreact.model._
import japgolly.scalajs.react.MonocleReact._

object Middle {

  final case class Props(name: String, ss: StateSnapshot[Data]) {
    @inline def render: VdomElement = Comp(this)
  }

  implicit def reusability: Reusability[Props] =
    Reusability.derive

  final class Backend($ : BackendScope[Props, Unit]) {

    // Method 2: StateSnapshot.withReuse.zoomL.prepareViaProps
    // Notice that we're using a normal lens here instead of a Reusable[lens]
    private val ssStrFn =
      StateSnapshot.withReuse.zoomL(Data.str).prepareViaProps($)(_.ss)

    def render(p: Props): VdomElement = {

      // Method 1: ss.withReuse.zoomStateL
      val ssI: StateSnapshot[Int] = p.ss.zoomStateL(Data.reusableLens.int)

      // Method 2: StateSnapshot.withReuse.zoomL.prepareViaProps
      val ssS: StateSnapshot[String] =
        ssStrFn(p.ss.value)

      <.div(
        <.h3(p.name, "hello"),
        <.div("IntEditor: ", IntEditor(ssI))
        // <.div("TextEditor: ", TextEditor(ssS), ^.marginTop := "0.6em"))
      )
    }
  }

  val Comp = ScalaComponent
    .builder[Props]
    .renderBackend[Backend]
    .configure(Reusability.shouldComponentUpdate)
    .build

  def apply(_props: Props): VdomElement = { Comp(_props) }
}