From 24a26bb6d2785b3e0390c80ef08a2e7bcc92f9dc Mon Sep 17 00:00:00 2001
From: omiceron <omiceron@gmail.com>
Date: Fri, 15 Jun 2018 18:18:01 +0500
Subject: [PATCH 1/7] HT8: improper Camera

---
 MobileApp/package.json                    | 2 +-
 MobileApp/src/components/app-navigator.js | 4 ++++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/MobileApp/package.json b/MobileApp/package.json
index cf64248..ba560c3 100644
--- a/MobileApp/package.json
+++ b/MobileApp/package.json
@@ -27,6 +27,6 @@
     "react": "16.3.1",
     "react-native": "~0.55.2",
     "react-native-communications": "^2.2.1",
-    "react-navigation": "^2.2.5"
+    "react-navigation": "^2.3.1"
   }
 }
diff --git a/MobileApp/src/components/app-navigator.js b/MobileApp/src/components/app-navigator.js
index 976330b..5b2ca70 100644
--- a/MobileApp/src/components/app-navigator.js
+++ b/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 CameraScreen from "./screens/camera";
 
 const ListsNavigator = createBottomTabNavigator({
     events: {
@@ -11,6 +12,9 @@ const ListsNavigator = createBottomTabNavigator({
     },
     people: {
         screen: PeopleList
+    },
+    camera: {
+        screen: CameraScreen
     }
 })
 

From 9bac49aec57d6186b110e87e42a8a1867b7e1f8f Mon Sep 17 00:00:00 2001
From: omiceron <omiceron@gmail.com>
Date: Fri, 15 Jun 2018 18:18:33 +0500
Subject: [PATCH 2/7] HT8: improper Camera

---
 MobileApp/src/components/screens/camera.js | 56 ++++++++++++++++++++++
 1 file changed, 56 insertions(+)
 create mode 100644 MobileApp/src/components/screens/camera.js

diff --git a/MobileApp/src/components/screens/camera.js b/MobileApp/src/components/screens/camera.js
new file mode 100644
index 0000000..c50aaf5
--- /dev/null
+++ b/MobileApp/src/components/screens/camera.js
@@ -0,0 +1,56 @@
+import React from 'react';
+import { Text, View, TouchableOpacity } from 'react-native';
+import { Camera, Permissions } from 'expo';
+
+export default class CameraScreen extends React.Component {
+  state = {
+    hasCameraPermission: null,
+    type: Camera.Constants.Type.back,
+  };
+
+  async componentWillMount() {
+    const { status } = await Permissions.askAsync(Permissions.CAMERA);
+    this.setState({ hasCameraPermission: status === 'granted' });
+  }
+
+  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}>
+            <View
+              style={{
+                flex: 1,
+                backgroundColor: 'transparent',
+                flexDirection: 'row',
+              }}>
+              <TouchableOpacity
+                style={{
+                  flex: 0.1,
+                  alignSelf: 'flex-end',
+                  alignItems: 'center',
+                }}
+                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>
+            </View>
+          </Camera>
+        </View>
+      );
+    }
+  }
+}
\ No newline at end of file

From 02f9a6ac15014738bf9d40794628d7a0ed693ff8 Mon Sep 17 00:00:00 2001
From: omiceron <omiceron@gmail.com>
Date: Sat, 16 Jun 2018 20:05:37 +0500
Subject: [PATCH 3/7] HT8: Camera in navigation, Person Screen and Make Photo
 button

---
 MobileApp/src/components/app-navigator.js     | 53 +++++++------
 .../src/components/people/people-list.js      |  5 +-
 MobileApp/src/components/people/person.js     | 76 +++++++++++++++++++
 MobileApp/src/components/screens/camera.js    | 57 +++++++++++---
 .../src/components/screens/people-list.js     |  6 +-
 MobileApp/src/components/screens/person.js    | 25 ++++++
 6 files changed, 186 insertions(+), 36 deletions(-)
 create mode 100644 MobileApp/src/components/people/person.js
 create mode 100644 MobileApp/src/components/screens/person.js

diff --git a/MobileApp/src/components/app-navigator.js b/MobileApp/src/components/app-navigator.js
index 5b2ca70..8bc8e34 100644
--- a/MobileApp/src/components/app-navigator.js
+++ b/MobileApp/src/components/app-navigator.js
@@ -2,37 +2,44 @@ import {createStackNavigator, createBottomTabNavigator} from 'react-navigation'
 import AuthScreen from './screens/auth'
 import EventList from './screens/event-list'
 import PeopleList from './screens/people-list'
+import PersonScreen from './screens/person'
 import EventScreen from './screens/event'
 import EventMapScreen from './screens/event-map'
 import CameraScreen from "./screens/camera";
 
 const ListsNavigator = createBottomTabNavigator({
-    events: {
-        screen: EventList
-    },
-    people: {
-        screen: PeopleList
-    },
-    camera: {
-        screen: CameraScreen
-    }
+  events: {
+    screen: EventList
+  },
+  people: {
+    screen: PeopleList
+  },
+/*  camera: {
+    screen: CameraScreen
+  }*/
 })
 
 
 export default createStackNavigator({
-    auth: {
-        screen: AuthScreen,
-        navigationOptions: {
-            title: 'Auth'
-        }
-    },
-    lists: {
-        screen: ListsNavigator,
-        navigationOptions: {
-            title: 'Lists'
-        }
-    },
-    event: {
-        screen: EventMapScreen
+  auth: {
+    screen: AuthScreen,
+    navigationOptions: {
+      title: 'Auth'
+    }
+  },
+  lists: {
+    screen: ListsNavigator,
+    navigationOptions: {
+      title: 'Lists'
     }
+  },
+  event: {
+    screen: EventMapScreen
+  },
+  person: {
+    screen: PersonScreen
+  },
+  camera: {
+    screen: CameraScreen
+  }
 })
\ No newline at end of file
diff --git a/MobileApp/src/components/people/people-list.js b/MobileApp/src/components/people/people-list.js
index e90c07a..08da6e5 100644
--- a/MobileApp/src/components/people/people-list.js
+++ b/MobileApp/src/components/people/people-list.js
@@ -7,7 +7,7 @@ import PersonCard from './person-card'
 @observer
 class PeopleList extends Component {
     static defaultProps = {
-        onPersonPress: () => {}
+      onPersonPress: () => {}
     };
 
     componentDidMount() {
@@ -22,7 +22,8 @@ class PeopleList extends Component {
         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 = {() => onPersonPress(item.person)}>
                 <PersonCard person = {item.person} />
             </TouchableOpacity>}
         />
diff --git a/MobileApp/src/components/people/person.js b/MobileApp/src/components/people/person.js
new file mode 100644
index 0000000..d5d3f31
--- /dev/null
+++ b/MobileApp/src/components/people/person.js
@@ -0,0 +1,76 @@
+import React, { Component } from 'react'
+import {View, Text, Image, StyleSheet, Button, TouchableOpacity} from 'react-native'
+import ConfirmModal from '../common/confirm-modal'
+import {web} from 'react-native-communications'
+import {observer, inject} from 'mobx-react'
+
+
+class Person extends Component {
+    static propTypes = {
+
+    };
+
+    state = {
+        confirmModal: false
+    }
+
+    render() {
+        const {makePhoto, person} = this.props
+          // console.log(this.props.navigation)
+        return (
+            <View style = {styles.container}>
+                <Text style = {[styles.text, styles.header]}>{person.email}</Text>
+                <Button title = 'Make photo' onPress = {makePhoto}/>
+            </View>
+        )
+    }
+
+
+    openPage = () => {
+        web(this.props.person.url)
+    }
+
+    handleDelete = () => {
+        this.setState({
+            confirmModal: true
+        })
+    }
+
+    confirmDelete = () => this.setState({ confirmModal: false })
+    cancelDelete = () => this.setState({ confirmModal: false })
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        justifyContent: 'space-around',
+        alignItems: 'center',
+    },
+    header: {
+        backgroundColor: '#F2F2F2',
+        shadowColor: '#000',
+        shadowOpacity: 0.8,
+        shadowOffset: {
+            height: 2,
+            width: 0
+        },
+        elevation: 5
+    },
+    text: {
+        width: '100%',
+        height: 100,
+        marginBottom: 20,
+        textAlign: 'center'
+    },
+    image: {
+        width: 200,
+        height: 100
+    },
+    button: {
+        width: '100%',
+        height: 100,
+        marginBottom: 30
+    }
+})
+
+export default Person
\ No newline at end of file
diff --git a/MobileApp/src/components/screens/camera.js b/MobileApp/src/components/screens/camera.js
index c50aaf5..a571cbb 100644
--- a/MobileApp/src/components/screens/camera.js
+++ b/MobileApp/src/components/screens/camera.js
@@ -1,6 +1,6 @@
 import React from 'react';
-import { Text, View, TouchableOpacity } from 'react-native';
-import { Camera, Permissions } from 'expo';
+import {Text, View, TouchableOpacity} from 'react-native';
+import {Camera, Permissions} from 'expo';
 
 export default class CameraScreen extends React.Component {
   state = {
@@ -8,21 +8,28 @@ export default class CameraScreen extends React.Component {
     type: Camera.Constants.Type.back,
   };
 
+  static navigationOptions = {
+    title: 'camera'
+  }
+
   async componentWillMount() {
-    const { status } = await Permissions.askAsync(Permissions.CAMERA);
-    this.setState({ hasCameraPermission: status === 'granted' });
+    const {status} = await Permissions.askAsync(Permissions.CAMERA);
+    this.setState({hasCameraPermission: status === 'granted'});
   }
 
   render() {
-    const { hasCameraPermission } = this.state;
+    const {hasCameraPermission} = this.state;
     if (hasCameraPermission === null) {
-      return <View />;
+      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}>
+        <View style={{flex: 1}}>
+          <Camera style={{flex: 1}} type={this.state.type}
+                  ref={ref => {
+                    this.camera = ref;
+                  }}>
             <View
               style={{
                 flex: 1,
@@ -31,7 +38,7 @@ export default class CameraScreen extends React.Component {
               }}>
               <TouchableOpacity
                 style={{
-                  flex: 0.1,
+                  flex: 1,
                   alignSelf: 'flex-end',
                   alignItems: 'center',
                 }}
@@ -43,14 +50,44 @@ export default class CameraScreen extends React.Component {
                   });
                 }}>
                 <Text
-                  style={{ fontSize: 18, marginBottom: 10, color: 'white' }}>
+                  style={{fontSize: 18, marginBottom: 10, color: 'white'}}>
                   {' '}Flip{' '}
                 </Text>
               </TouchableOpacity>
+              <TouchableOpacity
+                onPress={this.snap}
+                style={{
+                  flex: 1,
+                  alignSelf: 'flex-end',
+                  alignItems: 'center',
+                }}>
+                <Text
+                  style={{fontSize: 18, marginBottom: 10, color: 'white'}}>
+                  {' '}Snapshot{' '}
+                </Text>
+              </TouchableOpacity>
+              <Text
+                style={{
+                  flex: 1,
+                  alignSelf: 'flex-end',
+                  alignItems: 'center',
+                  fontSize: 18, marginBottom: 10, color: 'white'
+                }}>
+                {this.text}
+              </Text>
             </View>
           </Camera>
         </View>
       );
+
     }
   }
+
+  snap = async () => {
+    if (this.camera) {
+      let photo = await this.camera.takePictureAsync();
+      console.log(photo)
+      this.text = photo.height || ''
+    }
+  };
 }
\ No newline at end of file
diff --git a/MobileApp/src/components/screens/people-list.js b/MobileApp/src/components/screens/people-list.js
index cea8fa0..2e302c4 100644
--- a/MobileApp/src/components/screens/people-list.js
+++ b/MobileApp/src/components/screens/people-list.js
@@ -22,12 +22,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('person', { uid })
+  }
 }
 
 const styles = StyleSheet.create({
diff --git a/MobileApp/src/components/screens/person.js b/MobileApp/src/components/screens/person.js
new file mode 100644
index 0000000..3008b67
--- /dev/null
+++ b/MobileApp/src/components/screens/person.js
@@ -0,0 +1,25 @@
+import React, { Component } from 'react'
+import {inject, observer} from 'mobx-react'
+import Person from '../people/person'
+
+@inject('people') @observer
+class PersonScreen extends Component {
+  static propTypes = {
+
+  };
+
+  static navigationOptions = {
+    title: 'person'
+  }
+
+  render() {
+    console.log(this.props.navigation)
+    return <Person person = {this.props.people.entities[this.props.navigation.state.params.uid]} makePhoto = {this.makePhoto}/>
+  }
+
+  makePhoto = () => {
+    this.props.navigation.navigate('camera')
+  }
+}
+
+export default PersonScreen
\ No newline at end of file

From cc5b4f8124e6d360aa0def824b0690c7ca9057f6 Mon Sep 17 00:00:00 2001
From: omiceron <omiceron@gmail.com>
Date: Sun, 17 Jun 2018 10:45:12 +0500
Subject: [PATCH 4/7] HT8: Uploading snapshot to Firebase function implemented

---
 MobileApp/src/components/app-navigator.js     |  7 ++-
 .../src/components/people/person-card.js      |  2 +-
 MobileApp/src/components/people/person.js     |  1 +
 MobileApp/src/components/screens/camera.js    | 59 ++++++++++++++-----
 MobileApp/src/components/screens/person.js    |  1 -
 MobileApp/src/config.js                       |  9 +--
 MobileApp/src/stores/entities-store.js        |  1 -
 MobileApp/src/stores/navigation.js            |  1 -
 8 files changed, 55 insertions(+), 26 deletions(-)

diff --git a/MobileApp/src/components/app-navigator.js b/MobileApp/src/components/app-navigator.js
index 8bc8e34..fec4e8f 100644
--- a/MobileApp/src/components/app-navigator.js
+++ b/MobileApp/src/components/app-navigator.js
@@ -15,7 +15,7 @@ const ListsNavigator = createBottomTabNavigator({
     screen: PeopleList
   },
 /*  camera: {
-    screen: CameraScreen
+    screen: CameraScreen,
   }*/
 })
 
@@ -40,6 +40,7 @@ export default createStackNavigator({
     screen: PersonScreen
   },
   camera: {
-    screen: CameraScreen
-  }
+    screen: CameraScreen,
+
+  },
 })
\ No newline at end of file
diff --git a/MobileApp/src/components/people/person-card.js b/MobileApp/src/components/people/person-card.js
index 1c6bac7..573a74f 100644
--- a/MobileApp/src/components/people/person-card.js
+++ b/MobileApp/src/components/people/person-card.js
@@ -11,7 +11,7 @@ class PersonCard extends Component {
         const { email, firstName, lastName } = this.props.person
         return (
             <Card style = {styles.container}>
-                <Image source={{uri: 'http://lorempixel.com/200/100/people/'}} style = {styles.avatar}/>
+                <Image source={{uri: 'https://picsum.photos/200/100/?random'}} style = {styles.avatar}/>
                 <View style = {styles.content}>
                     <Text style = {styles.email}>{email}</Text>
                     <Text>{firstName} {lastName}</Text>
diff --git a/MobileApp/src/components/people/person.js b/MobileApp/src/components/people/person.js
index d5d3f31..7ffff41 100644
--- a/MobileApp/src/components/people/person.js
+++ b/MobileApp/src/components/people/person.js
@@ -73,4 +73,5 @@ const styles = StyleSheet.create({
     }
 })
 
+
 export default Person
\ No newline at end of file
diff --git a/MobileApp/src/components/screens/camera.js b/MobileApp/src/components/screens/camera.js
index a571cbb..56fb3c8 100644
--- a/MobileApp/src/components/screens/camera.js
+++ b/MobileApp/src/components/screens/camera.js
@@ -1,6 +1,8 @@
 import React from 'react';
-import {Text, View, TouchableOpacity} from 'react-native';
+import {Text, View, TouchableOpacity, StatusBar} from 'react-native';
 import {Camera, Permissions} from 'expo';
+import firebase from 'firebase/app'
+
 
 export default class CameraScreen extends React.Component {
   state = {
@@ -9,7 +11,9 @@ export default class CameraScreen extends React.Component {
   };
 
   static navigationOptions = {
-    title: 'camera'
+    tabBarVisible: false,
+    header: null,
+    title: null
   }
 
   async componentWillMount() {
@@ -26,6 +30,9 @@ export default class CameraScreen extends React.Component {
     } else {
       return (
         <View style={{flex: 1}}>
+          <StatusBar
+            hidden
+          />
           <Camera style={{flex: 1}} type={this.state.type}
                   ref={ref => {
                     this.camera = ref;
@@ -37,23 +44,18 @@ export default class CameraScreen extends React.Component {
                 flexDirection: 'row',
               }}>
               <TouchableOpacity
+                onPress={() => this.props.navigation.goBack()}
                 style={{
                   flex: 1,
                   alignSelf: 'flex-end',
                   alignItems: 'center',
-                }}
-                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{' '}
+                  {' '}Cancel{' '}
                 </Text>
               </TouchableOpacity>
+
               <TouchableOpacity
                 onPress={this.snap}
                 style={{
@@ -66,7 +68,27 @@ export default class CameraScreen extends React.Component {
                   {' '}Snapshot{' '}
                 </Text>
               </TouchableOpacity>
-              <Text
+
+              <TouchableOpacity
+                style={{
+                  flex: 1,
+                  alignSelf: 'flex-end',
+                  alignItems: 'center',
+                }}
+                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>
+
+{/*              <Text
                 style={{
                   flex: 1,
                   alignSelf: 'flex-end',
@@ -74,7 +96,7 @@ export default class CameraScreen extends React.Component {
                   fontSize: 18, marginBottom: 10, color: 'white'
                 }}>
                 {this.text}
-              </Text>
+              </Text>*/}
             </View>
           </Camera>
         </View>
@@ -85,9 +107,16 @@ export default class CameraScreen extends React.Component {
 
   snap = async () => {
     if (this.camera) {
-      let photo = await this.camera.takePictureAsync();
-      console.log(photo)
-      this.text = photo.height || ''
+      const photo = await this.camera.takePictureAsync();
+      const avatar = firebase.storage().ref(photo.uri.replace(/.*\//ig, ''));
+      const file = await fetch(photo.uri)
+        .then(res => res.blob())
+
+      avatar.put(file).then(function(snapshot) {
+        console.log('Uploaded a blob or file!');
+      });
+
+      this.props.navigation.goBack()
     }
   };
 }
\ No newline at end of file
diff --git a/MobileApp/src/components/screens/person.js b/MobileApp/src/components/screens/person.js
index 3008b67..8988fb2 100644
--- a/MobileApp/src/components/screens/person.js
+++ b/MobileApp/src/components/screens/person.js
@@ -13,7 +13,6 @@ class PersonScreen extends Component {
   }
 
   render() {
-    console.log(this.props.navigation)
     return <Person person = {this.props.people.entities[this.props.navigation.state.params.uid]} makePhoto = {this.makePhoto}/>
   }
 
diff --git a/MobileApp/src/config.js b/MobileApp/src/config.js
index aa22b3b..3dc0964 100644
--- a/MobileApp/src/config.js
+++ b/MobileApp/src/config.js
@@ -1,16 +1,17 @@
 import firebase from 'firebase/app'
 import 'firebase/auth'
 import 'firebase/database'
+import 'firebase/storage'
 
-export const appName = 'advreact-10-05'
+export const appName = 'advancedreactcourse'
 
 export const config = {
-  apiKey: 'AIzaSyCbMQM0eQUSQ0SuLVAu9ZNPUcm4rdbiB8U',
+  apiKey: 'AIzaSyCCtMGA9FTNVds_QTkB1oRTlqF2u07MHuk',
   authDomain: `${appName}.firebaseapp.com`,
   databaseURL: `https://${appName}.firebaseio.com`,
   projectId: appName,
-  storageBucket: '',
-  messagingSenderId: '1094825197832'
+  storageBucket: `${appName}.appspot.com`,
+  messagingSenderId: '649150663252'
 }
 
 firebase.initializeApp(config)
diff --git a/MobileApp/src/stores/entities-store.js b/MobileApp/src/stores/entities-store.js
index c7d100d..f336da4 100644
--- a/MobileApp/src/stores/entities-store.js
+++ b/MobileApp/src/stores/entities-store.js
@@ -21,7 +21,6 @@ class EntitiesStore extends BasicStore {
 export function loadAllHelper(refName) {
     return action(function () {
         this.loading = true
-
         firebase.database().ref(refName)
             .once('value', action(data => {
                 this.entities = entitiesFromFB(data.val())
diff --git a/MobileApp/src/stores/navigation.js b/MobileApp/src/stores/navigation.js
index e85a376..21d0cdb 100644
--- a/MobileApp/src/stores/navigation.js
+++ b/MobileApp/src/stores/navigation.js
@@ -8,7 +8,6 @@ export default class NavigationStore extends BasicStore {
             const {user} = this.getStore('auth')
 
             this.reset(user ? 'lists' : 'auth')
-            console.log('---', 'user: ', user)
         })
     }
 

From 84245d746a23ff254e44bfa9207401127082d919 Mon Sep 17 00:00:00 2001
From: omiceron <omiceron@gmail.com>
Date: Sun, 17 Jun 2018 16:57:49 +0500
Subject: [PATCH 5/7] HT8: Avatar Filename in personRef and Avatar URL Decoding
 in personCard

---
 .../src/components/people/person-card.js      | 80 +++++++++++--------
 MobileApp/src/components/people/person.js     |  2 +-
 MobileApp/src/components/screens/camera.js    | 14 +++-
 MobileApp/src/components/screens/person.js    |  4 +-
 4 files changed, 62 insertions(+), 38 deletions(-)

diff --git a/MobileApp/src/components/people/person-card.js b/MobileApp/src/components/people/person-card.js
index 573a74f..5436e04 100644
--- a/MobileApp/src/components/people/person-card.js
+++ b/MobileApp/src/components/people/person-card.js
@@ -1,43 +1,57 @@
-import React, { Component } from 'react'
+import React, {Component} from 'react'
 import {View, Text, Image, StyleSheet} from 'react-native'
 import Card from '../common/card'
+import firebase from 'firebase/app'
 
 class PersonCard extends Component {
-    static propTypes = {
-
-    };
-
-    render() {
-        const { email, firstName, lastName } = this.props.person
-        return (
-            <Card style = {styles.container}>
-                <Image source={{uri: 'https://picsum.photos/200/100/?random'}} style = {styles.avatar}/>
-                <View style = {styles.content}>
-                    <Text style = {styles.email}>{email}</Text>
-                    <Text>{firstName} {lastName}</Text>
-                </View>
-            </Card>
-        )
-    }
+  static propTypes = {};
+
+
+  componentDidMount() {
+    this.getAvatar(this.props.person)
+  }
+
+  render() {
+    const {email, firstName, lastName, avatar, uid} = this.props.person
+    return (
+      <Card style={styles.container}>
+        <Image source={{uri: 'https://picsum.photos/200/100/?random'}} style={styles.avatar}/>
+        <View style={styles.content}>
+          <Text style={styles.email}>{email}</Text>
+          <Text>{firstName} {lastName}</Text>
+        </View>
+      </Card>
+    )
+  }
+
+  getAvatar = ({uid, avatar}) => {
+    if (!avatar) return
+
+    firebase.storage()
+      .refFromURL(`gs://advancedreactcourse.appspot.com/avatars/${uid}/${avatar}`)
+      .getDownloadURL()
+      .then(console.log);
+
+  }
 }
 
 const styles = StyleSheet.create({
-    container: {
-        flexDirection: 'row'
-    },
-    avatar: {
-        width: 200,
-        height: 100,
-        margin: 5
-    },
-    content: {
-        flexDirection: 'column',
-        justifyContent: 'space-around',
-        alignItems: 'center'
-    },
-    email: {
-        fontWeight: 'bold'
-    }
+  container: {
+    flexDirection: 'row'
+  },
+  avatar: {
+    width: 200,
+    height: 100,
+    margin: 5
+  },
+  content: {
+    flexDirection: 'column',
+    justifyContent: 'space-around',
+    alignItems: 'center'
+  },
+  email: {
+    fontWeight: 'bold'
+  }
 })
 
 export default PersonCard
\ No newline at end of file
diff --git a/MobileApp/src/components/people/person.js b/MobileApp/src/components/people/person.js
index 7ffff41..6034e1d 100644
--- a/MobileApp/src/components/people/person.js
+++ b/MobileApp/src/components/people/person.js
@@ -20,7 +20,7 @@ class Person extends Component {
         return (
             <View style = {styles.container}>
                 <Text style = {[styles.text, styles.header]}>{person.email}</Text>
-                <Button title = 'Make photo' onPress = {makePhoto}/>
+                <Button title = 'Make photo' onPress = {() => makePhoto(person)}/>
             </View>
         )
     }
diff --git a/MobileApp/src/components/screens/camera.js b/MobileApp/src/components/screens/camera.js
index 56fb3c8..55c4def 100644
--- a/MobileApp/src/components/screens/camera.js
+++ b/MobileApp/src/components/screens/camera.js
@@ -7,7 +7,7 @@ import firebase from 'firebase/app'
 export default class CameraScreen extends React.Component {
   state = {
     hasCameraPermission: null,
-    type: Camera.Constants.Type.back,
+    type: Camera.Constants.Type.front,
   };
 
   static navigationOptions = {
@@ -108,10 +108,20 @@ export default class CameraScreen extends React.Component {
   snap = async () => {
     if (this.camera) {
       const photo = await this.camera.takePictureAsync();
-      const avatar = firebase.storage().ref(photo.uri.replace(/.*\//ig, ''));
+      const { uid } = this.props.navigation.state.params
+      const fileName = photo.uri.replace(/.*\//ig, '')
+      const avatar = firebase
+        .storage()
+        .ref(`/avatars/${uid}`)
+        .child(fileName);
+
       const file = await fetch(photo.uri)
         .then(res => res.blob())
 
+      firebase.database().ref('people/' + uid).update({
+        avatar: fileName
+      });
+
       avatar.put(file).then(function(snapshot) {
         console.log('Uploaded a blob or file!');
       });
diff --git a/MobileApp/src/components/screens/person.js b/MobileApp/src/components/screens/person.js
index 8988fb2..77a48ee 100644
--- a/MobileApp/src/components/screens/person.js
+++ b/MobileApp/src/components/screens/person.js
@@ -16,8 +16,8 @@ class PersonScreen extends Component {
     return <Person person = {this.props.people.entities[this.props.navigation.state.params.uid]} makePhoto = {this.makePhoto}/>
   }
 
-  makePhoto = () => {
-    this.props.navigation.navigate('camera')
+  makePhoto = ({uid}) => {
+    this.props.navigation.navigate('camera', { uid })
   }
 }
 

From e9a0863056556f525a99257b859db5c014c5a3f4 Mon Sep 17 00:00:00 2001
From: omiceron <omiceron@gmail.com>
Date: Sun, 17 Jun 2018 18:52:56 +0500
Subject: [PATCH 6/7] HT8: Avatar implemented

---
 .../src/components/people/person-card.js      | 55 ++++++++++++++-----
 1 file changed, 41 insertions(+), 14 deletions(-)

diff --git a/MobileApp/src/components/people/person-card.js b/MobileApp/src/components/people/person-card.js
index 5436e04..a35e046 100644
--- a/MobileApp/src/components/people/person-card.js
+++ b/MobileApp/src/components/people/person-card.js
@@ -1,21 +1,36 @@
 import React, {Component} from 'react'
-import {View, Text, Image, StyleSheet} from 'react-native'
+import {View, Text, Image, StyleSheet, ActivityIndicator} from 'react-native'
 import Card from '../common/card'
 import firebase from 'firebase/app'
+import {config} from '../../config'
+import {observable, action} from 'mobx'
+import {observer} from 'mobx-react'
 
+@observer
 class PersonCard extends Component {
   static propTypes = {};
 
+  @observable loading = false
+  @observable loaded = false
+  @observable avatarURL = null
 
-  componentDidMount() {
-    this.getAvatar(this.props.person)
+  async componentDidMount() {
+    this.setLoading(true)
+    await this.getAvatar(this.props.person)
   }
 
+  @action setAvatar = (url) => this.avatarURL = url
+  @action setLoading = loading => this.loading = loading
+  @action setLoaded = loaded => this.loaded = loaded
+
   render() {
-    const {email, firstName, lastName, avatar, uid} = this.props.person
+    const {email, firstName, lastName} = this.props.person
+    const avatar = <Image source={{uri: this.avatarURL}} style={styles.avatar}/>
+    const loader = <View style={styles.avatar}><ActivityIndicator size="large"/></View>
+
     return (
       <Card style={styles.container}>
-        <Image source={{uri: 'https://picsum.photos/200/100/?random'}} style={styles.avatar}/>
+          {this.loading || !this.loaded || !this.avatarURL ? loader : avatar}
         <View style={styles.content}>
           <Text style={styles.email}>{email}</Text>
           <Text>{firstName} {lastName}</Text>
@@ -24,34 +39,46 @@ class PersonCard extends Component {
     )
   }
 
-  getAvatar = ({uid, avatar}) => {
-    if (!avatar) return
+  getAvatar = async ({uid, avatar}) => {
+    if (!avatar) {
+      await this.setAvatar('https://picsum.photos/200/100/?random')
+    } else {
+      await firebase.storage()
+        .refFromURL(`gs://${config.storageBucket}/avatars/${uid}/${avatar}`)
+        .getDownloadURL()
+        .then(url => this.setAvatar(url))
+    }
 
-    firebase.storage()
-      .refFromURL(`gs://advancedreactcourse.appspot.com/avatars/${uid}/${avatar}`)
-      .getDownloadURL()
-      .then(console.log);
+    this.setLoading(false)
+    this.setLoaded(true)
 
   }
 }
 
+
 const styles = StyleSheet.create({
   container: {
-    flexDirection: 'row'
+    flexDirection: 'row',
+    flex: 1,
+    justifyContent: 'space-around',
   },
   avatar: {
     width: 200,
     height: 100,
-    margin: 5
+    margin: 5,
+    justifyContent: 'center',
+
   },
   content: {
     flexDirection: 'column',
     justifyContent: 'space-around',
-    alignItems: 'center'
+    alignItems: 'center',
+
   },
   email: {
     fontWeight: 'bold'
   }
 })
 
+
 export default PersonCard
\ No newline at end of file

From 459e571c80c9d7b2f2d7e38e9e93611b552f841d Mon Sep 17 00:00:00 2001
From: omiceron <omiceron@gmail.com>
Date: Mon, 18 Jun 2018 10:29:16 +0500
Subject: [PATCH 7/7] HT8: Refactor

---
 .../src/components/people/person-card.js      |  7 +--
 MobileApp/src/components/screens/camera.js    | 22 ++-----
 MobileApp/src/stores/entities-store.js        | 59 +++++++++++++------
 MobileApp/src/stores/people.js                | 50 ++++++++++++----
 4 files changed, 90 insertions(+), 48 deletions(-)

diff --git a/MobileApp/src/components/people/person-card.js b/MobileApp/src/components/people/person-card.js
index a35e046..1103815 100644
--- a/MobileApp/src/components/people/person-card.js
+++ b/MobileApp/src/components/people/person-card.js
@@ -4,8 +4,9 @@ import Card from '../common/card'
 import firebase from 'firebase/app'
 import {config} from '../../config'
 import {observable, action} from 'mobx'
-import {observer} from 'mobx-react'
+import { observer, inject } from 'mobx-react'
 
+@inject('people')
 @observer
 class PersonCard extends Component {
   static propTypes = {};
@@ -27,7 +28,6 @@ class PersonCard extends Component {
     const {email, firstName, lastName} = this.props.person
     const avatar = <Image source={{uri: this.avatarURL}} style={styles.avatar}/>
     const loader = <View style={styles.avatar}><ActivityIndicator size="large"/></View>
-
     return (
       <Card style={styles.container}>
           {this.loading || !this.loaded || !this.avatarURL ? loader : avatar}
@@ -38,8 +38,8 @@ class PersonCard extends Component {
       </Card>
     )
   }
+  async getAvatar({uid, avatar}) {
 
-  getAvatar = async ({uid, avatar}) => {
     if (!avatar) {
       await this.setAvatar('https://picsum.photos/200/100/?random')
     } else {
@@ -55,7 +55,6 @@ class PersonCard extends Component {
   }
 }
 
-
 const styles = StyleSheet.create({
   container: {
     flexDirection: 'row',
diff --git a/MobileApp/src/components/screens/camera.js b/MobileApp/src/components/screens/camera.js
index 55c4def..7e22e42 100644
--- a/MobileApp/src/components/screens/camera.js
+++ b/MobileApp/src/components/screens/camera.js
@@ -2,8 +2,12 @@ import React from 'react';
 import {Text, View, TouchableOpacity, StatusBar} from 'react-native';
 import {Camera, Permissions} from 'expo';
 import firebase from 'firebase/app'
+import { observable, action } from 'mobx'
+import { observer, inject } from 'mobx-react'
 
 
+@inject('people')
+@observer
 export default class CameraScreen extends React.Component {
   state = {
     hasCameraPermission: null,
@@ -109,23 +113,7 @@ export default class CameraScreen extends React.Component {
     if (this.camera) {
       const photo = await this.camera.takePictureAsync();
       const { uid } = this.props.navigation.state.params
-      const fileName = photo.uri.replace(/.*\//ig, '')
-      const avatar = firebase
-        .storage()
-        .ref(`/avatars/${uid}`)
-        .child(fileName);
-
-      const file = await fetch(photo.uri)
-        .then(res => res.blob())
-
-      firebase.database().ref('people/' + uid).update({
-        avatar: fileName
-      });
-
-      avatar.put(file).then(function(snapshot) {
-        console.log('Uploaded a blob or file!');
-      });
-
+      this.props.people.saveAvatar(uid, photo)
       this.props.navigation.goBack()
     }
   };
diff --git a/MobileApp/src/stores/entities-store.js b/MobileApp/src/stores/entities-store.js
index f336da4..4aed3b7 100644
--- a/MobileApp/src/stores/entities-store.js
+++ b/MobileApp/src/stores/entities-store.js
@@ -4,30 +4,55 @@ import firebase from 'firebase/app'
 import {entitiesFromFB} from './utils'
 
 class EntitiesStore extends BasicStore {
-    @observable loading = false
-    @observable loaded = false
+  @observable loading = false
+  @observable loaded = false
 
-    @observable entities = {}
+  @observable entities = {}
 
-    @computed get list() {
-        return Object.values(this.entities)
-    }
+  @computed
+  get list() {
+    return Object.values(this.entities)
+  }
 
-    @computed get size() {
-        return Object.keys(this.entities).length
-    }
+  @computed
+  get size() {
+    return Object.keys(this.entities).length
+  }
 }
 
 export function loadAllHelper(refName) {
-    return action(function () {
-        this.loading = true
-        firebase.database().ref(refName)
-            .once('value', action(data => {
-                this.entities = entitiesFromFB(data.val())
-                this.loading = false
-                this.loaded = true
-            }))
+  return action(function() {
+    this.loading = true
+    firebase.database().ref(refName)
+      .once('value', action(data => {
+        this.entities = entitiesFromFB(data.val())
+        this.loading = false
+        this.loaded = true
+      }))
+  })
+}
+
+export function subscribe(refName) {
+  return action(() => {
+    this.loading = true
+
+    const callback = action(data => {
+      this.entities = entitiesFromFB(data.val())
+      this.loading = false
+      this.loaded = true
     })
+
+    firebase
+      .database()
+      .ref(refName)
+      .on('value', callback)
+
+    return () =>
+      firebase
+        .database()
+        .ref(refName)
+        .off('value', callback)
+  })
 }
 
 export default EntitiesStore
\ No newline at end of file
diff --git a/MobileApp/src/stores/people.js b/MobileApp/src/stores/people.js
index c1877f6..2e9599c 100644
--- a/MobileApp/src/stores/people.js
+++ b/MobileApp/src/stores/people.js
@@ -1,18 +1,48 @@
-import EntitiesStore, {loadAllHelper}  from './entities-store'
-import {computed, action} from 'mobx'
+import EntitiesStore, {subscribe} from './entities-store'
+import {computed, action, observable} from 'mobx'
 import groupBy from 'lodash/groupBy'
+import firebase from 'firebase/app'
+import {config} from '../config'
 
 class PeopleStore extends EntitiesStore {
-    @computed get sections() {
-        const grouped = groupBy(this.list, person => person.firstName.charAt(0))
+  @computed
+  get sections() {
+    const grouped = groupBy(this.list, person => person.firstName.charAt(0))
 
-        return Object.entries(grouped).map(([letter, list]) => ({
-            title: `${letter}, ${list.length} people`,
-            data: list.map(person => ({key: person.uid, person}))
-        }))
-    }
+    return Object.entries(grouped).map(([letter, list]) => ({
+      title: `${letter}, ${list.length} people`,
+      data: list.map(person => ({key: person.uid, person}))
+    }))
+  }
+
+  @action loadAll = subscribe('people')
+
+  async saveAvatar(uid, {uri}) {
+
+    const avatar = uri.replace(/.*\//ig, '')
+    const ref = firebase
+      .storage()
+      .ref(`/avatars/${uid}`)
+      .child(avatar);
+
+    const file = await fetch(uri)
+      .then(res => res.blob())
+
+    await ref.put(file).then(function (snapshot) {
+      console.log('Uploaded a blob or file!');
+    });
+
+    this.updatePerson(uid, {avatar})
+  }
+
+  @action
+  updatePerson = (uid, data) =>
+    firebase
+      .database()
+      .ref(`people/${uid}`)
+      .update(data)
 
-    @action loadAll = loadAllHelper('people')
 }
 
+
 export default PeopleStore
\ No newline at end of file