Refactor compose list

2 files changed, 31 insertions, 45 deletions

diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/List.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/List.kt
index d6af52e6b9..dcac2be044 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/List.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/List.kt
@@ -1,10 +1,10 @@
 package net.mullvad.mullvadvpn.compose.component
 
+import androidx.annotation.DrawableRes
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
@@ -13,17 +13,17 @@ 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.graphics.painter.Painter
 import androidx.compose.ui.res.colorResource
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import net.mullvad.mullvadvpn.R
 
 @Composable
-fun DeviceRow(
-    name: String,
-    painter: Painter? = null,
-    onItemClicked: () -> Unit
+fun ListItem(
+    text: String,
+    @DrawableRes iconResourceId: Int? = null,
+    onClick: () -> Unit
 ) {
     val itemColor = colorResource(id = R.color.blue)
 
@@ -35,7 +35,7 @@ fun DeviceRow(
             .background(itemColor),
     ) {
         Text(
-            text = name,
+            text = text,
             fontSize = 18.sp,
             color = Color.White,
             modifier = Modifier
@@ -45,35 +45,19 @@ fun DeviceRow(
                 .align(Alignment.CenterStart)
         )
 
-        if (painter != null) {
-            Image(
-                painter = painter,
-                contentDescription = "Remove",
-                modifier = Modifier
-                    .align(Alignment.CenterEnd)
-                    .padding(horizontal = 12.dp)
-                    .clickable {
-                        onItemClicked()
-                    }
-            )
-        }
-    }
-}
-
-@Composable
-fun <T> ItemList(
-    items: List<T>,
-    itemText: (T) -> String,
-    onItemClicked: (T) -> Unit,
-    itemPainter: Painter? = null,
-    modifier: Modifier = Modifier,
-) {
-    Column(
-        modifier = modifier
-    ) {
-        items.forEach { item ->
-            DeviceRow(itemText.invoke(item), itemPainter) {
-                onItemClicked(item)
+        Box(
+            modifier = Modifier
+                .align(Alignment.CenterEnd)
+                .padding(horizontal = 12.dp)
+        ) {
+            if (iconResourceId != null) {
+                Image(
+                    painter = painterResource(id = iconResourceId),
+                    contentDescription = "Remove",
+                    modifier = Modifier
+                        .align(Alignment.CenterEnd)
+                        .clickable { onClick() }
+                )
             }
         }
     }
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/DeviceListScreen.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/DeviceListScreen.kt
index 7794a25603..5d3e028d59 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/DeviceListScreen.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/DeviceListScreen.kt
@@ -29,7 +29,7 @@ import androidx.constraintlayout.compose.ConstraintLayout
 import androidx.constraintlayout.compose.Dimension
 import net.mullvad.mullvadvpn.R
 import net.mullvad.mullvadvpn.compose.component.ActionButton
-import net.mullvad.mullvadvpn.compose.component.ItemList
+import net.mullvad.mullvadvpn.compose.component.ListItem
 import net.mullvad.mullvadvpn.compose.component.ShowDeviceRemovalDialog
 import net.mullvad.mullvadvpn.util.capitalizeFirstCharOfEachWord
 import net.mullvad.mullvadvpn.viewmodel.DeviceListViewModel
@@ -140,14 +140,16 @@ fun DeviceListScreen(
                             width = Dimension.matchParent
                         }
                 ) {
-                    ItemList(
-                        state.devices,
-                        itemText = { it.name.capitalizeFirstCharOfEachWord() },
-                        onItemClicked = {
-                            viewModel.stageDeviceForRemoval(it)
-                        },
-                        itemPainter = painterResource(id = R.drawable.icon_close)
-                    )
+                    Column {
+                        state.devices.forEach { device ->
+                            ListItem(
+                                text = device.name.capitalizeFirstCharOfEachWord(),
+                                iconResourceId = R.drawable.icon_close
+                            ) {
+                                viewModel.stageDeviceForRemoval(device)
+                            }
+                        }
+                    }
                 }
             }
         }