Refactor ui

muhxdan · Dec 25, 2023 · 8d8278e · 8d8278e
1 parent 1659b8f
commit 8d8278e
Show file tree

Hide file tree

Showing 12 changed files with 484 additions and 135 deletions.
diff --git a/app/src/main/java/com/salt/apps/moov/ui/components/detail/DetailGenre.kt b/app/src/main/java/com/salt/apps/moov/ui/components/detail/DetailGenre.kt
@@ -0,0 +1,48 @@
+package com.salt.apps.moov.ui.components.detail
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.lazy.LazyRow
+import androidx.compose.material3.Card
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+import com.salt.apps.moov.data.model.Movie
+import com.salt.apps.moov.utilities.DataMapper
+
+@Composable
+fun DetailGenre(data: Movie, modifier: Modifier = Modifier) {
+ val genres = DataMapper.mapGenreIdToGenre(data.genreIds)
+ Box(
+ modifier = modifier
+ .fillMaxWidth()
+ ) {
+ LazyRow(
+ modifier = modifier
+ .align(Alignment.Center)
+ ) {
+ items(genres.take(3).size) { index ->
+ Card(
+ modifier = Modifier.padding(end = 10.dp),
+ ) {
+ Text(
+ text = genres[index] ?: "N/A",
+ color = MaterialTheme.colorScheme.onPrimary,
+ style = MaterialTheme.typography.bodyMedium,
+ modifier = Modifier
+ .background(MaterialTheme.colorScheme.primary)
+ .padding(
+ horizontal = 15.dp,
+ vertical = 5.dp
+ ),
+ )
+ }
+ }
+ }
+ }
+}
diff --git a/app/src/main/java/com/salt/apps/moov/ui/components/detail/DetailImage.kt b/app/src/main/java/com/salt/apps/moov/ui/components/detail/DetailImage.kt
@@ -0,0 +1,91 @@
+package com.salt.apps.moov.ui.components.detail
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.material3.Card
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Brush
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.dp
+import com.salt.apps.moov.data.model.Movie
+import com.salt.apps.moov.ui.components.ImageNetworkLoader
+import com.salt.apps.moov.ui.screens.detail.DetailViewModel
+
+@Composable
+fun DetailImage(data: Movie, detailViewModel: DetailViewModel) {
+ var isFavorite by remember { mutableStateOf(false) }
+ Box(
+ modifier = Modifier
+ .height(340.dp)
+ ) {
+ Box {
+ ImageNetworkLoader(
+ imageUrl = data.backdropPath ?: "",
+ voteAverage = 0f,
+ showVoteAverage = false,
+ modifier = Modifier
+ .fillMaxWidth()
+ .height(250.dp)
+ )
+
+ Spacer(
+ modifier = Modifier
+ .fillMaxWidth()
+ .align(Alignment.BottomCenter)
+ .height(100.dp)
+ .background(
+ brush = Brush.verticalGradient(
+ colors = listOf(
+ Color.Transparent,
+ Color.White
+ ),
+ ),
+ )
+ )
+
+ }
+ Box(
+ modifier = Modifier.align(Alignment.BottomCenter)
+ ) {
+ Card {
+ ImageNetworkLoader(
+ imageUrl = data.posterPath ?: "",
+ voteAverage = data.voteAverage?.toFloat() ?: 0f,
+ modifier = Modifier
+ .width(150.dp)
+ .height(200.dp)
+ )
+ }
+
+ Card(
+ modifier = Modifier
+ .align(Alignment.BottomEnd)
+ ) {
+ ToggleFavorite(
+ isFavorite = data.isFavorite,
+ onToggle = {
+ isFavorite = it
+ detailViewModel.toggleFavorite(data.id, isFavorite)
+ }, modifier = Modifier
+ .size(45.dp)
+ .background(
+ color = MaterialTheme.colorScheme.background,
+ )
+ )
+ }
+ }
+ }
+
+}
diff --git a/app/src/main/java/com/salt/apps/moov/ui/components/detail/DetailMovieRow.kt b/app/src/main/java/com/salt/apps/moov/ui/components/detail/DetailMovieRow.kt
@@ -0,0 +1,36 @@
+package com.salt.apps.moov.ui.components.detail
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+import com.salt.apps.moov.data.model.Movie
+
+@Composable
+fun DetailMovieRow(data: Movie) {
+ Row(
+ modifier = Modifier.fillMaxWidth(),
+ horizontalArrangement = Arrangement.SpaceEvenly
+ ) {
+ DetailColumn("Release date", data.releaseDate ?: "N/A")
+ DetailColumn("Language", data.originalLanguage)
+ DetailColumn("Votes", data.voteCount.toString())
+ }
+}
+
+@Composable
+fun DetailColumn(title: String, value: String) {
+ Column(
+ horizontalAlignment = Alignment.CenterHorizontally,
+ verticalArrangement = Arrangement.spacedBy(4.dp)
+ ) {
+ Text(title, style = MaterialTheme.typography.bodyMedium)
+ Text(value, style = MaterialTheme.typography.bodyMedium)
+ }
+}
diff --git a/app/src/main/java/com/salt/apps/moov/ui/components/detail/ToggleFavorite.kt b/app/src/main/java/com/salt/apps/moov/ui/components/detail/ToggleFavorite.kt
@@ -0,0 +1,41 @@
+package com.salt.apps.moov.ui.components.detail
+
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Favorite
+import androidx.compose.material.icons.filled.FavoriteBorder
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconToggleButton
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+
+@Composable
+fun ToggleFavorite(
+ modifier: Modifier = Modifier,
+ onToggle: (Boolean) -> Unit,
+ isFavorite: Boolean = false
+) {
+ var isChecked by remember { mutableStateOf(isFavorite) }
+
+ IconToggleButton(
+ modifier = modifier,
+ checked = isChecked,
+ onCheckedChange = {
+ isChecked = it
+ onToggle(it)
+ }
+ ) {
+ val icon = if (isChecked) Icons.Filled.Favorite else Icons.Filled.FavoriteBorder
+ val iconTint = if (isChecked) Color.Red else Color.Red
+
+ Icon(
+ imageVector = icon,
+ contentDescription = null,
+ tint = iconTint,
+ )
+ }
+}
diff --git a/app/src/main/java/com/salt/apps/moov/ui/components/main/MoovApp.kt b/app/src/main/java/com/salt/apps/moov/ui/components/main/MoovApp.kt
@@ -1,25 +1,15 @@
 package com.salt.apps.moov.ui.components.main
 
-import androidx.compose.animation.AnimatedContentTransitionScope
-import androidx.compose.animation.core.tween
-import androidx.compose.foundation.layout.padding
 import androidx.compose.material3.Scaffold
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
-import androidx.compose.ui.Modifier
 import androidx.navigation.NavHostController
-import androidx.navigation.NavType
-import androidx.navigation.compose.NavHost
-import androidx.navigation.compose.composable
 import androidx.navigation.compose.currentBackStackEntryAsState
 import androidx.navigation.compose.rememberNavController
-import androidx.navigation.navArgument
+import com.salt.apps.moov.ui.navigation.MoovNavHost
 import com.salt.apps.moov.ui.navigation.MoovScreen.DETAIL
 import com.salt.apps.moov.ui.navigation.MoovScreen.FAVORITE
 import com.salt.apps.moov.ui.navigation.MoovScreen.HOME
-import com.salt.apps.moov.ui.screens.detail.DetailScreen
-import com.salt.apps.moov.ui.screens.favorite.FavoriteScreen
-import com.salt.apps.moov.ui.screens.home.HomeScreen
 
 @Composable
 fun MoovApp(
@@ -28,14 +18,8 @@ fun MoovApp(
  val backStackEntry by navController.currentBackStackEntryAsState()
  val currentScreen = backStackEntry?.destination?.route?.let { route ->
  when (route) {
- HOME.route -> {
- HOME
- }
-
- "${DETAIL.route}/{movieId}" -> {
- DETAIL
- }
-
+ HOME.route -> HOME
+ "${DETAIL.route}/{movieId}" -> DETAIL
  FAVORITE.route -> FAVORITE
  else -> null
  }
@@ -55,71 +39,7 @@ fun MoovApp(
  )
  },
  content = { innerPadding ->
- NavHost(
- navController = navController,
- startDestination = HOME.route,
- modifier = Modifier.padding(innerPadding),
- ) {
- composable(
- route = HOME.route,
- enterTransition = {
- return@composable slideIntoContainer(
- AnimatedContentTransitionScope.SlideDirection.Up, tween(500)
- )
- },
- exitTransition = {
- return@composable slideOutOfContainer(
- AnimatedContentTransitionScope.SlideDirection.Start, tween(500)
- )
- },
- popEnterTransition = {
- return@composable slideIntoContainer(
- AnimatedContentTransitionScope.SlideDirection.End, tween(500)
- )
- },
- content = {
- HomeScreen(
- navController = navController,
- )
- }
- )
- composable(
- route = "${DETAIL.route}/{movieId}",
- arguments = listOf(
- navArgument(name = "movieId") {
- type = NavType.IntType
- }
- ),
- content = {
- val movieId = backStackEntry?.arguments?.getInt("movieId")
- DetailScreen(movieId = movieId)
- }
- )
-
- composable(
- route = FAVORITE.route,
- enterTransition = {
- return@composable slideIntoContainer(
- AnimatedContentTransitionScope.SlideDirection.Start, tween(500)
- )
- },
- exitTransition = {
- return@composable slideOutOfContainer(
- AnimatedContentTransitionScope.SlideDirection.End, tween(500)
- )
- },
- popEnterTransition = {
- return@composable slideIntoContainer(
- AnimatedContentTransitionScope.SlideDirection.Start, tween(500)
- )
- },
- content = {
- FavoriteScreen(
- navController = navController,
- )
- }
- )
- }
+ MoovNavHost(navController = navController, innerPadding = innerPadding)
  }
  )
-}
+}