Video 10: Add a Clear All Complete Button to the Footer with React Native TouchableOpacity.

app.js

@@ -56,6 +56,7 @@ class App extends Component {
       value: ""
     };
     this.handleAddItem = this.handleAddItem.bind(this);
+    this.handleClearComplete = this.handleClearComplete.bind(this);
     this.handleFilter = this.handleFilter.bind(this);
     this.handleRemoveItem = this.handleRemoveItem.bind(this);
     this.handleToggleAllComplete = this.handleToggleAllComplete.bind(this);
@@ -78,6 +79,11 @@ class App extends Component {
     this.setSource(newItems, newItems, { value: "" });
   }
 
+  handleClearComplete() {
+    const newItems = filterItems('ACTIVE', this.state.items);
+    this.setSource(newItems, filterItems(this.state.filter, newItems));
+  }
+
   handleFilter(filter) {
     this.setSource(this.state.items, filterItems(filter, this.state.items), { filter });
   }
@@ -146,6 +152,7 @@ class App extends Component {
         <Footer
           count={filterItems("ACTIVE", this.state.items).length}
           filter={this.state.filter}
+          onClearComplete={this.handleClearComplete}
           onFilter={this.handleFilter}
         />
       </View>

footer.js

@@ -50,6 +50,9 @@ class Footer extends Component {
             <Text>Completed</Text>
           </TouchableOpacity>
         </View>
+        <TouchableOpacity onPress={this.props.onClearComplete}>
+          <Text>Clear completed</Text>
+        </TouchableOpacity>
       </View>
     );
   }
@@ -58,6 +61,7 @@ class Footer extends Component {
 Footer.propTypes = {
   count: React.PropTypes.number,
   filter: React.PropTypes.string,
+  onClearComplete: React.PropTypes.func,
   onFilter: React.PropTypes.func
 };