move dog image

ui/src/main/java/com/rubylichtenstein/ui/breeds/BreedsScreen.kt

@@ -90,7 +90,7 @@ fun BreedsScreen(
 fun BreedList(breeds: List<BreedEntity>, onItemClick: (BreedEntity) -> Unit) {
     LazyColumn {
         items(breeds) { breed ->
-            BreedListItem(breed = breed.name, onClick = { onItemClick(breed) })
+            BreedListItem(breed = breed, onClick = { onItemClick(breed) })
             HorizontalDivider(
                 thickness = 2.dp,
                 color = MaterialTheme.colorScheme.primaryContainer
@@ -100,15 +100,15 @@ fun BreedList(breeds: List<BreedEntity>, onItemClick: (BreedEntity) -> Unit) {
 }
 
 @Composable
-fun BreedListItem(breed: String, onClick: () -> Unit) {
+fun BreedListItem(breed: BreedEntity, onClick: () -> Unit) {
     ListItem(
         modifier = Modifier
             .clickable(onClick = onClick)
             .padding(top = 4.dp, bottom = 4.dp)
             .fillMaxWidth(),
         headlineContent = {
             Text(
-                text = breed.capitalizeWords(),
+                text = breed.name.capitalizeWords(),
                 style = MaterialTheme.typography.titleLarge,
                 color = MaterialTheme.colorScheme.onBackground
             )

ui/src/main/java/com/rubylichtenstein/ui/images/DogImage.kt

@@ -0,0 +1,53 @@
+package com.rubylichtenstein.ui.images
+
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.aspectRatio
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.size
+import androidx.compose.material3.CircularProgressIndicator
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import coil.compose.SubcomposeAsyncImage
+
+@Composable
+fun DogImage(url: String) {
+    SubcomposeAsyncImage(
+        model = url,
+        contentDescription = null,
+        modifier = Modifier
+            .fillMaxSize()
+            .aspectRatio(1f),
+        contentScale = ContentScale.Crop,
+        loading = {
+            Box(
+                Modifier.fillMaxSize(),
+                contentAlignment = Alignment.Center  // <-- Centering here
+            ) {
+                CircularProgressIndicator(
+                    Modifier.size(32.dp)
+                )
+            }
+        },
+        error = {
+            Box(
+                Modifier.fillMaxSize(),
+                contentAlignment = Alignment.Center  // <-- Centering here
+            ) {
+                Text(
+                    text = "Image failed to load",
+                    style = TextStyle(
+                        color = Color.Red,
+                        fontSize = 14.sp
+                    )
+                )
+            }
+        }
+    )
+}

ui/src/main/java/com/rubylichtenstein/ui/images/ImagesGrid.kt

@@ -5,10 +5,8 @@ import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.aspectRatio
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.lazy.grid.GridCells
 import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
 import androidx.compose.foundation.lazy.grid.items
@@ -17,7 +15,6 @@ import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Favorite
 import androidx.compose.material.icons.filled.FavoriteBorder
 import androidx.compose.material3.Card
-import androidx.compose.material3.CircularProgressIndicator
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
@@ -27,13 +24,8 @@ import androidx.compose.runtime.getValue
 import androidx.compose.ui.Alignment
 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.text.TextStyle
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
-import androidx.compose.ui.unit.sp
-import coil.compose.SubcomposeAsyncImage
 import com.rubylichtenstein.domain.images.DogImageEntity
 
 @Composable
@@ -70,7 +62,7 @@ fun DogImageItem(
                 .clip(RoundedCornerShape(16.dp))
                 .fillMaxSize()
         ) {
-            DogImage(breedImage)
+            DogImage(breedImage.url)
         }
 
         Box(
@@ -101,43 +93,6 @@ fun DogImageItem(
     }
 }
 
-
-@Composable
-private fun DogImage(breedImage: DogImageEntity) {
-    SubcomposeAsyncImage(
-        model = breedImage.url,
-        contentDescription = null,
-        modifier = Modifier
-            .fillMaxSize()
-            .aspectRatio(1f),
-        contentScale = ContentScale.Crop,
-        loading = {
-            Box(
-                Modifier.fillMaxSize(),
-                contentAlignment = Alignment.Center  // <-- Centering here
-            ) {
-                CircularProgressIndicator(
-                    Modifier.size(32.dp)
-                )
-            }
-        },
-        error = {
-            Box(
-                Modifier.fillMaxSize(),
-                contentAlignment = Alignment.Center  // <-- Centering here
-            ) {
-                Text(
-                    text = "Image failed to load",
-                    style = TextStyle(
-                        color = Color.Red,
-                        fontSize = 14.sp
-                    )
-                )
-            }
-        }
-    )
-}
-
 @Composable
 fun FavoriteIconButton(
     isFavorite: Boolean,
@@ -160,25 +115,4 @@ fun FavoriteIconButton(
             tint = MaterialTheme.colorScheme.primary.copy(alpha = animatedProgress)
         )
     }
-}
-
-
-//@Preview(showBackground = true)
-//@Composable
-//fun PreviewDogImagesGrid() {
-//    val mockImages = List(50) {
-////        DogImageEntity(
-////            breedKey = "breedKey",
-////            url = "https://images.dog.ceo/breeds/hound-afghan/n02088094_1003.jpg"
-////        )
-//    }
-//
-//    val mockFavorites = listOf<DogImageEntity>()
-//
-//    DogImagesGrid(
-//        images = mockImages,
-//        onToggleFavorite = {},
-//        favoriteImages = mockFavorites,
-//        showNames = true
-//    )
-//}
+}