type safe navigation added

Author: Coding-Meet

README.md

@@ -26,8 +26,8 @@ on each platform.
 * Declarative UI with Jetpack Compose
     * Shared UI components across Android and desktop.
     * Material Design and Material Design 3 support.
-* Smooth Navigation & State Management:
-    * Simple navigation using Jetpack Compose Navigation.
+* Type-Safe Navigation & State Management:
+  * Type-Safe navigation using Jetpack Compose Navigation.
 * MVVM Architecture:
     * Model-View-ViewModel pattern for separation of concerns.
     * ViewModel management for UI-related data.
@@ -54,8 +54,8 @@ on each platform.
   layer over SQLite to allow for more robust database access while harnessing the full power of SQLite.
 - [DataStore](https://developer.android.com/kotlin/multiplatform/datastore) - The DataStore library stores data
   asynchronously, consistently, and transactionally, overcoming some of the drawbacks of SharedPreferences
-- [Navigation](https://www.jetbrains.com/help/kotlin-multiplatform-dev/compose-navigation-routing.html) Navigation is a
-  key part of UI applications that allows users to move between different application screens.
+- [Navigation](https://www.jetbrains.com/help/kotlin-multiplatform-dev/compose-navigation-routing.html) - Navigation is
+  a key part of UI applications that allows users to move between different application screens.
 - [kotlinx.coroutines](https://github.com/Kotlin/kotlinx.coroutines) - Library support for Kotlin coroutines with
   multiplatform support.
 - [Common ViewModel](https://www.jetbrains.com/help/kotlin-multiplatform-dev/compose-viewmodel.html) The Android

composeApp/src/androidMain/kotlin/com/coding/meet/newsapp/MainActivity.kt

@@ -14,7 +14,7 @@ class MainActivity : ComponentActivity() {
     override fun onCreate(savedInstanceState: Bundle?) {
         installSplashScreen()
         super.onCreate(savedInstanceState)
-        setActivityProvider {  this }
+        setActivityProvider { this }
         setContent {
             enableEdgeToEdge(
                 SystemBarStyle.dark(MaterialTheme.colorScheme.onSurface.toArgb()),

composeApp/src/androidMain/kotlin/com/coding/meet/newsapp/data/datastore/DataStorePreferences.android.kt

@@ -8,7 +8,7 @@ import org.koin.mp.KoinPlatform
 
 actual fun dataStorePreferences(): DataStore<Preferences> {
     val appContext = KoinPlatform.getKoin().get<Application>()
-     return AppSettings.getDataStore(
+    return AppSettings.getDataStore(
         producePath = {
             appContext.filesDir
                 .resolve(dataStoreFileName)

composeApp/src/androidMain/kotlin/com/coding/meet/newsapp/utils/CommonExpectActual.android.kt

@@ -21,13 +21,15 @@ actual fun shareLink(url: String) {
     val shareIntent = Intent.createChooser(sendIntent, "Share Link")
     activityProvider.invoke().startActivity(shareIntent)
 }
-private var activityProvider : () -> Activity = {
+
+private var activityProvider: () -> Activity = {
     throw IllegalArgumentException("Error")
 }
 
-fun setActivityProvider(provider :() -> Activity){
+fun setActivityProvider(provider: () -> Activity) {
     activityProvider = provider
 }
+
 actual fun randomUUIDStr(): String {
     return UUID.randomUUID().toString()
 }

composeApp/src/commonMain/kotlin/com/coding/meet/newsapp/data/datastore/DataStorePreferences.kt

@@ -13,6 +13,7 @@ expect fun dataStorePreferences(): DataStore<Preferences>
 
 object AppSettings {
     private lateinit var dataStore: DataStore<Preferences>
+
     @OptIn(InternalCoroutinesApi::class)
     private val lock = SynchronizedObject()
 

composeApp/src/commonMain/kotlin/com/coding/meet/newsapp/data/model/Article.kt

@@ -17,7 +17,7 @@ data class Article(
     val description: String?,
     @SerialName("publishedAt")
     @PrimaryKey(autoGenerate = false)
-    @ColumnInfo(name="articleId")
+    @ColumnInfo(name = "articleId")
     val publishedAt: String,
     @SerialName("source")
     val source: Source,

composeApp/src/commonMain/kotlin/com/coding/meet/newsapp/data/repository/LocalNewsRepository.kt

@@ -16,6 +16,7 @@ class LocalNewsRepository(
     suspend fun deleteArticle(article: Article) {
         newsDao.delete(article)
     }
+
     suspend fun deleteAllBookmark() {
         newsDao.deleteAllBookmark()
     }

composeApp/src/commonMain/kotlin/com/coding/meet/newsapp/data/repository/OnlineNewsRepository.kt

@@ -4,8 +4,9 @@ import com.coding.meet.newsapp.BuildKonfig.API_KEY
 import io.ktor.client.*
 import io.ktor.client.request.*
 import io.ktor.client.statement.*
+
 class OnlineNewsRepository(
-    private val networkModule : HttpClient
+    private val networkModule: HttpClient
 ) {
 
     suspend fun getNews(category: String): HttpResponse {

composeApp/src/commonMain/kotlin/com/coding/meet/newsapp/di/Koin.kt

@@ -2,6 +2,7 @@ package com.coding.meet.newsapp.di
 
 import org.koin.core.context.startKoin
 import org.koin.dsl.KoinAppDeclaration
+
 fun initKoin(appDeclaration: KoinAppDeclaration = {}) =
     startKoin {
         appDeclaration()

composeApp/src/commonMain/kotlin/com/coding/meet/newsapp/di/NetworkModule.kt

@@ -7,11 +7,9 @@ import io.ktor.client.plugins.contentnegotiation.*
 import io.ktor.client.plugins.logging.*
 import io.ktor.http.*
 import io.ktor.serialization.kotlinx.json.*
-import kotlinx.serialization.ExperimentalSerializationApi
 import kotlinx.serialization.json.Json
 import org.koin.dsl.module
 
-@OptIn(ExperimentalSerializationApi::class)
 val networkModule = module {
     single {
         HttpClient {

composeApp/src/commonMain/kotlin/com/coding/meet/newsapp/theme/Theme.kt

@@ -39,9 +39,11 @@ fun NewsAppTheme(
         Theme.LIGHT_MODE.name -> {
             LightColorScheme
         }
+
         Theme.DARK_MODE.name -> {
             DarkColorScheme
         }
+
         else -> {
             if (darkTheme) {
                 DarkColorScheme

composeApp/src/commonMain/kotlin/com/coding/meet/newsapp/ui/MainScreen.kt

@@ -19,7 +19,7 @@ import androidx.navigation.compose.rememberNavController
 import com.coding.meet.newsapp.ui.navigation.NavigationItem
 import com.coding.meet.newsapp.ui.navigation.NavigationSideBar
 import com.coding.meet.newsapp.ui.navigation.NewsBottomNavigation
-import com.coding.meet.newsapp.ui.navigation.graphs.RootNavGraph
+import com.coding.meet.newsapp.ui.navigation.graphs.NavGraph
 import com.coding.meet.newsapp.ui.setting.SettingViewModel
 import com.coding.meet.newsapp.utils.navigationItemsLists
 
@@ -41,7 +41,9 @@ fun MainScreen(settingViewModel: SettingViewModel) {
     }
     val navigationItem by remember {
         derivedStateOf {
-            navigationItemsLists.find { it.route == currentRoute }
+            navigationItemsLists.find {
+                it.route::class.qualifiedName == currentRoute
+            }
         }
     }
     val isMainScreenVisible by remember(isMediumExpandedWWSC) {
@@ -99,7 +101,7 @@ fun MainScaffold(
 ) {
     Row {
         AnimatedVisibility(
-            modifier = Modifier.background( MaterialTheme.colorScheme.surface),
+            modifier = Modifier.background(MaterialTheme.colorScheme.surface),
             visible = isMediumExpandedWWSC && isMainScreenVisible,
             enter = slideInHorizontally(
                 // Slide in from the left
@@ -131,7 +133,8 @@ fun MainScaffold(
                         targetOffsetY = { fullHeight -> fullHeight }
                     )
                 ) {
-                    NewsBottomNavigation(items = navigationItemsLists,
+                    NewsBottomNavigation(
+                        items = navigationItemsLists,
                         currentRoute = currentRoute,
                         onItemClick = { currentNavigationItem ->
                             onItemClick(currentNavigationItem)
@@ -140,7 +143,7 @@ fun MainScaffold(
                 }
             }
         ) { innerPadding ->
-            RootNavGraph(
+            NavGraph(
                 rootNavController = rootNavController,
                 innerPadding = innerPadding,
                 settingViewModel = settingViewModel

composeApp/src/commonMain/kotlin/com/coding/meet/newsapp/ui/article_detail/ArticleDetailScreen.kt

@@ -5,13 +5,15 @@ import androidx.compose.animation.core.tween
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.automirrored.filled.ArrowBack
 import androidx.compose.material.icons.filled.Share
 import androidx.compose.material3.*
 import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.graphicsLayer
 import androidx.compose.ui.graphics.painter.Painter
 import androidx.compose.ui.layout.ContentScale
@@ -104,7 +106,7 @@ fun ArticleDetailScreen(
         ) {
             item {
                 Box(
-                    modifier = Modifier.fillMaxWidth(),
+                    modifier = Modifier.fillMaxWidth().clip(RoundedCornerShape(10)),
                     contentAlignment = Alignment.Center
                 ) {
                     var imageLoadResult by remember {

composeApp/src/commonMain/kotlin/com/coding/meet/newsapp/ui/article_detail/ArticleDetailViewModel.kt

@@ -12,7 +12,7 @@ import kotlinx.coroutines.IO
 import kotlinx.coroutines.launch
 
 class ArticleDetailViewModel(
-    private val localNewsRepository : LocalNewsRepository
+    private val localNewsRepository: LocalNewsRepository
 ) : ViewModel() {
 
     var isBookmarked by mutableStateOf(false)

composeApp/src/commonMain/kotlin/com/coding/meet/newsapp/ui/bookmark/BookmarkScreen.kt

@@ -14,7 +14,7 @@ import androidx.navigation.NavController
 import com.coding.meet.newsapp.ui.common.ArticleListScreen
 import com.coding.meet.newsapp.ui.common.EmptyContent
 import com.coding.meet.newsapp.ui.common.ShimmerEffect
-import com.coding.meet.newsapp.ui.navigation.SettingRouteScreen
+import com.coding.meet.newsapp.ui.navigation.Route
 import com.coding.meet.newsapp.utils.navigationItemsLists
 import news_kmp_app.composeapp.generated.resources.Res
 import news_kmp_app.composeapp.generated.resources.ic_browse
@@ -28,12 +28,12 @@ fun BookmarkScreen(
     rootNavController: NavController,
     paddingValues: PaddingValues
 ) {
-    val bookmarkViewModel = koinViewModel<com.coding.meet.newsapp.ui.bookmark.BookmarkViewModel>()
+    val bookmarkViewModel = koinViewModel<BookmarkViewModel>()
 
     val uiState by bookmarkViewModel.bookmarkNewsStateFlow.collectAsState()
     val originDirection = LocalLayoutDirection.current
     Column(
-        modifier =  Modifier.fillMaxSize().padding(
+        modifier = Modifier.fillMaxSize().padding(
             start = paddingValues.calculateStartPadding(originDirection),
             end = paddingValues.calculateEndPadding(originDirection),
             bottom = paddingValues.calculateBottomPadding(),
@@ -48,7 +48,7 @@ fun BookmarkScreen(
             )
         }, actions = {
             IconButton(onClick = {
-                rootNavController.navigate(SettingRouteScreen.SettingDetail.route)
+                rootNavController.navigate(Route.SettingDetail)
             }) {
                 Icon(
                     imageVector = Icons.Filled.Settings,

composeApp/src/commonMain/kotlin/com/coding/meet/newsapp/ui/bookmark/BookmarkViewModel.kt

@@ -13,13 +13,14 @@ import kotlinx.coroutines.flow.catch
 import kotlinx.coroutines.launch
 
 class BookmarkViewModel(
-    private val localNewsRepository : LocalNewsRepository
+    private val localNewsRepository: LocalNewsRepository
 ) : ViewModel() {
 
     private val _bookmarkNewsStateFlow =
         MutableStateFlow<Resource<List<Article>>>(Resource.Loading)
     val bookmarkNewsStateFlow: StateFlow<Resource<List<Article>>>
         get() = _bookmarkNewsStateFlow
+
     init {
         getArticles()
     }

composeApp/src/commonMain/kotlin/com/coding/meet/newsapp/ui/common/ArticleListScreen.kt

@@ -10,7 +10,7 @@ import androidx.navigation.NavController
 import com.coding.meet.newsapp.data.model.Article
 import com.coding.meet.newsapp.theme.cardMinSize
 import com.coding.meet.newsapp.theme.mediumPadding
-import com.coding.meet.newsapp.ui.navigation.NewsRouteScreen
+import com.coding.meet.newsapp.ui.navigation.Route
 import com.coding.meet.newsapp.utils.randomUUIDStr
 import kotlinx.serialization.encodeToString
 import kotlinx.serialization.json.Json
@@ -36,7 +36,7 @@ fun ArticleListScreen(
                 rootNavController.currentBackStackEntry?.savedStateHandle?.apply {
                     set("article", articleStr)
                 }
-                rootNavController.navigate(NewsRouteScreen.NewsDetail.route)
+                rootNavController.navigate(Route.NewsDetail)
             })
         }
     }

composeApp/src/commonMain/kotlin/com/coding/meet/newsapp/ui/common/EmptyContent.kt

@@ -26,7 +26,7 @@ fun EmptyContent(
     message: String,
     icon: DrawableResource,
     isOnRetryBtnVisible: Boolean = true,
-    onRetryClick: (() -> Unit) = {  }
+    onRetryClick: (() -> Unit) = { }
 ) {
     Column(
         modifier = Modifier.fillMaxSize(),

composeApp/src/commonMain/kotlin/com/coding/meet/newsapp/ui/headline/HeadlineScreen.kt

@@ -18,7 +18,7 @@ import com.coding.meet.newsapp.theme.xSmallPadding
 import com.coding.meet.newsapp.ui.common.ArticleListScreen
 import com.coding.meet.newsapp.ui.common.EmptyContent
 import com.coding.meet.newsapp.ui.common.ShimmerEffect
-import com.coding.meet.newsapp.ui.navigation.SettingRouteScreen
+import com.coding.meet.newsapp.ui.navigation.Route
 import com.coding.meet.newsapp.utils.categoryList
 import com.coding.meet.newsapp.utils.navigationItemsLists
 import news_kmp_app.composeapp.generated.resources.Res
@@ -54,7 +54,7 @@ fun HeadlineScreen(
             )
         }, actions = {
             IconButton(onClick = {
-                rootNavController.navigate(SettingRouteScreen.SettingDetail.route)
+                rootNavController.navigate(Route.SettingDetail)
             }) {
                 Icon(
                     imageVector = Icons.Filled.Settings,

composeApp/src/commonMain/kotlin/com/coding/meet/newsapp/ui/navigation/BottomNavigationBar.kt

@@ -1,4 +1,5 @@
 package com.coding.meet.newsapp.ui.navigation
+
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.material3.*
 import androidx.compose.runtime.Composable
@@ -17,8 +18,10 @@ fun NewsBottomNavigation(
         modifier = Modifier.fillMaxWidth(),
     ) {
         items.forEach { navigationItem ->
+            val isSelected = navigationItem.route::class.qualifiedName == currentRoute
+
             NavigationBarItem(
-                selected = currentRoute == navigationItem.route,
+                selected = isSelected,
                 onClick = { onItemClick(navigationItem) },
                 icon = {
                     Icon(
@@ -29,7 +32,7 @@ fun NewsBottomNavigation(
                 label = {
                     Text(
                         text = stringResource(navigationItem.title),
-                        style = if (navigationItem.route == currentRoute) MaterialTheme.typography.labelLarge
+                        style = if (isSelected) MaterialTheme.typography.labelLarge
                         else MaterialTheme.typography.labelMedium,
                         maxLines = 1,
                         overflow = TextOverflow.Ellipsis

composeApp/src/commonMain/kotlin/com/coding/meet/newsapp/ui/navigation/NavigationItem.kt

@@ -6,5 +6,5 @@ import org.jetbrains.compose.resources.StringResource
 data class NavigationItem(
     val icon: DrawableResource,
     val title: StringResource,
-    val route : String
+    val route: Route
 )

composeApp/src/commonMain/kotlin/com/coding/meet/newsapp/ui/navigation/NavigationSideBar.kt

@@ -21,6 +21,8 @@ fun NavigationSideBar(
         containerColor = MaterialTheme.colorScheme.surface,
     ) {
         items.forEach { navigationItem ->
+            val isSelected = navigationItem.route::class.qualifiedName == currentRoute
+
             NavigationRailItem(
                 modifier = Modifier.padding(vertical = smallPadding),
                 icon = {
@@ -32,13 +34,13 @@ fun NavigationSideBar(
                 label = {
                     Text(
                         text = stringResource(navigationItem.title),
-                        style = if (navigationItem.route == currentRoute) MaterialTheme.typography.labelLarge
+                        style = if (isSelected) MaterialTheme.typography.labelLarge
                         else MaterialTheme.typography.labelMedium,
                         maxLines = 1,
                         overflow = TextOverflow.Ellipsis
                     )
                 },
-                selected = navigationItem.route == currentRoute,
+                selected = isSelected,
                 onClick = { onItemClick(navigationItem) }
             )
         }

composeApp/src/commonMain/kotlin/com/coding/meet/newsapp/ui/navigation/Routes.kt

@@ -1,20 +1,22 @@
 package com.coding.meet.newsapp.ui.navigation
 
+import kotlinx.serialization.Serializable
 
-object Graph {
-    const val MainScreenGraph = "mainScreenGraph"
-}
+sealed interface Route {
 
-sealed class MainRouteScreen(var route: String) {
+    @Serializable
+    data object Headline : Route
 
-    object Headline : MainRouteScreen("headline")
-    object Search : MainRouteScreen("search")
-    object Bookmark : MainRouteScreen("bookmark")
-}
-sealed class NewsRouteScreen(var route: String) {
-    object NewsDetail : NewsRouteScreen("newsDetail")
-}
+    @Serializable
+    data object Search : Route
+
+    @Serializable
+    data object Bookmark : Route
+
+    @Serializable
+    data object NewsDetail : Route
+
+    @Serializable
+    data object SettingDetail : Route
 
-sealed class SettingRouteScreen(var route: String) {
-    object SettingDetail : SettingRouteScreen("settingDetail")
 }