[#100] Ui implementation for no connection dialog

Author: kaungkhantsoe

app/src/main/java/co/nimblehq/compose/crypto/ui/common/AppDialogPopUp.kt

@@ -0,0 +1,78 @@
+package co.nimblehq.compose.crypto.ui.common
+
+import androidx.annotation.StringRes
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.*
+import androidx.compose.material.*
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.window.Dialog
+import co.nimblehq.compose.crypto.R
+import co.nimblehq.compose.crypto.ui.theme.*
+
+@Composable
+fun AppDialogPopUp(
+    onDismiss: () -> Unit,
+    onClick: () -> Unit,
+    @StringRes title: Int,
+    @StringRes message: Int,
+    @StringRes actionText: Int,
+) {
+    Dialog(
+        onDismissRequest = onDismiss
+    ) {
+        Column(
+            modifier = Modifier
+                .background(Color.White)
+                .width(DialogWidth)
+        ) {
+            Text(
+                text = stringResource(id = title),
+                style = AppTheme.typography.h6,
+                color = Color.Black,
+                modifier = Modifier.padding(top = Dp16, start = Dp16, end = Dp16)
+            )
+            Text(
+                text = stringResource(id = message),
+                style = AppTheme.typography.body1,
+                color = Color.Black,
+                modifier = Modifier.padding(Dp16)
+            )
+            Row(
+                horizontalArrangement = Arrangement.End,
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(bottom = Dp16, end = Dp8)
+            ) {
+                TextButton(
+                    onClick = onClick
+                ) {
+                    Text(
+                        text = stringResource(id = actionText),
+                        style = AppTheme.styles.semiBold16,
+                        color = Color.Blue,
+                    )
+                }
+            }
+        }
+    }
+}
+
+@Composable
+@Preview(showSystemUi = true)
+fun AppDialogPopUpPreview() {
+    ComposeTheme {
+        Box {
+            AppDialogPopUp(
+                onDismiss = { /*TODO*/ },
+                onClick = { /*TODO*/ },
+                message = R.string.no_internet_message,
+                actionText = android.R.string.ok,
+                title = R.string.no_internet_title
+            )
+        }
+    }
+}

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
@@ -58,11 +59,6 @@ fun HomeScreen(
 
     // TODO remove in integration ticket
     val hasConnection by viewModel.hasConnection.collectAsState()
-    LaunchedEffect(key1 = hasConnection) {
-        if (hasConnection != null) {
-            Toast.makeText(context,"Connection: $hasConnection", Toast.LENGTH_SHORT).show()
-        }
-    }
 
     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 (hasConnection == false) {
+        AppDialogPopUp(
+            onDismiss = { /*TODO*/ },
+            onClick = { /*TODO*/ },
+            message = R.string.no_internet_message,
+            actionText = android.R.string.ok,
+            title = R.string.no_internet_title
+        )
+    }
 }
 
 @OptIn(ExperimentalMaterialApi::class)

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

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>