Addtional integration of LaunchList UI components with other fields of query; Part I of tutorial complete

Author: sorianog

start/app/src/main/graphql/LaunchList.graphql

@@ -5,6 +5,10 @@ query LaunchList {
         launches {
             id
             site
+            mission {
+                name
+                missionPatch(size: SMALL)
+            }
         }
     }
 }

start/app/src/main/kotlin/com/example/rocketreserver/LaunchList.kt

@@ -26,6 +26,7 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.unit.dp
+import coil.compose.AsyncImage
 
 @Composable
 fun LaunchList(onLaunchClick: (launchId: String) -> Unit) {
@@ -47,18 +48,20 @@ private fun LaunchItem(launch: LaunchListQuery.Launch, onClick: (launchId: Strin
         modifier = Modifier.clickable { onClick(launch.id) },
         headlineContent = {
             // Mission name
-            Text(text = "Launch ${launch.id}")
+            Text(text = launch.mission?.name ?: "Mission N/A")
         },
         supportingContent = {
             // Site
-            Text(text = "Site...")
+            Text(text = launch.site ?: "Site N/A")
         },
         leadingContent = {
             // Mission patch
-            Image(
+            AsyncImage(
                 modifier = Modifier.size(68.dp, 68.dp),
-                painter = painterResource(R.drawable.ic_placeholder),
-                contentDescription = "Mission patch"
+                model = launch.mission?.missionPatch,
+                placeholder = painterResource(R.drawable.ic_placeholder),
+                error = painterResource(R.drawable.ic_placeholder),
+                contentDescription = "Mission Patch"
             )
         }
     )