109 lines
2.4 KiB
JavaScript
109 lines
2.4 KiB
JavaScript
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 FilterBar from '../components/Auction/FilterBar.js';
|
|
import GridItem from '../components/Item/Grid.js';
|
|
import ListItem from '../components/Item/List.js';
|
|
|
|
export default class Auction extends Component {
|
|
static get propTypes() {
|
|
return {
|
|
changeFilter: PropTypes.func,
|
|
fetchItems: PropTypes.func.isRequired,
|
|
fetchStatus: PropTypes.func.isRequired,
|
|
items: PropTypes.array,
|
|
};
|
|
}
|
|
|
|
static get defaultProps() {
|
|
return {
|
|
changeFilter: () => { console.log('Change Filter Default Prop', arguments); },
|
|
items: [],
|
|
};
|
|
}
|
|
|
|
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,
|
|
};
|
|
}
|
|
|
|
componentDidMount() {
|
|
this.props.fetchStatus();
|
|
this.props.fetchItems();
|
|
}
|
|
|
|
changeFilter(filter) {
|
|
this.props.changeFilter('auction', filter);
|
|
}
|
|
|
|
changeViewMode(mode) {
|
|
this.setState({ view: mode });
|
|
}
|
|
|
|
_keyExtractor = (item, index) => `${item._id}_${index}`;
|
|
|
|
_renderItem = (view) => ({ item }) => {
|
|
console.log('_renderItem', item);
|
|
if (view === VIEW_MODES.GRID) {
|
|
return <GridItem {...item} />;
|
|
}
|
|
|
|
return <ListItem {...item} />;
|
|
}
|
|
|
|
render() {
|
|
const { items } = this.props;
|
|
const { sort, view } = this.state;
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<FilterBar
|
|
changeFilterer={this.changeFilter}
|
|
changeViewMode={this.changeViewMode}
|
|
/>
|
|
{items.size > 0 && (
|
|
<FlatList
|
|
data={items}
|
|
keyExtractor={this._keyExtractor}
|
|
renderItem={this._renderItem(view)}
|
|
contentContainerStyle={styles.itemListContentContainer}
|
|
style={styles.itemList}
|
|
/>
|
|
)}
|
|
</View>
|
|
);
|
|
}
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
backgroundColor: '#F5FCFF',
|
|
},
|
|
itemList: {
|
|
width: '100%',
|
|
},
|
|
itemListContentContainer: {
|
|
alignItems: 'stretch',
|
|
justifyContent: 'flex-start',
|
|
},
|
|
});
|