Closing many tickets

mobile/src/WorkItem/WorkItem.js

@@ -59,6 +59,10 @@ export class WorkItem extends React.Component {
       isValid: (r, v) => v !== "",
       isReadOnly: true,
     },
+    address: {
+      isValid: true,
+      isReadOnly: true,
+    },
     details: {
       isValid: (r, v) => v !== "",
     },
@@ -118,6 +122,12 @@ export class WorkItem extends React.Component {
     }
   }
 
+  componentWillUnmount() {
+    if (this.geoCodeTimer) {
+      clearTimeout(this.geoCodeTimer)
+    }
+  }
+
   @autobind
   handleBackPress() {
     const { history } = this.props
@@ -180,11 +190,32 @@ export class WorkItem extends React.Component {
 
   @autobind
   handleRegionChange(region) {
+    const { latitude, longitude } = region
+
     if (this.latLngInput) {
-      this.latLngInput.handleChangeText(
-        formatLatLng(region.latitude, region.longitude)
-      )
+      this.latLngInput.handleChangeText(formatLatLng(latitude, longitude))
     }
+
+    if (this.geoCodeTimer) {
+      clearTimeout(this.geoCodeTimer)
+    }
+
+    this.geoCodeTimer = setTimeout(
+      () => this.handleStartAddressLookup({ latitude, longitude }),
+      config.geocodeDelayMilliseconds
+    )
+  }
+
+  @autobind
+  handleStartAddressLookup(latLng) {
+    api
+      .addressLookup(latLng)
+      .then((address) => {
+        this.setState({ address })
+      })
+      .catch(() => {
+        this.setState({ address: "" })
+      })
   }
 
   render() {
@@ -252,6 +283,12 @@ export class WorkItem extends React.Component {
               name="location"
               label="Location:"
             />
+            <BoundInput
+              ref={(ref) => (this.addressInput = ref)}
+              binder={binder}
+              name="address"
+              label="Address:"
+            />
           </View>
           <View style={styles.panel}>
             <PhotoPanel />