Center new work item on user

mobile/src/Activity/Activity.js

@@ -30,6 +30,7 @@ import { api } from "../API"
 import { formatLatLng } from "../util"
 import moment from "moment"
 import "url-search-params-polyfill"
+import { config } from "../config"
 
 const styles = StyleSheet.create({
   container: {
@@ -91,6 +92,7 @@ export class Activity extends React.Component {
       messageModal: null,
       progressModal: null,
       uploadPercent: 0,
+      region: config.initialRegion,
     }
 
     const { search } = this.props.location

mobile/src/WorkItem/WorkItem.js

@@ -20,6 +20,7 @@ import {
   Header,
   BoundOptionStrip,
   BoundPhotoPanel,
+  Geolocation,
 } from "../ui"
 import { MessageModal, ProgressModal, WaitModal } from "../Modal"
 import autobind from "autobind-decorator"
@@ -98,6 +99,7 @@ export class WorkItem extends React.Component {
       messageModal: null,
       waitModal: null,
       progressModal: null,
+      region: config.initialRegion,
     }
 
     const { search } = this.props.location
@@ -287,6 +289,20 @@ export class WorkItem extends React.Component {
     }
   }
 
+  @autobind
+  handlePositionUpdate(position) {
+    const { coords } = position
+
+    this.setState({
+      region: {
+        latitude: coords.latitude,
+        longitude: coords.longitude,
+        latitudeDelta: 0.02,
+        longitudeDelta: 0.02,
+      },
+    })
+  }
+
   render() {
     const {
       binder,
@@ -294,6 +310,7 @@ export class WorkItem extends React.Component {
       waitModal,
       progressModal,
       uploadPercent,
+      region,
     } = this.state
 
     return (
@@ -344,7 +361,7 @@ export class WorkItem extends React.Component {
                 showsBuildings={false}
                 showsTraffic={false}
                 showsIndoors={false}
-                initialRegion={config.initialRegion}
+                region={region}
                 onRegionChange={this.handleRegionChange}
                 onMapReady={this.handleOnMapReady}
               />
@@ -393,6 +410,7 @@ export class WorkItem extends React.Component {
             )}
           {isIphoneX ? <View style={{ height: 30, width: "100%" }} /> : null}
         </ScrollView>
+        <Geolocation onUpdate={this.handlePositionUpdate} watch={false} />
         <ProgressModal
           open={!!progressModal}
           message={progressModal ? progressModal.message : ""}

mobile/src/ui/Geolocation.js

@@ -6,6 +6,11 @@ import autobind from "autobind-decorator"
 export class Geolocation extends Component {
   static propTypes = {
     onUpdate: PropTypes.func.isRequired,
+    watch: PropTypes.bool,
+  }
+
+  static defaultProps = {
+    watch: true,
   }
 
   constructor(props) {
@@ -16,9 +21,12 @@ export class Geolocation extends Component {
   componentDidMount() {
     navigator.geolocation.getCurrentPosition((position) => {
       this.props.onUpdate(position)
+
+      if (this.props.watch) {
         this.watchId = navigator.geolocation.watchPosition((position) =>
           this.props.onUpdate(position)
         )
+      }
     })
   }