From 3ef23981a9193a28d48d38df06c1c08f8f03d575 Mon Sep 17 00:00:00 2001
From: Mohsen <msn.mirhoseini@gmail.com>
Date: Tue, 5 Dec 2023 11:49:15 +0100
Subject: [PATCH] Navigation

Signed-off-by: Mohsen <msn.mirhoseini@gmail.com>
---
 .idea/artifacts/composeApp_desktop.xml       |  2 +-
 composeApp/src/commonMain/kotlin/App.kt      | 50 ++++++++++++--------
 composeApp/src/commonMain/kotlin/NavRoute.kt |  8 ++++
 gradle/libs.versions.toml                    |  2 +
 4 files changed, 42 insertions(+), 20 deletions(-)
 create mode 100644 composeApp/src/commonMain/kotlin/NavRoute.kt

diff --git a/.idea/artifacts/composeApp_desktop.xml b/.idea/artifacts/composeApp_desktop.xml
index 2858e5a..a4e5d1e 100644
--- a/.idea/artifacts/composeApp_desktop.xml
+++ b/.idea/artifacts/composeApp_desktop.xml
@@ -2,7 +2,7 @@
   <artifact type="jar" name="composeApp-desktop">
     <output-path>$PROJECT_DIR$/composeApp/build/libs</output-path>
     <root id="archive" name="composeApp-desktop.jar">
-      <element id="module-output" name="composeApp.RickandMorty.composeApp.desktopMain" />
+      <element id="module-output" name="RickandMorty.composeApp.desktopMain" />
     </root>
   </artifact>
 </component>
\ No newline at end of file
diff --git a/composeApp/src/commonMain/kotlin/App.kt b/composeApp/src/commonMain/kotlin/App.kt
index e1c0f8d..50edf0f 100644
--- a/composeApp/src/commonMain/kotlin/App.kt
+++ b/composeApp/src/commonMain/kotlin/App.kt
@@ -10,7 +10,7 @@ import androidx.compose.material3.Card
 import androidx.compose.material3.CardDefaults
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.Scaffold
+import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
@@ -30,26 +30,38 @@ import theme.Theme
 @Composable
 fun App(darkTheme: Boolean) {
     Theme(darkTheme = darkTheme) {
-        Scaffold {
-            val episodesViewModel =
-                getViewModel(
-                    key = Unit,
-                    factory = viewModelFactory {
-                        EpisodesViewModel(
-                            repository = EpisodesRepositoryImpl(remote = EpisodesRemoteDataSource()),
+        // A surface container using the 'background' color from the theme
+        Surface(modifier = Modifier.fillMaxSize(), color = MaterialTheme.colorScheme.background) {
+            val navController = rememberNavController()
+
+            NavHost(
+                navController = navController,
+                startDestination = NavRoute.SelectorScreen.route,
+            ) {
+                composable(
+                    route = NavRoute.EpisodesScreen.route,
+                ) {
+                    val episodesViewModel =
+                        getViewModel(
+                            key = Unit,
+                            factory = viewModelFactory {
+                                EpisodesViewModel(
+                                    repository = EpisodesRepositoryImpl(remote = EpisodesRemoteDataSource()),
+                                )
+                            },
                         )
-                    },
-                )
-            val uiState by episodesViewModel.uiState.collectAsState()
-            LaunchedEffect(episodesViewModel) {
-                episodesViewModel.updateEpisodes()
-            }
+                    val uiState by episodesViewModel.uiState.collectAsState()
+                    LaunchedEffect(episodesViewModel) {
+                        episodesViewModel.updateEpisodes()
+                    }
 
-            EpisodesPage(
-                uiState = uiState,
-                modifier = Modifier.fillMaxSize(),
-                onEpisodeClicked = episodesViewModel::onEpisodeClicked,
-            )
+                    EpisodesPage(
+                        uiState = uiState,
+                        modifier = Modifier.fillMaxSize(),
+                        onEpisodeClicked = { navController.navigate(NavRoute.EpisodesScreen.route) },
+                    )
+                }
+            }
         }
     }
 }
diff --git a/composeApp/src/commonMain/kotlin/NavRoute.kt b/composeApp/src/commonMain/kotlin/NavRoute.kt
new file mode 100644
index 0000000..9dd4e7e
--- /dev/null
+++ b/composeApp/src/commonMain/kotlin/NavRoute.kt
@@ -0,0 +1,8 @@
+sealed class NavRoute(val route: String) {
+
+    object EpisodesScreen : NavRoute(route = "episodes_screen")
+
+    object EpisodeScreen : NavRoute(route = "episode_screen")
+
+    object CharacterScreen : NavRoute(route = "character_screen")
+}
diff --git a/gradle/libs.versions.toml b/gradle/libs.versions.toml
index fae3c7c..ddbc7a8 100644
--- a/gradle/libs.versions.toml
+++ b/gradle/libs.versions.toml
@@ -10,6 +10,7 @@ androidx-activityCompose = "1.8.1"
 androidx-core-ktx = "1.12.0"
 androidx-appcompat = "1.6.1"
 androidx-material = "1.10.0"
+androidx-navigation-compose = "2.7.5"
 androidx-constraintlayout = "2.1.4"
 androidx-test-junit = "1.1.5"
 androidx-espresso-core = "3.5.1"
@@ -34,6 +35,7 @@ androidx-test-junit = { group = "androidx.test.ext", name = "junit", version.ref
 androidx-espresso-core = { group = "androidx.test.espresso", name = "espresso-core", version.ref = "androidx-espresso-core" }
 androidx-appcompat = { group = "androidx.appcompat", name = "appcompat", version.ref = "androidx-appcompat" }
 androidx-material3 = { group = "com.google.android.material", name = "material", version.ref = "androidx-material" }
+androidx-navigation-compose = { group = "androidx.navigation", name = "navigation-compose", version.ref = "androidx-navigation-compose" }
 androidx-constraintlayout = { group = "androidx.constraintlayout", name = "constraintlayout", version.ref = "androidx-constraintlayout" }
 androidx-activity-compose = { module = "androidx.activity:activity-compose", version.ref = "androidx-activityCompose" }
 ktor-client-content-negotiation = { module = "io.ktor:ktor-client-content-negotiation", version.ref = "ktor" }