Merge #166

166: Refactor LobstersItem r=msfjarvis a=msfjarvis

Breaks apart PostDetails into multiple individual composables and reimplements the layout logic with a more easy to understand mental model.


Co-authored-by: Harsh Shandilya <me@msfjarvis.dev>

app/src/androidTest/java/dev/msfjarvis/lobsters/ui/posts/LobstersItemTest.kt

@@ -1,11 +1,13 @@
 package dev.msfjarvis.lobsters.ui.posts
 
+import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.ui.graphics.asAndroidBitmap
 import androidx.compose.ui.test.captureToImage
 import androidx.compose.ui.test.junit4.createComposeRule
 import androidx.compose.ui.test.onRoot
 import com.karumi.shot.ScreenshotTest
 import dev.msfjarvis.lobsters.ui.DarkTestTheme
+import dev.msfjarvis.lobsters.ui.LightTestTheme
 import kotlin.test.Test
 import org.junit.Rule
 
@@ -15,7 +17,7 @@ class LobstersItemTest : ScreenshotTest {
   val composeTestRule = createComposeRule()
 
   @Test
-  fun postsAreRenderedCorrectlyOnScreen() {
+  fun singlePost() {
     composeTestRule.setContent {
       DarkTestTheme {
         LobstersItem(
@@ -29,4 +31,44 @@ class LobstersItemTest : ScreenshotTest {
     }
     compareScreenshot(composeTestRule.onRoot().captureToImage().asAndroidBitmap())
   }
+
+  @Test
+  fun multiplePosts() {
+    composeTestRule.setContent {
+      LightTestTheme {
+        LazyColumn {
+          items(10) {
+            LobstersItem(
+              post = TEST_POST,
+              viewPost = { /*TODO*/ },
+              viewComments = { /*TODO*/ },
+              toggleSave = { /*TODO*/ },
+              isSaved = true,
+            )
+          }
+        }
+      }
+    }
+    compareScreenshot(composeTestRule.onRoot().captureToImage().asAndroidBitmap())
+  }
+
+  @Test
+  fun multiplePostsWithLesserTags() {
+    composeTestRule.setContent {
+      LightTestTheme {
+        LazyColumn {
+          items(10) {
+            LobstersItem(
+              post = TEST_POST.copy(tags = listOf("openbsd", "linux")),
+              viewPost = { /*TODO*/ },
+              viewComments = { /*TODO*/ },
+              toggleSave = { /*TODO*/ },
+              isSaved = true,
+            )
+          }
+        }
+      }
+    }
+    compareScreenshot(composeTestRule.onRoot().captureToImage().asAndroidBitmap())
+  }
 }

app/src/main/java/dev/msfjarvis/lobsters/ui/posts/LobstersItem.kt

@@ -4,12 +4,14 @@ import androidx.compose.animation.Crossfade
 import androidx.compose.foundation.ExperimentalFoundationApi
 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.Column
 import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.requiredSize
+import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
 import androidx.compose.foundation.shape.RoundedCornerShape
@@ -43,7 +45,7 @@ val TEST_POST = SavedPost(
   createdAt = "2020-09-21T07:11:14.000-05:00",
   commentsUrl = "https://lobste.rs/s/zqyydb/k2k20_hackathon_report_bob_beck_on",
   submitterName = "Vigdis",
-  submitterAvatarUrl = "/avatars/Vigdis-100.png",
+  submitterAvatarUrl = "/404.html",
   tags = listOf("openbsd", "linux", "containers", "hack the planet", "no thanks"),
 )
 
@@ -55,97 +57,126 @@ fun LobstersItem(
   viewPost: () -> Unit,
   viewComments: () -> Unit,
   toggleSave: () -> Unit,
+  modifier: Modifier = Modifier,
 ) {
   Surface(
     modifier = Modifier
-      .clickable { viewPost.invoke() },
+      .clickable { viewPost.invoke() }
+      .then(modifier),
   ) {
-    Row(
+    Column(
-      modifier = Modifier.padding(start = 12.dp),
+      modifier = Modifier
-      verticalAlignment = Alignment.CenterVertically,
+        .padding(horizontal = 12.dp, vertical = 4.dp),
-      horizontalArrangement = Arrangement.SpaceBetween,
     ) {
-      Box(
+      PostTitle(
-        modifier = Modifier.weight(0.8f),
+        title = post.title,
+        modifier = Modifier
+          .padding(bottom = 4.dp),
+      )
+      Row(
+        modifier = Modifier
+          .fillMaxWidth(),
+        verticalAlignment = Alignment.CenterVertically,
       ) {
-        PostDetails(
+        TagRow(
-          post,
+          tags = post.tags,
+          modifier = Modifier.weight(0.65f),
         )
-      }
-      Box(
-        modifier = Modifier.weight(0.1f),
-      ) {
         SaveButton(
-          isSaved,
+          isSaved = isSaved,
-          toggleSave,
+          onClick = toggleSave,
+        )
+        Spacer(
+          modifier = Modifier.width(8.dp),
         )
-      }
-      Box(
-        modifier = Modifier.weight(0.1f),
-      ) {
         CommentsButton(
           onClick = viewComments,
         )
       }
+      SubmitterName(
+        name = post.submitterName,
+        avatarUrl = post.submitterAvatarUrl,
+      )
     }
   }
 }
 
 @Composable
-fun PostDetails(
+fun PostTitle(
-  post: SavedPost,
+  title: String,
+  modifier: Modifier = Modifier,
 ) {
-  Column(
+  Text(
-    modifier = Modifier.padding(top = 8.dp, bottom = 8.dp),
+    text = title,
+    color = titleColor,
+    fontWeight = FontWeight.Bold,
+    modifier = Modifier.then(modifier),
+  )
+}
+
+@Composable
+fun SubmitterName(
+  name: String,
+  avatarUrl: String,
+  modifier: Modifier = Modifier,
+) {
+  Row(
+    modifier = Modifier.then(modifier),
+    verticalAlignment = Alignment.CenterVertically,
   ) {
-    Text(
+    SubmitterAvatar(
-      text = post.title,
+      name = name,
-      color = titleColor,
+      avatarUrl = avatarUrl,
-      fontWeight = FontWeight.Bold,
-      modifier = Modifier
-        .padding(bottom = 4.dp),
     )
-    TagRow(
+    SubmitterNameText(
-      tags = post.tags,
+      name = name,
-      modifier = Modifier
-        .padding(bottom = 4.dp),
     )
-    Row(
-      verticalAlignment = Alignment.CenterVertically,
-    ) {
-      CoilImage(
-        data = "${LobstersApi.BASE_URL}/${post.submitterAvatarUrl}",
-        contentDescription = stringResource(
-          R.string.avatar_content_description,
-          post.submitterName
-        ),
-        fadeIn = true,
-        requestBuilder = {
-          transformations(CircleCropTransformation())
-        },
-        modifier = Modifier
-          .requiredSize(24.dp)
-          .padding(bottom = 4.dp),
-      )
-      Text(
-        text = stringResource(id = R.string.submitted_by, post.submitterName),
-        modifier = Modifier
-          .padding(start = 4.dp),
-      )
-    }
   }
 }
 
+@Composable
+fun SubmitterAvatar(
+  name: String,
+  avatarUrl: String,
+) {
+  CoilImage(
+    data = "${LobstersApi.BASE_URL}/$avatarUrl",
+    contentDescription = stringResource(
+      R.string.avatar_content_description,
+      name,
+    ),
+    fadeIn = true,
+    requestBuilder = {
+      transformations(CircleCropTransformation())
+    },
+    modifier = Modifier
+      .requiredSize(24.dp),
+  )
+}
+
+@Composable
+fun SubmitterNameText(
+  name: String,
+) {
+  Text(
+    text = stringResource(id = R.string.submitted_by, name),
+    modifier = Modifier
+      .padding(start = 4.dp),
+  )
+}
+
 @Composable
 fun SaveButton(
   isSaved: Boolean,
-  onSaveButtonClick: () -> Unit,
+  onClick: () -> Unit,
+  modifier: Modifier = Modifier,
 ) {
   IconToggleButton(
     checked = isSaved,
-    onCheckedChange = { onSaveButtonClick.invoke() },
+    onCheckedChange = { onClick.invoke() },
     modifier = Modifier
-      .requiredSize(24.dp),
+      .requiredSize(32.dp)
+      .then(modifier),
   ) {
     Crossfade(targetState = isSaved) { saved ->
       IconResource(
@@ -160,11 +191,13 @@ fun SaveButton(
 @Composable
 fun CommentsButton(
   onClick: () -> Unit,
+  modifier: Modifier = Modifier,
 ) {
   IconButton(
     onClick = onClick,
     modifier = Modifier
-      .requiredSize(24.dp),
+      .requiredSize(32.dp)
+      .then(modifier),
   ) {
     IconResource(
       resourceId = R.drawable.ic_insert_comment_24px,
@@ -179,19 +212,22 @@ fun TagRow(
   tags: List<String>,
   modifier: Modifier = Modifier,
 ) {
-  FlowLayout(
+  Box(
     modifier = Modifier.then(modifier),
-    horizontalSpacing = 8.dp,
-    verticalSpacing = 8.dp,
   ) {
-    tags.forEach { tag ->
+    FlowLayout(
-      Text(
+      horizontalSpacing = 8.dp,
-        text = tag,
+      verticalSpacing = 8.dp,
-        modifier = Modifier
+    ) {
-          .background(Color(0xFFFFFCD7), RoundedCornerShape(8.dp))
+      tags.forEach { tag ->
-          .padding(vertical = 2.dp, horizontal = 6.dp),
+        Text(
-        color = Color.DarkGray,
+          text = tag,
-      )
+          modifier = Modifier
+            .background(Color(0xFFFFFCD7), RoundedCornerShape(8.dp))
+            .padding(vertical = 2.dp, horizontal = 6.dp),
+          color = Color.DarkGray,
+        )
+      }
     }
   }
 }