Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Reset all filters button on Events page #435

Merged
merged 16 commits into from
Jun 16, 2018
Merged

Reset all filters button on Events page #435

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
e5e0181
Initial commit with working reset button
jonyardley Jun 13, 2018
4ab0a28
Fix flow issue in tests rather than adding default prop for selectedC…
jonyardley Jun 14, 2018
162fbe8
Add some wee animation
jonyardley Jun 14, 2018
02c688f
Tidy up with constants and start test writing
jonyardley Jun 15, 2018
d8d6b99
Test to check onPress is clicked
jonyardley Jun 15, 2018
08999f9
Add test for not visible
jonyardley Jun 15, 2018
740f9d9
Add test to ensure that scroll to top method is called when reset all…
jonyardley Jun 15, 2018
e6a28c7
Added rest animation test
jonyardley Jun 15, 2018
ce17274
A bit more coveragé
jonyardley Jun 15, 2018
06d1e28
Merge branch 'master' into reset-all-filters
jonyardley Jun 15, 2018
4f79e3c
Addressed a few comments
jonyardley Jun 15, 2018
1a9bd19
Tweak tests
jonyardley Jun 15, 2018
f1176bc
Merge branch 'master' into reset-all-filters
declanslevin Jun 15, 2018
43da313
Move reset all filters inline function to instance function
Jun 16, 2018
11c94b6
Stop animation on unmount and fix unit tests
Jun 16, 2018
923aff7
Add tests for FilterHeader and EventsScreen component
Jun 16, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/actions/event-filters.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,4 +61,4 @@ export const clearStagedEventFilters = () => (

export const clearEventFilters = () => (
dispatch: Dispatch<EventFiltersAction>
) => dispatch({ type: "CLEAR__EVENT_FILTERS" });
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎺

) => dispatch({ type: "CLEAR_EVENT_FILTERS" });
45 changes: 38 additions & 7 deletions src/screens/EventsScreen/FilterHeader.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,31 +20,54 @@ export type Props = {
onFilterButtonPress: () => void,
onDateFilterButtonPress: () => void,
selectedCategories: Set<EventCategoryName>,
numTagFiltersSelected: number
numTagFiltersSelected: number,
resetAllFiltersPress: () => void
};

class FilterHeader extends React.PureComponent<Props> {
static defaultProps = {
resetAllFiltersPress: () => {},
selectedCategories: new Set()
};

render() {
const {
dateFilter,
onFilterCategoriesPress,
selectedCategories,
onFilterButtonPress,
onDateFilterButtonPress,
numTagFiltersSelected
numTagFiltersSelected,
resetAllFiltersPress
} = this.props;
const formattedDateFilter = dateFilter
? 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>
{anyAppliedFilters && (
<View style={styles.clearAllWrapper}>
<FilterHeaderButton
active={false}
text="Reset all filters"
label="Reset all filters"
style={styles.clearAll}
onPress={resetAllFiltersPress}
/>
</View>
)}
<View testID="event-filter-header" style={styles.content}>
<FilterHeaderCategories
onFilterPress={onFilterCategoriesPress}
selectedCategories={selectedCategories}
/>
</View>
</View>
</ContentPadding>
<View style={styles.contentFilters}>
Expand Down Expand Up @@ -93,6 +116,14 @@ const styles = StyleSheet.create({
borderLeftWidth: StyleSheet.hairlineWidth,
borderColor: whiteColor,
opacity: 0.4
},
clearAll: {
minHeight: 0,
paddingTop: 16
},
clearAllWrapper: {
flexDirection: "row",
justifyContent: "flex-end"
}
});

Expand Down
9 changes: 9 additions & 0 deletions src/screens/EventsScreen/FilterHeader.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ const render = (
onFilterCategoriesPress: () => {},
onFilterButtonPress: () => {},
onDateFilterButtonPress: () => {},
resetAllFiltersPress: () => {},
numTagFiltersSelected: 0
}
) => shallow(<FilterHeader {...props} />);
Expand All @@ -25,6 +26,7 @@ describe("renders correctly", () => {
onFilterCategoriesPress: () => {},
onFilterButtonPress: () => {},
onDateFilterButtonPress: () => {},
resetAllFiltersPress: () => {},
numTagFiltersSelected: 0
});
expect(output).toMatchSnapshot();
Expand All @@ -37,6 +39,7 @@ describe("renders correctly", () => {
onFilterCategoriesPress: () => {},
onFilterButtonPress: () => {},
onDateFilterButtonPress: () => {},
resetAllFiltersPress: () => {},
numTagFiltersSelected: 0
});
expect(output).toMatchSnapshot();
Expand All @@ -49,6 +52,7 @@ describe("renders correctly", () => {
onFilterCategoriesPress: () => {},
onFilterButtonPress: () => {},
onDateFilterButtonPress: () => {},
resetAllFiltersPress: () => {},
numTagFiltersSelected: 0
});
expect(output).toMatchSnapshot();
Expand All @@ -64,6 +68,7 @@ describe("renders correctly", () => {
onFilterCategoriesPress: () => {},
onFilterButtonPress: () => {},
onDateFilterButtonPress: () => {},
resetAllFiltersPress: () => {},
numTagFiltersSelected: 0
});
expect(output).toMatchSnapshot();
Expand All @@ -76,6 +81,7 @@ describe("renders correctly", () => {
onFilterCategoriesPress: () => {},
onFilterButtonPress: () => {},
onDateFilterButtonPress: () => {},
resetAllFiltersPress: () => {},
numTagFiltersSelected: 2
});
expect(output).toMatchSnapshot();
Expand All @@ -91,6 +97,7 @@ describe("filter buttons", () => {
onFilterCategoriesPress: mock,
onFilterButtonPress: () => {},
onDateFilterButtonPress: () => {},
resetAllFiltersPress: () => {},
numTagFiltersSelected: 0
});
output.find(FilterHeaderCategories).prop("onFilterPress")();
Expand All @@ -106,6 +113,7 @@ describe("filter buttons", () => {
onFilterCategoriesPress: () => {},
onFilterButtonPress: () => {},
onDateFilterButtonPress: mock,
resetAllFiltersPress: () => {},
numTagFiltersSelected: 0
});
const button = output.find(FilterHeaderButton).at(0);
Expand All @@ -122,6 +130,7 @@ describe("filter buttons", () => {
onFilterCategoriesPress: () => {},
onFilterButtonPress: mock,
onDateFilterButtonPress: () => {},
resetAllFiltersPress: () => {},
numTagFiltersSelected: 0
});
const button = output.find(FilterHeaderButton).at(1);
Expand Down
9 changes: 8 additions & 1 deletion src/screens/EventsScreen/FilterHeaderConnected.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import {
selectTagFilterSelectedCount
} from "../../selectors/event-filters";
import Component from "./FilterHeader";
import { clearEventFilters } from "../../actions/event-filters";

type OwnProps = {
onFilterCategoriesPress: Function,
Expand All @@ -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
Expand All @@ -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,
Expand Down
Loading