HT8

MobileApp/src/components/app-navigator.js

@@ -4,6 +4,7 @@ import EventList from './screens/event-list'
 import PeopleList from './screens/people-list'
 import EventScreen from './screens/event'
 import EventMapScreen from './screens/event-map'
+import PhotoScreen from './screens/photo'
 
 const ListsNavigator = createBottomTabNavigator({
     events: {
@@ -24,5 +25,8 @@ export default createStackNavigator({
     },
     event: {
         screen: EventMapScreen
+    },
+    photo: {
+        screen: PhotoScreen
     }
 })

MobileApp/src/components/people/people-list.js

@@ -16,17 +16,19 @@ class PeopleList extends Component {
     }
 
     render() {
-        const {onPersonPress, people} = this.props
+        const {people} = this.props
         if (people.loading) return <ActivityIndicator size='large'/>
 
         return <SectionList
             sections = {people.sections}
             renderSectionHeader = {({section}) => <Text style={styles.header}>{section.title}</Text>}
-            renderItem = {({item}) => <TouchableOpacity onPress = {onPersonPress.bind(null, item.key)}>
+            renderItem = {({item}) => <TouchableOpacity onPress = {this.handlePersonPress(item.person)}>
                 <PersonCard person = {item.person} />
             </TouchableOpacity>}
         />
     }
+
+    handlePersonPress = (person) => () => this.props.onPersonPress(person)
 }
 
 const styles = StyleSheet.create({

MobileApp/src/components/people/person-card.js

@@ -8,10 +8,11 @@ class PersonCard extends Component {
     };
 
     render() {
-        const { email, firstName, lastName } = this.props.person
+        const { email, firstName, lastName, image } = this.props.person
+        const uri = image ? image : 'https://www.aramsco.com//ASSETS/IMAGES/ITEMS/DETAIL_PAGE/NoImage.png';
         return (
             <Card style = {styles.container}>
-                <Image source={{uri: 'http://lorempixel.com/200/100/people/'}} style = {styles.avatar}/>
+                <Image source={{uri}} style = {styles.avatar}/>
                 <View style = {styles.content}>
                     <Text style = {styles.email}>{email}</Text>
                     <Text>{firstName} {lastName}</Text>
@@ -27,8 +28,9 @@ const styles = StyleSheet.create({
     },
     avatar: {
         width: 200,
-        height: 100,
-        margin: 5
+        height: 200,
+        margin: 5,
+        alignSelf: 'center',
     },
     content: {
         flexDirection: 'column',

MobileApp/src/components/photo/photo.js

@@ -0,0 +1,79 @@
+import React from 'react';
+import { Text, View, TouchableOpacity } from 'react-native';
+import { Camera, Permissions } from 'expo';
+
+export default class Photo extends React.Component {
+  static defaultProps = {
+    onPhoto: () => {}
+  };
+
+  state = {
+    hasCameraPermission: null,
+    type: Camera.Constants.Type.back,
+  };
+
+  async componentWillMount() {
+    const { status } = await Permissions.askAsync(Permissions.CAMERA);
+    this.setState({ hasCameraPermission: status === 'granted' });
+  }
+
+  snap = async () => {
+    if (this.camera) {
+      let photo = await this.camera.takePictureAsync();
+      this.props.onSnap(photo)
+    }
+  };
+
+  render() {
+    const { hasCameraPermission } = this.state;
+    if (hasCameraPermission === null) {
+      return <View />;
+    } else if (hasCameraPermission === false) {
+      return <Text>No access to camera</Text>;
+    } else {
+      return (
+        <View style={{ flex: 1 }}>
+          <Camera style={{ flex: 1 }} type={this.state.type} ref={ref => { this.camera = ref; }}>
+            <View
+              style={{
+                flex: 1,
+                backgroundColor: 'transparent',
+                alignItems: 'center'
+              }}>
+              <TouchableOpacity
+                style={{
+                  justifyContent: 'flex-start',
+                }}
+                onPress={() => {
+                  this.setState({
+                    type: this.state.type === Camera.Constants.Type.back
+                      ? Camera.Constants.Type.front
+                      : Camera.Constants.Type.back,
+                  });
+                }}>
+                <Text
+                  style={{ fontSize: 18, marginBottom: 10, color: 'white' }}>
+                  {' '}Flip{' '}
+                </Text>
+              </TouchableOpacity>
+              <TouchableOpacity
+                style={{
+                  flex: 1,
+                  justifyContent: 'flex-end',
+                  alignSelf: 'center',
+                }}
+                onPress={() => {
+                  this.snap()
+                }}>
+                <Text
+                  style={{ fontSize: 18, marginBottom: 10, color: 'white' }}>
+                  {' '}SHOOT{' '}
+                </Text>
+              </TouchableOpacity>
+            </View>
+          </Camera>
+        </View>
+      );
+    }
+  }
+}

MobileApp/src/components/screens/people-list.js

@@ -3,7 +3,7 @@ import {observer, inject} from 'mobx-react'
 import {View, StyleSheet, ActivityIndicator} from 'react-native'
 import PeopleList from '../people/people-list'
 
-@inject('people') @observer
+@inject('people', 'navigation') @observer
 class PeopleListScreen extends Component {
     static propTypes = {
 
@@ -21,12 +21,16 @@ class PeopleListScreen extends Component {
     render() {
         const {people} = this.props
         if (people.loading) return this.getLoader()
-        return <PeopleList />
+        return <PeopleList onPersonPress={this.handlePersonPress}/>
     }
 
     getLoader() {
         return <View><ActivityIndicator size='large'/></View>
     }
+
+    handlePersonPress = ({uid}) => {
+      this.props.navigation.navigate('photo', { uid, type: 'people' })
+    }
 }
 
 const styles = StyleSheet.create({

MobileApp/src/components/screens/photo.js

@@ -0,0 +1,31 @@
+import React, { Component } from 'react'
+import {observer, inject} from 'mobx-react'
+import {View, ActivityIndicator} from 'react-native'
+
+import Photo from '../photo/photo'
+
+@inject('photo')
+@observer
+class PhotoScreen extends Component {
+  static propTypes = {
+
+  };
+
+  static navigationOptions = {
+    title: 'photo'
+  }
+
+  render() {
+    if(this.props.photo.loading) {
+      return <View><ActivityIndicator size='large'/></View>
+    }
+    return <Photo onSnap = {this.handleSnap}/>
+  }
+
+  handleSnap = ({uri}) => {
+    const {uid, type} = this.props.navigation.state.params
+    this.props.photo.loadPhoto(uri, type, uid)
+  }
+}
+
+export default PhotoScreen

MobileApp/src/stores/index.js

@@ -3,12 +3,14 @@ import AuthStore from './auth'
 import NavigationStore from './navigation'
 import PeopleStore from './people'
 import EventsStore from './events'
+import PhotoStore from './photo'
 
 const stores = {}
 
 stores.auth = new AuthStore(stores)
 stores.navigation = new NavigationStore(stores)
 stores.people = new PeopleStore(stores)
 stores.events = new EventsStore(stores)
+stores.photo = new PhotoStore(stores)
 
 export default stores

MobileApp/src/stores/navigation.js

@@ -33,6 +33,8 @@ class NavigationStore extends BasicStore {
         routeName
     }))
 
+    back = () => this.ref.dispatch(NavigationActions.back())
+
     reset = routeName => this.ref.dispatch(StackActions.reset({
         index: 0,
         actions: [

MobileApp/src/stores/people.js

@@ -13,6 +13,8 @@ class PeopleStore extends EntitiesStore {
     }
 
     @action loadAll = loadAllHelper('people')
+
+    @action updateImage = (key, data) => this.entities[key] = data
 }
 
 export default PeopleStore

MobileApp/src/stores/photo.js

@@ -0,0 +1,83 @@
+import {observable, action} from 'mobx'
+import firebase from 'firebase/app'
+import BasicStore from './basic-store'
+
+class PhotoStore extends BasicStore {
+    @observable loading = false
+
+    @action loadPhoto = async (uri, type, key) => {
+      this.loading = true
+
+      const store = this.getStore(type)
+      const entities = store.entities
+      const entity = entities[key];
+
+      if(!entity) {
+        return
+      }
+
+      const {uid, ...data} = entity
+
+      const file = await fetch(uri).then(response => response.blob())
+
+      const storageRef = firebase.storage().ref();
+
+      const metadata = {
+        contentType: 'image/jpeg'
+      };
+
+      const uploadTask = storageRef.child(`images/${type}/${file.data.name}`).put(file, metadata);
+
+      uploadTask.on(
+        firebase.storage.TaskEvent.STATE_CHANGED, // or 'state_changed'
+        (snapshot) => {
+          // Get task progress, including the number of bytes uploaded and the total number of bytes to be uploaded
+          const progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
+          console.log('Upload is ' + progress + '% done');
+          switch (snapshot.state) {
+            case firebase.storage.TaskState.PAUSED: // or 'paused'
+              console.log('Upload is paused');
+              break;
+            case firebase.storage.TaskState.RUNNING: // or 'running'
+              console.log('Upload is running');
+              break;
+          }
+        },
+        (error) => {
+          // A full list of error codes is available at
+          // https://firebase.google.com/docs/storage/web/handle-errors
+          switch (error.code) {
+            case 'storage/unauthorized':
+              // User doesn't have permission to access the object
+              console.error('User doesn\'t have permission to access the object')
+              break;
+
+            case 'storage/canceled':
+              // User canceled the upload
+              console.error('User canceled the upload')
+              break;
+            case 'storage/unknown':
+              // Unknown error occurred, inspect error.serverResponse
+              console.error('User canceled the upload')
+              break;
+          }
+        },
+        () => {
+          // Upload completed successfully, now we can get the download URL
+          uploadTask.snapshot.ref.getDownloadURL().then(action((downloadURL) => {
+            console.log('File available at', downloadURL);
+            firebase.database().ref(`${type}/${uid}`).set({
+              ...data,
+              image: downloadURL
+            });
+            store.updateImage(uid, { ...entity, image: downloadURL})
+
+            this.loading = false
+
+            this.getStore('navigation').back()
+          }));
+        });
+    }
+}
+
+export default PhotoStore