Task 8

MobileApp/package.json

@@ -19,6 +19,7 @@
     "preset": "jest-expo"
   },
   "dependencies": {
+    "base64-arraybuffer": "^0.1.5",
     "email-validator": "^2.0.4",
     "expo": "^27.0.1",
     "firebase": "^5.3.0",

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: {
@@ -24,5 +25,8 @@ export default createStackNavigator({
     },
     event: {
         screen: EventMapScreen
+    },
+    camera: {
+        screen: CameraScreen
     }
 })

MobileApp/src/components/common/camera.js

@@ -0,0 +1,90 @@
+import React from 'react'
+import { Text, View, TouchableOpacity, StyleSheet } from 'react-native'
+import { Camera, Permissions } from 'expo'
+import {inject} from 'mobx-react'
+
+@inject('people')
+export default class CameraExample 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' })
+  }
+
+  flipCamera = () => {
+    this.setState({
+        type: this.state.type === Camera.Constants.Type.back
+        ? Camera.Constants.Type.front
+        : Camera.Constants.Type.back,
+    })
+  }
+
+  takePicture = async () => {
+      if (this.camera) {
+        let photo = await this.camera.takePictureAsync({base64: true})
+        await this.props.people.updateAvatar(photo.base64, this.props.uid)
+
+        this.props.goBack()
+      }
+  }
+
+  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={styles.camera} type={this.state.type} ref={ref => { this.camera = ref }}>
+            <View style={styles.textContainer}>
+                <TouchableOpacity style={styles.flip} onPress={this.flipCamera}>
+                    <Text style={styles.flipText}>
+                        {' '}Flip{' '}
+                    </Text>
+                </TouchableOpacity>
+                <TouchableOpacity style={styles.button} onPress={this.takePicture} />
+            </View>
+          </Camera>
+        </View>
+      )
+    }
+  }
+}
+
+const styles = StyleSheet.create({
+    textContainer: {
+        backgroundColor: 'rgba(255, 255, 255, 0.3)',
+        flexDirection: 'row',
+        height: 100,
+        width: '100%',
+        justifyContent: 'space-around',
+        alignItems: 'center'
+    },
+    flip: {
+        flex: 0.1,
+        alignItems: 'center'
+    },
+    flipText: {
+        fontSize: 18,
+        marginBottom: 10,
+        color: 'white'
+    },
+    button: {
+        height: 60,
+        width: 60,
+        borderRadius: 100,
+        backgroundColor: 'red'
+    },
+    camera: {
+        flex: 1,
+        alignItems: 'flex-end',
+        justifyContent: 'flex-end'
+    }
+})

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

@@ -2,6 +2,7 @@ import React, { Component } from 'react'
 import {inject, observer} from 'mobx-react'
 import {TouchableOpacity, Text, SectionList, ActivityIndicator, StyleSheet} from 'react-native'
 import PersonCard from './person-card'
+import { action } from 'mobx'
 
 @inject('people')
 @observer
@@ -22,9 +23,12 @@ 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)}>
-                <PersonCard person = {item.person} />
-            </TouchableOpacity>}
+            renderItem = {({item}) => (
+                <TouchableOpacity
+                    onPress = {onPersonPress.bind(null, item.key)}>
+                        <PersonCard person = {item.person} />
+                </TouchableOpacity>
+            )}
         />
     }
 }

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

@@ -1,24 +1,32 @@
 import React, { Component } from 'react'
-import {View, Text, Image, StyleSheet} from 'react-native'
+import {View, Text, Image, StyleSheet, TouchableHighlight } from 'react-native'
 import Card from '../common/card'
+import {inject} from 'mobx-react'
 
+@inject('navigation')
 class PersonCard extends Component {
     static propTypes = {
 
     };
 
     render() {
-        const { email, firstName, lastName } = this.props.person
+        const { email, firstName, lastName, uid, avatar } = this.props.person
         return (
-            <Card style = {styles.container}>
-                <Image source={{uri: 'http://lorempixel.com/200/100/people/'}} style = {styles.avatar}/>
-                <View style = {styles.content}>
-                    <Text style = {styles.email}>{email}</Text>
-                    <Text>{firstName} {lastName}</Text>
-                </View>
-            </Card>
+            <TouchableHighlight onLongPress={this.openCamera.bind(null, uid)}>
+                <Card style = {styles.container}>
+                    <Image source={{uri: avatar || 'http://lorempixel.com/200/100/people/'}} style = {styles.avatar}/>
+                    <View style = {styles.content}>
+                        <Text style = {styles.email}>{email}</Text>
+                        <Text>{firstName} {lastName}</Text>
+                    </View>
+                </Card>
+            </TouchableHighlight>
         )
     }
+
+    openCamera = (uid) => {
+        this.props.navigation.goTo('camera', { uid })
+    }
 }
 
 const styles = StyleSheet.create({

MobileApp/src/components/screens/camera.js

@@ -0,0 +1,16 @@
+import React, { Component } from 'react'
+import Camera from '../common/camera'
+
+class AuthScreen extends Component {
+    static navigationOptions = {
+        title: 'camera'
+    }
+
+    render() {
+        return (
+            <Camera uid={this.props.navigation.state.params.uid} goBack={this.props.navigation.goBack} />
+        )
+    }
+}
+
+export default AuthScreen

MobileApp/src/config.js

@@ -1,16 +1,17 @@
 import { initializeApp } from 'firebase/app'
 import 'firebase/auth'
 import 'firebase/database'
+import 'firebase/storage'
 
-export const appName = 'adv-react-25-06'
+export const appName = 'advreact-25-06-c6bae'
 
 const config = {
-    apiKey: 'AIzaSyDzqwnZ_39QyqhxYZVPjVH8eBww7DUBmVc',
+    apiKey: "AIzaSyBM5eZETRfWWS9BoQ-8guawlYzeW7dDToE",
     authDomain: `${appName}.firebaseapp.com`,
     databaseURL: `https://${appName}.firebaseio.com`,
     projectId: appName,
-    storageBucket: '',
-    messagingSenderId: '874599443389'
+    storageBucket: `gs://${appName}.appspot.com`,
+    messagingSenderId: '985221034928'
 }
 
 initializeApp(config)

MobileApp/src/stores/navigation.js

@@ -13,25 +13,28 @@ class NavigationStore extends BasicStore {
     onReady = () => {
         let firstRun = true
 
-        setTimeout(() => {
-            autorun(() => {
-                const authenticated = !!this.getStore('auth').user
+        autorun(() => {
+            const authenticated = !!this.getStore('auth').user
 
-                if (!firstRun) {
-                    authenticated
-                        ? this.reset('lists')
-                        : this.reset('auth')
-                }
+            if (!firstRun) {
+                authenticated
+                    ? this.reset('lists')
+                    : this.reset('auth')
+            }
 
-                firstRun = false
-            })
-        }, 0 )
+            firstRun = false
+        })
 
     }
 
-    goTo = routeName => this.ref.dispatch(NavigationActions.navigate({
-        routeName
-    }))
+    goTo = (routeName, params) => {
+        this.ref.dispatch(NavigationActions.navigate({
+            routeName,
+            params: {
+                ...params
+            }
+        }))
+    }
 
     reset = routeName => this.ref.dispatch(StackActions.reset({
         index: 0,

MobileApp/src/stores/people.js

@@ -1,6 +1,8 @@
 import EntitiesStore, {loadAllHelper}  from './entities-store'
 import {computed, action} from 'mobx'
 import groupBy from 'lodash/groupBy'
+import firebase from 'firebase/app'
+import { decode } from 'base64-arraybuffer'
 
 class PeopleStore extends EntitiesStore {
     @computed get sections() {
@@ -13,6 +15,27 @@ class PeopleStore extends EntitiesStore {
     }
 
     @action loadAll = loadAllHelper('people')
+
+    @action updateAvatarUrl = (avatarUrl, uid) => {
+        firebase.database().ref(`people/${uid}`).update({
+            avatar: avatarUrl
+        })
+    }
+
+    @action updateAvatar = async (base64, uid) => {
+        const avatarRef = firebase.storage().ref(`/avatars/${uid}.jpg`)
+        const bytes = decode(base64)
+
+        await avatarRef.put(bytes)
+        avatarUrl = await avatarRef.getDownloadURL()
+        /*
+            почему-то генерируется URL такой картинки, которую не могу открыть при скачивании
+            картинка также не отображается в приложении.. не пойму почему,
+            т.к. когда пробую декодировать передаваемый base64 вручную (через онлайн сервис),
+            сервис мне возвращает корректное изображение
+        */
+        this.updateAvatarUrl(avatarUrl, uid)
+    }
 }
 
 export default PeopleStore

MobileApp/tsconfig.json

@@ -0,0 +1,6 @@
+{
+    "compilerOptions": {
+        "experimentalDecorators": true,
+        "allowJs": true
+    }
+}