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
+    if (this.latLngInput) {
-
+      this.latLngInput.handleChangeText(
-    this.setState(
-      binder.updateFieldValue(
-        "location",
         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)}
+          keyExtractor={(item) => item._id}
-          renderItem={({ item, index }) => (
+          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",

mobile/src/ui/BoundInput.js

@@ -1,7 +1,7 @@
-import React from 'react'
+import React from "react"
-import PropTypes from 'prop-types'
+import PropTypes from "prop-types"
-import { TextInput, Text, View } from 'react-native'
+import { TextInput, Text, View } from "react-native"
-import autobind from 'autobind-decorator'
+import autobind from "autobind-decorator"
 
 export class BoundInput extends React.Component {
   static propTypes = {
@@ -37,10 +37,8 @@ export class BoundInput extends React.Component {
     const { binder, name } = this.props
     const state = binder.getFieldState(name)
 
-    if (!state.readOnly && !state.disabled) {
     this.setState(binder.updateFieldValue(name, newText))
   }
-  }
 
   render() {
     const { label, password, name, placeholder, message, lines } = this.props
@@ -51,14 +49,16 @@ export class BoundInput extends React.Component {
     }
 
     return (
-      <View style={{ width: '100%' }}>
+      <View style={{ width: "100%" }}>
-        <Text style={{ color: 'black', fontSize: 14, marginBottom: 5 }}>{label}</Text>
+        <Text style={{ color: "black", fontSize: 14, marginBottom: 5 }}>
+          {label}
+        </Text>
         <TextInput
           style={{
-            width: '100%',
+            width: "100%",
             paddingLeft: 5,
             paddingRight: 5,
-            borderColor: 'gray',
+            borderColor: "gray",
             borderWidth: 1,
             fontSize: 16,
             paddingTop: 7,
@@ -67,17 +67,21 @@ export class BoundInput extends React.Component {
           multiline={lines > 1}
           numberOfLines={lines}
           editable={!disabled}
-          autoCapitalize='none'
+          autoCapitalize="none"
-          underlineColorAndroid='white'
+          underlineColorAndroid="white"
           value={value}
           secureTextEntry={password}
           onChangeText={this.handleChangeText}
-          placeholder={placeholder} />
+          placeholder={placeholder}
-        <Text style={{
+        />
+        <Text
+          style={{
             fontSize: 12,
-          display: valid ? 'none' : 'flex',
+            display: valid ? "none" : "flex",
-          color: 'red',
+            color: "red",
-        }}>{message}</Text>
+          }}>
+          {message}
+        </Text>
       </View>
     )
   }

mobile/src/ui/BoundOptionStrip.js

@@ -12,6 +12,7 @@ export class BoundOptionStrip extends React.Component {
     options: PropTypes.arrayOf(
       PropTypes.shape({ value: PropTypes.string, text: PropTypes.string })
     ).isRequired,
+    message: PropTypes.string,
   }
 
   constructor(props) {
@@ -31,8 +32,8 @@ export class BoundOptionStrip extends React.Component {
   }
 
   render() {
-    const { name, label, options } = this.props
+    const { name, label, options, message } = this.props
-    const { visible, disabled, value } = this.state
+    const { visible, disabled, value, valid } = this.state
 
     return (
       <View
@@ -49,6 +50,14 @@ export class BoundOptionStrip extends React.Component {
           options={options}
           onValueChanged={this.handleValueChanged}
         />
+        <Text
+          style={{
+            fontSize: 12,
+            display: valid ? "none" : "flex",
+            color: "red",
+          }}>
+          {message}
+        </Text>
       </View>
     )
   }