Hooked up Work Item screen to API

mobile/src/WorkItem/WorkItem.js

@@ -21,11 +21,15 @@ import {
   PhotoButton,
   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'
 
 const styles = StyleSheet.create({
   container: {
+    flexDirection: 'column',
     flexGrow: 1,
     backgroundColor: '#DDDDDD',
   },
@@ -47,11 +51,23 @@ const styles = StyleSheet.create({
 })
 
 const workItemOptions = [
-  { value: 'workOrder', text: 'Work Order' },
+  { 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: {
@@ -67,6 +83,8 @@ export class WorkItem extends React.Component {
     },
     workItemType: {
       isValid: true,
+      initValue: 'order',
+      alwaysGet: true,
     }
   }
 
@@ -91,28 +109,51 @@ export class WorkItem extends React.Component {
 
   @autobind
   handleDonePress() {
+    const { binder } = this.state
+    let obj = binder.getModifiedFieldValues()
 
+    obj.location = latLngStringToPoint(obj.location)
+
+    if (!obj._id) {
+      api.createWorkItem(obj).then((workItem) => {
+        this.handleBackPress()
+      }).catch((error) => {
+        this.setState({ messageModal: {
+          icon: 'hand',
+          message: 'Unable to create work item',
+          detail: error.message,
+        }})
+      })
+    } else {
+      api.updateWorkItem(obj).then((workItem) => {
+        this.handleBackPress()
+      }).catch((error) => {
+        this.setState({ messageModal: {
+          icon: 'hand',
+          message: 'Unable to update work item',
+          detail: error.message,
+        }})
+      })
+    }
+  }
+
+  @autobind
+  handleMessageDismiss() {
+    this.setState({ messageModal: null })
   }
 
   @autobind
   handleRegionChange(region) {
     const { binder } = this.state
-    // NOTE: For some reason, object destructuring does not work here :(
-    const lon = region.longitude
-    const lat = region.latitude
 
-    this.setState(binder.updateFieldValue('location',
-      `${Math.abs(lon).toFixed(4)}°${lon > 0 ? 'S' : 'N'}, ${Math.abs(lat).toFixed(4)}°${lat > 0 ? 'W' : 'E'}`))
+    this.setState(binder.updateFieldValue('location', latLngToString(region.latitude, region.longitude)))
   }
 
   render() {
-    const { binder } = this.state
+    const { binder, messageModal } = this.state
 
     return (
-      <KeyboardAvoidingView
-        style={{ width: '100%', height: '100%' }}
-        behavior='padding'
-        keyboardVerticalOffset={Platform.select({ios: 0, android: -220})}>
+      <View style={{ flex: 1 }}>
         <BoundHeader
           binder={binder}
           name='header'
@@ -123,6 +164,9 @@ export class WorkItem extends React.Component {
           <View style={styles.panel}>
             <BoundOptionStrip binder={binder} name='workItemType' label='Work Item Type:' options={workItemOptions} />
           </View>
+          <View style={styles.panel}>
+            <BoundInput binder={binder} name='details' lines={4} label='Details:' message='You must supply details for the work item' />
+          </View>
           <View style={styles.panel}>
             <MapView
               style={{
@@ -152,12 +196,16 @@ export class WorkItem extends React.Component {
               <PhotoButton />
             </View>
           </View>
-          <View style={styles.panel}>
-            <BoundInput binder={binder} name='details' lines={4} label='Details:' message='You must supply details for the work item' />
-          </View>
           { isIphoneX ? <View style={{ height: 30, width: '100%' }} /> : null }
         </ScrollView>
-      </KeyboardAvoidingView>
+        <MessageModal
+          open={!!messageModal}
+          icon={messageModal ? messageModal.icon : ''}
+          message={messageModal ? messageModal.message : ''}
+          detail={messageModal ? messageModal.detail : ''}
+          onDismiss={messageModal && this.handleMessageDismiss} />
+        <KeyboardSpacer />
+      </View>
     )
   }
 }