Adding compose navigation

KevinSchildhorn · Oct 10, 2024 · 0e44daf · 0e44daf
1 parent de7e0f2
commit 0e44daf
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 34 deletions.
diff --git a/gradle/libs.versions.toml b/gradle/libs.versions.toml
@@ -21,6 +21,7 @@ ktlint = "0.0.26"
 ktlint-plugin = "12.1.1"
 multiplatform-settings = "1.1.1"
 multiplatform-settings-test = "1.0.0"
+navigationCompose = "2.7.0-alpha07"
 resources-version = "0.23.0"
 security-crypto = "1.1.0-alpha06"
 smbj = "0.11.5"
@@ -57,6 +58,7 @@ kotlinx-serialization-json = { module = "org.jetbrains.kotlinx:kotlinx-serializa
 ktlint = { module = "com.twitter.compose.rules:ktlint", version.ref = "ktlint" }
 multiplatform-settings = { module = "com.russhwolf:multiplatform-settings", version.ref = "multiplatform-settings" }
 multiplatform-settings-test = { module = "com.russhwolf:multiplatform-settings-test", version.ref = "multiplatform-settings-test" }
+navigation-compose = { module = "org.jetbrains.androidx.navigation:navigation-compose", version.ref = "navigationCompose" }
 security-crypto = { module = "androidx.security:security-crypto", version.ref = "security-crypto" }
 smbj = { module = "com.hierynomus:smbj", version.ref = "smbj" }
 sqlite-driver = { module = "app.cash.sqldelight:sqlite-driver", version.ref = "sqlite-driver" }

diff --git a/shared/build.gradle.kts b/shared/build.gradle.kts
@@ -42,6 +42,7 @@ kotlin {
                 implementation(compose.material)
                 @OptIn(org.jetbrains.compose.ExperimentalComposeLibrary::class)
                 implementation(compose.components.resources)
+                implementation(libs.navigation.compose)
                 implementation(libs.eva.icons)
                 implementation(libs.cache4k)
                 implementation(libs.kotlinx.serialization.json)

diff --git a/shared/src/commonMain/kotlin/App.kt b/shared/src/commonMain/kotlin/App.kt
@@ -1,7 +1,16 @@
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.padding
 import androidx.compose.material.MaterialTheme
+import androidx.compose.material.Scaffold
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
+import androidx.compose.ui.Modifier
+import androidx.navigation.NavHostController
+import androidx.navigation.compose.NavHost
+import androidx.navigation.compose.composable
+import androidx.navigation.compose.rememberNavController
+import com.kevinschildhorn.fotopresenter.ui.atoms.FotoTypography
+import com.kevinschildhorn.fotopresenter.ui.atoms.fotoColors
+import com.kevinschildhorn.fotopresenter.ui.atoms.fotoShapes
 import com.kevinschildhorn.fotopresenter.ui.screens.common.Screen
 import com.kevinschildhorn.fotopresenter.ui.screens.directory.DirectoryScreen
 import com.kevinschildhorn.fotopresenter.ui.screens.directory.DirectoryViewModel
@@ -12,49 +21,59 @@ import com.kevinschildhorn.fotopresenter.ui.screens.playlist.PlaylistViewModel
 import com.kevinschildhorn.fotopresenter.ui.screens.slideshow.SlideshowScreen
 import com.kevinschildhorn.fotopresenter.ui.screens.slideshow.SlideshowViewModel
 
+// The ViewModels need to be passed in here because koin doesn't support Koin
 @Composable
 fun App(
     loginViewModel: LoginViewModel,
     directoryViewModel: DirectoryViewModel,
     slideshowViewModel: SlideshowViewModel,
     playlistViewModel: PlaylistViewModel,
+    navController: NavHostController = rememberNavController()
 ) {
-    val currentScreen = remember { mutableStateOf(Screen.LOGIN) }
+    MaterialTheme(
+        colors = fotoColors,
+        typography = FotoTypography(),
+        shapes = fotoShapes,
+    ) {
 
-    MaterialTheme {
-        when (currentScreen.value) {
-            Screen.LOGIN ->
-                LoginScreen(loginViewModel) {
-                    directoryViewModel.setLoggedIn()
-                    currentScreen.value = Screen.DIRECTORY
+        Scaffold { innerPadding ->
+            NavHost(
+                navController = navController,
+                startDestination = Screen.LOGIN.name,
+                modifier = Modifier.fillMaxSize().padding(innerPadding)
+            ) {
+                composable(route = Screen.LOGIN.name) {
+                    LoginScreen(loginViewModel) {
+                        navController.navigate(Screen.DIRECTORY.name)
+                    }
                 }
-
-            Screen.DIRECTORY ->
-                DirectoryScreen(
-                    directoryViewModel,
-                    onLogout = {
-                        loginViewModel.setLoggedOut()
-                        currentScreen.value = Screen.LOGIN
-                    },
-                    onStartSlideshow = {
-                        slideshowViewModel.setSlideshow(it)
-                        directoryViewModel.clearSlideshow()
-                        currentScreen.value = Screen.SLIDESHOW
-                    },
-                    onShowPlaylists = {
-                        currentScreen.value = Screen.PLAYLIST
+                composable(route = Screen.DIRECTORY.name) {
+                    DirectoryScreen(
+                        directoryViewModel,
+                        onLogout = {
+                            loginViewModel.setLoggedOut()
+                            navController.navigate(Screen.LOGIN.name)
+                        },
+                        onStartSlideshow = {
+                            slideshowViewModel.setSlideshow(it)
+                            directoryViewModel.clearSlideshow()
+                            navController.navigate(Screen.SLIDESHOW.name)
+                        },
+                        onShowPlaylists = {
+                            navController.navigate(Screen.PLAYLIST.name)
+                        }
+                    )
+                }
+                composable(route = Screen.SLIDESHOW.name) {
+                    SlideshowScreen(slideshowViewModel) {
+                        navController.navigate(Screen.DIRECTORY.name)
                     }
-                )
-
-            Screen.SLIDESHOW ->
-                SlideshowScreen(slideshowViewModel) {
-                    currentScreen.value = Screen.DIRECTORY
                 }
-
-            Screen.PLAYLIST -> {
-                PlaylistScreen(playlistViewModel, overlaid = false) {
-                    slideshowViewModel.setSlideshowFromPlaylist(it)
-                    currentScreen.value = Screen.SLIDESHOW
+                composable(route = Screen.PLAYLIST.name) {
+                    PlaylistScreen(playlistViewModel, overlaid = false) {
+                        slideshowViewModel.setSlideshowFromPlaylist(it)
+                        navController.navigate(Screen.SLIDESHOW.name)
+                    }
                 }
             }
         }