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 />

mobile/src/WorkItem/WorkItemList.js

@@ -19,6 +19,7 @@ import {
   formatLatLng,
   parseLatLng,
   pad,
+  geoDistance,
 } from "../util"
 
 const styles = StyleSheet.create({
@@ -36,6 +37,25 @@ export class WorkItemList extends React.Component {
     this.state = {
       messageModal: null,
     }
+
+    const { search } = this.props.location
+
+    if (search) {
+      const params = new URLSearchParams(search)
+      const latLng = params.get("latLng")
+
+      if (latLng) {
+        const [lat, lng] = latLng.split(",")
+
+        if (lat && lng) {
+          this.position = {
+            latitude: parseFloat(lat),
+            longitude: parseFloat(lng),
+          }
+        }
+      }
+    }
+
     api
       .listWorkItems()
       .then((list) => {
@@ -54,7 +74,7 @@ export class WorkItemList extends React.Component {
 
   @autobind
   handleItemSelect(item, ref) {
-    this.props.history.push(`/workitem?id=${item._id}`)
+    this.props.history.push(`/workItem?id=${item._id}`)
   }
 
   @autobind
@@ -95,7 +115,7 @@ export class WorkItemList extends React.Component {
 
   @autobind
   handleDonePress() {
-    this.props.history.push("/workitem")
+    this.props.history.push("/workItem")
   }
 
   @autobind
@@ -159,7 +179,17 @@ export class WorkItemList extends React.Component {
                     {workItemTypeText[item.workItemType]}
                   </Text>
                   <Text style={{ fontSize: 14, color: "gray" }}>
-                    {`${item.address || "..."} | ??? mi`}
+                    {`${item.address || "..."} | ${
+                      this.position
+                        ? geoDistance(
+                            this.position.latitude,
+                            this.position.longitude,
+                            item.location.coordinates[1],
+                            item.location.coordinates[0],
+                            "K"
+                          ).toFixed(2)
+                        : "?"
+                    } km`}
                   </Text>
                 </View>
                 <Icon