hometask7

MobileApp/src/components/app-navigator.js

@@ -1,16 +1,29 @@
-import {createStackNavigator} from 'react-navigation'
+import {
+  createStackNavigator,
+  createBottomTabNavigator
+} from 'react-navigation'
 import AuthScreen from './screens/auth'
 import EventListScreen from './screens/event-list'
 import EventScreen from './screens/event'
+import PeopleListScreen from './screens/people-list'
+
+const TabNavigator = createBottomTabNavigator({
+  eventList: {
+    screen: EventListScreen
+  },
+  peopletList: {
+    screen: PeopleListScreen
+  }
+})
 
 export default createStackNavigator({
-    auth: {
-        screen: AuthScreen
-    },
-    eventList: {
-        screen: EventListScreen
-    },
-    event: {
-        screen: EventScreen
-    }
-})
+  auth: {
+    screen: AuthScreen
+  },
+  eventList: {
+    screen: TabNavigator
+  },
+  event: {
+    screen: EventScreen
+  }
+})

MobileApp/src/components/common/loader.js

@@ -0,0 +1,10 @@
+import React from 'react'
+import { ActivityIndicator, View } from 'react-native'
+
+Loader = () => (
+  <View>
+    <ActivityIndicator />
+  </View>
+)
+
+export default Loader

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

@@ -0,0 +1,44 @@
+import React, { Component } from 'react'
+import { Text, StyleSheet, SectionList } from 'react-native'
+import PersonCard from './person-card'
+import groupBy from 'lodash/groupBy'
+
+class PeopleList extends Component {
+  render() {
+    const grouped = groupBy(this.props.people, (person) =>
+      person.firstName.charAt(0)
+    )
+    const sections = Object.entries(grouped).map(([letter, list]) => ({
+      title: letter,
+      data: list.map((person) => ({ key: person.uid, person }))
+    }))
+    return (
+      <SectionList
+        sections={sections}
+        renderSectionHeader={({ section }) => (
+          <Text style={styles.header}>{section.title}</Text>
+        )}
+        renderItem={({ item }) => (
+          <PersonCard person={item.person} key={item.key} />
+        )}
+      />
+    )
+  }
+}
+
+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,20 @@
+import React, { Component } from 'react'
+import { Text } from 'react-native'
+import Card from '../common/card'
+
+class PeopleCard extends Component {
+  render() {
+    const {
+      person: { firstName, lastName }
+    } = this.props
+    return (
+      <Card>
+        <Text>
+          {firstName} {lastName}
+        </Text>
+      </Card>
+    )
+  }
+}
+
+export default PeopleCard

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

@@ -1,18 +1,29 @@
 import React, { Component } from 'react'
-import {View, StyleSheet} from 'react-native'
+import { observer, inject } from 'mobx-react'
+import { StyleSheet } from 'react-native'
 import EventList from '../events/event-list'
+import Loader from '../common/loader'
 
+@inject('events')
+@observer
 class EventListScreen extends Component {
-    static propTypes = {
+  static propTypes = {}
 
-    };
+  componentDidMount() {
+    if (!this.props.events.loading && !this.props.events.loaded) {
+      this.props.events.fetchAll()
+    }
+  }
 
-    render() {
-        return <EventList events = {[]}/>
+  render() {
+    if (this.props.events.loading) {
+      return <Loader />
     }
+
+    return <EventList events={this.props.events.entities} />
+  }
 }
 
-const styles = StyleSheet.create({
-})
+const styles = StyleSheet.create({})
 
-export default EventListScreen
+export default EventListScreen

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

@@ -0,0 +1,24 @@
+import React, { Component } from 'react'
+import { observer, inject } from 'mobx-react'
+import PeopleList from '../people/people-list'
+import Loader from '../common/loader'
+
+@inject('people')
+@observer
+class PeopleListScreen extends Component {
+  componentDidMount() {
+    if (!this.props.people.loading && !this.props.people.loaded) {
+      this.props.people.fetchAll()
+    }
+  }
+
+  render() {
+    if (this.props.people.loading) {
+      return <Loader />
+    }
+
+    return <PeopleList people={this.props.people.entities} />
+  }
+}
+
+export default PeopleListScreen

MobileApp/src/stores/events.js

@@ -0,0 +1,25 @@
+import { observable, action } from 'mobx'
+import firebase from 'firebase/app'
+import { fbToEntities } from './utils'
+
+export default class EventsStore {
+  @observable loading = false
+  @observable loaded = false
+  @observable entities = []
+
+  fetchAll = action(() => {
+    this.loading = true
+
+    firebase
+      .database()
+      .ref('events')
+      .once(
+        'value',
+        action((data) => {
+          this.loading = false
+          this.entities = fbToEntities(data.val())
+          this.loaded = true
+        })
+      )
+  })
+}

MobileApp/src/stores/index.js

@@ -1,12 +1,19 @@
 import '../config'
 
 import UserStore from './user'
+import EventsStore from './events'
+import PeopleStore from './people'
 import NavigationStore from './navigation'
 
-export const navigationStore = new NavigationStore
-export const userStore = new UserStore(navigationStore)
+class Stores {
+  constructor() {
+    this.navigation = new NavigationStore(this)
+    this.user = new UserStore(this)
+    this.events = new EventsStore(this)
+    this.people = new PeopleStore(this)
+  }
+}
 
-export default {
-    user: userStore,
-    navigation: navigationStore
-}
+const stores = new Stores()
+
+export default stores

MobileApp/src/stores/people.js

@@ -0,0 +1,25 @@
+import { observable, action } from 'mobx'
+import firebase from 'firebase/app'
+import { fbToEntities } from './utils'
+
+export default class PeopleStore {
+  @observable loading = false
+  @observable loaded = false
+  @observable entities = []
+
+  fetchAll = action(() => {
+    this.loading = true
+
+    firebase
+      .database()
+      .ref('people')
+      .once(
+        'value',
+        action((data) => {
+          this.loading = false
+          this.entities = fbToEntities(data.val())
+          this.loaded = true
+        })
+      )
+  })
+}

MobileApp/src/stores/user.js

@@ -1,30 +1,33 @@
-import {observable, computed, action} from 'mobx'
+import { observable, computed, action } from 'mobx'
 import firebase from 'firebase/app'
 
 export default class UserStore {
-    constructor(navigationStore) {
-        this.navigationStore = navigationStore
-    }
+  constructor(stores) {
+    this.navigationStore = stores.navigation
+  }
 
-    @observable email = ''
-    @observable password = ''
-    @observable user = null
+  @observable email = ''
+  @observable password = ''
+  @observable user = null
 
-    @computed get isValidPassword() {
-        return this.password.length >= 8
-    }
+  @computed
+  get isValidPassword() {
+    return this.password.length >= 8
+  }
 
-    @action setEmail = (email) => this.email = email
-    @action setPassword = (password) => this.password = password
+  @action setEmail = (email) => (this.email = email)
+  @action setPassword = (password) => (this.password = password)
 
-    signIn = () => {
-        firebase.auth().signInWithEmailAndPassword(this.email, this.password)
-            .then(user => {
-                this.user = user
-                console.log('---', 123)
-                this.navigationStore.navigate('eventList')
-            })
-            .catch(error => console.error(error))
-        this.user = {}
-    }
-}
+  signIn = () => {
+    firebase
+      .auth()
+      .signInWithEmailAndPassword(this.email, this.password)
+      .then((user) => {
+        this.user = user
+        console.log('---', 123)
+        this.navigationStore.navigate('eventList')
+      })
+      .catch((error) => console.error(error))
+    this.user = {}
+  }
+}

MobileApp/src/stores/utils.js

@@ -0,0 +1,2 @@
+export const fbToEntities = (data) =>
+  Object.entries(data).map(([uid, entity]) => ({ uid, ...entity }))