From 12445c76fa4a3b4996018d47b2856177db199f60 Mon Sep 17 00:00:00 2001
From: Akashkamble <akashkamble8656@gmail.com>
Date: Sat, 29 Aug 2020 17:42:02 +0530
Subject: [PATCH] - Add article list with it's states.

---
 .idea/gradle.xml                              |   1 +
 .../ui/commoncomposable/CommonComposables.kt  |  81 +++++++++++
 .../ui/newzzappui/ArticleList.kt              |  86 ++++++++++++
 .../ui/newzzappui/ArticleListUiState.kt       |  14 ++
 .../newzz_compose/ui/newzzappui/BottomBar.kt  |  31 +++--
 .../newzz_compose/ui/newzzappui/NewzzAppUI.kt |  56 +++++---
 .../ui/newzzappui/NewzzListContainer.kt       |  98 +++++++++++++
 .../akash/newzz_compose/ui/style/TextStyle.kt |   3 -
 .../com/akash/newzz_compose/ui/style/Theme.kt |  38 ++---
 .../akash/newzz_compose/util/CustomTabUtil.kt |  60 ++++++++
 .../newzz_compose/viewmodel/NewzzViewModel.kt | 131 +++++++++++++++---
 app/src/main/res/values/strings.xml           |   1 +
 12 files changed, 519 insertions(+), 81 deletions(-)
 create mode 100644 app/src/main/java/com/akash/newzz_compose/ui/commoncomposable/CommonComposables.kt
 create mode 100644 app/src/main/java/com/akash/newzz_compose/ui/newzzappui/ArticleList.kt
 create mode 100644 app/src/main/java/com/akash/newzz_compose/ui/newzzappui/ArticleListUiState.kt
 create mode 100644 app/src/main/java/com/akash/newzz_compose/ui/newzzappui/NewzzListContainer.kt
 create mode 100644 app/src/main/java/com/akash/newzz_compose/util/CustomTabUtil.kt

diff --git a/.idea/gradle.xml b/.idea/gradle.xml
index 6cba290..3f80b50 100644
--- a/.idea/gradle.xml
+++ b/.idea/gradle.xml
@@ -18,5 +18,6 @@
         <option name="resolveModulePerSourceSet" value="false" />
       </GradleProjectSettings>
     </option>
+    <option name="offlineMode" value="true" />
   </component>
 </project>
\ No newline at end of file
diff --git a/app/src/main/java/com/akash/newzz_compose/ui/commoncomposable/CommonComposables.kt b/app/src/main/java/com/akash/newzz_compose/ui/commoncomposable/CommonComposables.kt
new file mode 100644
index 0000000..046de7c
--- /dev/null
+++ b/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)
+                                )
+                            }
+                        }
+                )
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/akash/newzz_compose/ui/newzzappui/ArticleList.kt b/app/src/main/java/com/akash/newzz_compose/ui/newzzappui/ArticleList.kt
new file mode 100644
index 0000000..517fe0c
--- /dev/null
+++ b/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)
+                        }
+                )
+            }
+    )
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/akash/newzz_compose/ui/newzzappui/ArticleListUiState.kt b/app/src/main/java/com/akash/newzz_compose/ui/newzzappui/ArticleListUiState.kt
new file mode 100644
index 0000000..c27d044
--- /dev/null
+++ b/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
+)
\ No newline at end of file
diff --git a/app/src/main/java/com/akash/newzz_compose/ui/newzzappui/BottomBar.kt b/app/src/main/java/com/akash/newzz_compose/ui/newzzappui/BottomBar.kt
index 2d93b57..f2960a8 100644
--- a/app/src/main/java/com/akash/newzz_compose/ui/newzzappui/BottomBar.kt
+++ b/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
                 )
             }
         }
diff --git a/app/src/main/java/com/akash/newzz_compose/ui/newzzappui/NewzzAppUI.kt b/app/src/main/java/com/akash/newzz_compose/ui/newzzappui/NewzzAppUI.kt
index a148ca7..42cc710 100644
--- a/app/src/main/java/com/akash/newzz_compose/ui/newzzappui/NewzzAppUI.kt
+++ b/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)
+                    },
+            )
         }
     }
 }
diff --git a/app/src/main/java/com/akash/newzz_compose/ui/newzzappui/NewzzListContainer.kt b/app/src/main/java/com/akash/newzz_compose/ui/newzzappui/NewzzListContainer.kt
new file mode 100644
index 0000000..3c66a32
--- /dev/null
+++ b/app/src/main/java/com/akash/newzz_compose/ui/newzzappui/NewzzListContainer.kt
@@ -0,0 +1,98 @@
+package com.akash.newzz_compose.ui.newzzappui
+
+import androidx.compose.foundation.Text
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.CircularProgressIndicator
+import androidx.compose.material.Surface
+import androidx.compose.material.TextButton
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.TextStyle
+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.articleTitleStyle
+
+/**
+ * Created by Akash on 29/08/20
+ */
+
+@Composable
+fun NewzzListContainer(
+        uiState: ArticleListUiState,
+        retry: () -> Unit,
+) {
+    Surface(
+            color = NewzzTheme.colors.backGroundColor,
+            shape = RoundedCornerShape(topLeft = 5.dp, topRight = 5.dp),
+            modifier = Modifier.fillMaxSize().padding(
+                    start = 10.dp,
+                    end = 10.dp,
+                    bottom = 50.dp
+            )
+    ) {
+        when {
+            uiState.isLoading -> {
+                CircularLoader()
+            }
+            uiState.error != null -> {
+                ErrorView(
+                        errorMessage = uiState.error.errorMessage,
+                        showRetry = uiState.error.showRetry,
+                        retry = retry
+                )
+            }
+            uiState.list?.isEmpty() == false -> {
+                ArticleList(
+                        articles = uiState.list,
+                )
+            }
+        }
+    }
+}
+
+
+@Composable
+private fun CircularLoader() {
+    Column(
+            verticalArrangement = Arrangement.Center,
+            horizontalGravity = Alignment.CenterHorizontally
+    ) {
+        CircularProgressIndicator(
+                color = NewzzTheme.colors.circularLoaderColor
+        )
+    }
+}
+
+@Composable
+fun ErrorView(
+        errorMessage: String,
+        showRetry: Boolean,
+        retry: () -> Unit
+) {
+    Column(
+            verticalArrangement = Arrangement.Center,
+            horizontalGravity = Alignment.CenterHorizontally
+    ) {
+        Text(
+                text = errorMessage,
+                style = articleTitleStyle.copy(color = NewzzTheme.colors.titleColor)
+        )
+        if (showRetry) {
+            TextButton(onClick = retry) {
+                Text(
+                        text = stringResource(id = R.string.retry),
+                        style = TextStyle(
+                                color = NewzzTheme.colors.sourceColor
+                        )
+                )
+            }
+        }
+    }
+}
diff --git a/app/src/main/java/com/akash/newzz_compose/ui/style/TextStyle.kt b/app/src/main/java/com/akash/newzz_compose/ui/style/TextStyle.kt
index 12d459f..b548206 100644
--- a/app/src/main/java/com/akash/newzz_compose/ui/style/TextStyle.kt
+++ b/app/src/main/java/com/akash/newzz_compose/ui/style/TextStyle.kt
@@ -19,16 +19,13 @@ val categoryTitleStyle = TextStyle(
 val articleTitleStyle = TextStyle(
     fontWeight = FontWeight.Medium,
     fontSize = 16.sp,
-    color = titleColor
 )
 
 val sourceTextStyle = TextStyle(
     fontSize = 14.sp,
-    color = sourceTextColor
 )
 
 val dateTextStyle = TextStyle(
     fontWeight = FontWeight.ExtraLight,
     fontSize = 12.sp,
-    color = sourceTextColor
 )
\ No newline at end of file
diff --git a/app/src/main/java/com/akash/newzz_compose/ui/style/Theme.kt b/app/src/main/java/com/akash/newzz_compose/ui/style/Theme.kt
index b3a4b1a..9a3a6b5 100644
--- a/app/src/main/java/com/akash/newzz_compose/ui/style/Theme.kt
+++ b/app/src/main/java/com/akash/newzz_compose/ui/style/Theme.kt
@@ -50,16 +50,16 @@ private val LightColorPalette = NewzzColorPalette(
 )
 
 private val DarkColorPalette = NewzzColorPalette(
-    primaryColor = darkColor,
-    backGroundColor = listBackgroundColorDark,
-    dividerColor = dividerColorDark,
-    titleColor = titleColorDark,
-    sourceColor = sourceTextColorDark,
-    bottomNavBackground = bottomNavBackgroundDark,
-    circularLoaderColor = circularLoaderColorDark,
-    bottomNavActiveIconColor = bottomNavIconActiveColorDark,
-    bottomNavInActiveIconColor = bottomNavIconInActiveColorDark,
-    isDark = false
+        primaryColor = darkColor,
+        backGroundColor = listBackgroundColorDark,
+        dividerColor = dividerColorDark,
+        titleColor = titleColorDark,
+        sourceColor = sourceTextColorDark,
+        bottomNavBackground = bottomNavBackgroundDark,
+        circularLoaderColor = circularLoaderColorDark,
+        bottomNavActiveIconColor = bottomNavIconActiveColorDark,
+        bottomNavInActiveIconColor = bottomNavIconInActiveColorDark,
+        isDark = true
 )
 
 @Composable
@@ -118,19 +118,6 @@ class NewzzColorPalette(
         private set
     var isDark by mutableStateOf(isDark)
         private set
-
-    fun update(other: NewzzColorPalette) {
-        primaryColor = other.primaryColor
-        backGroundColor = other.backGroundColor
-        dividerColor = other.dividerColor
-        titleColor = other.titleColor
-        sourceColor = other.sourceColor
-        bottomNavBackground = other.bottomNavBackground
-        circularLoaderColor = other.circularLoaderColor
-        bottomNavActiveIconColor = other.bottomNavActiveIconColor
-        bottomNavInActiveIconColor = other.bottomNavInActiveIconColor
-        isDark = other.isDark
-    }
 }
 
 @Composable
@@ -138,7 +125,6 @@ fun ProvideNewzzColors(
     colors: NewzzColorPalette,
     content: @Composable () -> Unit
 ) {
-//    colors.update(colors)
     Providers(NewzzColorAmbient provides colors, children = content)
 }
 
@@ -151,8 +137,8 @@ private val NewzzColorAmbient = staticAmbientOf<NewzzColorPalette> {
  * [MaterialTheme.colors] in preference to [NewzzTheme.colors].
  */
 fun debugColors(
-    darkTheme: Boolean,
-    debugColor: Color = Color.Magenta
+        darkTheme: Boolean,
+        debugColor: Color = Color(0x1f000000)
 ) = Colors(
     primary = debugColor,
     primaryVariant = debugColor,
diff --git a/app/src/main/java/com/akash/newzz_compose/util/CustomTabUtil.kt b/app/src/main/java/com/akash/newzz_compose/util/CustomTabUtil.kt
new file mode 100644
index 0000000..713ac42
--- /dev/null
+++ b/app/src/main/java/com/akash/newzz_compose/util/CustomTabUtil.kt
@@ -0,0 +1,60 @@
+package com.akash.newzz_compose.util
+
+import android.content.Context
+import android.net.Uri
+import androidx.browser.customtabs.CustomTabsIntent
+import androidx.core.content.ContextCompat
+import com.akash.newzz_compose.R
+
+/**
+ * Created by Akash on 29/08/20
+ */
+object CustomTabUtil {
+
+    private var builder: CustomTabsIntent? = null
+    private var builderDark: CustomTabsIntent? = null
+
+    fun launch(context: Context, url: String, isDark: Boolean) {
+        if (isDark) {
+            if (builderDark == null) {
+                builderDark = CustomTabsIntent.Builder()
+                        .setToolbarColor(
+                                ContextCompat.getColor(context, R.color.darkTheme)
+                        )
+                        .setShowTitle(true)
+                        .setStartAnimations(
+                                context,
+                                R.anim.slide_in_right,
+                                R.anim.slide_out_left
+                        )
+                        .setExitAnimations(
+                                context,
+                                android.R.anim.slide_in_left,
+                                android.R.anim.slide_out_right
+                        )
+                        .build()
+            }
+            builderDark?.launchUrl(context, Uri.parse(url))
+        } else {
+            if (builder == null) {
+                builder = CustomTabsIntent.Builder()
+                        .setToolbarColor(
+                                ContextCompat.getColor(context, R.color.lightTheme)
+                        )
+                        .setShowTitle(true)
+                        .setStartAnimations(
+                                context,
+                                R.anim.slide_in_right,
+                                R.anim.slide_out_left
+                        )
+                        .setExitAnimations(
+                                context,
+                                android.R.anim.slide_in_left,
+                                android.R.anim.slide_out_right
+                        )
+                        .build()
+            }
+            builder?.launchUrl(context, Uri.parse(url))
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/akash/newzz_compose/viewmodel/NewzzViewModel.kt b/app/src/main/java/com/akash/newzz_compose/viewmodel/NewzzViewModel.kt
index e41dd68..e082f64 100644
--- a/app/src/main/java/com/akash/newzz_compose/viewmodel/NewzzViewModel.kt
+++ b/app/src/main/java/com/akash/newzz_compose/viewmodel/NewzzViewModel.kt
@@ -1,6 +1,5 @@
 package com.akash.newzz_compose.viewmodel
 
-import android.util.Log
 import androidx.hilt.lifecycle.ViewModelInject
 import androidx.lifecycle.LiveData
 import androidx.lifecycle.MutableLiveData
@@ -8,11 +7,15 @@ import androidx.lifecycle.ViewModel
 import androidx.lifecycle.viewModelScope
 import com.akash.newzz.data.Result
 import com.akash.newzz.data.repository.NewsRepository
+import com.akash.newzz.data.response.NewsResponse
 import com.akash.newzz_compose.other.Business
 import com.akash.newzz_compose.other.Category
 import com.akash.newzz_compose.other.General
 import com.akash.newzz_compose.other.Technology
+import com.akash.newzz_compose.ui.newzzappui.ArticleListUiState
+import kotlinx.coroutines.Dispatchers
 import kotlinx.coroutines.launch
+import kotlinx.coroutines.withContext
 
 /**
  * Created by Akash on 28/08/20
@@ -32,36 +35,130 @@ class NewzzViewModel @ViewModelInject constructor(private val repo: NewsReposito
     }
     val activeCategory: LiveData<Category> = _activeCategory
 
+    private val _activeCategoryUiState = MutableLiveData<ArticleListUiState>().apply {
+        value = ArticleListUiState()
+    }
+    val activeCategoryUiState: LiveData<ArticleListUiState> = _activeCategoryUiState
+
+    private var firstPageUiState = ArticleListUiState()
+    private var secondPageUiState = ArticleListUiState()
+    private var thirdPageUiState = ArticleListUiState()
+
+    init {
+        getArticlesByCategory(categoryList.value!![0])
+    }
+
+    private fun getArticlesByCategory(
+            category: Category,
+            page: Int = 1,
+    ) {
+        viewModelScope.launch {
+            setLoadingState(category)
+            when (val result = repo.getArticlesByCategoryAsync(category.category, page)) {
+                is Result.Error -> {
+                    withContext(Dispatchers.Main) {
+                        setErrorState(category, Result.Error(result.errorMessage, result.showRetry))
+                    }
+                }
+                is Result.Success -> {
+                    withContext(Dispatchers.Main) {
+                        setSuccessState(category, result.data)
+                    }
+                }
+            }
+        }
+    }
+
     fun performAction(action: Action) {
         when (action) {
             is Action.ChangePageTo -> {
                 _activeCategory.value = action.category
+                when (categoryList.value!!.indexOf(action.category)) {
+                    0 -> _activeCategoryUiState.value = firstPageUiState
+                    1 -> _activeCategoryUiState.value = secondPageUiState
+                    2 -> _activeCategoryUiState.value = thirdPageUiState
+                }
+                if (activeCategoryUiState.value!!.list == null || activeCategoryUiState.value!!.list!!.isEmpty()) {
+                    getArticlesByCategory(action.category)
+                }
             }
             is Action.FetchArticles -> {
-
+                getArticlesByCategory(action.category)
             }
             Action.SwitchTheme -> {
                 _isDarkTheme.value = !_isDarkTheme.value!!
-                Log.d("TAG", "toggle: ${_isDarkTheme.value}")
             }
         }
     }
 
+    private fun setErrorState(category: Category, error: Result.Error) {
+        when (categoryList.value!!.indexOf(category)) {
+            0 -> {
+                firstPageUiState = firstPageUiState.copy(
+                        isLoading = false,
+                        list = null,
+                        error = error
+                )
+                _activeCategoryUiState.value = firstPageUiState
+            }
+            1 -> {
+                secondPageUiState = secondPageUiState.copy(
+                        isLoading = false,
+                        list = null,
+                        error = error
+                )
+                _activeCategoryUiState.value = secondPageUiState
+            }
+            2 -> {
+                thirdPageUiState = thirdPageUiState.copy(
+                        isLoading = false,
+                        list = null,
+                        error = error
+                )
+                _activeCategoryUiState.value = thirdPageUiState
+            }
+        }
+    }
 
-    fun getArticlesByCategory(
-        category: String,
-        page: Int = 1,
-    ) {
-        viewModelScope.launch {
-            val result = repo.getArticlesByCategoryAsync(category, page)
-            when (result) {
-                is Result.Success -> {
-                    Log.d("TAG", "list: ${result.data.articles}")
-                }
-                is Result.Error -> {
-                    Log.d("TAG", "error : ${result.errorMessage}")
+    private fun setSuccessState(category: Category, data: NewsResponse) {
+        when (categoryList.value!!.indexOf(category)) {
+            0 -> {
+                firstPageUiState = firstPageUiState.copy(
+                        isLoading = false,
+                        list = data.articles,
+                        error = null
+                )
+                _activeCategoryUiState.value = firstPageUiState
+            }
+            1 -> {
+                secondPageUiState = secondPageUiState.copy(
+                        isLoading = false,
+                        list = data.articles,
+                        error = null
+                )
+                _activeCategoryUiState.value = secondPageUiState
+            }
+            2 -> {
+                thirdPageUiState = thirdPageUiState.copy(
+                        isLoading = false,
+                        list = data.articles,
+                        error = null
+                )
+                _activeCategoryUiState.value = thirdPageUiState
+            }
+        }
+    }
 
-                }
+    private fun setLoadingState(category: Category) {
+        when (categoryList.value!!.indexOf(category)) {
+            0 -> {
+                _activeCategoryUiState.value = firstPageUiState.copy(isLoading = true)
+            }
+            1 -> {
+                _activeCategoryUiState.value = secondPageUiState.copy(isLoading = true)
+            }
+            2 -> {
+                _activeCategoryUiState.value = thirdPageUiState.copy(isLoading = true)
             }
         }
     }
@@ -69,7 +166,7 @@ class NewzzViewModel @ViewModelInject constructor(private val repo: NewsReposito
 
     sealed class Action {
         data class ChangePageTo(val category: Category) : Action()
-        data class FetchArticles(val category: String) : Action()
+        data class FetchArticles(val category: Category) : Action()
         object SwitchTheme : Action()
     }
 }
\ No newline at end of file
diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml
index b1321db..35fed59 100644
--- a/app/src/main/res/values/strings.xml
+++ b/app/src/main/res/values/strings.xml
@@ -3,4 +3,5 @@
     <string name="title_general">General</string>
     <string name="title_business">Business</string>
     <string name="title_technology">Technology</string>
+    <string name="retry">Retry</string>
 </resources>
\ No newline at end of file