From 308253c28b8b1e35a0ba432180de32a129eca5db Mon Sep 17 00:00:00 2001 From: Aleksandr Shtykov Date: Sat, 16 Jun 2018 00:56:35 +0300 Subject: [PATCH 1/4] added camera component for person card --- MobileApp/src/components/app-navigator.js | 52 +++++++------ .../src/components/people/people-list.js | 75 ++++++++++-------- .../src/components/screens/people-list.js | 59 +++++++------- .../src/components/screens/person-cam.js | 77 +++++++++++++++++++ 4 files changed, 180 insertions(+), 83 deletions(-) create mode 100644 MobileApp/src/components/screens/person-cam.js diff --git a/MobileApp/src/components/app-navigator.js b/MobileApp/src/components/app-navigator.js index 976330b..96e0654 100644 --- a/MobileApp/src/components/app-navigator.js +++ b/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' } -}) \ No newline at end of file + }, + lists: { + screen: ListsNavigator, + navigationOptions: { + title: 'Lists' + } + }, + event: { + screen: EventMapScreen + }, + person: { + screen: PersonCamScreen + } +}) diff --git a/MobileApp/src/components/people/people-list.js b/MobileApp/src/components/people/people-list.js index e90c07a..d0cb4bd 100644 --- a/MobileApp/src/components/people/people-list.js +++ b/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 - render() { - const {onPersonPress, people} = this.props - if (people.loading) return - - return {section.title}} - renderItem = {({item}) => - - } - /> - } + return ( + ( + {section.title} + )} + renderItem={({ item }) => ( + onPersonPress(item.person)}> + + + )} + /> + ) + } } 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 \ No newline at end of file +export default PeopleList diff --git a/MobileApp/src/components/screens/people-list.js b/MobileApp/src/components/screens/people-list.js index cea8fa0..69794e9 100644 --- a/MobileApp/src/components/screens/people-list.js +++ b/MobileApp/src/components/screens/people-list.js @@ -1,36 +1,41 @@ import React, { Component } from 'react' -import {observer, inject} from 'mobx-react' -import {View, StyleSheet, ActivityIndicator} from 'react-native' +import { observer, inject } from 'mobx-react' +import { View, StyleSheet, ActivityIndicator } from 'react-native' import PeopleList from '../people/people-list' @inject('people') @observer class PeopleListScreen extends Component { - static propTypes = { - - }; - - static navigationOptions = { - title: 'People List' - } - - componentDidMount() { - const {people} = this.props - if (!people.loaded && !people.loading) people.loadAll() - } - - render() { - const {people} = this.props - if (people.loading) return this.getLoader() - return - } - - getLoader() { - return - } + static propTypes = {} + + static navigationOptions = { + title: 'People List' + } + + componentDidMount() { + const { people } = this.props + if (!people.loaded && !people.loading) people.loadAll() + } + + render() { + const { people } = this.props + if (people.loading) return this.getLoader() + return + } + + getLoader() { + return ( + + + + ) + } + + handlePersonPress = ({ uid }) => { + this.props.navigation.navigate('person', { uid }) + } } -const styles = StyleSheet.create({ -}) +const styles = StyleSheet.create({}) -export default PeopleListScreen \ No newline at end of file +export default PeopleListScreen diff --git a/MobileApp/src/components/screens/person-cam.js b/MobileApp/src/components/screens/person-cam.js new file mode 100644 index 0000000..01b8ca3 --- /dev/null +++ b/MobileApp/src/components/screens/person-cam.js @@ -0,0 +1,77 @@ +import React, { Component } from 'react' +import { Text, StyleSheet, View, TouchableOpacity } from 'react-native' +import { MapView, Permissions, Location, Camera } from 'expo' +import { observable, action } from 'mobx' +import { observer } from 'mobx-react' + +@observer +class PersonCam extends Component { + static navigationOptions = { + title: 'camera' + } + + @observable permissionAsked = false + @observable permissionGranted = false + @observable coords = null + @observable type = Camera.Constants.Type.back + + async componentDidMount() { + this.setPermissionAsked(true) + const { status } = await Permissions.askAsync(Permissions.CAMERA) + 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) + @action + setType = (type) => { + this.type === Camera.Constants.Type.back + ? (this.type = Camera.Constants.Type.front) + : (this.type = Camera.Constants.Type.back) + } + + render() { + if (!this.permissionAsked) return Not Asked + if (!this.permissionGranted) return Not Granted + if (!this.coords) return null + console.log('---', this.coords) + + return ( + + + this.setType()} + > + + {' '} + Flip{' '} + + + + + ) + } +} + +const styles = StyleSheet.create({ + container: { + flex: 1 + } +}) + +export default PersonCam From a9b2d6123cd29651beb31a1ab7222e3dd37b58de Mon Sep 17 00:00:00 2001 From: Aleksandr Shtykov Date: Mon, 18 Jun 2018 01:13:13 +0300 Subject: [PATCH 2/4] save image to bucket --- MobileApp/package.json | 1 + .../src/components/screens/person-cam.js | 66 +++++++++++++++---- MobileApp/yarn.lock | 4 ++ 3 files changed, 60 insertions(+), 11 deletions(-) diff --git a/MobileApp/package.json b/MobileApp/package.json index cf64248..23b7d2d 100644 --- a/MobileApp/package.json +++ b/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", diff --git a/MobileApp/src/components/screens/person-cam.js b/MobileApp/src/components/screens/person-cam.js index 01b8ca3..1727296 100644 --- a/MobileApp/src/components/screens/person-cam.js +++ b/MobileApp/src/components/screens/person-cam.js @@ -1,8 +1,16 @@ import React, { Component } from 'react' -import { Text, StyleSheet, View, TouchableOpacity } from 'react-native' -import { MapView, Permissions, Location, Camera } from 'expo' +import { + Text, + StyleSheet, + View, + TouchableOpacity + // CameraRoll +} from 'react-native' +import { MapView, Permissions, Location, Camera, FileSystem } from 'expo' import { observable, action } from 'mobx' import { observer } from 'mobx-react' +import firebase from 'firebase/app' +import { decode } from 'base64-arraybuffer' @observer class PersonCam extends Component { @@ -10,23 +18,21 @@ class PersonCam extends Component { title: 'camera' } + camera = null + @observable permissionAsked = false @observable permissionGranted = false - @observable coords = null @observable type = Camera.Constants.Type.back async componentDidMount() { this.setPermissionAsked(true) const { status } = await Permissions.askAsync(Permissions.CAMERA) 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) + @action setType = (type) => { this.type === Camera.Constants.Type.back @@ -37,11 +43,17 @@ class PersonCam extends Component { render() { if (!this.permissionAsked) return Not Asked if (!this.permissionGranted) return Not Granted - if (!this.coords) return null - console.log('---', this.coords) return ( - + { + this.camera = ref + }} + > + + + {' '} + Photo{' '} + + ) } + + getUrl = async ({ base64, uri }) => { + const name = uri.match(/[ \w-]+?(?=\.).jpg/gm) + console.log(name[0]) + const storageRef = firebase + .storage() + .refFromURL('gs://advreact-10-05-ee9f5.appspot.com') + .child(name[0]) + + await storageRef.put(decode(base64)) + const avatar = await storageRef.getDownloadURL() + } + + takePicture = async () => { + if (this.camera) { + const photo = await this.camera.takePictureAsync({ base64: true }) + this.getUrl(photo) + } + } } const styles = StyleSheet.create({ diff --git a/MobileApp/yarn.lock b/MobileApp/yarn.lock index 00d582a..02f5e65 100644 --- a/MobileApp/yarn.lock +++ b/MobileApp/yarn.lock @@ -1750,6 +1750,10 @@ balanced-match@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767" +base64-arraybuffer@^0.1.5: + version "0.1.5" + resolved "https://registry.yarnpkg.com/base64-arraybuffer/-/base64-arraybuffer-0.1.5.tgz#73926771923b5a19747ad666aa5cd4bf9c6e9ce8" + base64-js@0.0.8: version "0.0.8" resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-0.0.8.tgz#1101e9544f4a76b1bc3b26d452ca96d7a35e7978" From f90635f7601298921d4fb515b51d91c4415bd09f Mon Sep 17 00:00:00 2001 From: Aleksandr Shtykov Date: Mon, 18 Jun 2018 01:19:09 +0300 Subject: [PATCH 3/4] refactoring --- MobileApp/src/components/screens/event-map.js | 95 ++++++++++--------- 1 file changed, 48 insertions(+), 47 deletions(-) diff --git a/MobileApp/src/components/screens/event-map.js b/MobileApp/src/components/screens/event-map.js index 7179cb1..1c4a732 100644 --- a/MobileApp/src/components/screens/event-map.js +++ b/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 Not Asked - if (!this.permissionGranted) return Not Granted - if (!this.coords) return null - console.log('---', this.coords) - - return ( - - - - ) - } + 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 Not Asked + if (!this.permissionGranted) return Not Granted + if (!this.coords) return null + console.log('---', this.coords) + + return ( + + + + ) + } } const styles = StyleSheet.create({ - container: { - flex: 1 - } + container: { + flex: 1 + } }) -export default EventMap \ No newline at end of file +export default EventMap From 30f6f7cd015834729d6d39952b6cbb2ac0f62fb4 Mon Sep 17 00:00:00 2001 From: Aleksandr Shtykov Date: Mon, 18 Jun 2018 01:21:13 +0300 Subject: [PATCH 4/4] refactoring --- MobileApp/App.js | 63 ++++++++++--------- .../src/components/screens/person-cam.js | 10 +-- MobileApp/src/config.js | 7 ++- 3 files changed, 39 insertions(+), 41 deletions(-) diff --git a/MobileApp/App.js b/MobileApp/App.js index 4857ffc..55989c2 100644 --- a/MobileApp/App.js +++ b/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 - - - } - - setNavRef = (ref) => { - stores.navigation.setRef(ref) - } + render() { + return ( + + + + ) + } + + 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 + } +}) diff --git a/MobileApp/src/components/screens/person-cam.js b/MobileApp/src/components/screens/person-cam.js index 1727296..fb6674d 100644 --- a/MobileApp/src/components/screens/person-cam.js +++ b/MobileApp/src/components/screens/person-cam.js @@ -1,12 +1,6 @@ import React, { Component } from 'react' -import { - Text, - StyleSheet, - View, - TouchableOpacity - // CameraRoll -} from 'react-native' -import { MapView, Permissions, Location, Camera, FileSystem } from 'expo' +import { Text, StyleSheet, View, TouchableOpacity } from 'react-native' +import { Permissions, Camera } from 'expo' import { observable, action } from 'mobx' import { observer } from 'mobx-react' import firebase from 'firebase/app' diff --git a/MobileApp/src/config.js b/MobileApp/src/config.js index aa22b3b..9e23e29 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 = 'advreact-10-05-ee9f5' export const config = { - apiKey: 'AIzaSyCbMQM0eQUSQ0SuLVAu9ZNPUcm4rdbiB8U', + apiKey: 'AIzaSyA9z4Xmknc0zIAIfvWCfe4XWwhwqiTO9h0', authDomain: `${appName}.firebaseapp.com`, databaseURL: `https://${appName}.firebaseio.com`, projectId: appName, storageBucket: '', - messagingSenderId: '1094825197832' + messagingSenderId: '963790431937' } firebase.initializeApp(config)