- Add article list with it's states.

app/src/main/java/com/akash/newzz_compose/ui/commoncomposable/CommonComposables.kt

@@ -0,0 +1,81 @@
+package com.akash.newzz_compose.ui.commoncomposable
+
+import androidx.compose.foundation.Box
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.CircularProgressIndicator
+import androidx.compose.material.Surface
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.BlendMode
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.ColorFilter
+import androidx.compose.ui.graphics.Shape
+import androidx.compose.ui.graphics.vector.VectorAsset
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.res.vectorResource
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import com.akash.newzz_compose.R
+import com.akash.newzz_compose.ui.style.NewzzTheme
+import com.akash.newzz_compose.ui.style.titleColorDark
+import dev.chrisbanes.accompanist.coil.CoilImage
+
+/**
+ * Created by Akash on 29/08/20
+ */
+
+@Composable
+fun HeightSpacer(value: Dp) {
+    Spacer(modifier = Modifier.preferredHeight(value))
+}
+
+@Composable
+fun WidthSpacer(value: Dp) {
+    Spacer(modifier = Modifier.preferredWidth(value))
+}
+
+@Composable
+fun RemoteImage(
+        url: String?,
+        modifier: Modifier,
+        errorImage: VectorAsset = vectorResource(id = R.drawable.ic_newzz_error),
+        contentScale: ContentScale = ContentScale.Crop,
+        shape: Shape = RoundedCornerShape(5.dp)
+) {
+    Box(
+            modifier = modifier
+    ) {
+        if (url.isNullOrEmpty()) {
+            Image(
+                    modifier = Modifier.fillMaxSize(),
+                    asset = errorImage,
+                    colorFilter = ColorFilter(
+                            color = if (NewzzTheme.colors.isDark) titleColorDark else Color.Black,
+                            blendMode = BlendMode.SrcAtop
+                    )
+            )
+        } else {
+            Surface(
+                    color = Color.Transparent,
+                    shape = shape
+            ) {
+                CoilImage(
+                        data = url,
+                        modifier = modifier,
+                        contentScale = contentScale,
+                        loading = {
+                            Stack(Modifier.fillMaxSize()) {
+                                CircularProgressIndicator(
+                                        color = NewzzTheme.colors.circularLoaderColor,
+                                        modifier = Modifier.gravity(Alignment.Center)
+                                )
+                            }
+                        }
+                )
+            }
+        }
+    }
+}

app/src/main/java/com/akash/newzz_compose/ui/newzzappui/ArticleList.kt

@@ -0,0 +1,86 @@
+package com.akash.newzz_compose.ui.newzzappui
+
+import androidx.compose.foundation.Text
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.preferredSize
+import androidx.compose.foundation.lazy.LazyColumnFor
+import androidx.compose.material.Divider
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.ContextAmbient
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.unit.dp
+import com.akash.newzz.data.response.NewsArticle
+import com.akash.newzz_compose.ui.commoncomposable.HeightSpacer
+import com.akash.newzz_compose.ui.commoncomposable.RemoteImage
+import com.akash.newzz_compose.ui.commoncomposable.WidthSpacer
+import com.akash.newzz_compose.ui.style.NewzzTheme
+import com.akash.newzz_compose.ui.style.articleTitleStyle
+import com.akash.newzz_compose.ui.style.dateTextStyle
+import com.akash.newzz_compose.ui.style.sourceTextStyle
+import com.akash.newzz_compose.util.CustomTabUtil
+
+/**
+ * Created by Akash on 29/08/20
+ */
+
+@Composable
+fun ArticleRow(article: NewsArticle, onClick: () -> Unit) {
+    Column(modifier = Modifier.clickable(onClick = { onClick() })) {
+        Row(
+                modifier = Modifier.padding(all = 10.dp),
+                verticalGravity = Alignment.CenterVertically
+        ) {
+            RemoteImage(
+                    url = article.urlToImage,
+                    modifier = Modifier.preferredSize(100.dp)
+            )
+            WidthSpacer(value = 10.dp)
+            Column {
+                if (!article.source.name.isNullOrEmpty()) {
+                    Text(
+                            text = article.source.name!!,
+                            style = sourceTextStyle.copy(color = NewzzTheme.colors.sourceColor)
+                    )
+                    HeightSpacer(value = 4.dp)
+                }
+                Text(
+                        text = article.title,
+                        style = articleTitleStyle.copy(color = NewzzTheme.colors.titleColor),
+                        maxLines = 3,
+                        overflow = TextOverflow.Ellipsis
+                )
+                HeightSpacer(value = 4.dp)
+                Text(
+                        text = article.publishedAt.substring(0, 10),
+                        style = dateTextStyle.copy(color = NewzzTheme.colors.sourceColor)
+                )
+            }
+        }
+        HeightSpacer(value = 10.dp)
+        Divider(
+                color = NewzzTheme.colors.dividerColor
+        )
+    }
+}
+
+@Composable
+fun ArticleList(articles: List<NewsArticle>) {
+    val context = ContextAmbient.current
+    val isDark = NewzzTheme.colors.isDark
+    LazyColumnFor(
+            items = articles,
+            itemContent = { article: NewsArticle ->
+                ArticleRow(
+                        article = article,
+                        onClick = {
+                            CustomTabUtil.launch(context, article.url.toString(), isDark)
+                        }
+                )
+            }
+    )
+}

app/src/main/java/com/akash/newzz_compose/ui/newzzappui/ArticleListUiState.kt

@@ -0,0 +1,14 @@
+package com.akash.newzz_compose.ui.newzzappui
+
+import com.akash.newzz.data.Result
+import com.akash.newzz.data.response.NewsArticle
+
+/**
+ * Created by Akash on 29/08/20
+ */
+
+data class ArticleListUiState(
+        val isLoading: Boolean = true,
+        val list: List<NewsArticle>? = emptyList(),
+        val error: Result.Error? = null
+)

app/src/main/java/com/akash/newzz_compose/ui/newzzappui/BottomBar.kt

@@ -5,8 +5,8 @@ import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.preferredHeight
+import androidx.compose.material.BottomAppBar
 import androidx.compose.material.BottomNavigationItem
-import androidx.compose.material.Surface
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.vectorResource
@@ -20,26 +20,27 @@ import com.akash.newzz_compose.ui.style.NewzzTheme
 
 @Composable
 fun BottomBar(
-    categoryList: List<Category>,
-    activeCategory: Category,
-    onMenuClicked: (Category) -> Unit
+        categoryList: List<Category>,
+        activeCategory: Category,
+        onMenuClicked: (Category) -> Unit
 ) {
-    Surface(
-        color = NewzzTheme.colors.bottomNavBackground,
+    BottomAppBar(
+            backgroundColor = NewzzTheme.colors.bottomNavBackground,
+            elevation = 10.dp
     ) {
         Row(
-            modifier = Modifier.fillMaxWidth().preferredHeight(50.dp),
-            horizontalArrangement = Arrangement.SpaceAround
+                modifier = Modifier.fillMaxWidth().preferredHeight(50.dp),
+                horizontalArrangement = Arrangement.SpaceAround
         ) {
             categoryList.forEach { category ->
                 BottomNavigationItem(
-                    icon = { Icon(asset = vectorResource(id = category.icon)) },
-                    selected = activeCategory == category,
-                    onSelect = {
-                        onMenuClicked(category)
-                    },
-                    selectedContentColor = NewzzTheme.colors.bottomNavActiveIconColor,
-                    unselectedContentColor = NewzzTheme.colors.bottomNavInActiveIconColor
+                        icon = { Icon(asset = vectorResource(id = category.icon)) },
+                        selected = activeCategory == category,
+                        onSelect = {
+                            onMenuClicked(category)
+                        },
+                        selectedContentColor = NewzzTheme.colors.bottomNavActiveIconColor,
+                        unselectedContentColor = NewzzTheme.colors.bottomNavInActiveIconColor
                 )
             }
         }

app/src/main/java/com/akash/newzz_compose/ui/newzzappui/NewzzAppUI.kt

@@ -20,38 +20,54 @@ import com.akash.newzz_compose.viewmodel.NewzzViewModel
 fun NewzzAppUI(viewModel: NewzzViewModel) {
     val categoryList = viewModel.categoryList.observeAsState().value!!
     val activeCategory = viewModel.activeCategory.observeAsState().value!!
+    val activeCategoryUiState = viewModel.activeCategoryUiState.observeAsState().value!!
     Scaffold(
-        bodyContent = {
-            BodyContent(
-                activeCategory = activeCategory,
-                onThemeSwitch = {
-                    viewModel.performAction(NewzzViewModel.Action.SwitchTheme)
-                }
-            )
-        },
-        bottomBar = {
-            BottomBar(
-                categoryList = categoryList,
-                onMenuClicked = { category ->
-                    viewModel.performAction(NewzzViewModel.Action.ChangePageTo(category))
-                },
-                activeCategory = activeCategory
-            )
-        }
+            bodyContent = {
+                BodyContent(
+                        activeCategory = activeCategory,
+                        onThemeSwitch = {
+                            viewModel.performAction(NewzzViewModel.Action.SwitchTheme)
+                        },
+                        activeCategoryUiState = activeCategoryUiState,
+                        retryFetchingArticles = { category ->
+                            viewModel.performAction(NewzzViewModel.Action.FetchArticles(category))
+                        }
+                )
+            },
+            bottomBar = {
+                BottomBar(
+                        categoryList = categoryList,
+                        onMenuClicked = { category ->
+                            viewModel.performAction(NewzzViewModel.Action.ChangePageTo(category))
+                        },
+                        activeCategory = activeCategory
+                )
+            }
     )
 }
 
 @Composable
-fun BodyContent(activeCategory: Category, onThemeSwitch: () -> Unit) {
+fun BodyContent(
+        activeCategory: Category,
+        activeCategoryUiState: ArticleListUiState,
+        onThemeSwitch: () -> Unit,
+        retryFetchingArticles: (Category) -> Unit
+) {
     val stringRes = getTitleResource(activeCategory)
     Surface(
-        modifier = Modifier.fillMaxSize(),
-        color = NewzzTheme.colors.primaryColor
+            modifier = Modifier.fillMaxSize(),
+            color = NewzzTheme.colors.primaryColor
     ) {
         Column(modifier = Modifier.fillMaxSize()) {
             TopAppBar(stringRes, onThemeSwitch = {
                 onThemeSwitch()
             })
+            NewzzListContainer(
+                    uiState = activeCategoryUiState,
+                    retry = {
+                        retryFetchingArticles(activeCategory)
+                    },
+            )
         }
     }
 }