move filters into FancyMenu's state

Author: hawkrives

source/views/menus/components/fancy-menu.js

@@ -3,12 +3,10 @@
 import * as React from 'react'
 import {StyleSheet, SectionList} from 'react-native'
 import * as c from '../../components/colors'
-import {connect} from 'react-redux'
-import {updateMenuFilters, type ReduxState} from '../../../flux'
 import {type TopLevelViewPropsType} from '../../types'
 import type momentT from 'moment'
 import type {
-	MenuItemType,
+	MenuItemType as MenuItem,
 	MasterCorIconMapType,
 	ProcessedMealType,
 	MenuItemContainerType,
@@ -35,19 +33,17 @@ type ReactProps = TopLevelViewPropsType & {
 	refreshing?: ?boolean,
 }
 
-type ReduxDispatchProps = {
-	onFiltersChange: (f: FilterType[]) => any,
-}
-
-type ReduxStateProps = {
-	filters: FilterType[],
-}
+type FilterFunc = (filters: Array<FilterType>, item: MenuItem) => boolean
 
 type DefaultProps = {
-	applyFilters: (filters: FilterType[], item: MenuItemType) => boolean,
+	applyFilters: FilterFunc,
 }
 
-type Props = ReactProps & ReduxStateProps & ReduxDispatchProps & DefaultProps
+type Props = ReactProps & DefaultProps
+
+type State = {
+	filters: Array<FilterType>,
+};
 
 const styles = StyleSheet.create({
 	inner: {
@@ -61,51 +57,51 @@ const styles = StyleSheet.create({
 const LEFT_MARGIN = 28
 const Separator = () => <ListSeparator spacing={{left: LEFT_MARGIN}} />
 
-class FancyMenu extends React.PureComponent<Props> {
+export class FancyMenu extends React.Component<Props, State> {
 	static defaultProps = {
 		applyFilters: applyFiltersToItem,
 	}
 
-	componentDidMount() {
-		const {foodItems, menuCorIcons, meals, now, onFiltersChange} = this.props
-		const newFilters = buildFilters(values(foodItems), menuCorIcons, meals, now)
-		onFiltersChange(newFilters)
+	state = {
+		filters: [],
 	}
 
-	componentDidUpdate() {
-		if (this.props.filters.length) {
-			return null
-		}
-
-		const {foodItems, menuCorIcons, meals, now, onFiltersChange} = this.props
-		const newFilters = buildFilters(values(foodItems), menuCorIcons, meals, now)
-		onFiltersChange(newFilters)
+	static getDerivedStateFromProps(props: Props) {
+		let {foodItems, menuCorIcons, meals, now} = props
+		let filters = buildFilters(values(foodItems), menuCorIcons, meals, now)
+		return {filters}
 	}
 
-	areSpecialsFiltered = filters => Boolean(filters.find(this.isSpecialsFilter))
-	isSpecialsFilter = f =>
+	areSpecialsFiltered = (filters: Array<FilterType>) =>
+		Boolean(filters.find(this.isSpecialsFilter))
+	isSpecialsFilter = (f: FilterType) =>
 		f.enabled && f.type === 'toggle' && f.spec.label === 'Only Show Specials'
 
 	openFilterView = () => {
 		this.props.navigation.navigate('FilterView', {
 			title: `Filter ${this.props.name} Menu`,
-			pathToFilters: ['menus', this.props.name],
-			onChange: filters => this.props.onFiltersChange(filters),
+			initialFilters: this.state.filters,
+			onDismiss: filters => this.setState(() => ({filters})),
 		})
 	}
 
-	groupMenuData = (props: Props, stations: Array<StationMenuType>) => {
-		const {applyFilters, filters, foodItems} = props
+	groupMenuData = (args: {
+		filters: Array<FilterType>,
+		stations: Array<StationMenuType>,
+		foodItems: MenuItemContainerType,
+		applyFilters: FilterFunc,
+	}) => {
+		let {applyFilters, foodItems, stations, filters} = args
 
-		const derefrenceMenuItems = menu =>
+		let derefrenceMenuItems = menu =>
 			menu.items
 				// Dereference each menu item
 				.map(id => foodItems[id])
 				// Ensure that the referenced menu items exist,
 				// and apply the selected filters to the items in the menu
 				.filter(item => item && applyFilters(filters, item))
 
-		const menusWithItems = stations
+		let menusWithItems = stations
 			// We're grouping the menu items in a [label, Array<items>] tuple.
 			.map(menu => [menu.label, derefrenceMenuItems(menu)])
 			// We only want to show stations with at least one item in them
@@ -117,9 +113,10 @@ class FancyMenu extends React.PureComponent<Props> {
 	}
 
 	renderSectionHeader = ({section: {title}}: any) => {
-		const {filters, now, meals} = this.props
-		const {stations} = chooseMeal(meals, filters, now)
-		const menu = stations.find(m => m.label === title)
+		let {now, meals} = this.props
+		let {filters} = this.state
+		let {stations} = chooseMeal(meals, filters, now)
+		let menu = stations.find(m => m.label === title)
 
 		return (
 			<ListSectionHeader
@@ -130,8 +127,8 @@ class FancyMenu extends React.PureComponent<Props> {
 		)
 	}
 
-	renderItem = ({item}: {item: MenuItemType}) => {
-		const specialsFilterEnabled = this.areSpecialsFiltered(this.props.filters)
+	renderItem = ({item}: {item: MenuItem}) => {
+		let specialsFilterEnabled = this.areSpecialsFiltered(this.state.filters)
 		return (
 			<FoodItemRow
 				badgeSpecials={!specialsFilterEnabled}
@@ -142,15 +139,21 @@ class FancyMenu extends React.PureComponent<Props> {
 		)
 	}
 
-	keyExtractor = (item, index) => index.toString()
+	keyExtractor = (item: MenuItem, index: number) => index.toString()
 
 	render() {
-		const {filters, now, meals, cafeMessage} = this.props
-
-		const {label: mealName, stations} = chooseMeal(meals, filters, now)
-		const anyFiltersEnabled = filters.some(f => f.enabled)
-		const specialsFilterEnabled = this.areSpecialsFiltered(filters)
-		const groupedMenuData = this.groupMenuData(this.props, stations)
+		let {now, meals, cafeMessage, applyFilters, foodItems} = this.props
+		let {filters} = this.state
+
+		let {label: mealName, stations} = chooseMeal(meals, filters, now)
+		let anyFiltersEnabled = filters.some(f => f.enabled)
+		let specialsFilterEnabled = this.areSpecialsFiltered(filters)
+		let groupedMenuData = this.groupMenuData({
+			stations,
+			filters,
+			applyFilters,
+			foodItems,
+		})
 
 		let message = 'No items to show.'
 		if (cafeMessage) {
@@ -162,9 +165,9 @@ class FancyMenu extends React.PureComponent<Props> {
 			message = 'No items to show. Try changing the filters.'
 		}
 
-		const messageView = <NoticeView style={styles.message} text={message} />
+		let messageView = <NoticeView style={styles.message} text={message} />
 
-		const header = (
+		let header = (
 			<FilterToolbar
 				date={now}
 				filters={filters}
@@ -190,27 +193,3 @@ class FancyMenu extends React.PureComponent<Props> {
 		)
 	}
 }
-
-const mapState = (
-	state: ReduxState,
-	actualProps: ReactProps,
-): ReduxStateProps => {
-	if (!state.menus) {
-		return {filters: []}
-	}
-	return {
-		filters: state.menus[actualProps.name] || [],
-	}
-}
-
-const mapDispatch = (dispatch, actualProps: ReactProps): ReduxDispatchProps => {
-	return {
-		onFiltersChange: (filters: FilterType[]) =>
-			dispatch(updateMenuFilters(actualProps.name, filters)),
-	}
-}
-
-export const ConnectedFancyMenu = connect(
-	mapState,
-	mapDispatch,
-)(FancyMenu)