Refactor and cleanup

src/main/scala/outwatchapp/MainApp.scala

@@ -1,7 +1,13 @@
 package outwatchapp
 
+import scala.concurrent.duration._
+
+import colibri.ext.monix._
 import com.softwaremill.macwire._
 import monix.bio.Task
+import monix.eval.Coeval
+import monix.reactive.Observable
+import outwatchapp.ui.components.todo.TodoListStore
 import org.scalajs.dom.raw.Element
 import outwatch._
 import outwatch.dsl._
@@ -10,7 +16,9 @@ import outwatchapp.components.CounterDemo
 import outwatchapp.components.RequestDemo
 import outwatchapp.components.todo.ChartjsDemo
 import outwatchapp.pages.HomePage
-import nova.monadic_sfx.ui.components.todo.TodoListStore
+import outwatchapp.util.reactive.WorkerData
+import outwatchapp.util.reactive.WebWorker
+import outwatchapp.components.todo.FusejsDemo
 
 class MainApp(el: Element)(implicit
     backend: AppTypes.Backend,
@@ -28,23 +36,36 @@ class MainApp(el: Element)(implicit
         chartDemo <- ChartjsDemo()
         todoStore <- TodoListStore()
         requestDemo <- RequestDemo(todoStore)
-        resolver: PartialFunction[Page, VDomModifier] = {
+        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(div(cls := "title", "UserHome"), s"User id: $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 := "profile-description", "notfound")
+            p(cls := "text-white", "notfound")
           )
       }
-      } yield resolver
     )
 }

src/main/scala/outwatchapp/OutwatchApp.scala

@@ -1,13 +1,15 @@
 package outwatchapp
 
+import scala.scalajs.js.annotation.JSImport
+
 import cats.effect.ExitCode
 import monix.bio._
-import org.scalajs.dom.raw.Element
-import sttp.client.impl.monix.FetchMonixBackend
 import org.scalajs.dom.document
-import scala.scalajs.js.annotation.JSImport
+import org.scalajs.dom.raw.Element
-import scalajs.js
 import outwatch.router.AppRouter
+import sttp.client.impl.monix.FetchMonixBackend
+
+import scalajs.js
 
 @JSImport("bootstrap/dist/css/bootstrap.min.css", JSImport.Namespace)
 @js.native

src/main/scala/outwatchapp/Router.scala

@@ -1,13 +1,10 @@
 package outwatchapp
-import colibri.ext.monix._
 import monix.bio.Task
-import monix.eval.Coeval
 import outwatch._
 import outwatch.dsl._
 import outwatch.router.AppRouter
 import outwatch.router._
 import outwatch.router.dsl._
-import outwatchapp.components.todo.FusejsDemo
 
 import Page._
 
@@ -30,7 +27,7 @@ object Router {
           cls := "navbar-translate",
           a(
             cls := "navbar-brand",
-            href := "https://demos.creative-tim.com/blk-design-system/index.html",
+            href := "#",
             rel := "tooltip",
             title := "",
             attr("data-placement") := "bottom",
@@ -104,11 +101,6 @@ object Router {
     ),
     div(
       cls := "container",
-      Coeval(
-        println("Result = " + FusejsDemo.y.toString())
-      ) >> Coeval(
-        FusejsDemo.y.foreach(o => println(o.item))
-      ) >> Coeval(div()),
       router.render(resolver),
       router.watch()
     )

src/main/scala/outwatchapp/components/CounterDemo.scala

@@ -15,7 +15,7 @@ object CounterDemo {
   def apply(): Task[HtmlVNode @@ CounterDemo] =
     Task.deferAction(implicit s =>
       Task(
-        div(p(cls := "profile-description", "count: ", counter2))
+        div(p(cls := "text-white", "count: ", counter2))
           .taggedWith[CounterDemo]
       )
     )

src/main/scala/outwatchapp/components/RequestDemo.scala

@@ -5,15 +5,15 @@ import com.softwaremill.tagging._
 import monix.bio._
 import monix.eval.Coeval
 import monix.{eval => me}
-import nova.monadic_sfx.ui.components.todo.Todo
+import outwatchapp.ui.components.todo.Todo
-import nova.monadic_sfx.ui.components.todo.TodoListStore
+import outwatchapp.ui.components.todo.TodoListStore
+import outwatchapp.util.reactive.store.Store
 import outwatch._
 import outwatch.dsl._
 import outwatch.reactive.handlers.monix._
 import outwatchapp.AppTypes
 import outwatchapp.implicits._
 import sttp.client._
-import nova.monadic_sfx.util.reactive.store.Store
 
 sealed trait RequestDemo
 object RequestDemo {
@@ -57,15 +57,14 @@ object RequestDemo {
                 cls := "form-control",
                 placeholder := "0",
                 onInput.value --> requestSub
+              )
             ),
+            div(
+              cls := "form-group",
               label(
                 color := "hsla(0,0%,100%,0.8)",
                 "Enter content for todo"
               ),
-              small(cls := "form-text text-muted", "default is 0")
-            ),
-            div(
-              cls := "form-group",
               input(
                 cls := "form-control",
                 onInput.value --> todoContent
@@ -78,8 +77,7 @@ object RequestDemo {
                   Coeval(println("Clicked"))
                 ),
                 onClick(
-                  todoContent
+                  todoContent.map(TodoListStore.Add)
-                    .map(TodoListStore.Add)
                 ) --> todoStore.sink
               )
             )
@@ -87,7 +85,7 @@ object RequestDemo {
         ),
         div(
           p(
-            cls := "profile-description",
+            cls := "text-white",
             requestSub
               .doOnNext(str => me.Task(println(str)))
               .mapEval(request)

src/main/scala/outwatchapp/components/todo/Fusejs.scala

@@ -1,6 +1,6 @@
 package outwatchapp.components.todo
 
-import nova.monadic_sfx.ui.components.todo.Todo
+import outwatchapp.ui.components.todo.Todo
 import typings.fuseJs.mod.Fuse.IFuseOptions
 import typings.fuseJs.mod._
 import typings.fuseJs.mod.{default => FuseC}

src/main/scala/outwatchapp/pages/HomePage.scala

@@ -18,7 +18,7 @@ class HomePage(
         counterDemo,
         chartDemo,
         p(
-          cls := "profile-description",
+          cls := "text-white",
           div(
             "hm",
             htmlTag("blockQuote")(

src/main/scala/outwatchapp/util/reactive/MonixProSubject.scala

@@ -1,4 +1,4 @@
-package nova.monadic_sfx.util.reactive.store
+package outwatchapp.util.reactive
 
 import scala.concurrent.Future
 

src/main/scala/outwatchapp/util/reactive/package.scala

@@ -0,0 +1,11 @@
+package outwatchapp.util
+
+import monix.reactive.Observable
+import monix.reactive.Observer
+
+package object reactive {
+  type MonixProSubject[-I, +O] = Observable[O] with Observer[I]
+  type MonixSubject[A] = MonixProSubject[A, A]
+  type WebWorker[A] = MonixSubject[A]
+  type WebSocket[A] = MonixSubject[A]
+}

src/main/scala/outwatchapp/util/reactive/store/Middlewares.scala

@@ -1,4 +1,4 @@
-package nova.monadic_sfx.util.reactive.store
+package outwatchapp.util.reactive.store
 
 import java.time.LocalDateTime
 

src/main/scala/outwatchapp/util/reactive/store/Reducer.scala

@@ -1,4 +1,4 @@
-package nova.monadic_sfx.util.reactive.store
+package outwatchapp.util.reactive.store
 
 import cats.implicits._
 import monix.reactive.Observable
@@ -6,8 +6,7 @@ import monix.reactive.ObservableLike
 
 object Reducer {
 
-  /**
+  /** Creates a Reducer which yields a new State, as-well as an Observable of Effects
-    * Creates a Reducer which yields a new State, as-well as an Observable of Effects
     * Effects are Actions which will be executed after the Action that caused them to occur.
     * This is accomplished by subscribing to the Effects Observable within the stores scan loop.
     *
@@ -20,14 +19,12 @@ object Reducer {
       f: (M, A) => (M, F[A])
   ): Reducer[A, M] = (s: M, a: A) => f(s, a).map(ObservableLike[F].apply)
 
-  /**
+  /** Creates a reducer which just transforms the state, without additional effects.
-    * Creates a reducer which just transforms the state, without additional effects.
     */
   def apply[A, M](f: (M, A) => M): Reducer[A, M] =
     (s: M, a: A) => f(s, a) -> Observable.empty
 
-  /**
+  /** Creates a Reducer with an optional effect.
-    * Creates a Reducer with an optional effect.
     */
   def withOptionalEffects[F[_]: ObservableLike, A, M](
       f: (M, A) => (M, Option[F[A]])

src/main/scala/outwatchapp/util/reactive/store/Store.scala

@@ -1,10 +1,11 @@
-package nova.monadic_sfx.util.reactive.store
+package outwatchapp.util.reactive.store
 
 import monix.bio.Task
 import monix.eval.Coeval
+import monix.reactive.Observer
 import monix.reactive.OverflowStrategy
 import monix.reactive.subjects.ConcurrentSubject
-import monix.reactive.Observer
+import outwatchapp.util.reactive.MonixProSubject
 
 object Store {
   def createL[A, M](

src/main/scala/outwatchapp/util/reactive/store/package.scala

@@ -1,15 +1,12 @@
-package nova.monadic_sfx.util.reactive
+package outwatchapp.util.reactive
 
 import monix.reactive.Observable
-import monix.reactive.Observer
 
 package object store {
-  type MonixProSubject[-I, +O] = Observable[O] with Observer[I]
   type Middleware[A, M] = Observable[(A, M)] => Observable[(A, M)]
   type Store[A, M] = MonixProSubject[A, (A, M)]
 
-  /**
+  /** A Function that applies an Action onto the Stores current state.
-    * A Function that applies an Action onto the Stores current state.
     * @param reducer The reducing function
     * @tparam A The Action Type
     * @tparam M The Model Type