- implementing immutable.js

app/screens/Auction.js

@@ -10,6 +10,7 @@ import {
 
 import { SORT_MODES, VIEW_MODES } from '../constants/constants.js';
 
+import FilterBar from '../components/Auction/FilterBar.js';
 import GridItem from '../components/Item/Grid.js';
 import ListItem from '../components/Item/List.js';
 
@@ -17,14 +18,16 @@ export default class Auction extends Component {
   static get propTypes() {
     return {
       changeFilter: PropTypes.func,
-      items: PropTypes.array.isRequired,
+      fetchItems: PropTypes.func.isRequired,
+      fetchStatus: PropTypes.func.isRequired,
+      items: PropTypes.array,
     };
   }
 
   static get defaultProps() {
     return {
       changeFilter: () => { console.log('Change Filter Default Prop', arguments); },
-      header: null,
+      items: [],
     };
   }
 
@@ -40,6 +43,11 @@ export default class Auction extends Component {
     };
   }
 
+  componentDidMount() {
+    this.props.fetchStatus();
+    this.props.fetchItems();
+  }
+
   changeFilter(filter) {
       this.props.changeFilter('auction', filter);
   }
@@ -48,18 +56,20 @@ export default class Auction extends Component {
     this.setState({ view: mode });
   }
 
-  _keyExtractor = (item, index) => item.id;
+  _keyExtractor = (item, index) => `${item._id}_${index}`;
 
   _renderItem = (view) => ({ item }) => {
+    console.log('_renderItem', item);
     if (view === VIEW_MODES.GRID) {
-      return <GridItem details={item} />;
+      return <GridItem {...item} />;
     }
 
-    return <ListItem details={item} />;
+    return <ListItem {...item} />;
   }
 
   render() {
-    const { items, view } = this.state;
+    const { items } = this.props;
+    const { sort, view } = this.state;
 
     return (
       <View style={styles.container}>
@@ -67,11 +77,15 @@ export default class Auction extends Component {
           changeFilterer={this.changeFilter}
           changeViewMode={this.changeViewMode}
         />
-        <FlatList
-          data={items}
-          keyExtractor={this._keyExtractor}
-          renderItem={this.renderItem(view)}
-        />
+        {items.size > 0 && (
+          <FlatList
+            data={items}
+            keyExtractor={this._keyExtractor}
+            renderItem={this._renderItem(view)}
+            contentContainerStyle={styles.itemListContentContainer}
+            style={styles.itemList}
+          />
+        )}
       </View>
     );
   }
@@ -84,9 +98,11 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     backgroundColor: '#F5FCFF',
   },
-  title: {
-    fontSize: 20,
-    textAlign: 'center',
-    margin: 10,
-  }
+  itemList: {
+    width: '100%',
+  },
+  itemListContentContainer: {
+    alignItems: 'stretch',
+    justifyContent: 'flex-start',
+  },
 });

app/screens/Events.js

@@ -1,4 +1,6 @@
 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
 import {
   StyleSheet,
   Text,
@@ -6,6 +8,21 @@ import {
 } from 'react-native';
 
 export default class Events extends Component {
+  static get propTypes() {
+    return {
+      events: PropTypes.array.isRequired,
+      fetchEvents: PropTypes.func.isRequired,
+    };
+  }
+
+  constructor(props) {
+    super(props);
+  }
+
+  componentDidMount() {
+
+  }
+
   render() {
     return (
       <View style={styles.container}>