Revert to user location from map with better GPS accuracy

mobile/src/Home/Home.js

@@ -1,10 +1,7 @@
 import React from "react"
 import {
-  StyleSheet,
   Text,
-  TextInput,
   SectionList,
-  Image,
   View,
   TouchableOpacity,
   TouchableHighlight,
@@ -31,12 +28,8 @@ import KeyboardSpacer from "react-native-keyboard-spacer"
 import hardhatPinImage from "./images/hardhat-pin.png"
 import clipboardPinImage from "./images/clipboard-pin.png"
 import questionPinImage from "./images/question-pin.png"
-import locationImage from "./images/location.png"
 import moment from "moment"
 
-const neverAskForLocationPermissionKeyName = "NeverAskForLocationPermission"
-const neverAskForCameraKeyName = "NeverAskForCameraPermission"
-
 export class Home extends React.Component {
   constructor(props) {
     super(props)
@@ -48,8 +41,8 @@ export class Home extends React.Component {
       showWorkItems: true,
       haveCameraPermission: false,
       haveLocationPermission: false,
-      currentPosition: null,
     }
+    this.currentPosition = null
     this.isMapReady = false
     this.goToRegionWhenReady = false
     this.region = null
@@ -97,6 +90,7 @@ export class Home extends React.Component {
         }
       )
     } else {
+      navigator.geolocation.requestAuthorization()
       this.state.haveLocationPermission = true
       this.state.haveCameraPermission = true
     }
@@ -176,8 +170,8 @@ export class Home extends React.Component {
   }
 
   handleWorkItemsListPress() {
-    if (this.state.currentPosition) {
+    if (this.currentPosition) {
-      const { coords } = this.state.currentPosition
+      const { coords } = this.currentPosition
 
       this.props.history.push(
         `/workItemList?latLng=${coords.latitude},${coords.longitude}`
@@ -210,13 +204,13 @@ export class Home extends React.Component {
   }
 
   handleGlassesPress() {
-    const { sections: workItems, currentPosition } = this.state
+    const { sections: workItems } = this.state
 
-    if (currentPosition) {
+    if (this.currentPosition) {
       const {
         latitude: latitude1,
         longitude: longitude1,
-      } = currentPosition.coords
+      } = this.currentPosition.coords
       let closestWorkItem = config.alwaysShowWorkItemInAR ? workItems[0] : null
       let shortestDistance = config.minDistanceToItem
 
@@ -248,10 +242,8 @@ export class Home extends React.Component {
   }
 
   handleMyLocationPress() {
-    const { currentPosition } = this.state
+    if (this.currentPosition && this.isMapReady) {
-
+      const { coords } = this.currentPosition
-    if (currentPosition && this.isMapReady) {
-      const { coords } = currentPosition
 
       this.mapView.animateToCoordinate({
         latitude: coords.latitude,
@@ -281,14 +273,12 @@ export class Home extends React.Component {
   }
 
   handlePositionUpdate(position) {
-    this.setState({ currentPosition: position })
+    this.currentPosition = position
   }
 
   getCoordinateDistance(coordinate) {
-    const { currentPosition } = this.state
+    if (this.currentPosition) {
-
+      const { coords } = this.currentPosition
-    if (currentPosition) {
-      const { coords } = currentPosition
       const { latitude, longitude } = coordinate
 
       return (
@@ -313,7 +303,6 @@ export class Home extends React.Component {
       waitModal,
       haveCameraPermission,
       haveLocationPermission,
-      currentPosition,
     } = this.state
 
     return (
@@ -340,7 +329,7 @@ export class Home extends React.Component {
             showWorkItems && { height: "40%" },
             !showWorkItems && { flexGrow: 1 },
           ]}
-          showsUserLocation={false}
+          showsUserLocation
           showsBuildings={false}
           showsTraffic={false}
           showsIndoors={false}
@@ -376,14 +365,6 @@ export class Home extends React.Component {
               </Callout>
             </Marker>
           ))}
-          {currentPosition && (
-            <Marker
-              key={sections.length}
-              coordinate={currentPosition.coords}
-              anchor={{ x: 0.5, y: 0.5 }}
-              image={locationImage}
-            />
-          )}
         </MapView>
         <View
           style={{

mobile/src/config.js

@@ -1,6 +1,6 @@
 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",
@@ -12,8 +12,8 @@ export const config = {
   homeRegionDelta: 0.005,
   geocodeDelayMilliseconds: 500,
 
-  //defaultUser: "john@lyon-smith.org",
+  defaultUser: "john@lyon-smith.org",
-  defaultUser: "",
+  //defaultUser: "",
 
   // This region is downtown Toronto
   initialRegion: {

mobile/src/ui/Geolocation.js

@@ -15,36 +15,35 @@ export class Geolocation extends Component {
 
   constructor(props) {
     super(props)
-    reactAutoBind(this)
+    this.watchId = -1
-
-    if (props.watch) {
-      this.intervalId = setInterval(this.updateLocation, config.geoSampleDelay)
-    } else {
-      this.intervalId = -1
-    }
   }
 
   componentDidMount() {
-    this.updateLocation()
-  }
-
-  componentWillUnmount() {
-    if (this.intervalId !== -1) {
-      clearInterval(this.intervalId)
-      this.intervalId = -1
-    }
-  }
-
-  updateLocation() {
     navigator.geolocation.getCurrentPosition(
       (position) => {
         this.props.onUpdate(position)
+
+        if (this.props.watch) {
+          ;(this.watchId = navigator.geolocation.watchPosition((position) =>
+            this.props.onUpdate(position)
+          )),
+            null,
+            { distanceFilter: 5, maximumAge: 0, enableHighAccuracy: true }
+        }
       },
       null,
       { distanceFilter: 5, maximumAge: 0, enableHighAccuracy: true }
     )
   }
 
+  componentWillUnmount() {
+    if (this.watchId !== -1) {
+      navigator.geolocation.clearWatch(this.watchId)
+      navigator.geolocation.stopObserving()
+      this.watchId = -1
+    }
+  }
+
   render() {
     return null
   }