add: Base navigation

Nojipiz · Jul 31, 2023 · 6b2e96a · 6b2e96a
1 parent 764a34f
commit 6b2e96a
Show file tree

Hide file tree

Showing 6 changed files with 220 additions and 0 deletions.
diff --git a/src/main/scala/jobs/HeavyJob.scala b/src/main/scala/jobs/HeavyJob.scala
@@ -0,0 +1,19 @@
+package jobs
+
+import zio._
+import scala.concurrent.Future
+
+object HeavyJob{
+
+  import org.scalajs.macrotaskexecutor.MacrotaskExecutor.Implicits._
+  def run( update: (Int) => Unit ): Future[Unit] = Future {
+    Unsafe.unsafe { implicit unsafe =>
+      Runtime.default.unsafe.run(HeavyJob.runTask(update = update)).getOrThrowFiberFailure()
+    }
+  }
+
+  private def runTask( update: (Int) => Unit ) = for{
+    _ <- ZIO.logInfo("Hello from ZIO!")
+    data <- Random.nextInt
+  } yield (update(data))
+}
diff --git a/src/main/scala/main/Main.scala b/src/main/scala/main/Main.scala
@@ -0,0 +1,29 @@
+package main
+
+import scala.scalajs.js
+import scala.scalajs.LinkingInfo
+import scala.scalajs.js.annotation.{JSExportTopLevel, JSImport}
+
+import zio._
+import slinky.native.AppRegistry
+import slinky.hot
+import java.time._
+import navigation.AppNavigator
+import slinky.core.annotations.react
+import slinky.core.StatelessComponent
+import slinky.core.facade.ReactElement
+
+object Main {
+  if (LinkingInfo.developmentMode) {
+    hot.initialize()
+  }
+
+  @react class App extends StatelessComponent{
+    type Props = Unit
+    def render(): ReactElement = AppNavigator()
+  }
+
+  @JSExportTopLevel("app")
+  val app = App.componentConstructor
+}
+
diff --git a/src/main/scala/navigation/AppNavigator.scala b/src/main/scala/navigation/AppNavigator.scala
@@ -0,0 +1,66 @@
+package navigation
+
+import slinky.core._
+import slinky.core.facade.ReactElement
+import slinky.core.facade.Hooks._
+import slinky.core.annotations.react
+import slinky.native._
+
+import scala.scalajs.js
+import scala.scalajs.js.Dynamic.literal
+import typings.reactRouterNative.components.{Route, Link, NativeRouter, Routes}
+import screens.ZioScreen
+import screens.common._
+
+@react object AppNavigator {
+  type Props = Unit
+  case class State(val amountTimesZIO: Int)
+
+  val component = FunctionalComponent[Props]{ props => 
+    val (state, updateState) = useState(State(amountTimesZIO = 0))
+
+    val updateTimesZIO = (number:Int) => {
+      updateState(state.copy(amountTimesZIO = number))
+    }
+
+    NativeRouter(
+      View(style = literal(
+        marginTop = 25,
+        padding = 10,
+        flex = 1,
+        ))(
+          View(
+            style = literal(
+              flexDirection = "row",
+              justifyContent = "space-around",
+              )
+            )(
+              NavigationButton(
+                title = "ZIO", 
+                route =  "/zio", 
+                notifications = Some(state.amountTimesZIO),
+              ),
+              NavigationButton(title = "Home", route =  "/"),
+              NavigationButton(title = "Requests", route =  "/requests")
+            ),
+          Routes(
+            Route.IndexRouteProps()
+              .path("/")
+              .element(Text("Home")),
+              Route.PathRouteProps()
+                .path("/zio")
+                .element(
+                  ZioScreen(
+                    times = state.amountTimesZIO,
+                    updateTimes = Some(updateTimesZIO)
+                  )
+                ),
+              Route.PathRouteProps()
+                .path("/requests")
+                .element(Text("Request"))
+              )
+            )
+          )
+  }
+}
+
diff --git a/src/main/scala/navigation/NavigationButton.scala b/src/main/scala/navigation/NavigationButton.scala
@@ -0,0 +1,41 @@
+package navigation
+
+import slinky.core.annotations.react
+import slinky.native._
+import slinky.core._
+import scala.scalajs.js.Dynamic.literal
+import scala.scalajs.js.undefined
+import slinky.core.facade.ReactElement
+import typings.reactRouterNative.components._
+import typings.reactRouterNative.mod.useNavigate
+
+@react object NavigationButton {
+  val touchableStyle = literal(
+    color = "black",
+    backgroundColor = "white",
+  )
+  val textStyle = literal(
+    fontSize = 18,
+    fontWeight ="bold",
+  )
+
+  case class Props(
+    val title: String,
+    val route: String,
+    val notifications: Option[Int] = None,
+  )
+
+  val component = FunctionalComponent[Props] { props =>
+    val navigation = useNavigate()
+
+    View()(
+      TouchableOpacity( 
+        onPress = () => { 
+          navigation(props.route) 
+        },
+        style = touchableStyle)(
+          Text(style = textStyle)(props.title)
+        )
+      )
+  }
+}
diff --git a/src/main/scala/screens/ZioScreen.scala b/src/main/scala/screens/ZioScreen.scala
@@ -0,0 +1,54 @@
+package screens
+
+import slinky.core.annotations.react
+import slinky.native._
+import slinky.core._
+import scala.scalajs.js.Dynamic.literal
+import scala.scalajs.js.undefined
+import scala.scalajs.js.timers._
+import slinky.core.facade.ReactElement
+import typings.reactRouterNative.components._
+import _root_.screens.common.Styles
+import slinky.core.facade.Hooks._
+import jobs.HeavyJob
+
+@react object ZioScreen{
+
+  case class Props(
+    val times:Int,
+    val updateTimes: Option[(Int) => Unit]
+  )
+
+  def runTask(updateTimes:(Int) => Unit) = setTimeout(1){
+    HeavyJob.run( update = updateTimes )
+  }
+
+  val component = FunctionalComponent[Props] { props =>
+    val (isLoading, setIsLoading) = useState(false)
+
+    View(style = Styles.centerContent)(
+      Text(style = literal(
+        fontSize = 15,
+        fontWeight ="bold"
+      )
+    )(s"ZIO Status"),
+
+    if(isLoading){
+      Text("Loading ...")
+    }
+    else{
+      Text(s"Random number: ${props.times}")
+    },
+
+    Button(
+      onPress = () => { 
+        setIsLoading(true)
+        runTask(props.updateTimes.get)
+        setIsLoading(false)
+      },
+      title = "Run!"
+    )
+    )
+  }
+}
+
diff --git a/src/main/scala/screens/common/Styles.scala b/src/main/scala/screens/common/Styles.scala
@@ -0,0 +1,11 @@
+package screens.common
+
+import scala.scalajs.js
+
+object Styles{
+  val centerContent = js.Dynamic.literal(
+    flex = 1,
+    justifyContent = "center",
+    alignItems = "center"
+  )
+}