Added progress bar, progress modal and bubble loader

mobile/src/WorkItem/WorkItem.js

@@ -21,7 +21,7 @@ import {
   BoundOptionStrip,
   BoundPhotoPanel,
 } from "../ui"
-import { MessageModal, WaitModal } from "../Modal"
+import { MessageModal, ProgressModal, WaitModal } from "../Modal"
 import autobind from "autobind-decorator"
 import { ifIphoneX, isIphoneX } from "react-native-iphone-x-helper"
 import KeyboardSpacer from "react-native-keyboard-spacer"
@@ -83,6 +83,7 @@ export class WorkItem extends React.Component {
       binder: new FormBinder({}, WorkItem.bindings),
       messageModal: null,
       waitModal: null,
+      progressModal: null,
     }
 
     const { search } = this.props.location
@@ -238,16 +239,45 @@ export class WorkItem extends React.Component {
 
   @autobind
   handleUploadStarted() {
-    this.setState({ waitModal: { message: "Uploading Photo..." } })
+    this.setState({
+      progressModal: { message: "Uploading Photo..." },
+      uploadPercent: 0,
+    })
   }
 
   @autobind
-  handleUploadEnded() {
-    this.setState({ waitModal: null })
+  handleUploadProgress(uploadData) {
+    console.log(uploadData)
+    if (this.state.progressModal) {
+      this.setState({
+        uploadPercent: Math.round(
+          uploadData.uploadedChunks / uploadData.numberOfChunks * 100
+        ),
+      })
+      return true
+    } else {
+      return false
+    }
+  }
+
+  @autobind
+  handleUploadEnded(successful, uploadData) {
+    this.setState({ progressModal: null })
+  }
+
+  @autobind
+  handleUploadCanceled() {
+    this.setState({ progressModal: null })
   }
 
   render() {
-    const { binder, messageModal, waitModal } = this.state
+    const {
+      binder,
+      messageModal,
+      waitModal,
+      progressModal,
+      uploadPercent,
+    } = this.state
 
     return (
       <View style={{ flex: 1 }}>
@@ -327,10 +357,17 @@ export class WorkItem extends React.Component {
               binder={binder}
               onUploadStarted={this.handleUploadStarted}
               onUploadEnded={this.handleUploadEnded}
+              onUploadProgress={this.handleUploadProgress}
             />
           </View>
           {isIphoneX ? <View style={{ height: 30, width: "100%" }} /> : null}
         </ScrollView>
+        <ProgressModal
+          open={!!progressModal}
+          message={progressModal ? progressModal.message : ""}
+          percent={uploadPercent}
+          onCancel={this.handleUploadCanceled}
+        />
         <WaitModal
           open={!!waitModal}
           message={waitModal ? waitModal.message : ""}