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/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/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
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 (
+
+ {people.lastName} {people.firstName} {people.email}
+
+ )
+ }
+}
+
+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 }
+ />
+ }
+
+ getSectionRenderer = ({section}) => {section.title}
+}
+
+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
+ const {data, loading} = this.props.events
+ if(loading) {
+ return Loading...
+ }
+ return
}
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 Loading...
+ }
+ return
+ }
+}
+
+const styles = StyleSheet.create({
+})
+
+export default EventListScreen
\ No newline at end of file
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 (
-
-
- Email:
-
-
-
- {isValidEmail ? '' : 'Not a valid email'}
-
-
- Password:
-
-
-
-
- )
- }
+ render() {
+ const { email, password, isValidEmail } = this.props.auth
+
+ return (
+
+
+ Email:
+
+
+
+ {isValidEmail ? '' : 'Not a valid email'}
+
+
+ Password:
+
+
+
+
+ )
+ }
- 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
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