Add in Geolocation component

mobile/src/Home/Home.js

@@ -12,7 +12,7 @@ import {
   Platform,
 } from "react-native"
 import MapView, { Marker, Callout } from "react-native-maps"
-import { Icon, Header } from "../ui"
+import { Icon, Header, Geolocation } from "../ui"
 import { MessageModal } from "../Modal"
 import { api } from "../API"
 import autobind from "autobind-decorator"
@@ -44,7 +44,8 @@ export class Home extends React.Component {
       showWorkItems: true,
       region: config.initialRegion,
       haveCameraPermission: false,
-      workItemDistance: -1,
+      haveLocationPermission: false,
+      currentPosition: null,
     }
 
     if (Platform.OS !== "ios") {
@@ -142,33 +143,17 @@ export class Home extends React.Component {
         viewOffset: 45,
       })
     }
-
-    navigator.geolocation.getCurrentPosition((positionInfo) => {
-      const coords = positionInfo.coords
-      const workItem = this.state.sections[sectionIndex]
-      const { latitude, longitude } = workItem.coordinate
-
-      this.setState({
-        workItemDistance: geoDistance(
-          coords.latitude,
-          coords.longitude,
-          latitude,
-          longitude,
-          "K"
-        ).toFixed(2),
-      })
-    })
   }
 
   @autobind
   handleWorkItemsListPress() {
-    navigator.geolocation.getCurrentPosition((positionInfo) => {
+    if (this.currentPosition) {
-      const { coords } = positionInfo
+      const { coords } = this.currentPosition
 
       this.props.history.push(
         `/workItemList?latLng=${coords.latitude},${coords.longitude}`
       )
-    })
+    }
   }
 
   @autobind
@@ -197,8 +182,11 @@ export class Home extends React.Component {
   handleGlassesPress() {
     const { sections: workItems } = this.state
 
-    navigator.geolocation.getCurrentPosition((positionInfo) => {
+    if (this.currentPosition) {
-      const { latitude: latitude1, longitude: longitude1 } = positionInfo.coords
+      const {
+        latitude: latitude1,
+        longitude: longitude1,
+      } = this.currentPosition.coords
       let closestWorkItem = config.alwaysShowWorkItemInAR ? workItems[0] : null
       let shortestDistance = config.minDistanceToItem
 
@@ -226,19 +214,19 @@ export class Home extends React.Component {
             : ""
         }`
       )
-    })
+    }
   }
 
   @autobind
   handleMyLocationPress() {
-    navigator.geolocation.getCurrentPosition((positionInfo) => {
+    if (this.currentPosition) {
-      const coords = positionInfo.coords
+      const coords = this.currentPosition.coords
 
       this.map.animateToCoordinate({
         latitude: coords.latitude,
         longitude: coords.longitude,
       })
-    })
+    }
   }
 
   @autobind
@@ -257,6 +245,31 @@ export class Home extends React.Component {
     }
   }
 
+  @autobind
+  handlePositionUpdate(position) {
+    this.currentPosition = position
+  }
+
+  @autobind
+  getCoordinateDistance(coordinate) {
+    if (this.currentPosition) {
+      const coords = this.currentPosition.coords
+      const { latitude, longitude } = coordinate
+
+      return (
+        geoDistance(
+          coords.latitude,
+          coords.longitude,
+          latitude,
+          longitude,
+          "K"
+        ).toFixed(2) + " km"
+      )
+    } else {
+      return "?"
+    }
+  }
+
   render() {
     const {
       sections,
@@ -265,7 +278,6 @@ export class Home extends React.Component {
       messageModal,
       haveCameraPermission,
       haveLocationPermission,
-      workItemDistance,
     } = this.state
 
     return (
@@ -319,10 +331,8 @@ export class Home extends React.Component {
                       ": " +
                       workItemTypeText[workItem.workItemType] +
                       " (" +
-                      (workItemDistance > 0
+                      this.getCoordinateDistance(workItem.coordinate) +
-                        ? workItemDistance.toString()
+                      ")"}
-                        : "?") +
-                      " km)"}
                   </Text>
                   <Text>{dotify(workItem.address)}</Text>
                 </View>
@@ -466,6 +476,9 @@ export class Home extends React.Component {
             />
           </TouchableOpacity>
         </View>
+        {haveLocationPermission && (
+          <Geolocation onUpdate={this.handlePositionUpdate} />
+        )}
         <MessageModal
           open={!!messageModal}
           icon={messageModal ? messageModal.icon : ""}

mobile/src/WorkItem/WorkItem.js

@@ -344,7 +344,6 @@ export class WorkItem extends React.Component {
                 showsBuildings={false}
                 showsTraffic={false}
                 showsIndoors={false}
-                cacheEnabled
                 initialRegion={config.initialRegion}
                 onRegionChange={this.handleRegionChange}
                 onMapReady={this.handleOnMapReady}

mobile/src/config.js

@@ -2,8 +2,8 @@ import React from "react"
 import { Platform } from "react-native"
 
 export const config = {
-  //localIPAddr: "192.168.1.175",
+  localIPAddr: "192.168.1.175",
-  localIPAddr: "192.168.1.14",
+  //localIPAddr: "192.168.1.14",
   viroAPIKey: "06F37B6A-74DA-4A83-965A-7DE2209A5C46",
   googleGeocodeAPIKey: "AIzaSyCs4JVT6gysnY5dAJ7KjVJYeykLv_xz1GI",
   googleGeocodeURL: "https://maps.googleapis.com/maps/api/geocode/json",

mobile/src/ui/Geolocation.js

@@ -0,0 +1,36 @@
+import React, { Component } from "react"
+import { Image, View } from "react-native"
+import PropTypes from "prop-types"
+import autobind from "autobind-decorator"
+
+export class Geolocation extends Component {
+  static propTypes = {
+    onUpdate: PropTypes.func.isRequired,
+  }
+
+  constructor(props) {
+    super(props)
+    this.watchId = -1
+  }
+
+  componentDidMount() {
+    navigator.geolocation.getCurrentPosition((position) => {
+      this.props.onUpdate(position)
+      this.watchId = navigator.geolocation.watchPosition((position) =>
+        this.props.onUpdate(position)
+      )
+    })
+  }
+
+  componentWillUnmount() {
+    if (this.watchId !== -1) {
+      navigator.geolocation.clearWatch(this.watchId)
+      navigator.geolocation.stopObserving()
+      this.watchId = -1
+    }
+  }
+
+  render() {
+    return null
+  }
+}

mobile/src/ui/index.js

@@ -3,6 +3,7 @@ export { Header } from "./Header"
 export { OptionStrip } from "./OptionStrip"
 export { BubbleLoader } from "./BubbleLoader"
 export { ProgressBar } from "./ProgressBar"
+export { Geolocation } from "./Geolocation"
 export { BoundSwitch } from "./BoundSwitch"
 export { BoundInput } from "./BoundInput"
 export { FormStaticInput } from "./FormStaticInput"