Task 7

MobileApp/App.js

@@ -17,5 +17,5 @@ export default class App extends React.Component {
     )
   }
 
-    setNavRef = stores.navigation.setNavRef
+    setNavRef = stores.customNavigation.setNavRef
 }

MobileApp/package.json

@@ -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",

MobileApp/src/components/app-navigator.js

@@ -1,12 +1,11 @@
-import {createStackNavigator} from 'react-navigation'
+import {createStackNavigator, createSwitchNavigator, createBottomTabNavigator} from 'react-navigation'
 import AuthScreen from './screens/auth'
+import SplashScreen from './screens/splash'
 import EventListScreen from './screens/event-list'
 import EventScreen from './screens/event'
+import PeopleScreen from './screens/people-list'
 
-export default createStackNavigator({
-    auth: {
-        screen: AuthScreen
-    },
+const EventStack = createStackNavigator({
     eventList: {
         screen: EventListScreen,
         navigationOptions: {
@@ -16,4 +15,35 @@ export default createStackNavigator({
     event: {
         screen: EventScreen
     }
-})
+})
+
+const PeopleStack = createStackNavigator({
+    peopleList: {
+        screen: PeopleScreen,
+        createStackNavigator: {
+            title: 'people'
+        }
+    }
+})
+
+const AppStack = createBottomTabNavigator({
+    Events: EventStack,
+    People: PeopleStack
+})
+
+const AuthStack = createStackNavigator({
+    auth: {
+        screen: AuthScreen
+    }
+})
+
+export default createSwitchNavigator(
+  {
+    Splash: SplashScreen,
+    App: AppStack,
+    Auth: AuthStack
+  },
+  {
+    initialRouteName: 'Splash',
+  }
+)

MobileApp/src/components/events/event-list.js

@@ -1,19 +1,39 @@
 import React, { Component } from 'react'
-import {Text, StyleSheet, SectionList, TouchableOpacity} from 'react-native'
+import {View, Text, StyleSheet, SectionList, TouchableOpacity} from 'react-native'
 import EventCard from './event-card'
 import groupBy from 'lodash/groupBy'
+import {observer, inject} from 'mobx-react'
 
+@inject('events')
+@observer
 class EventList extends Component {
     static propTypes = {
 
     };
 
+    componentDidMount = () => {
+      this.props.events.getEvents()
+    }
+
+    renderLoading = () => (
+        <View>
+            <Text>
+                Loading...
+            </Text>
+        </View>
+    )
+
     render() {
-        const grouped = groupBy(this.props.events, event => event.title.charAt(0))
+        const { loading, list: events, error } = this.props.events
+
+        if (loading) return this.renderLoading()
+
+        const grouped = groupBy(events, event => event.title.charAt(0))
         const sections = Object.entries(grouped).map(([letter, list]) => ({
             title: `${letter}, ${list.length} events`,
             data: list.map(event => ({key: event.uid, event}))
         }))
+
         return <SectionList
             sections = {sections}
             renderSectionHeader = {this.getSectionRenderer}

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

@@ -0,0 +1,62 @@
+import React, { Component } from 'react'
+import {View, Text, StyleSheet, SectionList, TouchableOpacity} from 'react-native'
+import groupBy from 'lodash/groupBy'
+import PersonCard from './person-card'
+import {observer, inject} from 'mobx-react'
+
+@inject('people')
+@observer
+class PeopleList extends Component {
+    componentDidMount = () => {
+        this.props.people.getPeople()
+    }
+
+    renderLoading = () => (
+        <View>
+            <Text>
+                Loading...
+            </Text>
+        </View>
+    )
+
+    render() {
+        const { loading, list: people, error } = this.props.people
+
+        if (loading) return this.renderLoading()
+
+        const grouped = groupBy(people, person => person.firstName.charAt(0))
+        const sections = Object.entries(grouped).map(([letter, list]) => ({
+                title: `${letter}, ${list.length} people`,
+                data: list.map(person => ({key: person.uid, person}))
+            })
+        )
+
+        return <SectionList
+            sections = {sections}
+            renderSectionHeader = {this.getSectionRenderer}
+            renderItem = {({item}) => (
+                <View>
+                    <PersonCard person = {item.person} />
+                </View>
+            )}
+        />
+    }
+
+    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

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

@@ -0,0 +1,23 @@
+import React, { Component } from 'react'
+import {Text, StyleSheet} from 'react-native'
+import Card from '../common/card'
+
+class PersonCard extends Component {
+    static propTypes = {
+
+    };
+
+    render() {
+        const { person } = this.props
+        return (
+            <Card>
+                <Text>{person.firstName}</Text>
+            </Card>
+        )
+    }
+}
+
+const styles = StyleSheet.create({
+})
+
+export default PersonCard

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

@@ -1,17 +1,14 @@
 import React, { Component } from 'react'
 import {StyleSheet} from 'react-native'
 import EventList from '../events/event-list'
-import data from '../../fixtures'
-
-const events = Object.entries(data.events).map(([uid, event]) => ({...event, uid}))
 
 class EventListScreen extends Component {
     static propTypes = {
 
     };
 
     render() {
-        return <EventList events = {events} onEventPress = {this.handleEventPress}/>
+        return <EventList onEventPress = {this.handleEventPress}/>
     }
 
     handleEventPress = ({ uid, title }) => {

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

@@ -0,0 +1,18 @@
+import React, { Component } from 'react'
+import {StyleSheet} from 'react-native'
+import PeoplseList from '../people/people-list'
+
+class PeopleListScreen extends Component {
+    static propTypes = {
+
+    };
+
+    render() {
+        return <PeoplseList />
+    }
+}
+
+const styles = StyleSheet.create({
+})
+
+export default PeopleListScreen

MobileApp/src/components/screens/splash.js

@@ -0,0 +1,40 @@
+import React, { Component } from 'react'
+import { View, Text, StyleSheet } from 'react-native'
+import {observer, inject} from 'mobx-react'
+import {action} from 'mobx'
+import firebase from 'firebase'
+
+@inject('auth', 'customNavigation')
+@observer
+class SplashScreen extends Component {
+    state = {}
+
+    componentDidMount() {
+        firebase.auth().onAuthStateChanged(action(user => {
+            const { goTo } = this.props.customNavigation
+
+            this.props.auth.setUser = user
+            user ? goTo('eventList') : goTo('auth')
+        }))
+    }
+
+    render() {
+        return (
+            <View style={styles.container}>
+                <Text>
+                    Hello
+                </Text>
+            </View>
+        )
+    }
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center'
+    }
+})
+
+export default SplashScreen

MobileApp/src/components/sign-in.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react'
 import {View, TextInput, Text, Button, Platform} from 'react-native'
 import {observer, inject} from 'mobx-react'
 
-@inject('navigation', 'auth')
+@inject('customNavigation', 'auth')
 @observer
 class SignIn extends Component {
     static propTypes = {
@@ -43,7 +43,11 @@ class SignIn extends Component {
     }
 
     handleSubmit = () => {
-        this.props.navigation.goTo('eventList')
+        const { email, password, signIn } = this.props.auth
+        const { goTo } = this.props.customNavigation
+
+        signIn(email, password)
+        goTo('eventList')
     }
 
     handleEmailChange = (email) => this.props.auth.setEmail(email)

MobileApp/src/config.js

@@ -0,0 +1,16 @@
+import { initializeApp } from 'firebase/app'
+import 'firebase/auth'
+import 'firebase/database'
+
+export const appName = 'advreact-25-06-c6bae'
+
+const config = {
+  apiKey: 'AIzaSyBM5eZETRfWWS9BoQ-8guawlYzeW7dDToE',
+  authDomain: `${appName}.firebaseapp.com`,
+  databaseURL: `https://${appName}.firebaseio.com`,
+  projectId: appName,
+  storageBucket: '',
+  messagingSenderId: '985221034928'
+}
+
+initializeApp(config)

MobileApp/src/stores/auth.js

@@ -1,16 +1,24 @@
 import {observable, action, computed} from 'mobx'
 import { validate } from 'email-validator'
+import firebase from 'firebase'
 
 class AuthStore {
+    constructor() {
+    }
+
     @observable email = ''
     @observable password = ''
+    @observable user = null
 
     @computed get isValidEmail() {
         return validate(this.email)
     }
 
     @action setEmail = email => this.email = email
     @action setPassword = password => this.password = password
+    @action setUser = (user) => this.user = user
+
+    signIn = () => firebase.auth().signInWithEmailAndPassword(this.email, this.password)
 }
 
 export default AuthStore

MobileApp/src/stores/navigation.js → MobileApp/src/stores/custom-navigation.js

@@ -1,13 +1,16 @@
 import {NavigationActions} from 'react-navigation'
+import {autorun} from 'mobx'
 
-class NavigationStore {
+class CustomNavigationStore {
     ref = null
 
-    setNavRef = ref => this.ref = ref
+    setNavRef = ref => {
+        this.ref = ref
+    }
 
     goTo = routeName => this.ref.dispatch(NavigationActions.navigate({
         routeName
     }))
 }
 
-export default NavigationStore
+export default CustomNavigationStore

MobileApp/src/stores/events.js

@@ -0,0 +1,20 @@
+import firebase from 'firebase/app'
+import {action, observable} from 'mobx'
+import {entitiesFromFB} from './utils'
+
+class EventsStore {
+    @observable loading = false
+    @observable list = []
+    @observable error = false
+
+    getEvents = action(() => {
+        this.loading = true
+        firebase.database().ref('events').once('value')
+            .then(action(data => {
+                this.loading = false
+                this.list = entitiesFromFB(data.val(), this.list)
+            }))
+    })
+}
+
+export default EventsStore