Make PhotoPanel bound

mobile/src/WorkItem/WorkItem.js

@@ -18,11 +18,10 @@ import {
   BoundHeader,
   Icon,
   Header,
-  PhotoButton,
   BoundOptionStrip,
-  PhotoPanel,
+  BoundPhotoPanel,
 } from "../ui"
-import { MessageModal } from "../Modal"
+import { MessageModal, WaitModal } from "../Modal"
 import autobind from "autobind-decorator"
 import { ifIphoneX, isIphoneX } from "react-native-iphone-x-helper"
 import KeyboardSpacer from "react-native-keyboard-spacer"
@@ -65,6 +64,9 @@ export class WorkItem extends React.Component {
       isValid: true,
       isReadOnly: true,
     },
+    photos: {
+      isValid: (r, v) => v && v.length > 0,
+    },
     details: {
       isValid: (r, v) => v !== "",
     },
@@ -87,6 +89,7 @@ export class WorkItem extends React.Component {
     this.state = {
       binder: new FormBinder({}, WorkItem.bindings),
       messageModal: null,
+      waitModal: null,
       region,
     }
 
@@ -230,8 +233,18 @@ export class WorkItem extends React.Component {
       })
   }
 
+  @autobind
+  handleUploadStarted() {
+    this.setState({ waitModal: { message: "Uploading Photo..." } })
+  }
+
+  @autobind
+  handleUploadEnded() {
+    this.setState({ waitModal: null })
+  }
+
   render() {
-    const { binder, messageModal, region } = this.state
+    const { binder, messageModal, waitModal, region } = this.state
 
     return (
       <View style={{ flex: 1 }}>
@@ -304,10 +317,19 @@ export class WorkItem extends React.Component {
             />
           </View>
           <View style={styles.panel}>
-            <PhotoPanel />
+            <BoundPhotoPanel
+              name="photos"
+              binder={binder}
+              onUploadStarted={this.handleUploadStarted}
+              onUploadEnded={this.handleUploadEnded}
+            />
           </View>
           {isIphoneX ? <View style={{ height: 30, width: "100%" }} /> : null}
         </ScrollView>
+        <WaitModal
+          open={!!waitModal}
+          message={waitModal ? waitModal.message : ""}
+        />
         <MessageModal
           open={!!messageModal}
           icon={messageModal ? messageModal.icon : ""}