- Initial commit

app/screens/Marketplace.js

@@ -0,0 +1,92 @@
+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 GridItem from '../components/Item/Grid.js';
+import ListItem from '../components/Item/List.js';
+
+export default class Marketplace extends Component {
+  static get propTypes() {
+    return {
+      changeFilter: PropTypes.func,
+      items: PropTypes.array.isRequired,
+    };
+  }
+
+  static get defaultProps() {
+    return {
+      changeFilter: () => { console.log('Change Filter Default Prop', arguments); },
+      header: null,
+    };
+  }
+
+  constructor(props) {
+    super(props);
+
+    this.changeFilter = this.changeFilter.bind(this);
+    this.changeViewMode = this.changeViewMode.bind(this);
+
+    this.state = {
+      sort: SORT_MODES.TITLE_ASC,
+      view: VIEW_MODES.LIST,
+    };
+  }
+
+  changeFilter(filter) {
+      this.props.changeFilter('market', filter);
+  }
+
+  changeViewMode(mode) {
+    this.setState({ view: mode });
+  }
+
+  _keyExtractor = (item, index) => item.id;
+
+  _renderItem = (view) => ({ item }) => {
+    if (view === VIEW_MODES.GRID) {
+      return <GridItem {...item} />;
+    }
+
+    return <ListItem {...item} />;
+  }
+
+  render() {
+    const { items, 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)}
+        />
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#F5FCFF',
+  },
+  title: {
+    fontSize: 20,
+    textAlign: 'center',
+    margin: 10,
+  }
+});