Added Header, Icon and MessageModal. Refactor screens into directories.

mobile/src/Home/Home.js

@@ -0,0 +1,131 @@
+import React from 'react'
+import { StyleSheet, Text, TextInput, FlatList, Image, View, TouchableOpacity } from 'react-native'
+import MapView, { Marker } from 'react-native-maps'
+import { Icon, Header } from '../ui'
+import { api } from '../API'
+import autobind from 'autobind-decorator'
+import pinImage from './images/pin.png'
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#FFFFFF',
+    alignItems: 'flex-start',
+    justifyContent: 'flex-start',
+  }
+})
+
+const data = [
+  {key: '1', title: 'Remove Animal Carcass', location: 'Ossington Ave. | 0.2 mi.', state: 'planned', latlng: { latitude: 43.653226, longitude: -79.383184 } },
+  {key: '2', title: 'Fix sign post', location: 'Alexandre St. | 0.7 mi.', state: 'open', latlng: { latitude: 43.648118, longitude: 79.392636 }},
+  {key: '3', title: 'Overflowing trash', location: 'Bay St. | 0.8 mi.', state: 'open', latlng: { latitude: 43.640168, longitude: -79.409373 }},
+  {key: '4', title: 'Leaking water pipe', location: 'Bloor St. | 1.2 mi.', state: 'planned', latlng: { latitude: 43.633110, longitude: -79.415880 }},
+  {key: '5', title: 'Tree branch in road', location: 'Blue Jays Way | 2.2 mi.', state: 'open', latlng: { latitude: 43.653526, longitude: -79.361385 }},
+  {key: '6', title: 'Washing machine on sidewalk', location: 'Christie St. | 3.0 mi.', state: 'open', latlng: { latitude: 43.663870, longitude: -79.383705 }},
+  {key: '7', title: 'Dead moose', location: 'Cummer Ave. | 4.2 mi.', state: 'open', latlng: { latitude: 43.659166, longitude: -79.391350 }},
+  {key: '8', title: 'Glass in street', location: 'Danforth Ave. | 4.7 mi.', state: 'open', latlng: { latitude: 43.663538, longitude: -79.423212 }},
+]
+
+export class Home extends React.Component {
+  constructor(props) {
+    super(props)
+  }
+
+  @autobind
+  _handleNavigatorEvent(event) {
+    switch (event.id) {
+      case 'logout':
+        api.logout().then(() => {
+          this.props.history.replace('/login')
+        })
+        break
+      case 'viewer':
+        this.props.push('/viewer')
+        break
+    }
+  }
+
+  @autobind
+  handleAdminButton() {
+    this.props.history.replace('/admin')
+  }
+
+  @autobind
+  handleItemSelect(item, index) {
+    this.props.history.replace('/activity')
+  }
+
+  @autobind
+  handleLogout() {
+    this.props.history.replace('/logout')
+  }
+
+  render() {
+    return (
+      <View style={styles.container}>
+        <Header title='Work Item Map' leftButton={{ icon: 'logout', onPress: this.handleLogout }} rightButton={{ icon: 'glasses' }} />
+        <MapView
+          style={{
+            width: '100%', height: '50%',
+          }}
+          zoomControlEnabled
+          initialRegion={{
+            latitude: 43.653908,
+            longitude: -79.384293,
+            latitudeDelta: 0.0922,
+            longitudeDelta: 0.0421,
+          }}>
+          {
+            data.map(marker => (
+              <Marker
+                key={marker.key}
+                coordinate={marker.latlng}
+                title={marker.title}
+                description={marker.location}
+                image={pinImage}
+                anchor={{x: 0.5, y: 1.0}} />
+            ))
+          }
+        </MapView>
+        <View style={{ flexDirection: 'row', alignItems: 'center', width: '100%', height: 40, backgroundColor: '#F4F4F4' }}>
+          <Icon name='search' size={16} style={{marginLeft: 10, marginRight: 5, tintColor: 'gray' }} />
+          <TextInput style={{ flexGrow: 1, height: '100%' }} placeholder='Search' />
+          <Icon name='cancel' size={16} style={{marginLeft: 5, marginRight: 10, tintColor: 'gray' }} />
+        </View>
+        <FlatList
+          style={{ width: '100%', flexGrow: 1 }}
+          data={data}
+          renderItem={({item, index}) => {
+            return (
+              <View style={{ flexDirection: 'row', height: 50 }}>
+                <Text style={{ fontSize: 8, width: 45, marginLeft: 5, alignSelf: 'center' }}>{item.state.toUpperCase()}</Text>
+                <View style={{ width: '75%', flexDirection: 'column' }}>
+                  <Text style={{ fontSize: 20 }}>{item.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>
+            )
+          }} />
+        <View style={{
+          flexDirection: 'row',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          width: '100%',
+          height: 45,
+          backgroundColor: '#F4F4F4',
+        }}>
+          <TouchableOpacity onPress={this._handleMyLocation}>
+            <Icon name='center' size={24} style={{ marginLeft: 15, tintColor: 'gray' }} />
+          </TouchableOpacity>
+          <Text style={{ color: 'gray', fontSize: 20, }}>Hide List</Text>
+          <TouchableOpacity onPress={this._handleAdminButton}>
+            <Icon name='settings' size={24} style={{ marginRight: 15, tintColor: 'gray' }} />
+          </TouchableOpacity>
+        </View>
+      </View>
+    );
+  }
+}

mobile/src/Home/index.js

@@ -0,0 +1 @@
+export { Home } from './Home'