How to trigger dom update without using routing？

[cyz1901]

Hey @armanbilge. I have a global variable that I want to change when I click the button and re render the dom.
But it doesn't seem to have been re rendered.:dizzy_face:

I referred to TodomVC, but it seems that in this example, the state is persisted and stored in the browser.
https://www.armanbilge.com/calico/demos/todomvc.html

object GlobalStore {
  var displayType: DisplayType = DisplayType.NoData
}

object DisplayPage {

  val root: Resource[IO, HtmlElement[IO]] =
    div(
      cls := "w-full h-full flex justify-center items-center",
      GlobalStore.displayType.match {
        case DisplayType.NoData => renderNoData()
        case DisplayType.PDF    => PDFViewerComponent.root
        case DisplayType.MXML   => OSMDViewerComponents.root
      }
    )

  def renderNoData(): Resource[IO, HtmlElement[IO]] = {
    div(
      cls := "flex flex-col items-center justify-center",
      div(cls := "w-1/3 h-1/3 mb-4", ()).evalTap(_.innerHtml.set(s"""
        <img src="$javascriptLogo" class="logo vanilla" alt="JavaScript logo" />
        """)),
      button(
        cls := "btn no-animation w-48 normal-case",
        "Open Music Data",
        onClick --> {
          _.foreach(_ =>
            IO {
              GlobalStore.displayType = DisplayType.PDF
            }
          )
        }
      )
    )

  }
}

[cyz1901]

Functional state storage confuses me a lot...

According to the log, my variables have been changed (although the use of variables is not advocated)

Maybe I should try Monocle? https://www.optics.dev/Monocle/

[armanbilge]

Functional state storage confuses me a lot...

Are you using IOWebApp? The best way to have "global state" is to use IO.ref to create a Ref first thing in your IOWebApp. Then anything that needs access to that state should ask for a Ref[IO, State] in its constructor.

Let me know if that makes sense :)

[cyz1901]

hmmm i update code and seem dom tree still not update...

object DisplayPage {

  val root: Resource[IO, HtmlElement[IO]] = {
    val element: IO[Resource[IO, HtmlElement[IO]]] = App.globalStore
      .flatMap(g =>
        for {
          store <- g.get
          _ <- IO { println(s"now store is ${store}") }
          element <- IO(store.match {
            case DisplayType.NoData => renderNoData()
            case DisplayType.PDF    => PDFViewerComponent.root
            case DisplayType.MXML   => OSMDViewerComponents.root
          })
        } yield element
      )

    div(
      cls := "w-full h-full flex justify-center items-center",
      Resource
        .eval(
          element
        )
        .flatMap(identity)
    )

  }

  def renderNoData(): Resource[IO, HtmlElement[IO]] = {
    div(
      cls := "flex flex-col items-center justify-center",
      div(cls := "w-1/3 h-1/3 mb-4", ()).evalTap(_.innerHtml.set(s"""
        <img src="$javascriptLogo" class="logo vanilla" alt="JavaScript logo" />
        """)),
      button(
        cls := "btn no-animation w-48 normal-case",
        "Open Music Data",
        onClick --> {
          _.foreach(_ => {
            App.globalStore.flatMap(r => r.set(DisplayType.MXML) *> r.get).map(println)
          })
        }
      )
    )
  }
}

object App extends IOWebApp {
  val indexCss: IndexCss.type = IndexCss

  val globalStore = Ref.of[IO, DisplayType](DisplayType.NoData)

  def render: Resource[IO, fs2.dom.HtmlElement[IO]] = {

    routes(
      pathEnd {
        runEffect {
          IO {
            dom.window.location.href = dom.window.location.href + "home";
          }
        }
      },
      pathPrefix("home") {
        firstMatch(
          pathEnd {
            HomePage.root
          },
          path("explore") {
            ExplorePage.root
          },
          path("musicScore") {
            MusicScorePage.root
          }
        )
      },
      noneMatched {
        div("404")
      }
    )
  }
}

[armanbilge]

Look closely at this one:

val globalStore = Ref.of[IO, DisplayType](DisplayType.NoData)

The problem is that the type of globalStore is IO[Ref[IO, DisplayType]] instead of Ref[IO, DisplayType]. So actually this means that every time you use it, you are constructing a new Ref! That's why it appears to never change, because your code never shares the same one.

---

The correct way is to do something like this:

def render: Resource[IO, fs2.dom.HtmlElement[IO]] =
  Ref.of[IO, DisplayType](DisplayType.NoData).toResource.flatMap { globalStore => // construct the `Ref` exactly once
    // now pass the `globalStore` to all the components that need it
  }

I understand that this might feel awkward to you :) but this is how functional state works. There is no global state.

[cyz1901]

Like this?

object App extends IOWebApp {
  val indexCss: IndexCss.type = IndexCss

  def render: Resource[IO, fs2.dom.HtmlElement[IO]] = {
    Ref.of[IO, DisplayType](DisplayType.NoData).toResource.flatMap { globalStore =>
      routes(
        pathEnd {
          runEffect {
            IO {
              dom.window.location.href = dom.window.location.href + "home";
            }
          }
        },
        pathPrefix("onboarding") {
          OnboardingPage.root
        },
        pathPrefix("home") {
          firstMatch(
            pathEnd {
              HomePage.root(globalStore)
            },
            path("explore") {
              ExplorePage.root
            },
            path("musicScore") {
              MusicScorePage.root
            }
          )
        },
        noneMatched {
          div("404")
        }
      )
    }
  }
}

object DisplayPage {

  def root(store: Ref[IO, DisplayType]): Resource[IO, HtmlElement[IO]] = {
    div(
      cls := "w-full h-full flex justify-center items-center",
      store.get.map { g =>
        {
          println(s"now pass store is${g}")
          g.match {
            case DisplayType.NoData => renderNoData(store)
            case DisplayType.PDF    => PDFViewerComponent.root
            case DisplayType.MXML   => OSMDViewerComponents.root
          }
        }
      }.toResource
    )
  }

  def renderNoData(store: Ref[IO, DisplayType]): Resource[IO, HtmlElement[IO]] = {
    div(
      cls := "flex flex-col items-center justify-center",
      div(cls := "w-1/3 h-1/3 mb-4", ()).evalTap(_.innerHtml.set(s"""
        <img src="$javascriptLogo" class="logo vanilla" alt="JavaScript logo" />
        """)),
      button(
        cls := "btn no-animation w-48 normal-case",
        "Open Music Data",
        onClick --> {
          _.foreach(_ => {
            store.set(DisplayType.MXML) *> store.get.map(println)
          })
        }
      )
    )
  }
}

However the println(s"now pass store is${g}") just executed once.
It seems that the store has been updated, but it seems that the render function in main has not been re executed

[armanbilge]

Aha, if you want to subscribe to updates you should use a SignallingRef. See the documentation on Signals.

https://armanbilge.github.io/calico/concepts.html

[cyz1901]

OHHHHH! It works thank you so much!

[cyz1901]

In the case of many objects, every function that needs to use a store needs to write parameters

Could scala implicitly write some statements on each object that needs to use a store so that functions within the object do not need to write store parameters? 😟

[armanbilge]

Yes :) instead of doing using object DisplayPage do class DisplayPage(store: Ref[IO, DisplayType]). Then all the functions in the class can use the store.