- Cleanup

app/screens/Marketplace.js

@@ -1,30 +1,38 @@
+import { List } from 'immutable';
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 
 import {
   FlatList,
-  StyleSheet,
   Text,
   View,
 } from 'react-native';
 
-import { SORT_MODES, VIEW_MODES } from '../constants/constants.js';
+import { SORT_MODES, AUCTION_VIEW_MODES } from '../constants/constants.js';
 
-import GridItem from '../components/Item/Grid.js';
-import ListItem from '../components/Item/List.js';
+import FilterBar from '../components/Auction/FilterBar.js';
+import AuctionListItem from '../containers/Auction/AuctionListItem.js';
+
+//import styles from './Marketplace.styles.js';
 
 export default class Marketplace extends Component {
   static get propTypes() {
     return {
       changeFilter: PropTypes.func,
-      items: PropTypes.array.isRequired,
+      changeViewMode: PropTypes.func.isRequired,
+      fetchItems: PropTypes.func.isRequired,
+      fetchStatus: PropTypes.func.isRequired,
+      items: PropTypes.oneOfType([
+        PropTypes.array,
+        PropTypes.instanceOf(List),
+      ]),
     };
   }
 
   static get defaultProps() {
     return {
       changeFilter: () => { console.log('Change Filter Default Prop', arguments); },
-      header: null,
+      items: [],
     };
   }
 
@@ -36,57 +44,42 @@ export default class Marketplace extends Component {
 
     this.state = {
       sort: SORT_MODES.TITLE_ASC,
-      view: VIEW_MODES.LIST,
+      view: AUCTION_VIEW_MODES.ALL,
     };
   }
 
+  componentDidMount() {
+    this.props.fetchStatus();
+    this.props.fetchItems();
+  }
+
   changeFilter(filter) {
-      this.props.changeFilter('market', filter);
+      this.props.changeFilter('auction', filter);
   }
 
-  changeViewMode(mode) {
-    this.setState({ view: mode });
-  }
+  _keyExtractor = (item, index) => `${item._id}_${index}`;
 
-  _keyExtractor = (item, index) => item.id;
-
-  _renderItem = (view) => ({ item }) => {
-    if (view === VIEW_MODES.GRID) {
-      return <GridItem {...item} />;
-    }
-
-    return <ListItem {...item} />;
-  }
+  _renderAuctionListItem = ({ item }) => <AuctionListItem item={item} />;
 
   render() {
-    const { items, view } = this.state;
+    const { items } = this.props;
+    const { sort, view } = this.state;
 
     return (
       <View style={styles.container}>
         <FilterBar
           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._renderAuctionListItem}
+            contentContainerStyle={styles.itemListContentContainer}
+            style={styles.itemList}
+          />
+        )}
       </View>
     );
   }
 }
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: '#F5FCFF',
-  },
-  title: {
-    fontSize: 20,
-    textAlign: 'center',
-    margin: 10,
-  }
-});