Feature/add catalog detail UI route

apps/mobile-app/src/main/kotlin/dev/marlonlom/apps/cappajv/di/data_module.kt

@@ -11,6 +11,7 @@ import dev.marlonlom.apps.cappajv.core.database.datasource.LocalDataSource
 import dev.marlonlom.apps.cappajv.core.database.datasource.LocalDataSourceImpl
 import dev.marlonlom.apps.cappajv.core.preferences.UserPreferencesRepository
 import dev.marlonlom.apps.cappajv.dataStore
+import dev.marlonlom.apps.cappajv.features.catalog_detail.CatalogDetailRepository
 import dev.marlonlom.apps.cappajv.features.catalog_favorites.CatalogFavoritesRepository
 import dev.marlonlom.apps.cappajv.features.catalog_list.CatalogListRepository
 import dev.marlonlom.apps.cappajv.features.catalog_search.CatalogSearchRepository
@@ -48,6 +49,11 @@ val dataModule = module {
       localDataSource = get(),
     )
   }
+  single<CatalogDetailRepository> {
+    CatalogDetailRepository(
+      localDataSource = get(),
+    )
+  }
   single {
     UserPreferencesRepository(androidContext().dataStore)
   }

apps/mobile-app/src/main/kotlin/dev/marlonlom/apps/cappajv/di/viewmodels_module.kt

@@ -10,9 +10,11 @@ import dev.marlonlom.apps.cappajv.features.catalog_favorites.CatalogFavoritesVie
 import dev.marlonlom.apps.cappajv.features.catalog_list.CatalogListViewModel
 import dev.marlonlom.apps.cappajv.features.catalog_search.CatalogSearchViewModel
 import dev.marlonlom.apps.cappajv.features.settings.SettingsViewModel
+import kotlinx.coroutines.ExperimentalCoroutinesApi
 import org.koin.androidx.viewmodel.dsl.viewModelOf
 import org.koin.dsl.module
 
+@ExperimentalCoroutinesApi
 val viewModelsModule = module {
   includes(dataModule)
   viewModelOf(::CatalogListViewModel)

apps/mobile-app/src/main/kotlin/dev/marlonlom/apps/cappajv/features/catalog_detail/CatalogDetailRoute.kt

@@ -0,0 +1,54 @@
+/*
+ * Copyright 2024 Marlonlom
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+package dev.marlonlom.apps.cappajv.features.catalog_detail
+
+import androidx.activity.compose.BackHandler
+import androidx.compose.foundation.ExperimentalFoundationApi
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.lifecycle.compose.collectAsStateWithLifecycle
+import dev.marlonlom.apps.cappajv.features.catalog_detail.screens.CatalogDetailRouteScreen
+import dev.marlonlom.apps.cappajv.ui.main.AppContentCallbacks
+import dev.marlonlom.apps.cappajv.ui.main.CappajvAppState
+import kotlinx.coroutines.ExperimentalCoroutinesApi
+import org.koin.androidx.compose.koinViewModel
+
+/**
+ * Catalog detail route composable ui.
+ *
+ * @author marlonlom
+ *
+ * @param appState Application ui state.
+ * @param catalogId Selected catalog item id.
+ * @param viewModel Catalog detail viewmodel.
+ */
+@ExperimentalFoundationApi
+@ExperimentalCoroutinesApi
+@Composable
+fun CatalogDetailRoute(
+  appState: CappajvAppState,
+  appContentCallbacks: AppContentCallbacks,
+  isRouting: Boolean,
+  catalogId: Long,
+  viewModel: CatalogDetailViewModel = koinViewModel(),
+) {
+
+  if (isRouting) {
+    BackHandler {
+      appState.navController.navigateUp()
+    }
+  }
+
+  viewModel.find(catalogId)
+  val detailUiState by viewModel.detail.collectAsStateWithLifecycle()
+
+  CatalogDetailRouteScreen(
+    appState = appState,
+    appContentCallbacks = appContentCallbacks,
+    isRouting = isRouting,
+    detailUiState = detailUiState,
+  )
+}

apps/mobile-app/src/main/kotlin/dev/marlonlom/apps/cappajv/features/catalog_detail/CatalogDetailViewModel.kt

@@ -5,32 +5,84 @@
 
 package dev.marlonlom.apps.cappajv.features.catalog_detail
 
-import androidx.compose.runtime.MutableState
-import androidx.compose.runtime.mutableStateOf
+import androidx.lifecycle.SavedStateHandle
 import androidx.lifecycle.ViewModel
 import androidx.lifecycle.viewModelScope
-import kotlinx.coroutines.launch
+import dev.marlonlom.apps.cappajv.features.catalog_detail.CatalogDetailUiState.Found
+import dev.marlonlom.apps.cappajv.features.catalog_detail.CatalogDetailUiState.NotFound
+import kotlinx.coroutines.ExperimentalCoroutinesApi
+import kotlinx.coroutines.flow.SharingStarted
+import kotlinx.coroutines.flow.flatMapLatest
+import kotlinx.coroutines.flow.mapLatest
+import kotlinx.coroutines.flow.stateIn
 
 /**
  * Catalog detail view model class.
  *
  * @author marlonlom
  *
  * @property repository catalog detail repository dependency
+ * @property savedStateHandle Saved state handle for the viewmodel.
  */
+@ExperimentalCoroutinesApi
 class CatalogDetailViewModel(
-  private val repository: CatalogDetailRepository
+  private val repository: CatalogDetailRepository,
+  private val savedStateHandle: SavedStateHandle = SavedStateHandle()
 ) : ViewModel() {
 
-  var detail: MutableState<CatalogDetail?> = mutableStateOf(null)
-    private set
+  /** Catalog detailed item value as state flow. */
+  val detail = savedStateHandle.getStateFlow(CATALOG_DETAIL_ID_KEY, NO_CATALOG_ID)
+    .flatMapLatest { catalogId ->
+      repository.find(catalogId)
+    }.mapLatest { detail ->
+      if (detail == null) NotFound else Found(detail)
+    }.stateIn(
+      scope = viewModelScope,
+      started = SharingStarted.Eagerly,
+      initialValue = NotFound
+    )
 
-  suspend fun find(itemId: Long) {
-    viewModelScope.launch {
-      repository.find(itemId).collect {
-        detail.value = it
-      }
-    }
+  /**
+   * Perform detailed search using catalog selected id.
+   *
+   * @param itemId Catalog item id value.
+   */
+  fun find(itemId: Long) {
+    savedStateHandle[CATALOG_DETAIL_ID_KEY] = itemId
   }
 
+  companion object {
+
+    private const val NO_CATALOG_ID = 0L
+
+    private const val CATALOG_DETAIL_ID_KEY = "CATALOG_DETAIL_ID"
+
+  }
+
+}
+
+/**
+ * Catalog details ui state sealed class.
+ *
+ * @author marlonlom
+ */
+sealed class CatalogDetailUiState {
+
+  /**
+   * Not found phase for catalog details ui state.
+   *
+   * @author marlonlom
+   */
+  data object NotFound : CatalogDetailUiState()
+
+  /**
+   * Success phase for catalog details ui state.
+   *
+   * @author marlonlom
+   *
+   * @property detail Catalog item detailed information.
+   */
+  data class Found(
+    val detail: CatalogDetail
+  ) : CatalogDetailUiState()
 }

apps/mobile-app/src/main/kotlin/dev/marlonlom/apps/cappajv/features/catalog_detail/parts/CatalogDetailButtonsBar.kt

@@ -0,0 +1,78 @@
+/*
+ * Copyright 2024 Marlonlom
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+package dev.marlonlom.apps.cappajv.features.catalog_detail.parts
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.rounded.FavoriteBorder
+import androidx.compose.material.icons.rounded.Share
+import androidx.compose.material3.Icon
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.OutlinedButton
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.unit.dp
+import dev.marlonlom.apps.cappajv.R
+import dev.marlonlom.apps.cappajv.core.database.entities.CatalogItem
+import dev.marlonlom.apps.cappajv.ui.main.AppContentCallbacks
+import dev.marlonlom.apps.cappajv.ui.main.CappajvAppState
+
+/**
+ * Catalog details buttons bar composable ui.
+ *
+ * @author marlonlom
+ *
+ * @param appState Application ui state.
+ * @param appContentCallbacks Application content callbacks.
+ * @param product Catalog detailed information
+ */
+@Composable
+fun CatalogDetailButtonsBar(
+  appState: CappajvAppState,
+  appContentCallbacks: AppContentCallbacks,
+  product: CatalogItem,
+) {
+  Row(
+    modifier = Modifier
+      .padding(top = 20.dp, bottom = 10.dp),
+    horizontalArrangement = Arrangement.spacedBy(16.dp),
+    verticalAlignment = Alignment.CenterVertically,
+  ) {
+    OutlinedButton(
+      onClick = { /*TODO*/ },
+      shape = MaterialTheme.shapes.small,
+    ) {
+      Icon(imageVector = Icons.Rounded.FavoriteBorder, contentDescription = null)
+      Spacer(modifier = Modifier.width(10.dp))
+      Text(text = stringResource(id = R.string.text_catalog_detail_button_favorite))
+    }
+    val shareMessage = stringResource(
+      R.string.text_catalog_detail_sharing,
+      product.title,
+    )
+    val currentContext = LocalContext.current
+    OutlinedButton(
+      onClick = {
+        appContentCallbacks.onShareIconClicked(currentContext, shareMessage)
+      },
+      shape = MaterialTheme.shapes.small,
+    ) {
+      Icon(imageVector = Icons.Rounded.Share, contentDescription = null)
+      Spacer(modifier = Modifier.width(10.dp))
+      Text(text = stringResource(id = R.string.text_catalog_detail_button_share))
+    }
+  }
+}
+
+

apps/mobile-app/src/main/kotlin/dev/marlonlom/apps/cappajv/features/catalog_detail/parts/CatalogDetailImage.kt

@@ -0,0 +1,56 @@
+/*
+ * Copyright 2024 Marlonlom
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+package dev.marlonlom.apps.cappajv.features.catalog_detail.parts
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.layout.size
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.unit.DpSize
+import androidx.compose.ui.unit.dp
+import coil.compose.AsyncImage
+import coil.request.ImageRequest
+
+/**
+ * Catalog favorite item card image composable.
+ *
+ * @author marlonlom
+ *
+ * @param title Title for content description.
+ * @param picture Image picture url.
+ * @param modifier Modifier for this composable.
+ */
+@Composable
+fun CatalogDetailImage(
+  title: String,
+  picture: String,
+  modifier: Modifier = Modifier,
+) {
+  val imageRequest = ImageRequest.Builder(LocalContext.current).data(picture).crossfade(true).build()
+
+  val imageModifier = modifier
+    .border(
+      width = 2.dp,
+      color = MaterialTheme.colorScheme.secondary,
+      shape = MaterialTheme.shapes.medium,
+    )
+    .clip(MaterialTheme.shapes.medium)
+    .size(DpSize(184.dp, 240.dp))
+    .background(Color.White)
+
+  AsyncImage(
+    model = imageRequest,
+    contentDescription = title,
+    contentScale = ContentScale.Crop,
+    modifier = imageModifier,
+  )
+}

apps/mobile-app/src/main/kotlin/dev/marlonlom/apps/cappajv/features/catalog_detail/parts/CatalogDetailTexts.kt

@@ -0,0 +1,53 @@
+/*
+ * Copyright 2024 Marlonlom
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+package dev.marlonlom.apps.cappajv.features.catalog_detail.parts
+
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.paddingFromBaseline
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.unit.dp
+import dev.marlonlom.apps.cappajv.core.database.entities.CatalogItem
+
+@Composable
+internal fun CatalogDetailProductDescriptionText(product: CatalogItem) {
+  Text(
+    modifier = Modifier
+      .fillMaxWidth()
+      .padding(vertical = 10.dp),
+    textAlign = TextAlign.Center,
+    text = product.detail
+  )
+}
+
+@Composable
+internal fun CatalogDetailProductCategoryText(product: CatalogItem) {
+  Text(
+    modifier = Modifier.fillMaxWidth(),
+    textAlign = TextAlign.Center,
+    text = product.category,
+    style = MaterialTheme.typography.bodyMedium
+  )
+}
+
+@Composable
+internal fun CatalogDetailProductTitle(product: CatalogItem) {
+  Text(
+    modifier = Modifier
+      .fillMaxWidth()
+      .paddingFromBaseline(60.dp, 10.dp),
+    textAlign = TextAlign.Center,
+    text = product.title,
+    fontWeight = FontWeight.Bold,
+    style = MaterialTheme.typography.headlineLarge
+  )
+}
+