[Feature] Add Grid View Support (Bad practice)

app/src/main/java/com/example/picsum/core/ContextExtensions.kt

@@ -0,0 +1,17 @@
+package com.example.picsum.core
+
+import android.app.ActivityManager
+import android.content.Context
+import androidx.core.content.getSystemService
+
+fun Context.isHighPerformingDevice(): Boolean {
+    val activityManager = getSystemService<ActivityManager>() ?: return false
+
+    val memInfo = ActivityManager.MemoryInfo()
+    activityManager.getMemoryInfo(memInfo)
+    val lessThan3GbOfRam = memInfo.totalMem < 3L * 1024 * 1024 * 1024
+    return !activityManager.isLowRamDevice &&
+        !lessThan3GbOfRam &&
+        activityManager.memoryClass >= 128 &&
+        Runtime.getRuntime().availableProcessors() >= 4
+}

app/src/main/java/com/example/picsum/core/PicsumApp.kt

@@ -5,7 +5,10 @@ import android.os.Build
 import android.os.StrictMode
 import coil.ImageLoader
 import coil.ImageLoaderFactory
+import coil.disk.DiskCache
+import coil.memory.MemoryCache
 import dagger.hilt.android.HiltAndroidApp
+import kotlinx.coroutines.Dispatchers
 
 @HiltAndroidApp
 class PicsumApp : Application(), ImageLoaderFactory {
@@ -18,9 +21,24 @@ class PicsumApp : Application(), ImageLoaderFactory {
     override fun newImageLoader(): ImageLoader {
         return ImageLoader.Builder(this)
             .crossfade(true)
+            .allowRgb565(!isHighPerformingDevice())
             .components {
                 add(RemotePhotoMapper)
+                add(RemoteThumbnailMapper)
             }
+            .memoryCache {
+                MemoryCache.Builder(this)
+                    .maxSizePercent(0.25)
+                    .build()
+            }
+            .diskCache {
+                DiskCache.Builder()
+                    .directory(this.cacheDir.resolve("image_cache"))
+                    .maxSizePercent(0.02)
+                    .build()
+            }
+            .fetcherDispatcher(Dispatchers.IO.limitedParallelism(8))
+            .decoderDispatcher(Dispatchers.IO.limitedParallelism(2))
             .build()
     }
 

app/src/main/java/com/example/picsum/core/RemoteThumbnailMapper.kt

@@ -0,0 +1,13 @@
+package com.example.picsum.core
+
+import coil.map.Mapper
+import coil.request.Options
+import com.example.domain.models.models.RemoteThumbnail
+
+object RemoteThumbnailMapper : Mapper<RemoteThumbnail, String> {
+    override fun map(data: RemoteThumbnail, options: Options): String? {
+        val width = options.size.width
+        val height = options.size.height
+        return "https://picsum.photos/$width/$height?image=${data.id.id}"
+    }
+}

gradle/libs.versions.toml

@@ -20,6 +20,7 @@ composeBom = "2024.02.02"
 appcompat = "1.6.1"
 material = "1.11.0"
 material3 = "1.2.1"
+materialIconsExtended = "1.6.3"
 mockwebserver = "4.12.0"
 moshi = "1.15.1"
 moshiKotlinCodegen = "1.15.1"
@@ -36,6 +37,7 @@ composeLinkChecks = "1.3.1"
 
 [libraries]
 androidx-core-ktx = { group = "androidx.core", name = "core-ktx", version.ref = "coreKtx" }
+androidx-material-icons-extended = { module = "androidx.compose.material:material-icons-extended", version.ref = "materialIconsExtended" }
 androidx-material3 = { module = "androidx.compose.material3:material3", version.ref = "material3" }
 assertk = { module = "com.willowtreeapps.assertk:assertk", version.ref = "assertk" }
 circuit-codegen = { module = "com.slack.circuit:circuit-codegen", version.ref = "circuit" }

libs/domain/src/main/java/com/example/domain/models/models/RemotePhoto.kt

@@ -4,3 +4,7 @@ data class RemotePhoto(
     val id: Id,
     val size: Size,
 )
+data class RemoteThumbnail(
+    val id: Id,
+    val size: Size,
+)

ui/photo-view/src/main/java/com/example/photoview/PhotoViewPresenter.kt

@@ -25,9 +25,11 @@ class PhotoViewPresenter @AssistedInject constructor(
             }
         }
         return PhotoViewUiState(
-            remotePhoto = RemotePhoto(
-                id = Id(screen.id),
-                size = Size(screen.width, screen.height),
+            uiRemotePhoto = UiRemotePhoto(
+                RemotePhoto(
+                    id = Id(screen.id),
+                    size = Size(screen.width, screen.height),
+                ),
             ),
             authorName = screen.authorName,
             eventSink = ::eventSink,

ui/photo-view/src/main/java/com/example/photoview/PhotoViewUiState.kt

@@ -1,11 +1,18 @@
 package com.example.photoview
 
+import androidx.compose.runtime.Immutable
 import com.example.domain.models.models.RemotePhoto
 import com.slack.circuit.runtime.CircuitUiEvent
 import com.slack.circuit.runtime.CircuitUiState
 
-data class PhotoViewUiState(
+@Immutable
+data class UiRemotePhoto(
     val remotePhoto: RemotePhoto,
+)
+
+@Immutable
+data class PhotoViewUiState(
+    val uiRemotePhoto: UiRemotePhoto,
     val authorName: String,
     val eventSink: (PhotoViewEvents) -> Unit,
 ) : CircuitUiState

ui/photo-view/src/main/java/com/example/photoview/composables/LandscapePhotoView.kt

@@ -19,11 +19,15 @@ internal fun LandscapePhotoView(
         verticalArrangement = Arrangement.Center,
     ) {
         PicsumImage(
-            remotePhoto = state.remotePhoto,
+            remotePhoto = state.uiRemotePhoto,
             modifier = Modifier
                 .fillMaxWidth()
-                .aspectRatio(state.remotePhoto.size.ratio),
+                .aspectRatio(state.uiRemotePhoto.remotePhoto.size.ratio)
+                .weight(0.85f),
+        )
+        AuthorNameText(
+            state.authorName,
+            modifier = Modifier.fillMaxWidth().weight(0.15f),
         )
-        AuthorNameText(state.authorName)
     }
 }

ui/photo-view/src/main/java/com/example/photoview/composables/PhotoViewScreen.kt

@@ -27,7 +27,7 @@ internal fun PhotoViewScreen(state: PhotoViewUiState, modifier: Modifier = Modif
 
 @Composable
 private fun PhotoViewContent(state: PhotoViewUiState, modifier: Modifier = Modifier) {
-    if (state.remotePhoto.size.isLandscape) {
+    if (state.uiRemotePhoto.remotePhoto.size.isLandscape) {
         LandscapePhotoView(state = state, modifier = modifier)
     } else {
         PortraitPhotoView(state = state, modifier = modifier)

ui/photo-view/src/main/java/com/example/photoview/composables/PicsumImage.kt

@@ -4,17 +4,17 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
 import coil.compose.AsyncImage
-import com.example.domain.models.models.RemotePhoto
 import com.example.photoview.R
+import com.example.photoview.UiRemotePhoto
 
 @Composable
 internal fun PicsumImage(
-    remotePhoto: RemotePhoto,
+    remotePhoto: UiRemotePhoto,
     modifier: Modifier = Modifier,
 ) {
     AsyncImage(
         modifier = modifier,
-        model = remotePhoto,
+        model = remotePhoto.remotePhoto,
         contentDescription = stringResource(id = R.string.picsumimage),
     )
 }

ui/photo-view/src/main/java/com/example/photoview/composables/PortraitPhotoView.kt

@@ -14,7 +14,7 @@ internal fun PortraitPhotoView(
 ) {
     Column(modifier = modifier) {
         PicsumImage(
-            remotePhoto = state.remotePhoto,
+            remotePhoto = state.uiRemotePhoto,
             modifier = Modifier
                 .weight(0.8f)
                 .fillMaxWidth()

ui/photo-view/src/test/java/com/example/photoview/PhotoViewPresenterTest.kt

@@ -33,7 +33,7 @@ class PhotoViewPresenterTest {
         presenter.test {
             assertThat(awaitItem()).all {
                 prop(PhotoViewUiState::authorName).isEqualTo("John Doe")
-                prop(PhotoViewUiState::remotePhoto).prop(RemotePhoto::size).isEqualTo(Size(123, 456))
+                transform { it.uiRemotePhoto.remotePhoto }.prop(RemotePhoto::size).isEqualTo(Size(123, 456))
             }
         }
     }

ui/photo-view/src/test/java/com/example/photoview/PhotoViewUiTest.kt

@@ -61,9 +61,11 @@ class PhotoViewUiTest {
         composeTestRule.setContent {
             PhotoViewScreen(
                 state = PhotoViewUiState(
-                    remotePhoto = RemotePhoto(
-                        size = Size(width = 5000, height = 3333),
-                        id = Id(1),
+                    uiRemotePhoto = UiRemotePhoto(
+                        RemotePhoto(
+                            size = Size(width = 5000, height = 3333),
+                            id = Id(1),
+                        ),
                     ),
                     authorName = "author1",
                     eventSink = {},
@@ -78,9 +80,11 @@ class PhotoViewUiTest {
         composeTestRule.setContent {
             PhotoViewScreen(
                 state = PhotoViewUiState(
-                    remotePhoto = RemotePhoto(
-                        size = Size(width = 3887, height = 4899),
-                        id = Id(1),
+                    uiRemotePhoto = UiRemotePhoto(
+                        RemotePhoto(
+                            size = Size(width = 3887, height = 4899),
+                            id = Id(1),
+                        ),
                     ),
                     authorName = "author1",
                     eventSink = {},

ui/photos-list/build.gradle.kts

@@ -33,6 +33,11 @@ dependencies {
     testImplementation(libs.assertk)
     testImplementation(libs.moshi)
 
+    implementation(libs.coil.compose)
+    testImplementation(libs.coil.test)
+
+    implementation(libs.androidx.material.icons.extended)
+
     implementation(libs.circuit.runtime.presenter)
     implementation(libs.circuit.runtime.ui)
     implementation(libs.circuit.retained)

ui/photos-list/src/main/java/com/example/photoslist/composables/FileNameText.kt

@@ -0,0 +1,22 @@
+package com.example.photoslist.composables
+
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.dp
+import com.example.photoslist.models.UiPhoto
+
+@Composable
+internal fun FileNameText(
+    photo: UiPhoto,
+    modifier: Modifier = Modifier,
+    color: Color = Color.Unspecified,
+) {
+    Text(
+        color = color,
+        text = photo.fileName.value,
+        modifier = modifier.padding(8.dp),
+    )
+}

ui/photos-list/src/main/java/com/example/photoslist/composables/GridView.kt

@@ -0,0 +1,107 @@
+package com.example.photoslist.composables
+
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.fadeIn
+import androidx.compose.animation.fadeOut
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.BoxScope
+import androidx.compose.foundation.layout.aspectRatio
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.wrapContentHeight
+import androidx.compose.foundation.lazy.staggeredgrid.LazyVerticalStaggeredGrid
+import androidx.compose.foundation.lazy.staggeredgrid.StaggeredGridCells
+import androidx.compose.foundation.lazy.staggeredgrid.items
+import androidx.compose.foundation.lazy.staggeredgrid.rememberLazyStaggeredGridState
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.derivedStateOf
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.rememberCoroutineScope
+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.platform.testTag
+import androidx.compose.ui.unit.dp
+import coil.compose.AsyncImage
+import com.example.photoslist.models.PhotosListEvents
+import com.example.photoslist.models.UiPhoto
+import kotlinx.collections.immutable.ImmutableList
+import kotlinx.coroutines.launch
+
+@Composable
+internal fun BoxScope.GridView(
+    photos: ImmutableList<UiPhoto>,
+    eventSink: (PhotosListEvents) -> Unit,
+) {
+    Box(modifier = Modifier.fillMaxSize()) {
+        val scope = rememberCoroutineScope()
+        val staggeredState = rememberLazyStaggeredGridState()
+        LazyVerticalStaggeredGrid(
+            columns = StaggeredGridCells.Adaptive(200.dp),
+            verticalItemSpacing = 4.dp,
+            horizontalArrangement = Arrangement.spacedBy(4.dp),
+            modifier = Modifier
+                .fillMaxSize()
+                .testTag("photo_grid"),
+            state = staggeredState,
+        ) {
+            items(
+                items = photos,
+                key = { photo: UiPhoto -> photo.id.id },
+                itemContent = { photo -> GridPhotoItem(photo = photo, eventSink = eventSink) },
+            )
+        }
+
+        val showButton by remember {
+            derivedStateOf {
+                staggeredState.firstVisibleItemIndex > 0
+            }
+        }
+        AnimatedVisibility(
+            modifier = Modifier.align(Alignment.BottomCenter),
+            visible = showButton,
+            enter = fadeIn(),
+            exit = fadeOut(),
+        ) {
+            ScrollToTopButton(onClick = {
+                scope.launch {
+                    staggeredState.animateScrollToItem(0)
+                }
+            })
+        }
+    }
+}
+
+@Composable
+internal fun GridPhotoItem(
+    photo: UiPhoto,
+    modifier: Modifier = Modifier,
+    eventSink: (PhotosListEvents) -> Unit,
+) {
+    Box(modifier = modifier) {
+        AsyncImage(
+            model = photo.remoteThumbnail,
+            contentScale = ContentScale.Crop,
+            modifier = Modifier
+                .aspectRatio(photo.size.ratio)
+                .wrapContentHeight()
+                .clickable { eventSink(PhotosListEvents.PhotoClicked(photo)) },
+            contentDescription = null,
+        )
+        FileNameText(
+            photo = photo,
+            color = Color.White,
+            modifier = Modifier
+                .background(Color.Black.copy(alpha = 0.25f))
+                .padding(4.dp)
+                .fillMaxWidth()
+                .align(Alignment.BottomCenter),
+        )
+    }
+}