implement ContributorList #23

uicomponent-compose/main/src/main/java/io/github/droidkaigi/feeder/AppContent.kt

@@ -126,7 +126,10 @@ fun AppContent(
                         routePath.value = otherTabs.routePath
                         drawerContentState.onSelectDrawerContent(otherTabs)
                     },
-                    onNavigationIconClick = onNavigationIconClick
+                    onNavigationIconClick = onNavigationIconClick,
+                    onClickContributor = { contributor ->
+                        actions.showChromeCustomTabs(contributor.url)
+                    }
                 )
             }
             chromeCustomTabs()

uicomponent-compose/other/build.gradle

@@ -17,6 +17,7 @@ android {
     kotlinOptions {
         jvmTarget = '1.8'
         freeCompilerArgs += "-Xopt-in=androidx.compose.material.ExperimentalMaterialApi"
+        freeCompilerArgs += "-Xopt-in=androidx.compose.foundation.ExperimentalFoundationApi"
         freeCompilerArgs += "-Xopt-in=kotlinx.coroutines.ExperimentalCoroutinesApi"
     }
     buildFeatures {

uicomponent-compose/other/src/main/java/io/github/droidkaigi/feeder/contributor/ContributorItem.kt

@@ -0,0 +1,73 @@
+package io.github.droidkaigi.feeder.contributor
+
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.material.Surface
+import androidx.compose.material.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import io.github.droidkaigi.feeder.Contributor
+import io.github.droidkaigi.feeder.core.NetworkImage
+import io.github.droidkaigi.feeder.core.theme.ConferenceAppFeederTheme
+import io.github.droidkaigi.feeder.fakeContributors
+
+@Composable
+fun ContributorItem(contributor: Contributor, onClickItem: (Contributor) -> Unit) {
+    Column(
+        modifier = Modifier
+            .padding(top = 22.dp)
+            .fillMaxHeight()
+            .clickable {
+                onClickItem(contributor)
+            },
+        verticalArrangement = Arrangement.Center,
+        horizontalAlignment = Alignment.CenterHorizontally,
+    ) {
+        Surface(
+            modifier = Modifier
+                .padding(top = 10.dp)
+                .size(60.dp),
+            shape = CircleShape
+        ) {
+            NetworkImage(
+                url = contributor.image,
+                modifier = Modifier.fillMaxSize(),
+                contentScale = ContentScale.Fit,
+                contentDescription = "Contributor Icon"
+            )
+        }
+        Text(
+            text = contributor.name,
+            fontSize = 14.sp,
+            textAlign = TextAlign.Center,
+            modifier = Modifier
+                .padding(vertical = 10.dp, horizontal = 12.dp)
+                .fillMaxWidth()
+        )
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+fun PreviewContributorItem() {
+    ConferenceAppFeederTheme(false) {
+        val contributor = fakeContributors().first()
+        ProvideContributorViewModel(viewModel = fakeContributorViewModel()) {
+            ContributorItem(contributor = contributor) {
+            }
+        }
+    }
+}

uicomponent-compose/other/src/main/java/io/github/droidkaigi/feeder/contributor/ContributorList.kt

@@ -1,24 +1,55 @@
 package io.github.droidkaigi.feeder.contributor
 
-import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.padding
-import androidx.compose.material.Text
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.lazy.GridCells
+import androidx.compose.foundation.lazy.LazyVerticalGrid
+import androidx.compose.foundation.lazy.items
+import androidx.compose.material.MaterialTheme
+import androidx.compose.material.Surface
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.unit.dp
+import androidx.compose.ui.tooling.preview.Preview
+import dev.chrisbanes.accompanist.insets.LocalWindowInsets
+import dev.chrisbanes.accompanist.insets.toPaddingValues
+import io.github.droidkaigi.feeder.Contributor
+import io.github.droidkaigi.feeder.core.theme.ConferenceAppFeederTheme
 import io.github.droidkaigi.feeder.core.use
 
 @Composable
-fun ContributorList() {
+fun ContributorList(onClickContributor: (Contributor) -> Unit) {
+
     val (
         state,
         effectFlow,
         dispatch,
     ) = use(contributeViewModel())
-    Column(Modifier.padding(top = 32.dp)) {
-        Text("Not implemented yet. Please create this screen!")
-        state.contributorContents.forEach {
-            Text(it.name)
+
+    Surface(
+        color = MaterialTheme.colors.background,
+        modifier = Modifier.fillMaxHeight()
+    ) {
+        LazyVerticalGrid(
+            cells = GridCells.Fixed(count = 3),
+            contentPadding = LocalWindowInsets.current.systemBars
+                .toPaddingValues(top = false, start = false, end = false),
+            content = {
+                items(state.contributorContents) { contributor ->
+                    ContributorItem(contributor = contributor, onClickContributor)
+                }
+            }
+        )
+    }
+}
+
+
+@Preview(showBackground = true)
+@Composable
+fun PreviewContributorScreen() {
+    ConferenceAppFeederTheme(false) {
+        ProvideContributorViewModel(viewModel = fakeContributorViewModel()) {
+            ContributorList() {
+
+            }
         }
     }
 }

uicomponent-compose/other/src/main/java/io/github/droidkaigi/feeder/other/OtherScreen.kt

@@ -31,6 +31,7 @@ import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import dev.chrisbanes.accompanist.insets.LocalWindowInsets
 import dev.chrisbanes.accompanist.insets.statusBarsPadding
+import io.github.droidkaigi.feeder.Contributor
 import io.github.droidkaigi.feeder.about.AboutThisApp
 import io.github.droidkaigi.feeder.contributor.ContributorList
 import io.github.droidkaigi.feeder.core.ScrollableTabRow
@@ -61,6 +62,7 @@ fun OtherScreen(
     selectedTab: OtherTabs,
     onSelectTab: (OtherTabs) -> Unit,
     onNavigationIconClick: () -> Unit,
+    onClickContributor: (Contributor) -> Unit,
 ) {
     val scaffoldState = rememberBackdropScaffoldState(BackdropValue.Concealed)
 
@@ -69,18 +71,21 @@ fun OtherScreen(
         selectedTab = selectedTab,
         onSelectTab = onSelectTab,
         onNavigationIconClick = onNavigationIconClick,
+        onClickContributor = onClickContributor
     )
 }
 
 /**
  * stateless
  */
+@ExperimentalMaterialApi
 @Composable
 fun OtherScreen(
     scaffoldState: BackdropScaffoldState,
     selectedTab: OtherTabs,
     onSelectTab: (OtherTabs) -> Unit,
     onNavigationIconClick: () -> Unit,
+    onClickContributor: (Contributor) -> Unit,
 ) {
     Column {
         val density = LocalDensity.current
@@ -102,7 +107,7 @@ fun OtherScreen(
                     modifier = Modifier.fillMaxHeight()
                 ) {
                     FadeThrough(targetState = selectedTab) { selectedTab ->
-                        BackdropFrontLayerContent(selectedTab)
+                        BackdropFrontLayerContent(selectedTab, onClickContributor)
                     }
                 }
             }
@@ -156,10 +161,11 @@ private fun AppBar(
 @Composable
 private fun BackdropFrontLayerContent(
     selectedTab: OtherTabs,
+    onClickContributor: (Contributor) -> Unit,
 ) {
     when (selectedTab) {
         OtherTabs.AboutThisApp -> AboutThisApp()
-        OtherTabs.Contributor -> ContributorList()
+        OtherTabs.Contributor -> ContributorList(onClickContributor)
         OtherTabs.Staff -> StaffList()
         else -> {
             val context = LocalContext.current
@@ -196,6 +202,8 @@ fun PreviewOtherScreen() {
             onSelectTab = {
             },
             onNavigationIconClick = {
+            },
+            onClickContributor = {
             }
         )
     }