Fix bugs when adding activity

mobile/src/Activity/Activity.js

@@ -20,13 +20,15 @@ import {
   BoundOptionStrip,
   BoundHeader,
   BoundPhotoPanel,
+  FormStaticInput,
 } from "../ui"
 import { MessageModal, WaitModal } from "../Modal"
 import autobind from "autobind-decorator"
 import KeyboardSpacer from "react-native-keyboard-spacer"
 import { isIphoneX } from "react-native-iphone-x-helper"
 import { api } from "../API"
-import { formatLatLng, parseLatLng } from "../util"
+import { formatLatLng } from "../util"
+import moment from "moment"
 import "url-search-params-polyfill"
 
 const styles = StyleSheet.create({
@@ -57,13 +59,6 @@ export class Activity extends React.Component {
       noValue: true,
       isDisabled: (r) => !(r.anyModified && r.allValid),
     },
-    dateTime: {
-      isValid: (r, v) => v !== "",
-      isReadOnly: true,
-    },
-    details: {
-      isValid: (r, v) => v !== "",
-    },
     resolution: {
       isValid: (r, v) => v !== "",
     },
@@ -72,14 +67,19 @@ export class Activity extends React.Component {
     },
     photos: {
       isValid: (r, v) => v && v.length > 0,
+      initValue: [],
     },
     status: {
       isValid: (r, v) => v !== "",
       alwaysGet: true,
     },
-    location: {
+    workItem: {
-      isValid: (r, v) => v !== "",
+      isValid: true,
-      isReadOnly: true,
+      alwaysGet: true,
+    },
+    team: {
+      isValid: true,
+      alwaysGet: true,
     },
   }
 
@@ -99,17 +99,26 @@ export class Activity extends React.Component {
     const getWorkItem = (id) => {
       api
         .getWorkItem(id)
-        .then((workitem) => {
+        .then((workItem) => {
           if (workItem) {
             const [lng, lat] = workItem.location.coordinates
 
             this.setState({
+              binder: new FormBinder(
+                {
+                  workItem: workItem._id,
+                  team: api.loggedInUser.team,
+                },
+                Activity.bindings
+              ),
               region: {
                 latitude: lat,
                 longitude: lng,
                 latitudeDelta: 0.01,
                 longitudeDelta: 0.01,
               },
+              location: formatLatLng(lat, lng),
+              dateTime: moment().format(),
             })
           }
         })
@@ -225,7 +234,14 @@ export class Activity extends React.Component {
   }
 
   render() {
-    const { binder, messageModal, waitModal, region } = this.state
+    const {
+      binder,
+      messageModal,
+      waitModal,
+      region,
+      dateTime,
+      location,
+    } = this.state
 
     return (
       <View style={{ width: "100%", height: "100%" }}>
@@ -257,12 +273,8 @@ export class Activity extends React.Component {
             <BoundInput binder={binder} name="notes" label="Notes:" />
           </View>
           <View style={styles.panel}>
-            <BoundInput
+            <FormStaticInput label="Date &amp; Time:" value={dateTime} />
-              binder={binder}
+            <FormStaticInput label="Location:" value={location} />
-              name="dateTime"
-              label="Date &amp; Time:"
-            />
-            <BoundInput binder={binder} name="location" label="Location:" />
             <View style={{ flexDirection: "column", justifyContent: "center" }}>
               <MapView
                 style={{
@@ -283,12 +295,7 @@ export class Activity extends React.Component {
                 showsScale={false}
                 showsUserLocation
                 cacheEnabled
-                initialRegion={{
+                region={region}
-                  latitude: 43.653908,
-                  longitude: -79.384293,
-                  latitudeDelta: 0.0922,
-                  longitudeDelta: 0.0421,
-                }}
               />
               <Icon
                 name="target"

mobile/src/Home/Home.js

@@ -66,11 +66,8 @@ export class Home extends React.Component {
           results[PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION] ===
           PermissionsAndroid.RESULTS.GRANTED
         ) {
-          this.watchId = navigator.geolocation.watchPosition(
+          this.setState({ haveLocationPermission: true })
-            this.handlePositionChange,
+          navigator.geolocation.getCurrentPosition(this.handlePositionChange)
-            null,
-            { distanceFilter: 10 }
-          )
         }
 
         if (
@@ -250,9 +247,18 @@ export class Home extends React.Component {
       positionInfo,
       messageModal,
       haveCameraPermission,
+      haveLocationPermission,
       workItemDistance,
     } = this.state
 
+    if (!this.watchId && haveLocationPermission) {
+      this.watchId = navigator.geolocation.watchPosition(
+        this.handlePositionChange,
+        null,
+        { distanceFilter: 10 }
+      )
+    }
+
     return (
       <View
         style={{
@@ -268,7 +274,9 @@ export class Home extends React.Component {
             !(
               positionInfo &&
               positionInfo.coords.accuracy <= config.minGPSAccuracy
-            ) || !haveCameraPermission
+            ) ||
+            !haveCameraPermission ||
+            !haveLocationPermission
           }
         />
         <MapView

mobile/src/Modal/MessageModal.js

@@ -16,10 +16,8 @@ export class MessageModal extends Component {
 
   @autobind
   handleButtonPress() {
-    const { onDismiss } = this.props
+    if (this.props.onDismiss) {
-
+      this.props.onDismiss()
-    if (onDismiss) {
-      onDismiss()
     }
   }
 

mobile/src/WorkItem/WorkItem.js

@@ -88,41 +88,39 @@ export class WorkItem extends React.Component {
     }
 
     const { search } = this.props.location
+    const params = search ? new URLSearchParams(search) : { get: () => null }
+    const id = params.get("id")
 
-    if (search) {
+    if (id) {
-      const id = new URLSearchParams(search).get("id")
+      api
-
+        .getWorkItem(id)
-      if (id) {
+        .then((workItem) => {
-        api
+          if (workItem) {
-          .getWorkItem(id)
+            const [lng, lat] = workItem.location.coordinates
-          .then((workItem) => {
+            const region = {
-            if (workItem) {
+              latitude: lat,
-              const [lng, lat] = workItem.location.coordinates
+              longitude: lng,
-              const region = {
+              latitudeDelta: 0.01,
-                latitude: lat,
+              longitudeDelta: 0.01,
-                longitude: lng,
-                latitudeDelta: 0.01,
-                longitudeDelta: 0.01,
-              }
-
-              workItem.location = formatLatLng(lat, lng)
-              this.setState({
-                binder: new FormBinder(workItem, WorkItem.bindings),
-                region,
-              })
             }
-          })
+
-          .catch((err) => {
+            workItem.location = formatLatLng(lat, lng)
             this.setState({
-              messageModal: {
+              binder: new FormBinder(workItem, WorkItem.bindings),
-                icon: "hand",
+              region,
-                message: "Unable to get work item details",
-                detail: err.message,
-                back: true,
-              },
             })
+          }
+        })
+        .catch((err) => {
+          this.setState({
+            messageModal: {
+              icon: "hand",
+              message: "Unable to get work item details",
+              detail: err.message,
+              back: true,
+            },
           })
-      }
+        })
     }
   }
 
@@ -219,6 +217,7 @@ export class WorkItem extends React.Component {
         if (this.addressInput) {
           this.addressInput.handleChangeText(address)
         }
+        this.setState({ region: ref.mapView.region })
       })
       .catch(() => {
         if (this.addressInput) {

mobile/src/config.js

@@ -14,18 +14,18 @@ export const config = {
   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,
+  //   latitude: 43.653908,
-  //   longitude: -122.524162,
+  //   longitude: -79.384293,
   //   latitudeDelta: 0.0922,
   //   longitudeDelta: 0.0421,
   // },
-  // alwaysShowWorkItemInAR: true,
+  // This region is Bainbridge Island
+  initialRegion: {
+    latitude: 47.629536,
+    longitude: -122.524162,
+    latitudeDelta: 0.0922,
+    longitudeDelta: 0.0421,
+  },
+  alwaysShowWorkItemInAR: true,
 }

mobile/src/ui/BoundInput.js

@@ -34,10 +34,10 @@ export class BoundInput extends React.Component {
 
   @autobind
   handleChangeText(newText) {
-    const { binder, name } = this.props
+    if (this.props.binder) {
-
+      this.setState(
-    if (binder) {
+        this.props.binder.updateFieldValue(this.props.name, newText)
-      this.setState(binder.updateFieldValue(name, newText))
+      )
     }
   }
 

mobile/src/ui/FormStaticInput.js

@@ -0,0 +1,46 @@
+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 = {
+    label: PropTypes.string,
+    value: PropTypes.string,
+  }
+
+  render() {
+    const { label, value } = this.props
+
+    return (
+      <View style={{ width: "100%" }}>
+        <Text
+          style={{
+            color: "black",
+            fontSize: 14,
+            marginBottom: 5,
+          }}>
+          {label}
+        </Text>
+        <TextInput
+          style={{
+            width: "100%",
+            paddingLeft: 5,
+            paddingRight: 5,
+            borderColor: "gray",
+            borderWidth: 1,
+            fontSize: 16,
+            paddingTop: 7,
+            paddingBottom: Platform.OS === "ios" ? 7 : 0,
+            textAlignVertical: "top",
+            marginBottom: 5,
+          }}
+          editable={false}
+          autoCapitalize="none"
+          underlineColorAndroid="white"
+          value={value}
+        />
+      </View>
+    )
+  }
+}

mobile/src/ui/index.js

@@ -3,6 +3,7 @@ export { Header } from "./Header"
 export { OptionStrip } from "./OptionStrip"
 export { BoundSwitch } from "./BoundSwitch"
 export { BoundInput } from "./BoundInput"
+export { FormStaticInput } from "./FormStaticInput"
 export { BoundButton } from "./BoundButton"
 export { BoundOptionStrip } from "./BoundOptionStrip"
 export { BoundHeader } from "./BoundHeader"