HT8

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"
   }
 }

MobileApp/src/components/app-navigator.js

@@ -2,33 +2,45 @@ 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
-    }
+  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,
+
+  },
 })

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>}
         />

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

@@ -1,43 +1,83 @@
-import React, { Component } from 'react'
-import {View, Text, Image, StyleSheet} from 'react-native'
+import React, {Component} from 'react'
+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, inject } from 'mobx-react'
 
+@inject('people')
+@observer
 class PersonCard extends Component {
-    static propTypes = {
-
-    };
-
-    render() {
-        const { email, firstName, lastName } = 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>
-        )
+  static propTypes = {};
+
+  @observable loading = false
+  @observable loaded = false
+  @observable avatarURL = null
+
+  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} = 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}
+        <View style={styles.content}>
+          <Text style={styles.email}>{email}</Text>
+          <Text>{firstName} {lastName}</Text>
+        </View>
+      </Card>
+    )
+  }
+  async getAvatar({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))
     }
+
+    this.setLoading(false)
+    this.setLoaded(true)
+
+  }
 }
 
 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',
+    flex: 1,
+    justifyContent: 'space-around',
+  },
+  avatar: {
+    width: 200,
+    height: 100,
+    margin: 5,
+    justifyContent: 'center',
+
+  },
+  content: {
+    flexDirection: 'column',
+    justifyContent: 'space-around',
+    alignItems: 'center',
+
+  },
+  email: {
+    fontWeight: 'bold'
+  }
 })
 
+
 export default PersonCard

MobileApp/src/components/people/person.js

@@ -0,0 +1,77 @@
+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(person)}/>
+            </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