Work Item and Activity screens mostly complete

mobile/src/WorkItem/WorkItemList.js

@@ -1,5 +1,6 @@
 import React from 'react'
 import { StyleSheet, View, TouchableOpacity, Image, FlatList, Text} from 'react-native'
+import { Icon, Header } from '../ui'
 import autobind from 'autobind-decorator'
 
 const styles = StyleSheet.create({
@@ -37,35 +38,51 @@ const inspectionTypes = {
 export class WorkItemList extends React.Component {
   constructor(props) {
     super(props)
-    this._handleItemSelect = this._handleItemSelect.bind(this)
   }
 
   @autobind
-  _handleItemSelect(item, index) {
+  handleItemSelect(item, index) {
     this.props.history.push('/activity')
   }
 
+  @autobind
+  handleAddPress(item, index) {
+    this.props.history.push('/workitem')
+  }
+
+  @autobind
+  handleBackPress() {
+    const { history } = this.props
+
+    if (history.length > 1) {
+      history.goBack()
+    } else {
+      history.replace('/home')
+    }
+  }
+
   render() {
     return (
       <View style={styles.container}>
-      <FlatList
-        style={{ width: '100%', flexGrow: 1, paddingTop: 20, paddingBottom: 20 }}
-        data={data}
-        renderItem={({item, index}) => {
-          return (
-            <View style={{ flexDirection: 'row', height: 50 }}>
-              <Text style={{ fontSize: 8, width: 45, marginLeft: 15, alignSelf: 'center' }}>{item.state.toUpperCase()}</Text>
-              <View style={{ flexDirection: 'column', width: '75%' }}>
-                <Text style={{ fontSize: 20 }}>{Admin.inspectionTypes[item.type].title}</Text>
-                <Text style={{ fontSize: 14, color: 'gray' }}>{item.location}</Text>
+        <Header title='Work Items' leftButton={{ icon: 'back', onPress: this.handleBackPress }} rightButton={{ icon: 'add', onPress: this.handleAddPress }} />
+        <FlatList
+          style={{ width: '100%', flexGrow: 1, paddingTop: 20, paddingBottom: 20 }}
+          data={data}
+          renderItem={({item, index}) => {
+            return (
+              <View style={{ flexDirection: 'row', height: 50 }}>
+                <Text style={{ fontSize: 8, width: 45, marginLeft: 15, alignSelf: 'center' }}>{item.state.toUpperCase()}</Text>
+                <View style={{ flexDirection: 'column', width: '75%' }}>
+                  <Text style={{ fontSize: 20 }}>{inspectionTypes[item.type].title}</Text>
+                  <Text style={{ fontSize: 14, color: 'gray' }}>{item.location}</Text>
+                </View>
+                <TouchableOpacity style={{ alignSelf: 'center' }} onPress={() => (this._handleItemSelect(item, index))} >
+                  <Icon name='rightArrow' size={16} />
+                </TouchableOpacity>
               </View>
-              <TouchableOpacity style={{ alignSelf: 'center' }} onPress={() => (this._handleItemSelect(item, index))} >
-                <Image source={rightArrowImage} style={{ width: 16, height: 16 }} />
-              </TouchableOpacity>
-            </View>
-          )
-        }} />
+            )
+          }} />
       </View>
-    );
+    )
   }
 }