Ht7

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 (

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)

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

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))
+}
+
+

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

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

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
 })

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

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

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 }) => {

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