Reset all filters button on Events page

src/actions/event-filters.js

@@ -61,4 +61,4 @@ export const clearStagedEventFilters = () => (
 
 export const clearEventFilters = () => (
   dispatch: Dispatch<EventFiltersAction>
-) => dispatch({ type: "CLEAR__EVENT_FILTERS" });
+) => dispatch({ type: "CLEAR_EVENT_FILTERS" });

src/components/EventList.js

@@ -103,6 +103,7 @@ class EventList extends Component<Props, State> {
   sectionSeparator = () => <View style={styles.sectionSeparator} />;
 
   keyExtractor = getId;
+  sectionList = null;
 
   renderItem = ({ item }: RenderItemInfo) => {
     const {
@@ -168,6 +169,9 @@ class EventList extends Component<Props, State> {
         refreshing={refreshing}
         onRefresh={onRefresh}
         windowSize={10}
+        ref={sectionList => {
+          this.sectionList = sectionList;
+        }}
       />
     );
   }

src/constants/text.js

@@ -187,5 +187,6 @@ export default {
         stageImage: "community"
       }
     ]
-  }
+  },
+  resetAllFilters: "Reset all filters"
 };

src/screens/EventsScreen/FilterHeader.js

@@ -13,17 +13,29 @@ import {
 } from "../../constants/colors";
 import text from "../../constants/text";
 import { formatDateRange } from "../../data/formatters";
+import ResetAllFiltersButton from "./ResetAllFiltersButton";
 
 export type Props = {
   onFilterCategoriesPress: Function,
   dateFilter: ?DateRange,
   onFilterButtonPress: () => void,
   onDateFilterButtonPress: () => void,
   selectedCategories: Set<EventCategoryName>,
-  numTagFiltersSelected: number
+  numTagFiltersSelected: number,
+  resetAllFiltersPress: () => void,
+  scrollEventListToTop: () => void
 };
 
 class FilterHeader extends React.PureComponent<Props> {
+  static defaultProps = {
+    resetAllFiltersPress: () => {}
+  };
+
+  resetAllFilters = () => {
+    this.props.resetAllFiltersPress();
+    this.props.scrollEventListToTop();
+  };
+
   render() {
     const {
       dateFilter,
@@ -37,14 +49,23 @@ class FilterHeader extends React.PureComponent<Props> {
       ? formatDateRange(dateFilter)
       : text.selectDates;
 
+    const anyAppliedFilters: boolean =
+      !!dateFilter || numTagFiltersSelected > 0 || selectedCategories.size > 0;
+
     return (
       <View accessibilityTraits={["header"]} style={styles.container}>
         <ContentPadding>
-          <View testID="event-filter-header" style={styles.content}>
-            <FilterHeaderCategories
-              onFilterPress={onFilterCategoriesPress}
-              selectedCategories={selectedCategories}
+          <View>
+            <ResetAllFiltersButton
+              visible={anyAppliedFilters}
+              onPress={this.resetAllFilters}
             />
+            <View testID="event-filter-header" style={styles.content}>
+              <FilterHeaderCategories
+                onFilterPress={onFilterCategoriesPress}
+                selectedCategories={selectedCategories}
+              />
+            </View>
           </View>
         </ContentPadding>
         <View style={styles.contentFilters}>
@@ -77,7 +98,7 @@ const styles = StyleSheet.create({
     backgroundColor: filterBgColor
   },
   content: {
-    paddingTop: 16,
+    marginTop: 16,
     paddingBottom: 12
   },
   contentFilters: {

src/screens/EventsScreen/FilterHeader.test.js

@@ -5,6 +5,7 @@ import FilterHeader from "./FilterHeader";
 import type { Props as ComponentProps } from "./FilterHeader";
 import FilterHeaderButton from "./FilterHeaderButton";
 import FilterHeaderCategories from "./FilterHeaderCategories";
+import ResetAllFiltersButton from "./ResetAllFiltersButton";
 
 const render = (
   props: ComponentProps = {
@@ -13,7 +14,9 @@ const render = (
     onFilterCategoriesPress: () => {},
     onFilterButtonPress: () => {},
     onDateFilterButtonPress: () => {},
-    numTagFiltersSelected: 0
+    resetAllFiltersPress: () => {},
+    numTagFiltersSelected: 0,
+    scrollEventListToTop: () => {}
   }
 ) => shallow(<FilterHeader {...props} />);
 
@@ -25,7 +28,9 @@ describe("renders correctly", () => {
       onFilterCategoriesPress: () => {},
       onFilterButtonPress: () => {},
       onDateFilterButtonPress: () => {},
-      numTagFiltersSelected: 0
+      resetAllFiltersPress: () => {},
+      numTagFiltersSelected: 0,
+      scrollEventListToTop: () => {}
     });
     expect(output).toMatchSnapshot();
   });
@@ -37,7 +42,9 @@ describe("renders correctly", () => {
       onFilterCategoriesPress: () => {},
       onFilterButtonPress: () => {},
       onDateFilterButtonPress: () => {},
-      numTagFiltersSelected: 0
+      resetAllFiltersPress: () => {},
+      numTagFiltersSelected: 0,
+      scrollEventListToTop: () => {}
     });
     expect(output).toMatchSnapshot();
   });
@@ -49,7 +56,9 @@ describe("renders correctly", () => {
       onFilterCategoriesPress: () => {},
       onFilterButtonPress: () => {},
       onDateFilterButtonPress: () => {},
-      numTagFiltersSelected: 0
+      resetAllFiltersPress: () => {},
+      numTagFiltersSelected: 0,
+      scrollEventListToTop: () => {}
     });
     expect(output).toMatchSnapshot();
   });
@@ -64,7 +73,9 @@ describe("renders correctly", () => {
       onFilterCategoriesPress: () => {},
       onFilterButtonPress: () => {},
       onDateFilterButtonPress: () => {},
-      numTagFiltersSelected: 0
+      resetAllFiltersPress: () => {},
+      numTagFiltersSelected: 0,
+      scrollEventListToTop: () => {}
     });
     expect(output).toMatchSnapshot();
   });
@@ -76,7 +87,9 @@ describe("renders correctly", () => {
       onFilterCategoriesPress: () => {},
       onFilterButtonPress: () => {},
       onDateFilterButtonPress: () => {},
-      numTagFiltersSelected: 2
+      resetAllFiltersPress: () => {},
+      numTagFiltersSelected: 2,
+      scrollEventListToTop: () => {}
     });
     expect(output).toMatchSnapshot();
   });
@@ -91,7 +104,9 @@ describe("filter buttons", () => {
       onFilterCategoriesPress: mock,
       onFilterButtonPress: () => {},
       onDateFilterButtonPress: () => {},
-      numTagFiltersSelected: 0
+      resetAllFiltersPress: () => {},
+      numTagFiltersSelected: 0,
+      scrollEventListToTop: () => {}
     });
     output.find(FilterHeaderCategories).prop("onFilterPress")();
 
@@ -106,7 +121,9 @@ describe("filter buttons", () => {
       onFilterCategoriesPress: () => {},
       onFilterButtonPress: () => {},
       onDateFilterButtonPress: mock,
-      numTagFiltersSelected: 0
+      resetAllFiltersPress: () => {},
+      numTagFiltersSelected: 0,
+      scrollEventListToTop: () => {}
     });
     const button = output.find(FilterHeaderButton).at(0);
     button.simulate("press");
@@ -122,11 +139,33 @@ describe("filter buttons", () => {
       onFilterCategoriesPress: () => {},
       onFilterButtonPress: mock,
       onDateFilterButtonPress: () => {},
-      numTagFiltersSelected: 0
+      resetAllFiltersPress: () => {},
+      numTagFiltersSelected: 0,
+      scrollEventListToTop: () => {}
     });
     const button = output.find(FilterHeaderButton).at(1);
     button.simulate("press");
 
     expect(mock).toBeCalledWith();
   });
+
+  it("calls scrollEventListToTop when users presses 'Reset all filters' button", () => {
+    const mock = jest.fn();
+    const output = render({
+      dateFilter: null,
+      selectedCategories: new Set(["Music"]),
+      onFilterCategoriesPress: () => {},
+      onFilterButtonPress: () => {},
+      onDateFilterButtonPress: () => {},
+      resetAllFiltersPress: () => {},
+      numTagFiltersSelected: 0,
+      scrollEventListToTop: mock
+    });
+    output
+      .find(ResetAllFiltersButton)
+      .props()
+      .onPress();
+
+    expect(mock).toBeCalledWith();
+  });
 });

src/screens/EventsScreen/FilterHeaderConnected.js

@@ -11,6 +11,7 @@ import {
   selectTagFilterSelectedCount
 } from "../../selectors/event-filters";
 import Component from "./FilterHeader";
+import { clearEventFilters } from "../../actions/event-filters";
 
 type OwnProps = {
   onFilterCategoriesPress: Function,
@@ -32,6 +33,10 @@ const getNumTagFiltersSelected = createSelector(
   selectTagFilterSelectedCount
 );
 
+type DispatchProps = {
+  resetAllFiltersPress: () => void
+};
+
 // Note we must add a return type here for react-redux connect to work
 // with flow correctly. If not provided is silently fails if types do
 // not line up. See https://github.com/facebook/flow/issues/5343
@@ -40,7 +45,9 @@ const mapStateToProps = (state: State): StateProps => ({
   numTagFiltersSelected: getNumTagFiltersSelected(state)
 });
 
-const mapDispatchToProps = {};
+const mapDispatchToProps = (dispatch): DispatchProps => ({
+  resetAllFiltersPress: () => dispatch(clearEventFilters())
+});
 
 const connector: Connector<OwnProps, Props> = connect(
   mapStateToProps,

src/screens/EventsScreen/FilterHeaderConnected.test.js

@@ -35,18 +35,36 @@ const initialState = {
   }
 };
 
+const defaultProps = {
+  selectedCategories: new Set()
+};
+
 const mockStore = configureStore([thunk]);
 
 describe("ConnectedFilterHeader", () => {
   it("renders connector", () => {
     const store = mockStore(initialState);
-    const output = shallow(<FilterHeader store={store} />);
+    const output = shallow(<FilterHeader store={store} {...defaultProps} />);
     expect(output).toMatchSnapshot();
   });
 
   it("renders component", () => {
     const store = mockStore(initialState);
-    const output = shallow(<FilterHeader store={store} />);
+    const output = shallow(<FilterHeader store={store} {...defaultProps} />);
     expect(output.dive()).toMatchSnapshot();
   });
+
+  it("dispatches clear filters action", () => {
+    const store = mockStore(initialState);
+    const output = shallow(<FilterHeader store={store} {...defaultProps} />);
+
+    output.props().resetAllFiltersPress();
+
+    const actions = store.getActions();
+    expect(actions).toEqual([
+      {
+        type: "CLEAR_EVENT_FILTERS"
+      }
+    ]);
+  });
 });