Added Empty state component and Fab

JusTap-Official · Jun 1, 2024 · 038ea73 · 038ea73
1 parent 0ff9481
commit 038ea73
Show file tree

Hide file tree

Showing 2 changed files with 97 additions and 59 deletions.
diff --git a/app/src/main/java/com/binay/shaw/justap/presentation/components/EmptyState.kt b/app/src/main/java/com/binay/shaw/justap/presentation/components/EmptyState.kt
@@ -0,0 +1,77 @@
+package com.binay.shaw.justap.presentation.components
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.heightIn
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.material3.TextButton
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.ColorFilter
+import androidx.compose.ui.graphics.painter.Painter
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import coil.compose.rememberAsyncImagePainter
+import com.binay.shaw.justap.R
+import com.binay.shaw.justap.presentation.themes.DMSansFontFamily
+import timber.log.Timber
+
+@Composable
+fun EmptyState(
+    modifier: Modifier = Modifier,
+    imagePainter: Painter = rememberAsyncImagePainter(model = R.drawable.empty_state),
+    imageDescription: String = stringResource(R.string.empty_state),
+    imageSize: Dp = 200.dp,
+    text: String = stringResource(R.string.quickly_share_your_contacts_by_adding_them),
+    showTextButton: Boolean = false,
+    textButtonText: String = "Add an account",
+    onTextButtonClick: () -> Unit = {}
+) {
+    Column(
+        modifier = Modifier.fillMaxSize().then(modifier),
+        verticalArrangement = Arrangement.spacedBy(8.dp, Alignment.CenterVertically),
+        horizontalAlignment = Alignment.CenterHorizontally
+    ) {
+        Image(
+            painter = imagePainter,
+            contentDescription = imageDescription,
+            modifier = Modifier.heightIn(min = imageSize, max = imageSize),
+            colorFilter = ColorFilter.tint(color = MaterialTheme.colorScheme.onSurface)
+        )
+
+        Spacer(Modifier.height(16.dp))
+
+        Text(
+            text = text,
+            color = MaterialTheme.colorScheme.onSurface,
+            fontFamily = DMSansFontFamily,
+            modifier = Modifier.fillMaxWidth(0.7f),
+            textAlign = TextAlign.Center
+        )
+
+        if (showTextButton) {
+            TextButton(
+                onClick = {
+                    onTextButtonClick()
+                }
+            ) {
+                Text(
+                    text = textButtonText,
+                    color = MaterialTheme.colorScheme.primary,
+                    fontFamily = DMSansFontFamily,
+                    fontWeight = FontWeight.Medium
+                )
+            }
+        }
+    }
+}
diff --git a/app/src/main/java/com/binay/shaw/justap/presentation/home/HomeScreen.kt b/app/src/main/java/com/binay/shaw/justap/presentation/home/HomeScreen.kt
@@ -1,22 +1,22 @@
 package com.binay.shaw.justap.presentation.home
 
-import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.heightIn
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Add
 import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.FloatingActionButton
+import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
-import androidx.compose.material3.TextButton
 import androidx.compose.material3.TopAppBar
 import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.runtime.Composable
@@ -26,21 +26,14 @@ import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
-import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color.Companion.Transparent
-import androidx.compose.ui.graphics.ColorFilter
-import androidx.compose.ui.res.stringResource
-import androidx.compose.ui.text.font.FontWeight
-import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
 import androidx.hilt.navigation.compose.hiltViewModel
-import coil.compose.rememberAsyncImagePainter
-import com.binay.shaw.justap.R
 import com.binay.shaw.justap.presentation.components.AccountCard
+import com.binay.shaw.justap.presentation.components.EmptyState
 import com.binay.shaw.justap.presentation.components.SearchBar
 import com.binay.shaw.justap.presentation.mainScreens.homeScreen.accountFragments.AddEditViewModel
-import com.binay.shaw.justap.presentation.themes.DMSansFontFamily
 import com.binay.shaw.justap.viewModel.AccountsViewModel
 import com.binay.shaw.justap.viewModel.LocalUserViewModel
 import timber.log.Timber
@@ -80,6 +73,16 @@ fun HomeScreen(
                 },
                 colors = TopAppBarDefaults.topAppBarColors(containerColor = Transparent)
             )
+        },
+        floatingActionButton = {
+            FloatingActionButton(
+                onClick = {
+                    // Navigate to add account screen
+                    Timber.d("Add account clicked")
+                }
+            ) {
+                Icon(imageVector = Icons.Default.Add, contentDescription = "Add account")
+            }
         }
     ) { paddingValues ->
         Column(
@@ -90,82 +93,40 @@ fun HomeScreen(
                 .padding(horizontal = 16.dp),
             verticalArrangement = Arrangement.Top
         ) {
+
             SearchBar(
                 search = search,
                 onValueChange = { search = it },
                 onSearchClick = {
                     // Handle search click
+                    Timber.d("Search clicked with value: $search")
                 }
             )
 
             Spacer(Modifier.height(16.dp))
 
             if (userAccountList.isEmpty()) {
                 Timber.d("User account list is empty")
-
-                Column(
-                    modifier = Modifier.fillMaxSize(),
-                    verticalArrangement = Arrangement.spacedBy(8.dp, Alignment.CenterVertically),
-                    horizontalAlignment = Alignment.CenterHorizontally
-                ) {
-                    Image(
-                        painter = rememberAsyncImagePainter(model = R.drawable.empty_state),
-                        contentDescription = stringResource(R.string.empty_state),
-                        modifier = Modifier.heightIn(min = 100.dp, max = 200.dp),
-                        colorFilter = ColorFilter.tint(color = MaterialTheme.colorScheme.onSurface)
-                    )
-
-                    Spacer(Modifier.height(16.dp))
-
-                    Text(
-                        text = stringResource(R.string.quickly_share_your_contacts_by_adding_them),
-                        color = MaterialTheme.colorScheme.onSurface,
-                        fontFamily = DMSansFontFamily,
-                        modifier = Modifier.fillMaxWidth(0.7f),
-                        textAlign = TextAlign.Center
-                    )
-
-                    TextButton(
-                       onClick = {
-                           // Navigate to add account screen
-                       }
-                    ) {
-                        Text(
-                            text = "Add an account",
-                            color = MaterialTheme.colorScheme.primary,
-                            fontFamily = DMSansFontFamily,
-                            fontWeight = FontWeight.Medium
-                        )
-                    }
+                EmptyState(showTextButton = true)  {
+                    // Navigate to add account screen
+                    Timber.d("Add account clicked")
                 }
 
-
             } else {
                 Timber.d("User account list is not empty")
 
-
-
                 LazyColumn(
                     verticalArrangement = Arrangement.spacedBy(8.dp)
                 ) {
                     items(
                         items = userAccountList,
                         key = { account -> account.accountID }
                     ) { account ->
-                        // Display account item
                         AccountCard(account) { newValue ->
                             Timber.d("Switch clicked with value: $newValue")
                         }
                     }
                 }
-
-//                AsyncImage(
-//                    model = ImageRequest.Builder(LocalContext.current)
-//                        .data(R.drawable.empty_home_state)
-//                        .size(200)
-//                        .build(),
-//                    contentDescription = "Empty state"
-//                )
             }
         }
     }