Hometask/7

MobileApp/App.js

@@ -1,46 +1,24 @@
-import {configure} from 'mobx'
-import {Provider} from 'mobx-react'
+import { configure } from 'mobx'
+import { Provider } from 'mobx-react'
 
-configure({enforceActions: true})
+configure({ enforceActions: true })
+
+import React from 'react'
+import { View, Image } from 'react-native'
 
-import React from 'react';
-import {StyleSheet, View, Image} from 'react-native';
-//import SignIn from './src/components/sign-in'
-//import HelloWorld from './src/hello-world'
-import EventList from './src/components/events/event-list'
-import EventScreen from './src/components/events/event-screen'
-import fixtures from './fixtures.json'
-import img from './assets/images/logo.png'
 import AppNavigator from './src/components/app-navigator'
 import stores from './src/stores'
 
-
-const events = Object.entries(fixtures.events).map(([uid, event]) => ({...event, uid}))
-
 export default class App extends React.Component {
-    render() {
-        return <Provider {...stores}>
-            <AppNavigator ref={this.setNavRef}/>
-        </Provider>
-    }
-
-    setNavRef = (ref) => {
-        stores.navigation.setRef(ref)
-    }
+  render() {
+    return (
+      <Provider {...stores}>
+        <AppNavigator ref={this.setNavRef} />
+      </Provider>
+    )
+  }
+
+  setNavRef = (ref) => {
+    stores.navigation.setRef(ref)
+  }
 }
-
-const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-        backgroundColor: '#fff',
-        alignItems: 'center',
-        justifyContent: 'center',
-        paddingTop: 30,
-        paddingBottom: 30,
-    },
-    image: {
-        width: '100%',
-        height: 100
-    }
-});
-

MobileApp/src/components/app-navigator.js

@@ -1,16 +1,16 @@
-import {createStackNavigator} from 'react-navigation'
+import { createStackNavigator } from 'react-navigation'
 import AuthScreen from './screens/auth'
-import EventListScreen from './screens/event-list'
+import MainScreen from './screens/main'
 import EventScreen from './screens/event'
 
 export default createStackNavigator({
-    auth: {
-        screen: AuthScreen
-    },
-    eventList: {
-        screen: EventListScreen
-    },
-    event: {
-        screen: EventScreen
-    }
-})
+  auth: {
+    screen: AuthScreen
+  },
+  main: {
+    screen: MainScreen
+  },
+  event: {
+    screen: EventScreen
+  }
+})

MobileApp/src/components/common/loader.js

@@ -0,0 +1,24 @@
+import React, { Component } from 'react'
+import { ActivityIndicator, StyleSheet, View } from 'react-native'
+
+export default class Loader extends Component {
+  render() {
+    return (
+      <View style={[styles.container, styles.horizontal]}>
+        <ActivityIndicator size="large" color="#0000ff" />
+      </View>
+    )
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center'
+  },
+  horizontal: {
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+    padding: 10
+  }
+})

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

@@ -1,39 +1,49 @@
 import React, { Component } from 'react'
-import {Text, StyleSheet, SectionList} from 'react-native'
+import { Text, StyleSheet, SectionList } from 'react-native'
 import EventCard from './event-card'
 import groupBy from 'lodash/groupBy'
 
 class EventList extends Component {
-    static propTypes = {
+  static propTypes = {}
 
-    };
-
-    render() {
-        const grouped = groupBy(this.props.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 = {({section}) => <Text style={styles.header}>{section.title}</Text>}
-            renderItem = {({item}) => <EventCard event = {item.event} key = {item.key} />}
-        />
-    }
+  render() {
+    const grouped = groupBy(this.props.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
+        style={styles.sectionList}
+        sections={sections}
+        renderSectionHeader={({ section }) => (
+          <Text style={styles.header}>{section.title}</Text>
+        )}
+        renderItem={({ item }) => (
+          <EventCard event={item.event} 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
-    }
+  sectionList: {
+    paddingLeft: 20,
+    paddingRight: 20
+  },
+  header: {
+    backgroundColor: '#F0F0F0',
+    height: 40,
+    lineHeight: 40,
+    marginBottom: 5,
+    shadowOffset: {
+      height: 2,
+      width: 0
+    },
+    shadowOpacity: 0.3,
+    elevation: 3
+  }
 })
 
-export default EventList
+export default EventList

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

@@ -0,0 +1,51 @@
+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 {
+  static propTypes = {}
+
+  render() {
+    const grouped = groupBy(this.props.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
+        style={styles.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({
+  sectionList: {
+    paddingLeft: 20,
+    paddingRight: 20
+  },
+  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, 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/auth.js

@@ -1,22 +1,19 @@
 import React, { Component } from 'react'
-import {View, StyleSheet} from 'react-native'
+import { View, StyleSheet } from 'react-native'
 import SignIn from '../sign-in'
 
 class AuthScreen extends Component {
-    static propTypes = {
+  static propTypes = {}
 
-    };
+  render() {
+    return <SignIn onSignIn={this.handleSignIn} />
+  }
 
-    render() {
-        return <SignIn onSignIn = {this.handleSignIn}/>
-    }
-
-    handleSignIn = () => {
-        this.props.navigation.navigate('eventList')
-    }
+  handleSignIn = () => {
+    this.props.navigation.navigate('eventList')
+  }
 }
 
-const styles = StyleSheet.create({
-})
+const styles = StyleSheet.create({})
 
-export default AuthScreen
+export default AuthScreen

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

@@ -1,18 +1,38 @@
 import React, { Component } from 'react'
-import {View, StyleSheet} from 'react-native'
+import { View, Text, StyleSheet } from 'react-native'
+import { observer, inject } from 'mobx-react'
 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.getAllEvents()
+    }
+  }
 
-    render() {
-        return <EventList events = {[]}/>
+  render() {
+    if (this.props.events.loading) {
+      return <Loader />
     }
+    return (
+      <View>
+        <Text style={styles.header}>Events list</Text>
+        <EventList events={this.props.events.entities} />
+      </View>
+    )
+  }
 }
 
 const styles = StyleSheet.create({
+  header: {
+    fontSize: 30,
+    padding: 20
+  }
 })
 
-export default EventListScreen
+export default EventListScreen

MobileApp/src/components/screens/main.js

@@ -0,0 +1,18 @@
+import { createMaterialTopTabNavigator } from 'react-navigation'
+import EventListScreen from './event-list'
+import PeopleListScreen from './people-list'
+
+export default createMaterialTopTabNavigator({
+  eventList: {
+    screen: EventListScreen,
+    navigationOptions: {
+      title: 'Event List'
+    }
+  },
+  peopleList: {
+    screen: PeopleListScreen,
+    navigationOptions: {
+      title: 'People List'
+    }
+  }
+})