Debug issues with work item CRUD

mobile/src/WorkItem/WorkItem.js

@@ -8,7 +8,7 @@ import {
   TextInput,
   KeyboardAvoidingView,
   Platform,
-  TouchableOpacity
+  TouchableOpacity,
 } from "react-native"
 import MapView, { Marker } from "react-native-maps"
 import { FormBinder } from "react-form-binder"
@@ -19,19 +19,21 @@ import {
   Icon,
   Header,
   PhotoButton,
-  BoundOptionStrip
+  BoundOptionStrip,
 } from "../ui"
 import { MessageModal } from "../Modal"
 import autobind from "autobind-decorator"
 import { ifIphoneX, isIphoneX } from "react-native-iphone-x-helper"
 import KeyboardSpacer from "react-native-keyboard-spacer"
 import { api } from "../API"
+import "url-search-params-polyfill"
+import { workItemTypeEnum, formatLatLng, parseLatLng } from "../util"
 
 const styles = StyleSheet.create({
   container: {
     flexDirection: "column",
     flexGrow: 1,
-    backgroundColor: "#DDDDDD"
+    backgroundColor: "#DDDDDD",
   },
   panel: {
     width: "94%",
@@ -42,60 +44,68 @@ const styles = StyleSheet.create({
     shadowOffset: { width: 2, height: 2 },
     shadowRadius: 2,
     shadowOpacity: 0.5,
-    padding: 10
+    padding: 10,
   },
   label: {
     fontSize: 14,
-    marginBottom: 4
-  }
+    marginBottom: 4,
+  },
 })
 
-const workItemOptions = [
-  { value: "order", text: "Work Order" },
-  { value: "inspection", text: "Inspection" },
-  { value: "complaint", text: "Complaint" }
-]
-
-const latLngToString = (lat, lng) =>
-  `${Math.abs(lng).toFixed(4)}°${lng > 0 ? "S" : "N"}, ${Math.abs(lat).toFixed(
-    4
-  )}°${lat > 0 ? "W" : "E"}`
-const latLngStringToPoint = str => {
-  const parts = str.split(", ")
-  return {
-    type: "Point",
-    coordinates: [
-      new Number(parts[0].substring(0, parts[0].length - 2)),
-      new Number(parts[1].substring(0, parts[1].length - 2))
-    ]
-  }
-}
-
 export class WorkItem extends React.Component {
   static bindings = {
     header: {
       noValue: true,
-      isDisabled: r => !(r.anyModified && r.allValid)
+      isDisabled: (r) => !(r.anyModified && r.allValid),
     },
     location: {
       isValid: true,
-      isDisabled: true
+      isDisabled: true,
     },
     details: {
-      isValid: (r, v) => v !== ""
+      isValid: (r, v) => v !== "",
     },
     workItemType: {
       isValid: true,
-      initValue: "order",
-      alwaysGet: true
-    }
+      alwaysGet: true,
+    },
   }
 
   constructor(props) {
     super(props)
     this.state = {
       binder: new FormBinder({}, WorkItem.bindings),
-      messageModal: null
+      messageModal: null,
+    }
+
+    const { search } = this.props.location
+
+    if (search) {
+      const id = new URLSearchParams(search).get("id")
+
+      if (id) {
+        api
+          .getWorkItem(id)
+          .then((workItem) => {
+            if (workItem) {
+              const [lng, lat] = workItem.location.coordinates
+              workItem.location = formatLatLng(lat, lng)
+              this.setState({
+                binder: new FormBinder(workItem, WorkItem.bindings),
+              })
+            }
+          })
+          .catch((err) => {
+            this.setState({
+              messageModal: {
+                icon: "hand",
+                message: "Unable to get work item details",
+                detail: err.message,
+                back: true,
+              },
+            })
+          })
+      }
     }
   }
 
@@ -115,36 +125,36 @@ export class WorkItem extends React.Component {
     const { binder } = this.state
     let obj = binder.getModifiedFieldValues()
 
-    obj.location = latLngStringToPoint(obj.location)
+    obj.location = parseLatLng(obj.location)
 
     if (!obj._id) {
       api
         .createWorkItem(obj)
-        .then(workItem => {
+        .then((workItem) => {
           this.handleBackPress()
         })
-        .catch(error => {
+        .catch((error) => {
           this.setState({
             messageModal: {
               icon: "hand",
               message: "Unable to create work item",
-              detail: error.message
-            }
+              detail: error.message,
+            },
           })
         })
     } else {
       api
         .updateWorkItem(obj)
-        .then(workItem => {
+        .then((workItem) => {
           this.handleBackPress()
         })
-        .catch(error => {
+        .catch((error) => {
           this.setState({
             messageModal: {
               icon: "hand",
               message: "Unable to update work item",
-              detail: error.message
-            }
+              detail: error.message,
+            },
           })
         })
     }
@@ -152,7 +162,11 @@ export class WorkItem extends React.Component {
 
   @autobind
   handleMessageDismiss() {
+    const back = this.state.messageModal.back
     this.setState({ messageModal: null })
+    if (back) {
+      this.handleBackPress()
+    }
   }
 
   @autobind
@@ -162,7 +176,7 @@ export class WorkItem extends React.Component {
     this.setState(
       binder.updateFieldValue(
         "location",
-        latLngToString(region.latitude, region.longitude)
+        formatLatLng(region.latitude, region.longitude)
       )
     )
   }
@@ -185,7 +199,7 @@ export class WorkItem extends React.Component {
               binder={binder}
               name="workItemType"
               label="Work Item Type:"
-              options={workItemOptions}
+              options={workItemTypeEnum}
             />
           </View>
           <View style={styles.panel}>
@@ -204,17 +218,16 @@ export class WorkItem extends React.Component {
                 justifyContent: "center",
                 width: "100%",
                 height: 400,
-                marginBottom: 10
+                marginBottom: 10,
               }}
               zoomControlEnabled
               initialRegion={{
                 latitude: 43.653908,
                 longitude: -79.384293,
                 latitudeDelta: 0.0922,
-                longitudeDelta: 0.0421
+                longitudeDelta: 0.0421,
               }}
-              onRegionChange={this.handleRegionChange}
-            >
+              onRegionChange={this.handleRegionChange}>
               <Icon
                 name="target"
                 size={24}
@@ -227,8 +240,7 @@ export class WorkItem extends React.Component {
           <View style={styles.panel}>
             <Text style={styles.label}>Pictures:</Text>
             <View
-              style={{ flexDirection: "row", justifyContent: "space-between" }}
-            >
+              style={{ flexDirection: "row", justifyContent: "space-between" }}>
               <PhotoButton />
               <PhotoButton />
               <PhotoButton />