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"