Correct fix for background location services

mobile/.babelrc

@@ -6,7 +6,6 @@
     "development": {
       "plugins": [
         "transform-react-jsx-source",
-        "transform-decorators-legacy"
       ]
     }
   }

mobile/android/app/build.gradle

@@ -101,8 +101,8 @@ android {
         applicationId "com.deightonar"
         minSdkVersion 24
         targetSdkVersion 27
-        versionCode 5
-        versionName "1.0.2"
+        versionCode 8
+        versionName "1.1.2"
         ndk {
             abiFilters "armeabi-v7a", "x86"
         }

mobile/android/app/src/main/AndroidManifest.xml

@@ -1,7 +1,7 @@
 <manifest xmlns:android="http://schemas.android.com/apk/res/android"
     package="com.deightonar"
-    android:versionCode="5"
-    android:versionName="1.0.2">
+    android:versionCode="8"
+    android:versionName="1.1.2">
 
     <uses-permission android:name="android.permission.INTERNET" />
     <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>

mobile/ios/DeightonAR.xcodeproj/project.pbxproj

@@ -140,6 +140,11 @@
 				TargetAttributes = {
 					13B07F861A680F5B00A75B9A = {
 						DevelopmentTeam = 523GZPCZ3X;
+						SystemCapabilities = {
+							com.apple.BackgroundModes = {
+								enabled = 1;
+							};
+						};
 					};
 				};
 			};

mobile/ios/DeightonAR/Info.plist

@@ -2,8 +2,8 @@
 <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
 <plist version="1.0">
 <dict>
-	<key>NSMicrophoneUsageDescription</key>
-	<string>$(PRODUCT_NAME) camera use</string>
+	<key>NSLocationAlwaysUsageDescription</key>
+	<string>$(PRODUCT_NAME) background location use</string>
 	<key>CFBundleDevelopmentRegion</key>
 	<string>en</string>
 	<key>CFBundleDisplayName</key>
@@ -19,11 +19,11 @@
 	<key>CFBundlePackageType</key>
 	<string>APPL</string>
 	<key>CFBundleShortVersionString</key>
-	<string>1.0.2</string>
+	<string>1.1.2</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>20180518.0</string>
+	<string>20180529.0</string>
 	<key>LSRequiresIPhoneOS</key>
 	<true/>
 	<key>NSAppTransportSecurity</key>
@@ -33,8 +33,16 @@
 	</dict>
 	<key>NSCameraUsageDescription</key>
 	<string>$(PRODUCT_NAME) camera use</string>
+	<key>NSLocationWhenInUseUsageDescription</key>
+	<string>$(PRODUCT_NAME) location use</string>
+	<key>NSMicrophoneUsageDescription</key>
+	<string>$(PRODUCT_NAME) camera use</string>
 	<key>NSPhotoLibraryUsageDescription</key>
 	<string>$(PRODUCT_NAME) photo use</string>
+	<key>UIBackgroundModes</key>
+	<array>
+		<string>location</string>
+	</array>
 	<key>UILaunchStoryboardName</key>
 	<string>LaunchScreen</string>
 	<key>UIRequiredDeviceCapabilities</key>
@@ -46,8 +54,6 @@
 		<string>UIInterfaceOrientationPortrait</string>
 		<string>UIInterfaceOrientationPortraitUpsideDown</string>
 	</array>
-	<key>NSLocationAlwaysAndWhenInUseUsageDescription</key>
-	<string>$(PRODUCT_NAME) location use</string>
 	<key>UIViewControllerBasedStatusBarAppearance</key>
 	<false/>
 </dict>

mobile/package.json

@@ -3,7 +3,6 @@
   "version": "0.1.0",
   "private": true,
   "devDependencies": {
-    "babel-plugin-transform-decorators-legacy": "^1.3.4",
     "babel-preset-react-native-stage-0": "^1.0.1",
     "jest-react-native": "^18.0.0",
     "react-test-renderer": "16.2.0"
@@ -18,7 +17,7 @@
     "preset": "react-native"
   },
   "dependencies": {
-    "autobind-decorator": "^2.1.0",
+    "auto-bind2": "^1.0.3",
     "eventemitter3": "^3.1.0",
     "moment": "^2.22.1",
     "react": "^16.3.2",

mobile/src/API.js

@@ -1,9 +1,9 @@
 import EventEmitter from "eventemitter3"
 import io from "socket.io-client"
 import { AsyncStorage } from "react-native"
-import autobind from "autobind-decorator"
 import { config } from "./config"
 import RNFS from "react-native-fs"
+import { autoBind } from "auto-bind2"
 
 const authTokenKeyName = "AuthToken"
 const backendKeyName = "Backend"
@@ -33,7 +33,6 @@ class APIError extends Error {
   }
 }
 
-@autobind
 class API extends EventEmitter {
   static urls = {
     normal: "https://dar.kss.us.com/api",
@@ -43,6 +42,7 @@ class API extends EventEmitter {
 
   constructor() {
     super()
+    autoBind(this)
     this.user = { pending: true }
     this._apiURL = null
 

mobile/src/ARViewer/ARViewer.js

@@ -13,16 +13,16 @@ import {
   ViroQuad,
   ViroConstants,
 } from "react-viro"
-import autobind from "autobind-decorator"
 import backImage from "./images/back.png"
 import { config } from "../config"
 import "url-search-params-polyfill"
+import { reactAutoBind } from "auto-bind2"
 
 const shapes = {
   order: {
     source: require("./models/hardhat_obj.obj"),
     resources: [require("./models/hardhat.mtl")],
-    scale: [0.5, 0.5, 0.5],
+    scale: [0.3, 0.3, 0.3],
   },
   complaint: {
     source: require("./models/question_obj.obj"),
@@ -47,6 +47,7 @@ const distance = (vectorA, vectorB) => {
 class WorkItemSceneAR extends React.Component {
   constructor(props) {
     super(props)
+    reactAutoBind(this)
 
     this.state = {
       position: [0, 0, 0],
@@ -57,7 +58,6 @@ class WorkItemSceneAR extends React.Component {
     }
   }
 
-  @autobind
   handleLoadEnd() {
     this.arScene.getCameraOrientationAsync().then((orientation) => {
       return this.arScene
@@ -65,8 +65,11 @@ class WorkItemSceneAR extends React.Component {
         .then((results) => {
           const { forward, position } = orientation
           // Default position is just one meter in front of the user
-          const defaultPosition =
-            [forward[0] * 1.0, forward[1] * 1.0, forward[2]] * 1.0
+          const defaultPosition = [
+            forward[0] * 1.0,
+            forward[1] * 1.0,
+            forward[2] * 1.0,
+          ]
           let hitResultPosition = null
 
           // Filter the hit test results based on the position.
@@ -102,6 +105,8 @@ class WorkItemSceneAR extends React.Component {
             position: hitResultPosition || defaultPosition,
           })
 
+          console.log(hitResultPosition || defaultPosition)
+
           setTimeout(() => {
             this.updateInitialRotation()
           }, 200)
@@ -110,7 +115,6 @@ class WorkItemSceneAR extends React.Component {
     })
   }
 
-  @autobind
   updateInitialRotation() {
     this.arNode.getTransformAsync().then((retDict) => {
       let rotation = retDict.rotation
@@ -131,7 +135,6 @@ class WorkItemSceneAR extends React.Component {
     })
   }
 
-  @autobind
   handleTrackingUpdated(state, reason) {
     if (
       !this.state.trackingInitialized &&
@@ -141,12 +144,10 @@ class WorkItemSceneAR extends React.Component {
     }
   }
 
-  @autobind
   handleAnchorFound() {
     this.setState({ haveAnchor: true })
   }
 
-  @autobind
   handleClick(position, source) {
     const { workItemId } = this.props
 
@@ -182,7 +183,7 @@ class WorkItemSceneAR extends React.Component {
             innerAngle={5}
             outerAngle={20}
             direction={[0, -1, 0]}
-            position={[0, 10, 0]}
+            position={[0, 5, 0]}
             color="#ffffff"
             castsShadow={true}
             shadowNearZ={0.1}
@@ -193,7 +194,7 @@ class WorkItemSceneAR extends React.Component {
             trackingInitialized &&
             haveAnchor && (
               <Viro3DObject
-                position={[0, 0, -1]}
+                position={[0, 0, 0]}
                 source={shape.source}
                 resources={shape.resources}
                 scale={shape.scale}
@@ -219,6 +220,7 @@ class WorkItemSceneAR extends React.Component {
 export class ARViewer extends React.Component {
   constructor(props) {
     super(props)
+    reactAutoBind(this)
 
     const { search } = this.props.location
 
@@ -230,7 +232,6 @@ export class ARViewer extends React.Component {
     }
   }
 
-  @autobind
   handleBackPress() {
     this.props.history.replace("/")
   }

mobile/src/Activity/Activity.js

@@ -23,7 +23,7 @@ import {
   FormStaticInput,
 } from "../ui"
 import { MessageModal, WaitModal, ProgressModal } from "../Modal"
-import autobind from "autobind-decorator"
+import { reactAutoBind } from "auto-bind2"
 import KeyboardSpacer from "react-native-keyboard-spacer"
 import { isIphoneX } from "react-native-iphone-x-helper"
 import { api } from "../API"
@@ -86,14 +86,17 @@ export class Activity extends React.Component {
 
   constructor(props) {
     super(props)
+    reactAutoBind(this)
     this.state = {
       binder: new FormBinder({}, Activity.bindings),
       waitModal: null,
       messageModal: null,
       progressModal: null,
       uploadPercent: 0,
-      region: config.initialRegion,
     }
+    this.region = null
+    this.isMapReady = false
+    this.goToRegionWhenReady = false
 
     const { search } = this.props.location
     const params = search ? new URLSearchParams(search) : { get: () => null }
@@ -116,15 +119,22 @@ export class Activity extends React.Component {
                 },
                 Activity.bindings
               ),
-              region: {
-                latitude: lat,
-                longitude: lng,
-                latitudeDelta: 0.01,
-                longitudeDelta: 0.01,
-              },
               location: formatLatLng(lat, lng),
               dateTime: moment().format(),
             })
+
+            this.region = {
+              latitude: lat,
+              longitude: lng,
+              latitudeDelta: config.activityRegionDelta,
+              longitudeDelta: config.activityRegionDelta,
+            }
+          }
+
+          if (this.isMapReady) {
+            this.mapView.animateToRegion(this.region)
+          } else {
+            this.goToRegionWhenReady = true
           }
         })
         .catch((err) => {
@@ -170,7 +180,15 @@ export class Activity extends React.Component {
     }
   }
 
-  @autobind
+  handleOnMapReady() {
+    if (this.goToRegionWhenReady) {
+      this.mapView.animateToRegion(this.region)
+      this.goToRegionWhenReady = false
+    }
+
+    this.isMapReady = true
+  }
+
   handleMessageDismiss() {
     const back = this.state.messageModal.back
     this.setState({ messageModal: null })
@@ -179,7 +197,6 @@ export class Activity extends React.Component {
     }
   }
 
-  @autobind
   handleBackPress() {
     const { history } = this.props
 
@@ -190,7 +207,6 @@ export class Activity extends React.Component {
     }
   }
 
-  @autobind
   handleDonePress() {
     const { binder } = this.state
     let obj = binder.getModifiedBindingValues()
@@ -228,7 +244,6 @@ export class Activity extends React.Component {
     }
   }
 
-  @autobind
   handleUploadStarted() {
     this.setState({
       progressModal: { message: "Uploading Photo..." },
@@ -236,7 +251,6 @@ export class Activity extends React.Component {
     })
   }
 
-  @autobind
   handleUploadProgress(uploadData) {
     if (this.state.progressModal) {
       this.setState({
@@ -250,12 +264,10 @@ export class Activity extends React.Component {
     }
   }
 
-  @autobind
   handleUploadEnded(successful, uploadData) {
     this.setState({ progressModal: null })
   }
 
-  @autobind
   handleUploadCanceled() {
     this.setState({ progressModal: null })
   }
@@ -266,7 +278,6 @@ export class Activity extends React.Component {
       messageModal,
       progressModal,
       waitModal,
-      region,
       dateTime,
       location,
       uploadPercent,
@@ -306,6 +317,7 @@ export class Activity extends React.Component {
             <FormStaticInput label="Location:" value={location} />
             <View style={{ flexDirection: "column", justifyContent: "center" }}>
               <MapView
+                ref={(ref) => (this.mapView = ref)}
                 style={{
                   flexDirection: "column",
                   justifyContent: "center",
@@ -324,7 +336,8 @@ export class Activity extends React.Component {
                 showsScale={false}
                 showsUserLocation
                 cacheEnabled
-                region={region}
+                initialRegion={config.initialRegion}
+                onMapReady={this.handleOnMapReady}
               />
               <Icon
                 name="target"

mobile/src/App.js

@@ -56,7 +56,11 @@ export default class App extends React.Component {
             <Route exact path="/login" component={Login} />
             <Route exact path="/logout" component={Logout} />
             <ProtectedRoute exact path="/home" component={Home} />
-            <ProtectedRoute exact path="/arviewer" component={ARViewer} />
+            <ProtectedRoute
+              exact
+              path="/arviewer"
+              render={(props) => <ARViewer {...props} />}
+            />
             <ProtectedRoute exact path="/activity" component={Activity} />
             <ProtectedRoute exact admin path="/workItem" component={WorkItem} />
             <ProtectedRoute

mobile/src/Auth/Login.js

@@ -17,7 +17,7 @@ import { api } from "../API"
 import { BoundSwitch, BoundInput, BoundButton } from "../ui"
 import KeyboardSpacer from "react-native-keyboard-spacer"
 import { versionInfo } from "../version"
-import autobind from "autobind-decorator"
+import { reactAutoBind } from "auto-bind2"
 import { isIphoneX } from "react-native-iphone-x-helper"
 import { config } from "../config"
 
@@ -74,6 +74,7 @@ export class Login extends React.Component {
 
   constructor(props) {
     super(props)
+    reactAutoBind(this)
     this.state = {
       binder: new FormBinder(
         { email: config.defaultUser, rememberMe: true },
@@ -92,7 +93,6 @@ export class Login extends React.Component {
     }
   }
 
-  @autobind
   handleLogin() {
     let obj = this.state.binder.getModifiedBindingValues()
     let { history } = this.props
@@ -117,18 +117,15 @@ export class Login extends React.Component {
     }
   }
 
-  @autobind
   handleMessageDismiss() {
     this.setState({ messageModal: null })
   }
 
-  @autobind
   handleApiDismiss(backendName) {
     this.setState({ apiModal: null })
     api.backend = backendName
   }
 
-  @autobind
   handleApiPress() {
     this.hiddenTouchCount += 1
 

mobile/src/Auth/ProtectedRoute.js

@@ -1,28 +1,35 @@
-import React from 'react'
-import { Route, Redirect } from 'react-router-native'
-import { PropTypes } from 'prop-types'
-import { api } from '../API'
-import autobind from 'autobind-decorator'
+import React from "react"
+import { Route, Redirect } from "react-router-native"
+import { PropTypes } from "prop-types"
+import { api } from "../API"
+import { reactAutoBind, autoBind } from "auto-bind2"
 
 export class ProtectedRoute extends React.Component {
   static propTypes = {
-    location: PropTypes.shape({ pathname: PropTypes.string, search: PropTypes.string }),
+    location: PropTypes.shape({
+      pathname: PropTypes.string,
+      search: PropTypes.string,
+    }),
     admin: PropTypes.bool,
   }
 
-  @autobind
+  constructor(props) {
+    super(props)
+    reactAutoBind(this)
+  }
+
   updateComponent() {
     this.forceUpdate()
   }
 
   componentDidMount() {
-    api.addListener('login', this.updateComponent)
-    api.addListener('logout', this.updateComponent)
+    api.addListener("login", this.updateComponent)
+    api.addListener("logout", this.updateComponent)
   }
 
   componentWillUnmount() {
-    api.removeListener('login', this.updateComponent)
-    api.removeListener('logout', this.updateComponent)
+    api.removeListener("login", this.updateComponent)
+    api.removeListener("logout", this.updateComponent)
   }
 
   render(props) {
@@ -32,7 +39,7 @@ export class ProtectedRoute extends React.Component {
       return null
     } else {
       if (!user._id || (this.props.admin && !user.administrator)) {
-        return <Redirect to='/login' />
+        return <Redirect to="/login" />
       } else {
         return <Route {...this.props} />
       }

mobile/src/Home/Home.js

@@ -15,7 +15,7 @@ import MapView, { Marker, Callout } from "react-native-maps"
 import { Icon, Header, Geolocation } from "../ui"
 import { MessageModal } from "../Modal"
 import { api } from "../API"
-import autobind from "autobind-decorator"
+import { reactAutoBind } from "auto-bind2"
 import { ifIphoneX } from "react-native-iphone-x-helper"
 import {
   geoDistance,
@@ -39,14 +39,17 @@ const neverAskForCameraKeyName = "NeverAskForCameraPermission"
 export class Home extends React.Component {
   constructor(props) {
     super(props)
+    reactAutoBind(this)
     this.state = {
       sections: [],
       showWorkItems: true,
-      region: config.initialRegion,
       haveCameraPermission: false,
       haveLocationPermission: false,
       currentPosition: null,
     }
+    this.isMapReady = false
+    this.goToRegionWhenReady = false
+    this.region = null
 
     if (Platform.OS !== "ios") {
       ensurePermissions(
@@ -111,12 +114,19 @@ export class Home extends React.Component {
         })
         this.setState({
           sections: list.items,
-          region:
+        })
+
+        this.region =
           regionContainingPoints(
             list.items.map((item) => item.coordinate),
-              0.02
-            ) || this.state.region,
-        })
+            config.homeRegionInset
+          ) || config.initialRegion
+
+        if (this.isMapReady) {
+          this.mapView.animateToRegion(this.region)
+        } else {
+          this.goToRegionWhenReady = true
+        }
       })
       .catch((err) => {
         this.setState({
@@ -129,12 +139,19 @@ export class Home extends React.Component {
       })
   }
 
-  @autobind
   handleMessageDismiss() {
     this.setState({ messageModal: null })
   }
 
-  @autobind
+  handleOnMapReady() {
+    if (this.goToRegionWhenReady) {
+      this.mapView.animateToRegion(this.region)
+      this.goToRegionWhenReady = false
+    }
+
+    this.isMapReady = true
+  }
+
   handleMarkerPress(e, sectionIndex) {
     if (this.sectionList) {
       this.sectionList.scrollToLocation({
@@ -145,7 +162,6 @@ export class Home extends React.Component {
     }
   }
 
-  @autobind
   handleWorkItemsListPress() {
     if (this.currentPosition) {
       const { coords } = this.currentPosition
@@ -156,29 +172,30 @@ export class Home extends React.Component {
     }
   }
 
-  @autobind
   handleItemSelect(activity) {
     this.props.history.push(`/activity?id=${activity._id}`)
   }
 
-  @autobind
   handleSectionSelect(workItem) {
-    const { latitude, longitude } = workItem.coordinate
-    const region = {
-      latitude,
-      longitude,
-      latitudeDelta: 0.01,
-      longitudeDelta: 0.01,
-    }
-    this.setState({ region })
+    if (!this.isMapReady) {
+      return
+    }
+
+    const { latitude, longitude } = workItem.coordinate
+
+    this.region = {
+      latitude,
+      longitude,
+      latitudeDelta: config.homeRegionDelta,
+      longitudeDelta: config.homeRegionDelta,
+    }
+    this.mapView.animateToRegion(this.region)
   }
 
-  @autobind
   handleLogoutPress() {
     this.props.history.replace("/logout")
   }
 
-  @autobind
   handleGlassesPress() {
     const { sections: workItems } = this.state
 
@@ -217,24 +234,21 @@ export class Home extends React.Component {
     }
   }
 
-  @autobind
   handleMyLocationPress() {
-    if (this.currentPosition) {
+    if (this.currentPosition && this.isMapReady) {
       const coords = this.currentPosition.coords
 
-      this.map.animateToCoordinate({
+      this.mapView.animateToCoordinate({
         latitude: coords.latitude,
         longitude: coords.longitude,
       })
     }
   }
 
-  @autobind
   handleToggleWorkItemsList() {
     this.setState({ showWorkItems: !this.state.showWorkItems })
   }
 
-  @autobind
   handleCalloutPress(workItem) {
     if (api.loggedInUser.administrator) {
       this.props.history.push(
@@ -245,12 +259,10 @@ export class Home extends React.Component {
     }
   }
 
-  @autobind
   handlePositionUpdate(position) {
     this.currentPosition = position
   }
 
-  @autobind
   getCoordinateDistance(coordinate) {
     if (this.currentPosition) {
       const coords = this.currentPosition.coords
@@ -274,7 +286,6 @@ export class Home extends React.Component {
     const {
       sections,
       showWorkItems,
-      region,
       messageModal,
       haveCameraPermission,
       haveLocationPermission,
@@ -295,7 +306,7 @@ export class Home extends React.Component {
         />
         <MapView
           ref={(ref) => {
-            this.map = ref
+            this.mapView = ref
           }}
           style={[
             {
@@ -310,7 +321,8 @@ export class Home extends React.Component {
           showsIndoors={false}
           zoomControlEnabled={false}
           showsMyLocationButton={false}
-          region={region}>
+          initialRegion={config.initialRegion}
+          onMapReady={this.handleOnMapReady}>
           {sections.map((workItem, index) => (
             <Marker
               key={index}

mobile/src/Modal/ApiModal.js

@@ -3,7 +3,7 @@ import Modal from "react-native-modal"
 import PropTypes from "prop-types"
 import { View, Text, TouchableOpacity } from "react-native"
 import { Icon, OptionStrip } from "../ui"
-import autobind from "autobind-decorator"
+import { reactAutoBind } from "auto-bind2"
 import { api } from "../API"
 
 export class ApiModal extends Component {
@@ -14,12 +14,12 @@ export class ApiModal extends Component {
 
   constructor(props) {
     super(props)
+    reactAutoBind(this)
     this.state = {
       value: api.backend,
     }
   }
 
-  @autobind
   handleButtonPress() {
     const { onDismiss } = this.props
 
@@ -28,7 +28,6 @@ export class ApiModal extends Component {
     }
   }
 
-  @autobind
   handleValueChanged(newValue) {
     this.setState({ value: newValue })
   }

mobile/src/Modal/ImageViewerModal.js

@@ -3,7 +3,7 @@ import Modal from "react-native-modal"
 import PropTypes from "prop-types"
 import { View, Image, TouchableOpacity } from "react-native"
 import { Icon } from "../ui"
-import autobind from "autobind-decorator"
+import { reactAutoBind } from "auto-bind2"
 
 export class ImageViewerModal extends Component {
   static propTypes = {
@@ -12,7 +12,11 @@ export class ImageViewerModal extends Component {
     onDismiss: PropTypes.func,
   }
 
-  @autobind
+  constructor(props) {
+    super(props)
+    reactAutoBind(this)
+  }
+
   handleButtonPress() {
     const { onDismiss } = this.props
 

mobile/src/Modal/MessageModal.js

@@ -3,7 +3,7 @@ import Modal from "react-native-modal"
 import PropTypes from "prop-types"
 import { View, Text, TouchableOpacity } from "react-native"
 import { Icon } from "../ui"
-import autobind from "autobind-decorator"
+import { reactAutoBind } from "auto-bind2"
 
 export class MessageModal extends Component {
   static propTypes = {
@@ -14,7 +14,11 @@ export class MessageModal extends Component {
     onDismiss: PropTypes.func,
   }
 
-  @autobind
+  constructor(props) {
+    super(props)
+    reactAutoBind(this)
+  }
+
   handleButtonPress() {
     if (this.props.onDismiss) {
       this.props.onDismiss()

mobile/src/Modal/ProgressModal.js

@@ -3,7 +3,6 @@ import Modal from "react-native-modal"
 import PropTypes from "prop-types"
 import { View, Text, ActivityIndicator, TouchableOpacity } from "react-native"
 import { ProgressBar } from "../ui"
-import autobind from "autobind-decorator"
 
 export class ProgressModal extends Component {
   static propTypes = {

mobile/src/WorkItem/WorkItem.js

@@ -23,7 +23,7 @@ import {
   Geolocation,
 } from "../ui"
 import { MessageModal, ProgressModal, WaitModal } from "../Modal"
-import autobind from "autobind-decorator"
+import { reactAutoBind } from "auto-bind2"
 import { ifIphoneX, isIphoneX } from "react-native-iphone-x-helper"
 import KeyboardSpacer from "react-native-keyboard-spacer"
 import { api } from "../API"
@@ -93,14 +93,17 @@ export class WorkItem extends React.Component {
 
   constructor(props) {
     super(props)
+    reactAutoBind(this)
 
     this.state = {
       binder: new FormBinder({}, WorkItem.bindings),
       messageModal: null,
       waitModal: null,
       progressModal: null,
-      region: config.initialRegion,
     }
+    this.region = null
+    this.isMapReady = false
+    this.goToRegionWhenReady = false
 
     const { search } = this.props.location
     const params = search ? new URLSearchParams(search) : { get: () => null }
@@ -112,17 +115,18 @@ export class WorkItem extends React.Component {
         .then((workItem) => {
           if (workItem) {
             const [longitude, latitude] = workItem.location.coordinates
-            const region = {
+
+            this.region = {
               latitude,
               longitude,
-              latitudeDelta: 0.01,
-              longitudeDelta: 0.01,
+              latitudeDelta: config.workItemRegionDelta,
+              longitudeDelta: config.workItemRegionDelta,
             }
 
-            if (this.mapView) {
-              this.mapView.animateToRegion(region)
+            if (this.isMapReady) {
+              this.mapView.animateToRegion(this.region)
             } else {
-              this.goToRegion = region
+              this.goToRegionWhenReady = true
             }
 
             this.setState({
@@ -149,7 +153,6 @@ export class WorkItem extends React.Component {
     }
   }
 
-  @autobind
   handleBackPress() {
     const { history } = this.props
 
@@ -160,7 +163,6 @@ export class WorkItem extends React.Component {
     }
   }
 
-  @autobind
   handleDonePress() {
     const { binder } = this.state
     let obj = binder.getModifiedBindingValues()
@@ -198,7 +200,6 @@ export class WorkItem extends React.Component {
     }
   }
 
-  @autobind
   handleMessageDismiss() {
     const back = this.state.messageModal.back
     this.setState({ messageModal: null })
@@ -207,10 +208,11 @@ export class WorkItem extends React.Component {
     }
   }
 
-  @autobind
   handleRegionChange(region) {
     const { latitude, longitude } = region
 
+    this.region = region
+
     if (this.latLngInput) {
       this.latLngInput.handleChangeText(formatLatLng(latitude, longitude))
     }
@@ -226,15 +228,15 @@ export class WorkItem extends React.Component {
     )
   }
 
-  @autobind
   handleOnMapReady() {
-    if (this.goToRegion && this.mapView) {
-      this.mapView.animateToRegion(this.goToRegion)
-      this.goToRegion = null
-    }
+    if (this.goToRegionWhenReady) {
+      this.mapView.animateToRegion(this.region)
+      this.goToRegionWhenReady = false
+    }
+
+    this.isMapReady = true
   }
 
-  @autobind
   handleStartAddressLookup(latLng) {
     api
       .getAddress(latLng)
@@ -250,7 +252,6 @@ export class WorkItem extends React.Component {
       })
   }
 
-  @autobind
   handleUploadStarted() {
     this.setState({
       progressModal: { message: "Uploading Photo..." },
@@ -258,7 +259,6 @@ export class WorkItem extends React.Component {
     })
   }
 
-  @autobind
   handleUploadProgress(uploadData) {
     if (this.state.progressModal) {
       this.setState({
@@ -272,35 +272,36 @@ export class WorkItem extends React.Component {
     }
   }
 
-  @autobind
   handleUploadEnded(successful, uploadData) {
     this.setState({ progressModal: null })
+    this.mapView.animateToRegion(this.region)
   }
 
-  @autobind
   handleUploadCanceled() {
     this.setState({ progressModal: null })
   }
 
-  @autobind
   handleAddActivity() {
     if (this.props.history) {
       this.props.history.push(`/activity?workItemId=${this.state.binder._id}`)
     }
   }
 
-  @autobind
   handlePositionUpdate(position) {
     const { coords } = position
 
-    this.setState({
-      region: {
+    this.region = {
       latitude: coords.latitude,
       longitude: coords.longitude,
-        latitudeDelta: 0.02,
-        longitudeDelta: 0.02,
-      },
-    })
+      latitudeDelta: config.workItemRegionDelta,
+      longitudeDelta: config.workItemRegionDelta,
+    }
+
+    if (this.isMapReady) {
+      this.mapView.animateToRegion(this.region)
+    } else {
+      this.goToRegionWhenReady = true
+    }
   }
 
   render() {
@@ -310,7 +311,6 @@ export class WorkItem extends React.Component {
       waitModal,
       progressModal,
       uploadPercent,
-      region,
     } = this.state
 
     return (
@@ -358,10 +358,11 @@ export class WorkItem extends React.Component {
                 rotateEnabled={false}
                 pitchEnabled={false}
                 showsUserLocation
+                showsMyLocationButton
                 showsBuildings={false}
                 showsTraffic={false}
                 showsIndoors={false}
-                region={region}
+                initialRegion={config.initialRegion}
                 onRegionChange={this.handleRegionChange}
                 onMapReady={this.handleOnMapReady}
               />

mobile/src/WorkItem/WorkItemList.js

@@ -10,7 +10,7 @@ import {
 } from "react-native"
 import { Icon, Header } from "../ui"
 import { MessageModal } from "../Modal"
-import autobind from "autobind-decorator"
+import { reactAutoBind } from "auto-bind2"
 import { SwipeListView } from "react-native-swipe-list-view"
 import { api } from "../API"
 import {
@@ -36,6 +36,7 @@ const styles = StyleSheet.create({
 export class WorkItemList extends React.Component {
   constructor(props) {
     super(props)
+    reactAutoBind(this)
     this.state = {
       messageModal: null,
     }
@@ -74,12 +75,10 @@ export class WorkItemList extends React.Component {
       })
   }
 
-  @autobind
   handleItemSelect(item, ref) {
     this.props.history.push(`/workItem?id=${item._id}`)
   }
 
-  @autobind
   handleItemDelete(item, ref) {
     api
       .deleteWorkItem(item._id)
@@ -110,17 +109,14 @@ export class WorkItemList extends React.Component {
       })
   }
 
-  @autobind
   handleMessageDismiss() {
     this.setState({ messageModal: null })
   }
 
-  @autobind
   handleDonePress() {
     this.props.history.push("/workItem")
   }
 
-  @autobind
   handleBackPress() {
     const { history } = this.props
 

mobile/src/config.js

@@ -9,9 +9,15 @@ export const config = {
   googleGeocodeURL: "https://maps.googleapis.com/maps/api/geocode/json",
   refererURL: "https://dar.kss.us.com",
   minDistanceToItem: 20,
+  workItemRegionDelta: 0.005,
+  activityRegionDelta: 0.005,
+  homeRegionInset: 0.02,
+  homeRegionDelta: 0.005,
   geocodeDelayMilliseconds: 500,
+
   // defaultUser: "john@lyon-smith.org",
   defaultUser: "",
+
   // This region is downtown Toronto
   initialRegion: {
     latitude: 43.653908,
@@ -19,6 +25,7 @@ export const config = {
     latitudeDelta: 0.0922,
     longitudeDelta: 0.0421,
   },
+
   // This region is Bainbridge Island
   // initialRegion: {
   //   latitude: 47.629536,
@@ -26,5 +33,6 @@ export const config = {
   //   latitudeDelta: 0.0922,
   //   longitudeDelta: 0.0421,
   // },
+
   // alwaysShowWorkItemInAR: true,
 }

mobile/src/ui/BoundButton.js

@@ -1,7 +1,7 @@
 import React from "react"
 import PropTypes from "prop-types"
 import { View, Text, TouchableHighlight } from "react-native"
-import autobind from "autobind-decorator"
+import { reactAutoBind } from "auto-bind2"
 
 export class BoundButton extends React.Component {
   static propTypes = {
@@ -14,6 +14,7 @@ export class BoundButton extends React.Component {
 
   constructor(props) {
     super(props)
+    reactAutoBind(this)
 
     const { name, binder } = this.props
 
@@ -21,7 +22,6 @@ export class BoundButton extends React.Component {
     this.state = binder.getBindingState(name)
   }
 
-  @autobind
   updateValue(e) {
     this.setState(e.state)
   }

mobile/src/ui/BoundHeader.js

@@ -1,7 +1,7 @@
 import React from "react"
 import PropTypes from "prop-types"
 import { Header } from "."
-import autobind from "autobind-decorator"
+import { reactAutoBind } from "auto-bind2"
 
 const headerButtonShape = {
   icon: PropTypes.string.isRequired,
@@ -19,6 +19,7 @@ export class BoundHeader extends React.Component {
 
   constructor(props) {
     super(props)
+    reactAutoBind(this)
 
     const { name, binder } = this.props
 
@@ -26,7 +27,6 @@ export class BoundHeader extends React.Component {
     this.state = binder.getBindingState(name)
   }
 
-  @autobind
   updateValue(e) {
     this.setState(e.state)
   }

mobile/src/ui/BoundInput.js

@@ -1,7 +1,7 @@
 import React from "react"
 import PropTypes from "prop-types"
 import { TextInput, Text, View, Platform } from "react-native"
-import autobind from "autobind-decorator"
+import { reactAutoBind } from "auto-bind2"
 
 export class BoundInput extends React.Component {
   static propTypes = {
@@ -20,11 +20,11 @@ export class BoundInput extends React.Component {
 
   constructor(props) {
     super(props)
+    reactAutoBind(this)
 
     const { name, binder } = this.props
 
     this.state = binder.getBindingState(name)
-    this.handleChangeText = this.handleChangeText.bind(this)
   }
 
   componentWillReceiveProps(nextProps) {
@@ -33,7 +33,6 @@ export class BoundInput extends React.Component {
     }
   }
 
-  // @autobind : There seems to be a bug with using this here, so we just do it the old way
   handleChangeText(newText) {
     const { binder, name } = this.props
 

mobile/src/ui/BoundOptionStrip.js

@@ -2,7 +2,7 @@ import React from "react"
 import PropTypes from "prop-types"
 import { View, Text } from "react-native"
 import { OptionStrip } from "."
-import autobind from "autobind-decorator"
+import { reactAutoBind } from "auto-bind2"
 
 export class BoundOptionStrip extends React.Component {
   static propTypes = {
@@ -17,10 +17,10 @@ export class BoundOptionStrip extends React.Component {
 
   constructor(props) {
     super(props)
+    reactAutoBind(this)
     this.state = props.binder.getBindingState(props.name)
   }
 
-  @autobind
   handleValueChanged(newValue) {
     this.setState(
       this.props.binder.updateBindingValue(this.props.name, newValue)

mobile/src/ui/BoundPhotoPanel.js

@@ -12,7 +12,7 @@ import {
 import { Icon } from "."
 import ImagePicker from "react-native-image-picker"
 import ImageResizer from "react-native-image-resizer"
-import autobind from "autobind-decorator"
+import { reactAutoBind } from "auto-bind2"
 import { api } from "../API"
 
 const getScreenPortraitDimensions = () => {
@@ -35,10 +35,8 @@ export class BoundPhotoPanel extends Component {
 
   constructor(props) {
     super(props)
-
-    const { name, binder } = this.props
-
-    this.state = binder.getBindingState(name)
+    reactAutoBind(this)
+    this.state = this.props.binder.getBindingState(this.props.name)
   }
 
   componentWillReceiveProps(nextProps) {
@@ -47,7 +45,6 @@ export class BoundPhotoPanel extends Component {
     }
   }
 
-  @autobind
   handlePhotoPress(index) {
     const { onUploadStarted, onUploadEnded, onUploadProgress } = this.props
 
@@ -98,7 +95,6 @@ export class BoundPhotoPanel extends Component {
     )
   }
 
-  @autobind
   handleLayout(e) {
     if (!this.state.photoSize) {
       const { layout } = e.nativeEvent

mobile/src/ui/BoundSwitch.js

@@ -1,7 +1,7 @@
 import React from "react"
 import PropTypes from "prop-types"
 import { View, Switch, Text } from "react-native"
-import autobind from "autobind-decorator"
+import { reactAutoBind } from "auto-bind2"
 
 export class BoundSwitch extends React.Component {
   static propTypes = {
@@ -12,10 +12,10 @@ export class BoundSwitch extends React.Component {
 
   constructor(props) {
     super(props)
+    reactAutoBind(this)
     this.state = props.binder.getBindingState(props.name)
   }
 
-  @autobind
   handleValueChange(newValue) {
     const { binder, name } = this.props
     const state = binder.getBindingState(name)

mobile/src/ui/FormStaticInput.js

@@ -1,7 +1,6 @@
 import React from "react"
 import PropTypes from "prop-types"
 import { TextInput, Text, View, Platform } from "react-native"
-import autobind from "autobind-decorator"
 
 export class FormStaticInput extends React.Component {
   static propTypes = {

mobile/src/ui/Geolocation.js

@@ -1,7 +1,6 @@
 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 = {

mobile/src/ui/OptionStrip.js

@@ -1,7 +1,7 @@
 import React, { Component } from "react"
 import { View, Text, TouchableHighlight } from "react-native"
 import PropTypes from "prop-types"
-import autobind from "autobind-decorator"
+import { reactAutoBind } from "auto-bind2"
 
 export class OptionStrip extends Component {
   static propTypes = {
@@ -14,12 +14,12 @@ export class OptionStrip extends Component {
 
   constructor(props) {
     super(props)
+    reactAutoBind(this)
     this.state = {
       selectedOption: this.getSelectedOption(props.options, props.value),
     }
   }
 
-  @autobind
   getSelectedOption(options, value) {
     return options.find((option) => value === option.value) || null
   }
@@ -38,7 +38,6 @@ export class OptionStrip extends Component {
     }
   }
 
-  @autobind
   handlePress(option) {
     const { onValueChanged } = this.props
 

mobile/src/version.js

@@ -1,6 +1,6 @@
 export const versionInfo = {
-  version: '1.0.2',
-  fullVersion: '1.0.2-20180518.0',
+  version: '1.1.2',
+  fullVersion: '1.1.2-20180529.0',
   title: 'Deighton AR System',
   copyright: '© 2018, Kingston Software Solutions.',
   supportEmail: 'support@kss.us.com',

package.json

@@ -1,6 +1,6 @@
 {
   "name": "deighton-ar",
-  "version": "1.0.2",
+  "version": "1.1.2",
   "description": "Deighton AR Training System",
   "main": "index.js",
   "repository": {

server/package.json

@@ -7,7 +7,7 @@
     "start": "babel-node src/server.js",
     "start:prod": "NODE_ENV=production node dist/server.js",
     "build": "rm -rf dist && babel src -d dist -s",
-    "deploy": "rsync -vr -e ssh --exclude-from .rsync-exclude * $SNAP_DEPLOY_USER@$SNAP_DEPLOY_HOST:deighton-ar-server/ && ssh $SNAP_DEPLOY_USER@$SNAP_DEPLOY_HOST 'cd deighton-ar-server; npm install; sudo ./ops restart; sudo ./ops --test restart'",
+    "deploy": "rsync -vr -e ssh --exclude-from .rsync-exclude * $SNAP_DEPLOY_USER_HOST:deighton-ar-server/ && ssh $SNAP_DEPLOY_USER_HOST 'cd deighton-ar-server; npm install; sudo ./ops restart; sudo ./ops --test restart'",
     "test": "jest",
     "actor:api": "monzilla 'src/api/**/*.js:src/database/**/*.js' -- babel-node src/api/index.js",
     "actor:api:debug": "babel-node --inspect-brk src/api/index.js",

server/src/api/routes/TeamRoutes.js

@@ -41,7 +41,7 @@ export class TeamRoutes extends BaseRoutes {
 
     res.writeHead(200, {
       "Content-Type": "application/gzip",
-      "Content-Disposition": 'attachment; filename="team-scores.gzip"',
+      "Content-Disposition": 'attachment; filename="team-scores.json.gzip"',
     })
     readable.pipe(gzip).pipe(res)
   }

server/src/api/routes/WorkItemRoutes.js

@@ -25,6 +25,15 @@ export class WorkItemRoutes extends BaseRoutes {
       )
   }
 
+  async deleteItem(req, res, next) {
+    super.deleteItem(req, res, next)
+
+    const id = req.params._id
+    const Activity = this.db.Activity
+
+    await Activity.remove({ workItem: id })
+  }
+
   async listWorkItemActivities(req, res, next) {
     const WorkItem = this.db.WorkItem
     const aggregate = WorkItem.aggregate()

server/src/version.js

@@ -1,6 +1,6 @@
 export const versionInfo = {
-  version: '1.0.2',
-  fullVersion: '1.0.2-20180518.0',
+  version: '1.1.2',
+  fullVersion: '1.1.2-20180529.0',
   title: 'Deighton AR System',
   copyright: '© 2018, Kingston Software Solutions.',
   supportEmail: 'support@kss.us.com',

version.json5

@@ -15,11 +15,11 @@
   buildFormat: "full",
   tags: {
     major: 1,
-    minor: 0,
+    minor: 1,
     patch: 2,
-    build: 20180518,
+    build: 20180529,
     revision: 0,
-    sequence: 5,
+    sequence: 8,
     tz: "America/Los_Angeles",
     title: "Deighton AR System",
     copyright: "© 2018, Kingston Software Solutions.",

website/package.json

@@ -62,7 +62,7 @@
   "scripts": {
     "start": "node scripts/start.js",
     "build": "node scripts/build.js",
-    "deploy": "rsync -vr -e ssh build/* $SNAP_DEPLOY_USER@$SNAP_DEPLOY_HOST:deighton-ar-website/",
+    "deploy": "rsync -vr -e ssh build/* $SNAP_DEPLOY_USER_HOST:deighton-ar-website/",
     "lint": "eslint --ext .js --ext .jsx src/",
     "lint:fix": "eslint --ext .js --ext .jsx --fix src/"
   },

website/src/version.js

@@ -1,6 +1,6 @@
 export const versionInfo = {
-  version: '1.0.2',
-  fullVersion: '1.0.2-20180518.0',
+  version: '1.1.2',
+  fullVersion: '1.1.2-20180529.0',
   title: 'Deighton AR System',
   copyright: '© 2018, Kingston Software Solutions.',
   supportEmail: 'support@kss.us.com',