Debug issues with work item CRUD

mobile/src/WorkItem/WorkItemList.js

@@ -6,122 +6,58 @@ import {
   TouchableOpacity,
   Image,
   FlatList,
-  Text
+  Text,
 } from "react-native"
 import { Icon, Header } from "../ui"
 import { MessageModal } from "../Modal"
 import autobind from "autobind-decorator"
 import { SwipeListView } from "react-native-swipe-list-view"
 import { api } from "../API"
+import { workItemTypeEnum, formatLatLng, parseLatLng } from "../util"
 
 const styles = StyleSheet.create({
   container: {
     height: "100%",
     width: "100%",
     justifyContent: "flex-start",
-    backgroundColor: "#FFFFFF"
-  }
+    backgroundColor: "#FFFFFF",
+  },
 })
 
-const data = [
-  {
-    key: "1",
-    type: "work",
-    location: "Ossington Ave. | 0.2 mi.",
-    state: "open",
-    latlng: { latitude: 43.653226, longitude: -79.383184 }
-  },
-  {
-    key: "2",
-    type: "inspection",
-    location: "Alexandre St. | 0.7 mi.",
-    state: "open",
-    latlng: { latitude: 43.648118, longitude: 79.392636 }
-  },
-  {
-    key: "3",
-    type: "complaint",
-    location: "Bay St. | 0.8 mi.",
-    state: "open",
-    latlng: { latitude: 43.640168, longitude: -79.409373 }
-  },
-  {
-    key: "4",
-    type: "work",
-    location: "Bloor St. | 1.2 mi.",
-    state: "open",
-    latlng: { latitude: 43.63311, longitude: -79.41588 }
-  },
-  {
-    key: "5",
-    type: "inspection",
-    location: "Blue Jays Way | 2.2 mi.",
-    state: "open",
-    latlng: { latitude: 43.653526, longitude: -79.361385 }
-  },
-  {
-    key: "6",
-    type: "complaint",
-    location: "Christie St. | 3.0 mi.",
-    state: "open",
-    latlng: { latitude: 43.66387, longitude: -79.383705 }
-  },
-  {
-    key: "7",
-    type: "work",
-    location: "Cummer Ave. | 4.2 mi.",
-    state: "open",
-    latlng: { latitude: 43.659166, longitude: -79.39135 }
-  },
-  {
-    key: "8",
-    type: "complaint",
-    location: "Danforth Ave. | 4.7 mi.",
-    state: "open",
-    latlng: { latitude: 43.663538, longitude: -79.423212 }
-  }
-]
-
-const inspectionTypes = {
-  work: {
-    title: "Work Order"
-  },
-  inspection: {
-    title: "Inspection"
-  },
-  complaint: {
-    title: "Complaint"
-  }
-}
+const workItemTypeText = workItemTypeEnum.reduce((result, item) => {
+  result[item.value] = item.text
+  return result
+}, {})
 
 export class WorkItemList extends React.Component {
   constructor(props) {
     super(props)
     this.state = {
-      messageModal: null
+      messageModal: null,
     }
     api
       .listWorkItems()
-      .then(list => {})
+      .then((list) => {
+        this.setState({ listItems: list.items })
+      })
       .catch(() => {
         this.setState({
           messageModal: {
             icon: "hand",
             message: "Unable to get list of work items",
-            detail: error.message
-          }
+            detail: error.message,
+          },
         })
       })
   }
 
   @autobind
   handleItemSelect(item, index) {
-    this.props.history.push("/workitem")
+    this.props.history.push(`/workitem?id=${item._id}`)
   }
 
   @autobind
-  handleItemDelete(item, index) {
-  }
+  handleItemDelete(item, index) {}
 
   @autobind
   handleMessageDismiss() {
@@ -145,7 +81,7 @@ export class WorkItemList extends React.Component {
   }
 
   render() {
-    const { messageModal } = this.state
+    const { listItems, messageModal } = this.state
 
     return (
       <View style={styles.container}>
@@ -160,9 +96,10 @@ export class WorkItemList extends React.Component {
             width: "100%",
             flexGrow: 1,
             paddingTop: 20,
-            paddingBottom: 20
+            paddingBottom: 20,
           }}
-          data={data}
+          data={listItems}
+          keyExtractor={(item) => (item._id)}
           renderItem={({ item, index }) => (
             <TouchableHighlight
               style={{
@@ -171,16 +108,21 @@ export class WorkItemList extends React.Component {
                 paddingRight: 20,
                 backgroundColor: "white",
               }}
-              underlayColor='#EEEEEE'
-              onPress={() => this.handleItemSelect(item, index)}
-            >
-              <View style={{ height: '100%', width: '100%', flexDirection: 'row'  }}>
-                <View style={{ flexGrow: 1, flexDirection: "column", justifyContent: 'center' }}>
+              underlayColor="#EEEEEE"
+              onPress={() => this.handleItemSelect(item, index)}>
+              <View
+                style={{ height: "100%", width: "100%", flexDirection: "row" }}>
+                <View
+                  style={{
+                    flexGrow: 1,
+                    flexDirection: "column",
+                    justifyContent: "center",
+                  }}>
                   <Text style={{ fontSize: 20 }}>
-                    {inspectionTypes[item.type].title}
+                    {workItemTypeText[item.workItemType]}
                   </Text>
                   <Text style={{ fontSize: 14, color: "gray" }}>
-                    {item.location}
+                    {`${item.address || "..."} | ??? mi`}
                   </Text>
                 </View>
                 <Icon
@@ -199,9 +141,14 @@ export class WorkItemList extends React.Component {
                 height: 50,
                 backgroundColor: "red",
               }}
-              onPress={() => this.handleItemDelete(item, index)}
-            >
-              <View style={{ flexDirection: 'column', justifyContent: 'center', backgroundColor: "red", width: 75 }}>
+              onPress={() => this.handleItemDelete(item, index)}>
+              <View
+                style={{
+                  flexDirection: "column",
+                  justifyContent: "center",
+                  backgroundColor: "red",
+                  width: 75,
+                }}>
                 <Text style={{ fontSize: 20, alignSelf: "center" }}>
                   Delete
                 </Text>
@@ -209,7 +156,7 @@ export class WorkItemList extends React.Component {
             </TouchableOpacity>
           )}
           rightOpenValue={-80}
-          stopLeftSwipe={100}
+          stopRightSwipe={-120}
           disableRightSwipe
         />
         <MessageModal