Work item delete working

mobile/src/WorkItem/WorkItem.js

@@ -66,7 +66,7 @@ export class WorkItem extends React.Component {
       isValid: (r, v) => v !== "",
     },
     workItemType: {
-      isValid: true,
+      isValid: (r, v) => v !== "",
       alwaysGet: true,
     },
   }
@@ -171,14 +171,11 @@ export class WorkItem extends React.Component {
 
   @autobind
   handleRegionChange(region) {
-    const { binder } = this.state
-
-    this.setState(
-      binder.updateFieldValue(
-        "location",
+    if (this.latLngInput) {
+      this.latLngInput.handleChangeText(
         formatLatLng(region.latitude, region.longitude)
       )
-    )
+    }
   }
 
   render() {
@@ -200,6 +197,7 @@ export class WorkItem extends React.Component {
               name="workItemType"
               label="Work Item Type:"
               options={workItemTypeEnum}
+              message="Select a work item type"
             />
           </View>
           <View style={styles.panel}>
@@ -235,7 +233,12 @@ export class WorkItem extends React.Component {
                 pointerEvents={false}
               />
             </MapView>
-            <BoundInput binder={binder} name="location" label="Location:" />
+            <BoundInput
+              ref={(ref) => (this.latLngInput = ref)}
+              binder={binder}
+              name="location"
+              label="Location:"
+            />
           </View>
           <View style={styles.panel}>
             <Text style={styles.label}>Pictures:</Text>

mobile/src/WorkItem/WorkItemList.js

@@ -52,12 +52,40 @@ export class WorkItemList extends React.Component {
   }
 
   @autobind
-  handleItemSelect(item, index) {
+  handleItemSelect(item, ref) {
     this.props.history.push(`/workitem?id=${item._id}`)
   }
 
   @autobind
-  handleItemDelete(item, index) {}
+  handleItemDelete(item, ref) {
+    api
+      .deleteWorkItem(item._id)
+      .then(() => {
+        return api
+          .listWorkItems()
+          .then((list) => {
+            this.setState({ listItems: list.items })
+          })
+          .catch(() => {
+            this.setState({
+              messageModal: {
+                icon: "hand",
+                message: "Unable to get list of work items",
+                detail: error.message,
+              },
+            })
+          })
+      })
+      .catch(() => {
+        this.setState({
+          messageModal: {
+            icon: "hand",
+            message: "Unable to get delete work item",
+            detail: error.message,
+          },
+        })
+      })
+  }
 
   @autobind
   handleMessageDismiss() {
@@ -65,7 +93,7 @@ export class WorkItemList extends React.Component {
   }
 
   @autobind
-  handleAddPress(item, index) {
+  handleDonePress() {
     this.props.history.push("/workitem")
   }
 
@@ -88,7 +116,7 @@ export class WorkItemList extends React.Component {
         <Header
           title="Work Items"
           leftButton={{ icon: "back", onPress: this.handleBackPress }}
-          rightButton={{ icon: "add", onPress: this.handleAddPress }}
+          rightButton={{ icon: "add", onPress: this.handleDonePress }}
         />
         <SwipeListView
           useFlatList
@@ -99,8 +127,8 @@ export class WorkItemList extends React.Component {
             paddingBottom: 20,
           }}
           data={listItems}
-          keyExtractor={(item) => (item._id)}
-          renderItem={({ item, index }) => (
+          keyExtractor={(item) => item._id}
+          renderItem={({ item }, rowMap) => (
             <TouchableHighlight
               style={{
                 height: 50,
@@ -109,7 +137,7 @@ export class WorkItemList extends React.Component {
                 backgroundColor: "white",
               }}
               underlayColor="#EEEEEE"
-              onPress={() => this.handleItemSelect(item, index)}>
+              onPress={() => this.handleItemSelect(item, rowMap[item._id])}>
               <View
                 style={{ height: "100%", width: "100%", flexDirection: "row" }}>
                 <View
@@ -133,7 +161,7 @@ export class WorkItemList extends React.Component {
               </View>
             </TouchableHighlight>
           )}
-          renderHiddenItem={({ item, index }) => (
+          renderHiddenItem={({ item }, rowMap) => (
             <TouchableOpacity
               style={{
                 flexDirection: "row",
@@ -141,7 +169,7 @@ export class WorkItemList extends React.Component {
                 height: 50,
                 backgroundColor: "red",
               }}
-              onPress={() => this.handleItemDelete(item, index)}>
+              onPress={() => this.handleItemDelete(item, rowMap[item._id])}>
               <View
                 style={{
                   flexDirection: "column",