Merge pull request #104 from nimblehq/feature/100-ui-implement-no-con…

…nection-dialog [#100] [UI] As a user, I can see dialog when there is no internet connection
nimblehq · Aug 6, 2023 · 4f78e72 · 4f78e72
2 parents 5f5c3d2 + 2dd9657
commit 4f78e72
Show file tree

Hide file tree

Showing 6 changed files with 97 additions and 11 deletions.
diff --git a/app/src/main/java/co/nimblehq/compose/crypto/ui/common/AppDialogPopUp.kt b/app/src/main/java/co/nimblehq/compose/crypto/ui/common/AppDialogPopUp.kt
@@ -0,0 +1,70 @@
+package co.nimblehq.compose.crypto.ui.common
+
+import androidx.compose.foundation.layout.*
+import androidx.compose.material.*
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.window.Dialog
+import co.nimblehq.compose.crypto.ui.theme.*
+
+@Composable
+fun AppDialogPopUp(
+    onDismiss: () -> Unit,
+    onClick: () -> Unit,
+    title: String,
+    message: String,
+    actionText: String,
+) {
+    Dialog(
+        onDismissRequest = onDismiss
+    ) {
+        Surface {
+            Column(
+                modifier = Modifier.width(DialogWidth)
+            ) {
+                Text(
+                    text = title,
+                    style = AppTheme.typography.h6,
+                    color = AppTheme.colors.text,
+                    modifier = Modifier.padding(top = Dp16, start = Dp16, end = Dp16)
+                )
+                Text(
+                    text = message,
+                    style = AppTheme.typography.body1,
+                    color = AppTheme.colors.text,
+                    modifier = Modifier.padding(Dp16)
+                )
+                TextButton(
+                    onClick = onClick,
+                    modifier = Modifier
+                        .align(Alignment.End)
+                        .padding(bottom = Dp16, end = Dp8)
+                ) {
+                    Text(
+                        text = actionText,
+                        style = AppTheme.styles.semiBold16,
+                        color = AppTheme.colors.dialogText,
+                    )
+                }
+            }
+        }
+    }
+}
+
+@Composable
+@Preview(showSystemUi = true)
+fun AppDialogPopUpPreview() {
+    ComposeTheme {
+        Box {
+            AppDialogPopUp(
+                onDismiss = { /*TODO*/ },
+                onClick = { /*TODO*/ },
+                message = "No internet connection was found. Please check your internet connection and try again.",
+                actionText = "OK",
+                title = "Oops!"
+            )
+        }
+    }
+}
diff --git a/app/src/main/java/co/nimblehq/compose/crypto/ui/screens/home/HomeScreen.kt b/app/src/main/java/co/nimblehq/compose/crypto/ui/screens/home/HomeScreen.kt
@@ -23,6 +23,7 @@ import co.nimblehq.compose.crypto.R
 import co.nimblehq.compose.crypto.extension.boxShadow
 import co.nimblehq.compose.crypto.lib.IsLoading
 import co.nimblehq.compose.crypto.ui.base.LoadingState
+import co.nimblehq.compose.crypto.ui.common.AppDialogPopUp
 import co.nimblehq.compose.crypto.ui.navigation.AppDestination
 import co.nimblehq.compose.crypto.ui.preview.HomeScreenParams
 import co.nimblehq.compose.crypto.ui.preview.HomeScreenPreviewParameterProvider
@@ -57,12 +58,7 @@ fun HomeScreen(
     }
 
     // TODO remove in integration ticket
-    val isNetworkConnected by viewModel.hasConnection.collectAsState()
-    LaunchedEffect(isNetworkConnected) {
-        if (isNetworkConnected != null) {
-            Toast.makeText(context,"Connection: $isNetworkConnected", Toast.LENGTH_SHORT).show()
-        }
-    }
+    val isNetworkConnected by viewModel.isNetworkConnected.collectAsState()
 
     val showMyCoinsLoading: IsLoading by viewModel.output.showMyCoinsLoading.collectAsState()
     val showTrendingCoinsLoading: LoadingState by viewModel.output.showTrendingCoinsLoading.collectAsState()
@@ -94,6 +90,17 @@ fun HomeScreen(
         onRefresh = { viewModel.input.loadData(isRefreshing = true) },
         onTrendingCoinsLoadMore = { viewModel.input.getTrendingCoins(loadMore = true) }
     )
+
+    // TODO remove in integration ticket
+    if (isNetworkConnected == false) {
+        AppDialogPopUp(
+            onDismiss = { /*TODO*/ },
+            onClick = { /*TODO*/ },
+            message = stringResource(id = R.string.no_internet_message),
+            actionText = stringResource(id = android.R.string.ok),
+            title = stringResource(id = R.string.no_internet_title)
+        )
+    }
 }
 
 @OptIn(ExperimentalMaterialApi::class)

diff --git a/app/src/main/java/co/nimblehq/compose/crypto/ui/screens/home/HomeViewModel.kt b/app/src/main/java/co/nimblehq/compose/crypto/ui/screens/home/HomeViewModel.kt
@@ -85,16 +85,16 @@ class HomeViewModel @Inject constructor(
     private var trendingCoinsPage = MY_COINS_INITIAL_PAGE
 
     // TODO remove in integration ticket
-    private val _hasConnection = MutableStateFlow<Boolean?>(null)
-    val hasConnection: StateFlow<Boolean?> = _hasConnection
+    private val _isNetworkConnected = MutableStateFlow<Boolean?>(null)
+    val isNetworkConnected: StateFlow<Boolean?> = _isNetworkConnected
 
     init {
         loadData()
         // TODO remove in integration ticket
         execute {
             isNetworkConnectedUseCase()
                 .collect {
-                    _hasConnection.emit(it)
+                    _isNetworkConnected.emit(it)
                 }
         }
     }

diff --git a/app/src/main/java/co/nimblehq/compose/crypto/ui/theme/AppColors.kt b/app/src/main/java/co/nimblehq/compose/crypto/ui/theme/AppColors.kt
@@ -3,6 +3,7 @@ package co.nimblehq.compose.crypto.ui.theme
 import androidx.compose.material.*
 import androidx.compose.runtime.staticCompositionLocalOf
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.Color.Companion.Blue
 
 /**
  * Extend final [Colors] class to provide more custom app colors.
@@ -35,6 +36,7 @@ data class AppColors(
     val pullRefreshContent: Color = CaribbeanGreen,
 
     val text: Color,
+    val dialogText: Color,
     val textSectionLink: Color = TiffanyBlue,
 )
 
@@ -47,7 +49,8 @@ internal val LightColorPalette = AppColors(
     coinItemBackground = White,
     coinNameText = SonicSilver,
     pullRefreshBackground = White,
-    text = DarkJungleGreen
+    text = DarkJungleGreen,
+    dialogText = Blue
 )
 
 internal val DarkColorPalette = AppColors(
@@ -59,7 +62,8 @@ internal val DarkColorPalette = AppColors(
     coinItemBackground = QuartzAlpha20,
     coinNameText = LightSilver,
     pullRefreshBackground = DarkJungleGreen,
-    text = White
+    text = White,
+    dialogText = White
 )
 
 internal val LocalColors = staticCompositionLocalOf { LightColorPalette }
diff --git a/app/src/main/java/co/nimblehq/compose/crypto/ui/theme/Dimension.kt b/app/src/main/java/co/nimblehq/compose/crypto/ui/theme/Dimension.kt
@@ -24,3 +24,5 @@ val Sp12 = 12.sp
 val Sp14 = 14.sp
 val Sp16 = 16.sp
 val Sp24 = 24.sp
+
+val DialogWidth = 300.dp
diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml
@@ -20,4 +20,7 @@
 
     <string name="coin_info_sell_button">Sell</string>
     <string name="coin_info_buy_button">Buy</string>
+
+    <string name="no_internet_title">Oops!</string>
+    <string name="no_internet_message">No internet connection was found. Please check your internet connection and try again.</string>
 </resources>