outwatch-test/src/main/scala/outwatchapp/MainApp.scala

package outwatchapp

import scala.concurrent.duration._

import colibri.ext.monix._
import com.softwaremill.macwire._
import io.odin.consoleLogger
import monix.bio.Task
import monix.eval.Coeval
import monix.reactive.Observable
import org.scalajs.dom.raw.Element
import outwatch._
import outwatch.dsl._
import outwatch.router._
import outwatchapp.components.CounterDemo
import outwatchapp.components.RequestDemo
import outwatchapp.components.todo.ChartjsDemo
import outwatchapp.components.todo.FusejsDemo
import outwatchapp.pages.HomePage
import outwatchapp.ui.components.todo.TodoListStore
import outwatchapp.util.reactive.WebWorker
import outwatchapp.util.reactive.WorkerData

class MainApp(el: Element)(implicit
    backend: AppTypes.Backend,
    store: RouterStore[Page]
) {
  def run: Task[Unit] = for {
    resolver <- resolver
    _ <- OutWatch.renderInto[Task](el, Router(resolver))
  } yield ()

  def resolver: Task[PartialFunction[Page, VDomModifier]] =
    Task.deferAction(implicit s =>
      for {
        counterDemo <- CounterDemo()
        chartDemo <- ChartjsDemo()
        todoStore <- TodoListStore(consoleLogger[Task]())
        requestDemo <- RequestDemo(todoStore)
        demoWorker <- WebWorker[WorkerData]("/worker.js")
      } yield {
        case Page.Home => wire[HomePage].render
        case Page.SomePage =>
          div(
            div(cls := "title", "SomePage"),
            // RequestDemo(todoStore),
            Observable
              .interval(1.second)
              .doOnNextF(i => Coeval(println(s"Producer emitted $i")))
              .doOnNextF(i =>
                Coeval(demoWorker.onNext(WorkerData(i))) >> Coeval.unit
              )
              .map(_ => div()),
            demoWorker.map(_.toString).map(v => p(cls := "text-white", v)),
            requestDemo,
            div(cls := "slider")
          )
        case Page.UserHome(id) =>
          div(
            cls := "text-white",
            div(cls := "title", "UserHome"),
            s"User id: $id",
            div(FusejsDemo.y.map(_.item.toString).mkString(" "))
          )
        case Page.NotFound =>
          div(
            div(cls := "title", "NotFound"),
            p(cls := "text-white", "notfound")
          )
      }
    )
}