From ba9927fde51df905e9bdc150db72f0b40d0e2ee6 Mon Sep 17 00:00:00 2001
From: vitaliy <viprogramm@gmail.com>
Date: Mon, 30 Jul 2018 01:19:43 +0300
Subject: [PATCH 1/3] add authentication functionality

---
 MobileApp/App.js                    |   3 +
 MobileApp/config.js                 |  17 +++++
 MobileApp/package.json              |   3 +-
 MobileApp/src/actions/auth.js       |  12 ++++
 MobileApp/src/components/sign-in.js | 101 +++++++++++++++-------------
 MobileApp/src/stores/auth.js        |  20 ++++--
 6 files changed, 101 insertions(+), 55 deletions(-)
 create mode 100644 MobileApp/config.js
 create mode 100644 MobileApp/src/actions/auth.js

diff --git a/MobileApp/App.js b/MobileApp/App.js
index 481462b..249fe0d 100644
--- a/MobileApp/App.js
+++ b/MobileApp/App.js
@@ -3,11 +3,14 @@ import {configure} from 'mobx'
 import {Provider} from 'mobx-react'
 import AppNavigator from './src/components/app-navigator'
 import stores from './src/stores'
+import firebaseInit from './config'
 
 configure({
   enforceActions: true
 })
 
+firebaseInit()
+
 export default class App extends React.Component {
   render() {
     return (
diff --git a/MobileApp/config.js b/MobileApp/config.js
new file mode 100644
index 0000000..653db78
--- /dev/null
+++ b/MobileApp/config.js
@@ -0,0 +1,17 @@
+import { initializeApp } from 'firebase/app'
+import 'firebase/auth'
+import 'firebase/database'
+
+export const appName = 'advreact-25-06'
+
+const config = {
+  apiKey: 'AIzaSyBnWMvhTYPpwSnVwYvrWTrsS7TlHwu1wHg',
+  authDomain: 'advreact-25-06.firebaseapp.com',
+  databaseURL: 'https://advreact-25-06.firebaseio.com',
+  projectId: 'advreact-25-06',
+  storageBucket: '',
+  messagingSenderId: '371151529375'
+}
+
+
+export default () => initializeApp(config)
\ No newline at end of file
diff --git a/MobileApp/package.json b/MobileApp/package.json
index e7187b5..bd93e6e 100644
--- a/MobileApp/package.json
+++ b/MobileApp/package.json
@@ -3,8 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "devDependencies": {
-    "react-native-scripts": "1.14.0",
     "jest-expo": "~27.0.0",
+    "react-native-scripts": "1.14.0",
     "react-test-renderer": "16.3.1"
   },
   "main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
@@ -21,6 +21,7 @@
   "dependencies": {
     "email-validator": "^2.0.4",
     "expo": "^27.0.1",
+    "firebase": "^5.3.0",
     "lodash": "^4.17.10",
     "mobx": "^5.0.3",
     "mobx-react": "^5.2.3",
diff --git a/MobileApp/src/actions/auth.js b/MobileApp/src/actions/auth.js
new file mode 100644
index 0000000..d759706
--- /dev/null
+++ b/MobileApp/src/actions/auth.js
@@ -0,0 +1,12 @@
+import firebase from 'firebase/app'
+import stores from '../stores'
+
+export const LoggedIn = (email, password) => {
+  const firebaseAuth = firebase.auth()
+  const { auth } = stores
+  return firebaseAuth.signInWithEmailAndPassword(email, password)
+    .then(({user})=> auth.setUser(user))
+    .catch((e) => console.error(e))
+}
+
+
diff --git a/MobileApp/src/components/sign-in.js b/MobileApp/src/components/sign-in.js
index 812285e..ea05f19 100644
--- a/MobileApp/src/components/sign-in.js
+++ b/MobileApp/src/components/sign-in.js
@@ -1,67 +1,74 @@
 import React, { Component } from 'react'
 import {View, TextInput, Text, Button, Platform} from 'react-native'
 import {observer, inject} from 'mobx-react'
+import {LoggedIn} from '../actions/auth'
 
 @inject('navigation', 'auth')
 @observer
 class SignIn extends Component {
-    static propTypes = {
+  static propTypes = {
 
-    };
+  };
 
-    render() {
-        const { email, password, isValidEmail } = this.props.auth
-        return (
-            <View>
-                <Text>
-                    Email:
-                </Text>
-                <TextInput
-                    value = {email}
-                    onChangeText = {this.handleEmailChange}
-                    keyboardType = 'email-address'
-                    style = {styles.input}
-                />
-                <Text>
-                    {isValidEmail ? '' : 'Not a valid email'}
-                </Text>
-                <Text>
-                    Password:
-                </Text>
-                <TextInput
-                    value = {password}
-                    onChangeText = {this.handlePasswordChange}
-                    style = {styles.input}
-                    secureTextEntry
-                />
-                <Button
-                    title = 'submit'
-                    onPress = {this.handleSubmit}
-                />
-            </View>
-        )
-    }
+  render() {
+    const { email, password, isValidEmail } = this.props.auth
+
+    return (
+      <View>
+        <Text>
+          Email:
+        </Text>
+        <TextInput
+          value = {email}
+          onChangeText = {this.handleEmailChange}
+          keyboardType = 'email-address'
+          style = {styles.input}
+        />
+        <Text>
+          {isValidEmail ? '' : 'Not a valid email'}
+        </Text>
+        <Text>
+          Password:
+        </Text>
+        <TextInput
+          value = {password}
+          onChangeText = {this.handlePasswordChange}
+          style = {styles.input}
+          secureTextEntry
+        />
+        <Button
+          title = 'submit'
+          onPress = {this.handleSubmit}
+        />
+      </View>
+    )
+  }
 
-    handleSubmit = () => {
+  handleSubmit = () => {
+    const { isValidEmail, email, password } = this.props.auth
+    if(isValidEmail) {
+      LoggedIn(email, password).then(( )=>{
         this.props.navigation.goTo('eventList')
+      })
     }
+  }
 
-    handleEmailChange = (email) => this.props.auth.setEmail(email)
-    handlePasswordChange = (password) => this.props.auth.setPassword(password)
+  handleEmailChange = (email) => this.props.auth.setEmail(email)
+  handlePasswordChange = (password) => this.props.auth.setPassword(password)
 }
 
 const styles = {
-    input: {
-        ...Platform.select({
-            ios: {
-                borderBottomWidth: 1,
-                borderBottomColor: 'black'
-            },
-            android: {
+  input: {
+    ...Platform.select({
+      ios: {
+        borderBottomWidth: 1,
+        borderBottomColor: 'black'
+      },
+      android: {
 
-            }
-        })
-    }
+      }
+    })
+  }
 }
 
 export default SignIn
\ No newline at end of file
diff --git a/MobileApp/src/stores/auth.js b/MobileApp/src/stores/auth.js
index 83728d0..e82bc61 100644
--- a/MobileApp/src/stores/auth.js
+++ b/MobileApp/src/stores/auth.js
@@ -2,15 +2,21 @@ import {observable, action, computed} from 'mobx'
 import { validate } from 'email-validator'
 
 class AuthStore {
-    @observable email = ''
-    @observable password = ''
+  @observable email = ''
+  @observable password = ''
+  @observable user = null
 
-    @computed get isValidEmail() {
-        return validate(this.email)
-    }
+  @computed get isValidEmail() {
+    return validate(this.email)
+  }
 
-    @action setEmail = email => this.email = email
-    @action setPassword = password => this.password = password
+  @computed get isLoggedIn() {
+    return !!this.user
+  }
+
+  @action setEmail = email => this.email = email
+  @action setPassword = password => this.password = password
+  @action setUser = user => this.user = user
 }
 
 export default AuthStore
\ No newline at end of file

From 6d579425ac4b8c6dd55a641fa18b065a6c097a65 Mon Sep 17 00:00:00 2001
From: vitaliy <viprogramm@gmail.com>
Date: Mon, 30 Jul 2018 01:20:38 +0300
Subject: [PATCH 2/3] load events and people functionality

---
 MobileApp/src/actions/events.js               | 16 ++++++++
 MobileApp/src/actions/people.js               | 17 ++++++++
 .../src/components/people/people-card.js      | 23 +++++++++++
 .../src/components/people/people-list.js      | 41 +++++++++++++++++++
 .../src/components/screens/event-list.js      | 18 ++++++--
 MobileApp/src/components/screens/people.js    | 31 ++++++++++++++
 MobileApp/src/stores/events.js                | 11 +++++
 MobileApp/src/stores/index.js                 |  6 ++-
 MobileApp/src/stores/people.js                | 11 +++++
 9 files changed, 169 insertions(+), 5 deletions(-)
 create mode 100644 MobileApp/src/actions/events.js
 create mode 100644 MobileApp/src/actions/people.js
 create mode 100644 MobileApp/src/components/people/people-card.js
 create mode 100644 MobileApp/src/components/people/people-list.js
 create mode 100644 MobileApp/src/components/screens/people.js
 create mode 100644 MobileApp/src/stores/events.js
 create mode 100644 MobileApp/src/stores/people.js

diff --git a/MobileApp/src/actions/events.js b/MobileApp/src/actions/events.js
new file mode 100644
index 0000000..bf592f6
--- /dev/null
+++ b/MobileApp/src/actions/events.js
@@ -0,0 +1,16 @@
+import firebase from 'firebase/app'
+import stores from '../stores'
+
+const LoadEvents = () => {
+  stores.events.toggleLoading()
+  const ref = firebase.database().ref('events')
+  ref.once('value')
+    .then(snapshot => {
+      const events = Object.entries(snapshot.val()).map(([uid, event]) => ({...event, uid}))
+      stores.events.setData(events)
+    })
+    .finally(()=>stores.events.toggleLoading())
+}
+
+
+export default LoadEvents
\ No newline at end of file
diff --git a/MobileApp/src/actions/people.js b/MobileApp/src/actions/people.js
new file mode 100644
index 0000000..889b9fd
--- /dev/null
+++ b/MobileApp/src/actions/people.js
@@ -0,0 +1,17 @@
+import firebase from 'firebase/app'
+import stores from '../stores'
+
+const LoadPeople = () => {
+  stores.people.toggleLoading()
+  const ref = firebase.database().ref('people')
+  ref.once('value')
+    .then(snapshot => {
+      const people = Object.entries(snapshot.val()).map(([uid, people]) => ({...people, uid}))
+      console.log(people);
+      stores.people.setData(people)
+    })
+    .finally(()=>stores.people.toggleLoading())
+}
+
+
+export default LoadPeople
\ No newline at end of file
diff --git a/MobileApp/src/components/people/people-card.js b/MobileApp/src/components/people/people-card.js
new file mode 100644
index 0000000..03f6f87
--- /dev/null
+++ b/MobileApp/src/components/people/people-card.js
@@ -0,0 +1,23 @@
+import React, { Component } from 'react'
+import {Text, StyleSheet} from 'react-native'
+import Card from '../common/card'
+
+class PeopleCard extends Component {
+    static propTypes = {
+
+    };
+
+    render() {
+        const { people } = this.props
+        return (
+            <Card>
+                <Text>{people.lastName} {people.firstName} {people.email}</Text>
+            </Card>
+        )
+    }
+}
+
+const styles = StyleSheet.create({
+})
+
+export default PeopleCard
\ No newline at end of file
diff --git a/MobileApp/src/components/people/people-list.js b/MobileApp/src/components/people/people-list.js
new file mode 100644
index 0000000..138fa21
--- /dev/null
+++ b/MobileApp/src/components/people/people-list.js
@@ -0,0 +1,41 @@
+import React, { Component } from 'react'
+import {Text, StyleSheet, SectionList, TouchableOpacity} from 'react-native'
+import PeopleCard from './people-card'
+import groupBy from 'lodash/groupBy'
+
+class PeopleList extends Component {
+  static propTypes = {
+
+  };
+
+  render() {
+    const grouped = groupBy(this.props.people, people => people.lastName.charAt(0))
+    const sections = Object.entries(grouped).map(([letter, list]) => ({
+      title: `${letter}, ${list.length} people`,
+      data: list.map(people => ({key: people.uid, people}))
+    }))
+    return <SectionList
+      sections = {sections}
+      renderSectionHeader = {this.getSectionRenderer}
+      renderItem = {({item}) => <PeopleCard people = {item.people} />}
+    />
+  }
+
+  getSectionRenderer = ({section}) => <Text style={styles.header}>{section.title}</Text>
+}
+
+const styles = StyleSheet.create({
+  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
diff --git a/MobileApp/src/components/screens/event-list.js b/MobileApp/src/components/screens/event-list.js
index ce3b3d6..e5d7d20 100644
--- a/MobileApp/src/components/screens/event-list.js
+++ b/MobileApp/src/components/screens/event-list.js
@@ -1,17 +1,27 @@
 import React, { Component } from 'react'
-import {StyleSheet} from 'react-native'
+import {StyleSheet, Text} from 'react-native'
+import {observer, inject} from 'mobx-react'
 import EventList from '../events/event-list'
 import data from '../../fixtures'
+import loadEvents from '../../actions/events'
 
-const events = Object.entries(data.events).map(([uid, event]) => ({...event, uid}))
-
+@inject('events')
+@observer
 class EventListScreen extends Component {
     static propTypes = {
 
     };
 
+    componentDidMount() {
+      loadEvents()
+    }
+
     render() {
-        return <EventList events = {events} onEventPress = {this.handleEventPress}/>
+        const {data, loading} = this.props.events
+        if(loading) {
+          return <Text>Loading...</Text>
+        }
+        return <EventList events = {data} onEventPress = {this.handleEventPress}/>
     }
 
     handleEventPress = ({ uid, title }) => {
diff --git a/MobileApp/src/components/screens/people.js b/MobileApp/src/components/screens/people.js
new file mode 100644
index 0000000..23e3205
--- /dev/null
+++ b/MobileApp/src/components/screens/people.js
@@ -0,0 +1,31 @@
+import React, { Component } from 'react'
+import {StyleSheet, Text} from 'react-native'
+import {observer, inject} from 'mobx-react'
+import PeopleList from '../people/people-list'
+import data from '../../fixtures'
+import loadPeople from '../../actions/people'
+
+@inject('people')
+@observer
+class EventListScreen extends Component {
+  static propTypes = {
+
+  };
+
+  componentDidMount() {
+    loadPeople()
+  }
+
+  render() {
+    const {data, loading} = this.props.people
+    if(loading) {
+      return <Text>Loading...</Text>
+    }
+    return <PeopleList people = {data} />
+  }
+}
+
+const styles = StyleSheet.create({
+})
+
+export default EventListScreen
\ No newline at end of file
diff --git a/MobileApp/src/stores/events.js b/MobileApp/src/stores/events.js
new file mode 100644
index 0000000..117b1e8
--- /dev/null
+++ b/MobileApp/src/stores/events.js
@@ -0,0 +1,11 @@
+import {observable, action} from 'mobx'
+
+class EventsStore {
+  @observable data = []
+  @observable loading = false
+
+  @action setData = data => this.data = data
+  @action toggleLoading = () => this.loading = !this.loading
+}
+
+export default EventsStore
\ No newline at end of file
diff --git a/MobileApp/src/stores/index.js b/MobileApp/src/stores/index.js
index 64bd09b..e9efd7d 100644
--- a/MobileApp/src/stores/index.js
+++ b/MobileApp/src/stores/index.js
@@ -1,7 +1,11 @@
 import AuthStore from './auth'
 import NavigationStore from './navigation'
+import EventsStore from './events'
+import PeopleStore from './people'
 
 export default {
     auth: new AuthStore(),
-    navigation: new NavigationStore()
+    navigation: new NavigationStore(),
+    events: new EventsStore(),
+    people: new PeopleStore(),
 }
\ No newline at end of file
diff --git a/MobileApp/src/stores/people.js b/MobileApp/src/stores/people.js
new file mode 100644
index 0000000..046d80e
--- /dev/null
+++ b/MobileApp/src/stores/people.js
@@ -0,0 +1,11 @@
+import {observable, action} from 'mobx'
+
+class PeopleStore {
+  @observable data = []
+  @observable loading = false
+
+  @action setData = data => this.data = data
+  @action toggleLoading = () => this.loading = !this.loading
+}
+
+export default PeopleStore
\ No newline at end of file

From 900f7a537946ab71a4ea7df08e5299037fa81a3d Mon Sep 17 00:00:00 2001
From: vitaliy <viprogramm@gmail.com>
Date: Mon, 30 Jul 2018 01:22:07 +0300
Subject: [PATCH 3/3] add tab navigation between people screen and events
 screen

---
 MobileApp/src/components/app-navigator.js | 39 +++++++++++++++--------
 1 file changed, 26 insertions(+), 13 deletions(-)

diff --git a/MobileApp/src/components/app-navigator.js b/MobileApp/src/components/app-navigator.js
index e3156c4..d871228 100644
--- a/MobileApp/src/components/app-navigator.js
+++ b/MobileApp/src/components/app-navigator.js
@@ -1,19 +1,32 @@
-import {createStackNavigator} from 'react-navigation'
+import {createStackNavigator, createBottomTabNavigator, createSwitchNavigator} from 'react-navigation'
 import AuthScreen from './screens/auth'
 import EventListScreen from './screens/event-list'
 import EventScreen from './screens/event'
+import PeopleScreen from './screens/people'
 
-export default createStackNavigator({
-    auth: {
-        screen: AuthScreen
-    },
-    eventList: {
-        screen: EventListScreen,
-        navigationOptions: {
-            title: 'events'
-        }
-    },
-    event: {
-        screen: EventScreen
+const EventListStack = createStackNavigator({
+  eventList: {
+    screen: EventListScreen,
+    navigationOptions: {
+      title: 'events'
     }
+  },
+  event: EventScreen,
+});
+
+const PeopleStack = createSwitchNavigator({
+  people: PeopleScreen,
+});
+
+const BottomStack = createBottomTabNavigator(
+  {
+    eventList: EventListStack,
+    people: PeopleStack,
+  }
+);
+
+export default createStackNavigator({
+    auth: AuthScreen,
+    eventList: BottomStack,
+    people: BottomStack
 })
\ No newline at end of file