Improved Homepage

Author: gbogard

front/src/myapp/components/Counter.scala

@@ -1,2 +1,26 @@
 package myapp.components
 
+import japgolly.scalajs.react._
+import japgolly.scalajs.react.vdom.html_<^._
+import myapp.Config
+import org.scalajs.dom.document
+
+val Counter = ScalaFnComponent
+  .withHooks[Unit]
+  .useState(0)
+  .useEffectBy((_, count) =>
+    Callback {
+      document.title =
+        if (count.value == 0) Config.title
+        else s"You clicked ${count.value} times"
+    }
+  )
+  .render((_, count) =>
+    <.div(
+      <.p(s"You clicked ${count.value} times"),
+      <.button(
+        ^.onClick --> count.modState(_ + 1),
+        "Click me"
+      )
+    )
+  )

front/src/myapp/pages/Homepage.scala

@@ -3,6 +3,7 @@ package myapp.pages
 import japgolly.scalajs.react._
 import japgolly.scalajs.react.vdom.html_<^._
 import myapp.Config
+import myapp.components.Counter
 import scala.scalajs.js.annotation.JSExportTopLevel
 import scala.scalajs.js
 import scala.scalajs.js.annotation.JSImport
@@ -17,7 +18,9 @@ val Homepage = ScalaComponent
     <.div(
       ^.className := styles("home"),
       <.h1(Config.title),
-      Config.description.map(text => <.p(text, ^.key := text)).toVdomArray
+      Config.description.map(text => <.p(text, ^.key := text)).toVdomArray,
+      <.hr,
+      Counter()
     )
   )
   .build