Use a progress dialog during uploading

wordpress-mobile · Aug 7, 2024 · b0f0ba9 · b0f0ba9
1 parent 6d577c2
commit b0f0ba9
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 33 deletions.
diff --git a/WordPress/src/main/java/org/wordpress/android/ui/main/feedbackform/FeedbackFormActivity.kt b/WordPress/src/main/java/org/wordpress/android/ui/main/feedbackform/FeedbackFormActivity.kt
@@ -27,7 +27,7 @@ class FeedbackFormActivity : LocaleAwareActivity() {
                 setContent {
                     FeedbackFormScreen(
                         messageText = viewModel.messageText.collectAsState(),
-                        isProgressShowing = viewModel.isProgressShowing.collectAsState(),
+                        progressDialogState = viewModel.progressDialogState.collectAsState(),
                         attachments = viewModel.attachments.collectAsState(),
                         onMessageChanged = {
                             viewModel.updateMessageText(it)

diff --git a/WordPress/src/main/java/org/wordpress/android/ui/main/feedbackform/FeedbackFormScreen.kt b/WordPress/src/main/java/org/wordpress/android/ui/main/feedbackform/FeedbackFormScreen.kt
@@ -21,7 +21,6 @@ import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Close
 import androidx.compose.material3.Button
-import androidx.compose.material3.CircularProgressIndicator
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
@@ -42,14 +41,16 @@ import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import kotlinx.coroutines.flow.MutableStateFlow
 import org.wordpress.android.R
+import org.wordpress.android.ui.compose.components.ProgressDialog
+import org.wordpress.android.ui.compose.components.ProgressDialogState
 import org.wordpress.android.ui.compose.theme.M3Theme
 import java.io.File
 
 @Composable
 fun FeedbackFormScreen(
     messageText: State<String>?,
-    isProgressShowing: State<Boolean?>,
     attachments: State<List<FeedbackFormAttachment>>,
+    progressDialogState: State<ProgressDialogState?>?,
     onMessageChanged: (String) -> Unit,
     onSubmitClick: (context: Context) -> Unit,
     onCloseClick: (context: Context) -> Unit,
@@ -75,7 +76,7 @@ fun FeedbackFormScreen(
         }
         SubmitButton(
             isEnabled = message.isNotEmpty(),
-            isProgressShowing = isProgressShowing.value,
+            progressDialogState = progressDialogState?.value,
             onClick = {
                 onSubmitClick(context)
             }
@@ -119,7 +120,7 @@ private fun MessageSection(
 private fun SubmitButton(
     onClick: () -> Unit,
     isEnabled: Boolean,
-    isProgressShowing: Boolean?,
+    progressDialogState: ProgressDialogState? = null,
 ) {
     Box(
         contentAlignment = Alignment.Center,
@@ -130,18 +131,17 @@ private fun SubmitButton(
                 horizontal = H_PADDING.dp
             ),
     ) {
-        if (isProgressShowing == true) {
-            CircularProgressIndicator()
-        } else {
-            Button(
-                enabled = isEnabled,
-                onClick = onClick,
-                modifier = Modifier.fillMaxWidth()
-            ) {
-                Text(
-                    text = stringResource(R.string.submit).uppercase(),
-                )
-            }
+        if (progressDialogState != null) {
+            ProgressDialog(progressDialogState)
+        }
+        Button(
+            enabled = isEnabled,
+            onClick = onClick,
+            modifier = Modifier.fillMaxWidth()
+        ) {
+            Text(
+                text = stringResource(R.string.submit).uppercase(),
+            )
         }
     }
 }
@@ -282,12 +282,18 @@ private fun FeedbackFormScreenPreview() {
         tempFile = File("/tmp/attachment.jpg")
     )
     val attachments = MutableStateFlow(listOf(attachment))
-    val isProgressShowing = MutableStateFlow<Boolean?>(null)
     val messageText = MutableStateFlow("I love this app!")
+    val progressDialogState = MutableStateFlow<ProgressDialogState?>(
+        ProgressDialogState(
+            message = R.string.uploading,
+            showCancel = false,
+            progress = 50f / 100f,
+        )
+    )
 
     FeedbackFormScreen(
         messageText = messageText.collectAsState(),
-        isProgressShowing = isProgressShowing.collectAsState(),
+        progressDialogState = progressDialogState.collectAsState(),
         attachments = attachments.collectAsState(),
         onMessageChanged = {},
         onSubmitClick = {},

diff --git a/WordPress/src/main/java/org/wordpress/android/ui/main/feedbackform/FeedbackFormViewModel.kt b/WordPress/src/main/java/org/wordpress/android/ui/main/feedbackform/FeedbackFormViewModel.kt
@@ -20,6 +20,7 @@ import org.wordpress.android.modules.UI_THREAD
 import org.wordpress.android.support.ZendeskHelper
 import org.wordpress.android.support.ZendeskUploadHelper
 import org.wordpress.android.ui.accounts.HelpActivity
+import org.wordpress.android.ui.compose.components.ProgressDialogState
 import org.wordpress.android.ui.media.MediaBrowserType
 import org.wordpress.android.ui.mysite.SelectedSiteRepository
 import org.wordpress.android.ui.photopicker.MediaPickerConstants
@@ -51,12 +52,12 @@ class FeedbackFormViewModel @Inject constructor(
     private val _messageText = MutableStateFlow("")
     val messageText = _messageText.asStateFlow()
 
-    private val _isProgressShowing = MutableStateFlow<Boolean?>(null)
-    val isProgressShowing = _isProgressShowing.asStateFlow()
-
     private val _attachments = MutableStateFlow<List<FeedbackFormAttachment>>(emptyList())
     val attachments = _attachments.asStateFlow()
 
+    private val _progressDialogState = MutableStateFlow<ProgressDialogState?>(null)
+    val progressDialogState = _progressDialogState.asStateFlow()
+
     private val attachmentTokens = ArrayList<String>()
 
     fun updateMessageText(message: String) {
@@ -74,8 +75,9 @@ class FeedbackFormViewModel @Inject constructor(
         //  identity if it hasn't been previously set
         zendeskHelper.createAnonymousIdentityIfNeeded()
 
-        // if there are attachments, upload them first then create the feedback request when they're all uploaded.
-        // using a completion handler isn't ideal but it's done since Zendesk only provides uploading using callbacks.
+        // if there are attachments, upload them first to get their tokens, then create the feedback request
+        // when they're all uploaded. using a completion handler here isn't ideal but it's done since Zendesk
+        // only provides callbacks for uploading.
         if (_attachments.value.isNotEmpty()) {
             uploadAttachments(
                 completionHandler = { createZendeskFeedbackRequest(context) }
@@ -85,11 +87,8 @@ class FeedbackFormViewModel @Inject constructor(
         }
     }
 
-    private fun createZendeskFeedbackRequest(
-        context: Context,
-    ) {
-        _isProgressShowing.value = true
-
+    private fun createZendeskFeedbackRequest(context: Context) {
+        showProgressDialog(R.string.sending)
         zendeskHelper.createRequest(
             context = context,
             origin = HelpActivity.Origin.FEEDBACK_FORM,
@@ -99,17 +98,31 @@ class FeedbackFormViewModel @Inject constructor(
             attachmentTokens = attachmentTokens,
             callback = object : ZendeskHelper.CreateRequestCallback() {
                 override fun onSuccess() {
-                    _isProgressShowing.value = false
+                    hideProgressDialog()
                     onSuccess(context)
                 }
 
                 override fun onError(errorMessage: String?) {
-                    _isProgressShowing.value = false
+                    hideProgressDialog()
                     onFailure(errorMessage)
                 }
             })
     }
 
+    private fun showProgressDialog(
+        @StringRes message: Int
+    ) {
+        _progressDialogState.value =
+            ProgressDialogState(
+                message = message,
+                showCancel = false
+            )
+    }
+
+    private fun hideProgressDialog() {
+        _progressDialogState.value = null
+    }
+
     fun onCloseClick(context: Context) {
         (context as? Activity)?.let { activity ->
             if (_messageText.value.isEmpty() && _attachments.value.isEmpty()) {
@@ -235,7 +248,7 @@ class FeedbackFormViewModel @Inject constructor(
         fun decAttachments() {
             numAttachments--
             if (numAttachments <= 0) {
-                _isProgressShowing.value = false
+                hideProgressDialog()
                 completionHandler()
             }
         }
@@ -256,7 +269,7 @@ class FeedbackFormViewModel @Inject constructor(
             }
         }
 
-        _isProgressShowing.value = true
+        showProgressDialog(R.string.uploading)
         _attachments.value.forEach { attachment ->
             zendeskUploadHelper.uploadAttachment(
                 file = attachment.tempFile,

diff --git a/WordPress/src/main/res/values/strings.xml b/WordPress/src/main/res/values/strings.xml
@@ -111,6 +111,7 @@
     <string name="status_and_visibility">Status &amp; Visibility</string>
     <string name="free">Free</string>
     <string name="dismiss">Dismiss</string>
+    <string name="sending">Sending</string>
 
     <string name="button_not_now">Not now</string>
     <string name="button_skip">Skip</string>