- Linting... Prettier...

app/screens/Events.js

@@ -1,58 +1,71 @@
+import { List } from 'immutable';
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 
-import {
-  StyleSheet,
-  Text,
-  View,
-} from 'react-native';
+import { FlatList, StyleSheet, Text, View } from 'react-native';
+
+import EventListItem from '../components/Events/EventListItem.js';
 
 export default class Events extends Component {
-  static get propTypes() {
-    return {
-      events: PropTypes.array.isRequired,
-      fetchEvents: PropTypes.func.isRequired,
-    };
-  }
+    static get propTypes() {
+        return {
+            events: PropTypes.instanceOf(List),
+            fetchEvents: PropTypes.func.isRequired,
+            setActiveEvent: PropTypes.func.isRequired,
+        };
+    }
 
-  constructor(props) {
-    super(props);
-  }
+    static get defaultProps() {
+        return {
+            events: new List(),
+        };
+    }
 
-  componentDidMount() {
-    this.props.fetchEvents();
-  }
+    constructor(props) {
+        super(props);
 
-  _keyExtractor = (event, index) => `${event._id}_${index}`;
+        this._setActiveEvent = this.setActiveEvent.bind(this);
+    }
 
-  _renderEventListItem = ({ event }) => <EventListItem event={event} />;
+    componentDidMount() {
+        this.props.fetchEvents();
+    }
 
-  render() {
-    const { events } = this.props;
+    setActiveEvent(eventId) {
+        this.props.setActiveEvent(eventId);
+    }
 
-    return (
-      <View style={styles.container}>
-        {events.size > 0 && (
-          <FlatList
-            data={events}
-            keyExtractor={this._keyExtractor}
-            renderItem={this._renderEventListItem}
-            contentContainerStyle={styles.eventListContentContainer}
-            style={styles.eventList}
-          />
-        )}
-      </View>
+    _keyExtractor = (event, index) => `${event.id}_${index}`;
+
+    _renderEventListItem = ({ event }) => (
+        <EventListItem {...event} setActiveEvent={this.setActiveEvent} />
     );
-  }
+
+    render() {
+        const { events } = this.props;
+
+        return (
+            <View style={styles.container}>
+                {events.size > 0 && (
+                    <FlatList
+                        data={events}
+                        keyExtractor={this._keyExtractor}
+                        renderItem={this._renderEventListItem}
+                        contentContainerStyle={styles.eventListContentContainer}
+                        style={styles.eventList}
+                    />
+                )}
+            </View>
+        );
+    }
 }
 
 const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: '#F5FCFF',
-  },
-  eventListContentContainer: {
-  },
+    container: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: '#F5FCFF',
+    },
+    eventListContentContainer: {},
 });