Make PhotoPanel bound

mobile/src/Activity/Activity.js

@@ -19,9 +19,9 @@ import {
   BoundButton,
   BoundOptionStrip,
   BoundHeader,
-  PhotoPanel,
+  BoundPhotoPanel,
 } from "../ui"
-import { MessageModal } from "../Modal"
+import { MessageModal, WaitModal } from "../Modal"
 import autobind from "autobind-decorator"
 import KeyboardSpacer from "react-native-keyboard-spacer"
 import { isIphoneX } from "react-native-iphone-x-helper"
@@ -70,6 +70,9 @@ export class Activity extends React.Component {
     notes: {
       isValid: (r, v) => v !== "",
     },
+    photos: {
+      isValid: (r, v) => v && v.length > 0,
+    },
     status: {
       isValid: (r, v) => v !== "",
       alwaysGet: true,
@@ -84,6 +87,7 @@ export class Activity extends React.Component {
     super(props)
     this.state = {
       binder: new FormBinder({}, Activity.bindings),
+      waitModal: null,
       messageModal: null,
     }
 
@@ -180,8 +184,18 @@ export class Activity 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={{ width: "100%", height: "100%" }}>
@@ -258,10 +272,19 @@ export class Activity extends React.Component {
             </View>
           </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 : ""}