diff --git a/mobile/src/Home/Home.js b/mobile/src/Home/Home.js index a376ffe..7ec165c 100644 --- a/mobile/src/Home/Home.js +++ b/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) => { - const { coords } = positionInfo + if (this.currentPosition) { + 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) => { - const { latitude: latitude1, longitude: longitude1 } = positionInfo.coords + if (this.currentPosition) { + 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) => { - const coords = positionInfo.coords + if (this.currentPosition) { + 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 - ? workItemDistance.toString() - : "?") + - " km)"} + this.getCoordinateDistance(workItem.coordinate) + + ")"} {dotify(workItem.address)} @@ -466,6 +476,9 @@ export class Home extends React.Component { /> + {haveLocationPermission && ( + + )} { + 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 + } +} diff --git a/mobile/src/ui/index.js b/mobile/src/ui/index.js index 8e8c0dd..3e241df 100644 --- a/mobile/src/ui/index.js +++ b/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"