Deal with initially having no work items

mobile/package.json

@@ -23,6 +23,7 @@
   "dependencies": {
     "autobind-decorator": "^2.1.0",
     "eventemitter3": "^3.0.1",
+    "moment": "^2.22.1",
     "react": "^16.2.0",
     "react-form-binder": "^1.2.0",
     "react-native": "^0.49.3",

mobile/src/Activity/Activity.js

@@ -92,9 +92,38 @@ export class Activity extends React.Component {
     }
 
     const { search } = this.props.location
+    const params = search ? new URLSearchParams(search) : { get: () => null }
+    const id = params.get("id")
+    const workItemId = params.get("workItemId")
 
-    if (search) {
+    const getWorkItem = (id) => {
-      const id = new URLSearchParams(search).get("id")
+      api
+        .getWorkItem(id)
+        .then((workitem) => {
+          if (workItem) {
+            const [lng, lat] = workItem.location.coordinates
+
+            this.setState({
+              region: {
+                latitude: lat,
+                longitude: lng,
+                latitudeDelta: 0.01,
+                longitudeDelta: 0.01,
+              },
+            })
+          }
+        })
+        .catch((err) => {
+          this.setState({
+            messageModal: {
+              icon: "hand",
+              message: "Unable to get work item details",
+              detail: err.message,
+              back: true,
+            },
+          })
+        })
+    }
 
     if (id) {
       api
@@ -103,13 +132,9 @@ export class Activity extends React.Component {
           if (activity) {
             this.setState({
               binder: new FormBinder(activity, Activity.bindings),
-                // region: {
-                //   latitude: lat,
-                //   longitude: lng,
-                //   latitudeDelta: 0.01,
-                //   longitudeDelta: 0.01,
-                // },
             })
+
+            getWorkItem(activity.workItemId)
           }
         })
         .catch((err) => {
@@ -122,6 +147,11 @@ export class Activity extends React.Component {
             },
           })
         })
+    } else {
+      if (workItemId) {
+        getWorkItem(workItemId)
+      } else {
+        this.handleBackPress()
       }
     }
   }

mobile/src/Home/Home.js

@@ -41,12 +41,7 @@ export class Home extends React.Component {
     this.state = {
       sections: [],
       showWorkItems: true,
-      region: {
+      region: config.initialRegion,
-        latitude: 43.653908,
-        longitude: -79.384293,
-        latitudeDelta: 0.0922,
-        longitudeDelta: 0.0922,
-      },
       positionInfo: null,
       haveCameraPermission: false,
       workItemDistance: -1,
@@ -104,10 +99,11 @@ export class Home extends React.Component {
       .then((list) => {
         this.setState({
           sections: list.items,
-          region: regionContainingPoints(
+          region:
+            regionContainingPoints(
               list.items.map((item) => item.coordinate),
               0.02
-          ),
+            ) || this.state.region,
         })
       })
       .catch((err) => {
@@ -198,14 +194,15 @@ export class Home extends React.Component {
 
   @autobind
   handleGlassesPress() {
+    const { sections: workItems } = this.state
     const {
       latitude: latitude1,
       longitude: longitude1,
     } = this.state.positionInfo.coords
-    let closestWorkItem = null
+    let closestWorkItem = config.alwaysShowWorkItemInAR ? workItems[0] : null
     let shortestDistance = config.minDistanceToItem
 
-    this.state.sections.forEach((workItem) => {
+    workItems.forEach((workItem) => {
       const { latitude: latitude2, longitude: longitude2 } = workItem.coordinate
       const distance =
         geoDistance(latitude1, longitude1, latitude2, longitude2, "K") * 1000

mobile/src/WorkItem/WorkItem.js

@@ -79,18 +79,11 @@ export class WorkItem extends React.Component {
   constructor(props) {
     super(props)
 
-    region = {
-      latitude: 43.653908,
-      longitude: -79.384293,
-      latitudeDelta: 0.0922,
-      longitudeDelta: 0.0421,
-    }
-
     this.state = {
       binder: new FormBinder({}, WorkItem.bindings),
       messageModal: null,
       waitModal: null,
-      region,
+      region: config.initialRegion,
     }
 
     const { search } = this.props.location

mobile/src/config.js

@@ -13,4 +13,19 @@ export const config = {
   //minGPSAccuracy: 20,
   minDistanceToItem: 10,
   geocodeDelayMilliseconds: 500,
+  // This region is downtown Toronto
+  // initialRegion: {
+  //   latitude: 43.653908,
+  //   longitude: -79.384293,
+  //   latitudeDelta: 0.0922,
+  //   longitudeDelta: 0.0421,
+  // },
+  // This region is Bainbridge Island
+  initialRegion: {
+    latitude: 47.629536,
+    longitude: -122.524162,
+    latitudeDelta: 0.0922,
+    longitudeDelta: 0.0421,
+  },
+  alwaysShowWorkItemInAR: true,
 }

mobile/src/util.js

@@ -67,12 +67,12 @@ export const dotify = (s) => {
 }
 
 export const regionContainingPoints = (points, inset) => {
-  let minX,
+  let minX, maxX, minY, maxY
-    maxX,
+
-    minY,
+  if (!points) {
-    maxY
+    return null
+  }
 
-    // init first point
   ;((point) => {
     minX = point.latitude
     maxX = point.latitude
@@ -80,7 +80,6 @@ export const regionContainingPoints = (points, inset) => {
     maxY = point.longitude
   })(points[0])
 
-  // calculate rect
   points.map((point) => {
     minX = Math.min(minX, point.latitude)
     maxX = Math.max(maxX, point.latitude)