Improve sign-up process for new users

mobile/src/Home/Home.js

@@ -8,6 +8,8 @@ import {
   View,
   TouchableOpacity,
   TouchableHighlight,
+  PermissionsAndroid,
+  AsyncStorage,
 } from "react-native"
 import MapView, { Marker } from "react-native-maps"
 import { Icon, Header } from "../ui"
@@ -15,9 +17,12 @@ import { api } from "../API"
 import autobind from "autobind-decorator"
 import { ifIphoneX } from "react-native-iphone-x-helper"
 import { workItemTypeText, pad, regionContainingPoints } from "../util"
+import { ensurePermission } from "../App"
+import { versionInfo } from "../version"
 import pinImage from "./images/pin.png"
 
 const minGPSAccuracy = 20
+const neverAskForLocationPermissionKeyName = "NeverAskForLocationPermission"
 
 export class Home extends React.Component {
   constructor(props) {
@@ -34,10 +39,22 @@ export class Home extends React.Component {
       positionInfo: null,
     }
 
-    this.watchId = navigator.geolocation.watchPosition(
-      this.handlePositionChange,
-      null,
-      { distanceFilter: 10 }
+    ensurePermission(
+      PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
+      neverAskForLocationPermissionKeyName,
+      {
+        title: versionInfo.title,
+        message:
+          "This app needs access to your location so that " +
+          "you can find and access the geo located items.",
+      },
+      () => {
+        this.watchId = navigator.geolocation.watchPosition(
+          this.handlePositionChange,
+          null,
+          { distanceFilter: 10 }
+        )
+      }
     )
 
     api
@@ -59,6 +76,7 @@ export class Home extends React.Component {
   componentWillUnmount() {
     if (this.watchId) {
       navigator.geolocation.clearWatch(this.watchId)
+      this.watchId = null
     }
   }
 

mobile/src/app.js

@@ -1,11 +1,10 @@
 import React from "react"
-import { View, StyleSheet } from "react-native"
 import {
-  ViroARSceneNavigator,
-  ViroARScene,
-  ViroARPlane,
-  ViroBox,
-} from "react-viro"
+  View,
+  StyleSheet,
+  AsyncStorage,
+  PermissionsAndroid,
+} from "react-native"
 import { NativeRouter, Route, Link, Switch } from "react-router-native"
 import MapView from "react-native-maps"
 import { WorkItem, WorkItemList } from "./WorkItem"
@@ -20,6 +19,53 @@ console.ignoredYellowBox = [
   "<ViroSurface>",
 ]
 
+export const ensurePermission = (
+  permission,
+  neverAskKeyName,
+  rationale,
+  onSuccess,
+  onError
+) => {
+  PermissionsAndroid.check(permission)
+    .then((flag) => {
+      if (flag) {
+        if (onSuccess) {
+          onSuccess()
+        }
+        return
+      }
+      return AsyncStorage.getItem(neverAskKeyName)
+    })
+    .then((value) => {
+      if (value === "YES") {
+        return
+      } else {
+        return PermissionsAndroid.request(permission, rationale)
+      }
+    })
+    .then((result) => {
+      if (result === PermissionsAndroid.RESULTS.GRANTED) {
+        if (onSuccess) {
+          onSuccess()
+        }
+        return
+      }
+
+      if (result === PermissionsAndroid.RESULTS.NEVER_ASK_AGAIN) {
+        AsyncStorage.setItem(neverAskKeyName, "YES")
+      }
+
+      if (onError) {
+        onError()
+      }
+    })
+    .catch((err) => {
+      if (onError) {
+        onError()
+      }
+    })
+}
+
 export default class App extends React.Component {
   render() {
     return (

mobile/src/development.js

@@ -1,3 +1,3 @@
 export const localIPAddr = "192.168.1.175"
-export const defaultUser = "john@lyon-smith.org"
-// export const defaultUser = ""
+//export const defaultUser = "john@lyon-smith.org"
+export const defaultUser = ""

mobile/src/util.js

@@ -57,9 +57,12 @@ export const pad = (num, size) => {
 }
 
 export const regionContainingPoints = (points, inset) => {
-  let minX, maxX, minY, maxY
+  let minX,
+    maxX,
+    minY,
+    maxY
 
-  // init first point
+    // init first point
   ;((point) => {
     minX = point.latitude
     maxX = point.latitude