Hometask/8

MobileApp/App.js

@@ -1,41 +1,44 @@
-import {configure} from 'mobx'
-import {Provider} from 'mobx-react'
+import { configure } from 'mobx'
+import { Provider } from 'mobx-react'
 
-configure({enforceActions: true})
+configure({ enforceActions: true })
 
-import React from 'react';
-import {StyleSheet} from 'react-native';
+import React from 'react'
+import { StyleSheet } from 'react-native'
 import fixtures from './fixtures.json'
 import AppNavigator from './src/components/app-navigator'
 import stores from './src/stores'
 
-
-const events = Object.entries(fixtures.events).map(([uid, event]) => ({...event, uid}))
+const events = Object.entries(fixtures.events).map(([uid, event]) => ({
+  ...event,
+  uid
+}))
 
 export default class App extends React.Component {
-    render() {
-        return <Provider {...stores}>
-            <AppNavigator ref={this.setNavRef}/>
-        </Provider>
-    }
-
-    setNavRef = (ref) => {
-        stores.navigation.setRef(ref)
-    }
+  render() {
+    return (
+      <Provider {...stores}>
+        <AppNavigator ref={this.setNavRef} />
+      </Provider>
+    )
+  }
+
+  setNavRef = (ref) => {
+    stores.navigation.setRef(ref)
+  }
 }
 
 const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-        backgroundColor: '#fff',
-        alignItems: 'center',
-        justifyContent: 'center',
-        paddingTop: 30,
-        paddingBottom: 30,
-    },
-    image: {
-        width: '100%',
-        height: 100
-    }
-});
-
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingTop: 30,
+    paddingBottom: 30
+  },
+  image: {
+    width: '100%',
+    height: 100
+  }
+})

MobileApp/package.json

@@ -19,6 +19,7 @@
     "preset": "jest-expo"
   },
   "dependencies": {
+    "base64-arraybuffer": "^0.1.5",
     "expo": "^27.0.1",
     "firebase": "^5.0.4",
     "lodash": "^4.17.10",

MobileApp/src/components/app-navigator.js

@@ -1,34 +1,40 @@
-import {createStackNavigator, createBottomTabNavigator} from 'react-navigation'
+import {
+  createStackNavigator,
+  createBottomTabNavigator
+} from 'react-navigation'
 import AuthScreen from './screens/auth'
 import EventList from './screens/event-list'
 import PeopleList from './screens/people-list'
 import EventScreen from './screens/event'
 import EventMapScreen from './screens/event-map'
+import PersonCamScreen from './screens/person-cam'
 
 const ListsNavigator = createBottomTabNavigator({
-    events: {
-        screen: EventList
-    },
-    people: {
-        screen: PeopleList
-    }
+  events: {
+    screen: EventList
+  },
+  people: {
+    screen: PeopleList
+  }
 })
 
-
 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: PersonCamScreen
+  }
+})

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

@@ -1,46 +1,55 @@
 import React, { Component } from 'react'
-import {inject, observer} from 'mobx-react'
-import {TouchableOpacity, Text, SectionList, ActivityIndicator, StyleSheet} from 'react-native'
+import { inject, observer } from 'mobx-react'
+import {
+  TouchableOpacity,
+  Text,
+  SectionList,
+  ActivityIndicator,
+  StyleSheet
+} from 'react-native'
 import PersonCard from './person-card'
 
 @inject('people')
 @observer
 class PeopleList extends Component {
-    static defaultProps = {
-        onPersonPress: () => {}
-    };
+  componentDidMount() {
+    const { people } = this.props
+    if (!people.loaded) people.loadAll()
+  }
 
-    componentDidMount() {
-        const {people} = this.props
-        if (!people.loaded) people.loadAll()
-    }
+  render() {
+    const { onPersonPress, people } = this.props
+    if (people.loading) return <ActivityIndicator size="large" />
 
-    render() {
-        const {onPersonPress, 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)}>
-                <PersonCard person = {item.person} />
-            </TouchableOpacity>}
-        />
-    }
+    return (
+      <SectionList
+        sections={people.sections}
+        renderSectionHeader={({ section }) => (
+          <Text style={styles.header}>{section.title}</Text>
+        )}
+        renderItem={({ item }) => (
+          <TouchableOpacity onPress={() => onPersonPress(item.person)}>
+            <PersonCard person={item.person} />
+          </TouchableOpacity>
+        )}
+      />
+    )
+  }
 }
 
 const styles = StyleSheet.create({
-    header: {
-        backgroundColor: '#F0F0F0',
-        height: 40,
-        lineHeight: 40,
-        marginBottom: 5,
-        shadowOffset: {
-            height: 2, width: 0
-        },
-        shadowOpacity: 0.3,
-        elevation: 3
-    }
+  header: {
+    backgroundColor: '#F0F0F0',
+    height: 40,
+    lineHeight: 40,
+    marginBottom: 5,
+    shadowOffset: {
+      height: 2,
+      width: 0
+    },
+    shadowOpacity: 0.3,
+    elevation: 3
+  }
 })
 
-export default PeopleList
+export default PeopleList

MobileApp/src/components/screens/event-map.js

@@ -1,56 +1,57 @@
 import React, { Component } from 'react'
-import {Text, StyleSheet} from 'react-native'
-import {MapView, Permissions, Location} from 'expo'
-import {observable, action} from 'mobx'
-import {observer} from 'mobx-react'
+import { Text, StyleSheet } from 'react-native'
+import { MapView, Permissions, Location } from 'expo'
+import { observable, action } from 'mobx'
+import { observer } from 'mobx-react'
 
 @observer
 class EventMap extends Component {
-    static navigationOptions = {
-        title: 'map'
-    }
-
-    @observable permissionAsked = false
-    @observable permissionGranted = false
-    @observable coords = null
-
-    async componentDidMount() {
-        this.setPermissionAsked(true)
-        const {status} = await Permissions.askAsync(Permissions.LOCATION)
-        this.setPermissionGranted(status === 'granted')
-        this.setCoords(await Location.getCurrentPositionAsync())
-    }
-
-
-    @action setPermissionAsked = asked => this.permissionAsked = asked
-    @action setPermissionGranted = granted => this.permissionGranted = granted
-    @action setCoords = ({coords}) => this.coords = coords
-
-    render() {
-        if (!this.permissionAsked) return <Text>Not Asked</Text>
-        if (!this.permissionGranted) return <Text>Not Granted</Text>
-        if (!this.coords) return null
-        console.log('---', this.coords)
-
-        return (
-            <MapView
-                style = {styles.container}
-                initialRegion = {{
-                    ...this.coords,
-                    latitudeDelta: 0.0922,
-                    longitudeDelta: 0.0421,
-                }}
-            >
-                <MapView.Marker coordinate = {{...this.coords}}/>
-            </MapView>
-        )
-    }
+  static navigationOptions = {
+    title: 'map'
+  }
+
+  @observable permissionAsked = false
+  @observable permissionGranted = false
+  @observable coords = null
+
+  async componentDidMount() {
+    this.setPermissionAsked(true)
+    const { status } = await Permissions.askAsync(Permissions.LOCATION)
+    this.setPermissionGranted(status === 'granted')
+    Location.getCurrentPositionAsync({ enableHighAccuracy: true }).then(
+      (position) => this.setCoords(position)
+    )
+  }
+
+  @action setPermissionAsked = (asked) => (this.permissionAsked = asked)
+  @action setPermissionGranted = (granted) => (this.permissionGranted = granted)
+  @action setCoords = ({ coords }) => (this.coords = coords)
+
+  render() {
+    if (!this.permissionAsked) return <Text>Not Asked</Text>
+    if (!this.permissionGranted) return <Text>Not Granted</Text>
+    if (!this.coords) return null
+    console.log('---', this.coords)
+
+    return (
+      <MapView
+        style={styles.container}
+        initialRegion={{
+          ...this.coords,
+          latitudeDelta: 0.0922,
+          longitudeDelta: 0.0421
+        }}
+      >
+        <MapView.Marker coordinate={{ ...this.coords }} />
+      </MapView>
+    )
+  }
 }
 
 const styles = StyleSheet.create({
-    container: {
-        flex: 1
-    }
+  container: {
+    flex: 1
+  }
 })
 
-export default EventMap
+export default EventMap