|
@@ -33,6 +33,15 @@ const styles = StyleSheet.create({
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
|
|
|
|
+const filterItems = (filter, items) => {
|
|
|
|
+ return items.filter((item) => {
|
|
|
|
+ if ((filter === 'ACTIVE' && item.complete) || (filter === 'COMPLETED' && !item.complete)) {
|
|
|
|
+ return false;
|
|
|
|
+ }
|
|
|
|
+ return true;
|
|
|
|
+ });
|
|
|
|
+};
|
|
|
|
+
|
|
class App extends Component {
|
|
class App extends Component {
|
|
constructor(props) {
|
|
constructor(props) {
|
|
super(props);
|
|
super(props);
|
|
@@ -42,10 +51,12 @@ class App extends Component {
|
|
this.state = {
|
|
this.state = {
|
|
allComplete: false,
|
|
allComplete: false,
|
|
dataSource: ds.cloneWithRows([]),
|
|
dataSource: ds.cloneWithRows([]),
|
|
|
|
+ filter: "ALL",
|
|
items: [],
|
|
items: [],
|
|
value: ""
|
|
value: ""
|
|
};
|
|
};
|
|
this.handleAddItem = this.handleAddItem.bind(this);
|
|
this.handleAddItem = this.handleAddItem.bind(this);
|
|
|
|
+ this.handleFilter = this.handleFilter.bind(this);
|
|
this.handleRemoveItem = this.handleRemoveItem.bind(this);
|
|
this.handleRemoveItem = this.handleRemoveItem.bind(this);
|
|
this.handleToggleAllComplete = this.handleToggleAllComplete.bind(this);
|
|
this.handleToggleAllComplete = this.handleToggleAllComplete.bind(this);
|
|
this.handleToggleComplete = this.handleToggleComplete.bind(this);
|
|
this.handleToggleComplete = this.handleToggleComplete.bind(this);
|
|
@@ -67,9 +78,13 @@ class App extends Component {
|
|
this.setSource(newItems, newItems, { value: "" });
|
|
this.setSource(newItems, newItems, { value: "" });
|
|
}
|
|
}
|
|
|
|
|
|
|
|
+ handleFilter(filter) {
|
|
|
|
+ this.setSource(this.state.items, filterItems(filter, this.state.items), { filter });
|
|
|
|
+ }
|
|
|
|
+
|
|
handleRemoveItem(key) {
|
|
handleRemoveItem(key) {
|
|
const newItems = this.state.items.filter((item) => item.key !== key);
|
|
const newItems = this.state.items.filter((item) => item.key !== key);
|
|
- this.setSource(newItems, newItems);
|
|
|
|
|
|
+ this.setSource(newItems, filterItems(this.state.filter, newItems));
|
|
}
|
|
}
|
|
|
|
|
|
handleToggleAllComplete() {
|
|
handleToggleAllComplete() {
|
|
@@ -79,7 +94,7 @@ class App extends Component {
|
|
complete
|
|
complete
|
|
}));
|
|
}));
|
|
// console.table(newItems);
|
|
// console.table(newItems);
|
|
- this.setSource(newItems, newItems, { allComplete: complete });
|
|
|
|
|
|
+ this.setSource(newItems, filterItems(this.state.filter, newItems), { allComplete: complete });
|
|
}
|
|
}
|
|
|
|
|
|
handleToggleComplete(key, complete) {
|
|
handleToggleComplete(key, complete) {
|
|
@@ -92,7 +107,7 @@ class App extends Component {
|
|
complete
|
|
complete
|
|
};
|
|
};
|
|
});
|
|
});
|
|
- this.setSource(newItems, newItems);
|
|
|
|
|
|
+ this.setSource(newItems, filterItems(this.state.filter, newItems));
|
|
}
|
|
}
|
|
|
|
|
|
render() {
|
|
render() {
|
|
@@ -128,7 +143,10 @@ class App extends Component {
|
|
style={styles.list}
|
|
style={styles.list}
|
|
/>
|
|
/>
|
|
</View>
|
|
</View>
|
|
- <Footer />
|
|
|
|
|
|
+ <Footer
|
|
|
|
+ filter={this.state.filter}
|
|
|
|
+ onFilter={this.handleFilter}
|
|
|
|
+ />
|
|
</View>
|
|
</View>
|
|
);
|
|
);
|
|
}
|
|
}
|