Added wait modals everywhere. Reduce required distance to item

mobile/src/Activity/Activity.js

@@ -97,16 +97,19 @@ export class Activity extends React.Component {
     this.region = null
     this.isMapReady = false
     this.goToRegionWhenReady = false
+  }
 
+  componentDidMount() {
     const { search } = this.props.location
     const params = search ? new URLSearchParams(search) : { get: () => null }
     const id = params.get("id")
     const workItemId = params.get("workItemId")
-
     const getWorkItem = (id) => {
+      this.setState({ waitModal: { message: "Loading Work Item Details..." } })
       api
         .getWorkItem(id)
         .then((workItem) => {
+          this.setState({ waitModal: null })
           if (workItem) {
             const [lng, lat] = workItem.location.coordinates
 
@@ -139,6 +142,7 @@ export class Activity extends React.Component {
         })
         .catch((err) => {
           this.setState({
+            waitModal: null,
             messageModal: {
               icon: "hand",
               message: "Unable to get work item details",
@@ -150,9 +154,12 @@ export class Activity extends React.Component {
     }
 
     if (id) {
+      this.setState({ waitModal: { message: "Loading Activity..." } })
       api
         .getActivity(id)
         .then((activity) => {
+          this.setState({ waitModal: null })
+
           if (activity) {
             this.setState({
               binder: new FormBinder(activity, Activity.bindings),
@@ -163,6 +170,7 @@ export class Activity extends React.Component {
         })
         .catch((err) => {
           this.setState({
+            waitModal: null,
             messageModal: {
               icon: "hand",
               message: "Unable to get activity details",

mobile/src/Home/Home.js

@@ -13,7 +13,7 @@ import {
 } from "react-native"
 import MapView, { Marker, Callout } from "react-native-maps"
 import { Icon, Header, Geolocation } from "../ui"
-import { MessageModal } from "../Modal"
+import { MessageModal, WaitModal } from "../Modal"
 import { api } from "../API"
 import { reactAutoBind } from "auto-bind2"
 import { ifIphoneX } from "react-native-iphone-x-helper"
@@ -41,6 +41,8 @@ export class Home extends React.Component {
     super(props)
     reactAutoBind(this)
     this.state = {
+      waitModal: null,
+      messageModal: null,
       sections: [],
       showWorkItems: true,
       haveCameraPermission: false,
@@ -97,7 +99,14 @@ export class Home extends React.Component {
       this.state.haveLocationPermission = true
       this.state.haveCameraPermission = true
     }
+  }
 
+  componentDidMount() {
+    this.loadWorkItems()
+  }
+
+  loadWorkItems() {
+    this.setState({ waitModal: { message: "Loading Work Items..." } })
     api
       .listTeams()
       .then((list) => {
@@ -105,6 +114,8 @@ export class Home extends React.Component {
         return api.listWorkItemActivities()
       })
       .then((list) => {
+        this.setState({ waitModal: null })
+
         list.items.forEach((item) => {
           item.data.forEach((datum) => {
             const team = this.teams.find((team) => team._id === datum.team)
@@ -130,6 +141,7 @@ export class Home extends React.Component {
       })
       .catch((err) => {
         this.setState({
+          waitModal: null,
           messageModal: {
             icon: "hand",
             message: "Unable to get a list of work items, activities and teams",
@@ -246,7 +258,13 @@ export class Home extends React.Component {
   }
 
   handleToggleWorkItemsList() {
-    this.setState({ showWorkItems: !this.state.showWorkItems })
+    const newShowWorkItems = !this.state.showWorkItems
+
+    this.setState({ showWorkItems: newShowWorkItems })
+
+    if (newShowWorkItems) {
+      this.loadWorkItems()
+    }
   }
 
   handleCalloutPress(workItem) {
@@ -287,6 +305,7 @@ export class Home extends React.Component {
       sections,
       showWorkItems,
       messageModal,
+      waitModal,
       haveCameraPermission,
       haveLocationPermission,
     } = this.state
@@ -491,6 +510,10 @@ export class Home extends React.Component {
         {haveLocationPermission && (
           <Geolocation onUpdate={this.handlePositionUpdate} />
         )}
+        <WaitModal
+          open={!!waitModal}
+          message={waitModal ? waitModal.message : ""}
+        />
         <MessageModal
           open={!!messageModal}
           icon={messageModal ? messageModal.icon : ""}

mobile/src/WorkItem/WorkItem.js

@@ -104,15 +104,21 @@ export class WorkItem extends React.Component {
     this.region = null
     this.isMapReady = false
     this.goToRegionWhenReady = false
+  }
 
+  componentDidMount() {
     const { search } = this.props.location
     const params = search ? new URLSearchParams(search) : { get: () => null }
     const id = params.get("id")
 
     if (id) {
+      this.setState({ waitModal: { message: "Loading Work Item..." } })
+
       api
         .getWorkItem(id)
         .then((workItem) => {
+          this.setState({ waitModal: null })
+
           if (workItem) {
             const [longitude, latitude] = workItem.location.coordinates
 
@@ -136,6 +142,7 @@ export class WorkItem extends React.Component {
         })
         .catch((err) => {
           this.setState({
+            waitModal: null,
             messageModal: {
               icon: "hand",
               message: "Unable to get work item details",
@@ -167,14 +174,18 @@ export class WorkItem extends React.Component {
     const { binder } = this.state
     let obj = binder.getModifiedBindingValues()
 
+    this.setState({ waitModal: { message: "Creating Work Item..." } })
+
     if (!obj._id) {
       api
         .createWorkItem(obj)
         .then((workItem) => {
+          this.setState({ waitModal: null })
           this.handleBackPress()
         })
         .catch((error) => {
           this.setState({
+            waitModal: null,
             messageModal: {
               icon: "hand",
               message: "Unable to create work item",
@@ -190,6 +201,7 @@ export class WorkItem extends React.Component {
         })
         .catch((error) => {
           this.setState({
+            waitModal: null,
             messageModal: {
               icon: "hand",
               message: "Unable to update work item",

mobile/src/config.js

@@ -2,20 +2,20 @@ import React from "react"
 import { Platform } from "react-native"
 
 export const config = {
-  localIPAddr: "192.168.1.175",
-  //localIPAddr: "192.168.1.14",
+  //localIPAddr: "192.168.1.175",
+  localIPAddr: "192.168.1.14",
   viroAPIKey: "06F37B6A-74DA-4A83-965A-7DE2209A5C46",
   googleGeocodeAPIKey: "AIzaSyCs4JVT6gysnY5dAJ7KjVJYeykLv_xz1GI",
   googleGeocodeURL: "https://maps.googleapis.com/maps/api/geocode/json",
   refererURL: "https://dar.kss.us.com",
-  minDistanceToItem: 20,
+  minDistanceToItem: 10,
   workItemRegionDelta: 0.005,
   activityRegionDelta: 0.005,
   homeRegionInset: 0.02,
   homeRegionDelta: 0.005,
   geocodeDelayMilliseconds: 500,
 
-  // defaultUser: "john@lyon-smith.org",
+  //defaultUser: "john@lyon-smith.org",
   defaultUser: "",
 
   // This region is downtown Toronto