aretherecookies-mobile/js/modals/FilterModal.js

// @flow
import React from 'react';
import { View, TouchableOpacity, Text } from 'react-native';
import { Checkbox } from 'react-native-material-ui';
import { withFilter } from '../enhancers/filterEnhancers';
import typeof FilterRecord from '../records/FilterRecord';
import { CATEGORIES, type Category } from '../constants/CategoryConstants';
import { getCategoryText } from '../helpers/CategoryHelpers';
import { compose, withHandlers, withState, onlyUpdateForKeys } from 'recompose';
import FullScreenModal from './FullScreenModal';
import { Divider } from 'react-native-material-ui';
import { getOrderbyText } from '../helpers/OrderByHelpers';
import OrderByModal from './OrderByModal';
import RadiusModal from './RadiusModal';
import { type OrderBy } from '../consts/OrderBy';

import theme from '../ui-theme';

type Props = {
	isVisible: boolean,
	onClose: () => void,
	filter: FilterRecord,
	setFilter: (f: FilterRecord) => void,
	currentFilter: FilterRecord,
	setCurrentFilter: (currentFilter: FilterRecord) => void,
	toggleCategory: (category: Category, isChecked: boolean) => () => void,
	applyChanges: () => void,
	updateOrderby: (orderby: OrderBy) => void,
	updateRadius: (radius: number) => void,
	setRadiusModalOpen: () => void,
	toggleRadiusModalOpen: () => void,
	radiusModalOpen: boolean,
	toggleOrderByModalOpen: () => void,
	orderByModalOpen: boolean,
};

const rowStyle = { flexDirection: 'row', justifyContent: 'space-between', padding: 15 };

const selectedItemText = { marginTop: 10, color: theme.palette.disabledColor };

const FilterModal = (props: Props) => {
	const {
		isVisible,
		onClose,
		currentFilter: { orderby, categories, radius },
		toggleCategory,
		applyChanges,
		updateOrderby,
		updateRadius,
		toggleOrderByModalOpen,
		orderByModalOpen,
		radiusModalOpen,
		toggleRadiusModalOpen,
	} = props;

	if (!isVisible) {
		return null;
	}

	if (orderByModalOpen) {
		return (
			<OrderByModal onUpdate={updateOrderby} onClose={toggleOrderByModalOpen} orderBy={orderby} />
		);
	}

	if (radiusModalOpen) {
		return <RadiusModal onUpdate={updateRadius} onClose={toggleRadiusModalOpen} radius={radius} />;
	}

	return (
		<FullScreenModal title="Filter Food" onClose={onClose} onSave={applyChanges}>
			{CATEGORIES.map((category: Category) => {
				const isChecked = categories.has(category);
				return (
					<View key={category}>
						<TouchableOpacity style={rowStyle} onPress={toggleCategory(category, isChecked)}>
							<Text style={{ fontSize: 15 }}>{getCategoryText(category)}</Text>
							<View style={{ width: 40 }}>
								<Checkbox
									value={isChecked ? 0 : 1}
									checked={isChecked}
									onCheck={toggleCategory(category, isChecked)}
									label=""
								/>
							</View>
						</TouchableOpacity>
						<Divider />
					</View>
				);
			})}
			<TouchableOpacity
				style={[rowStyle, { flexDirection: 'column' }]}
				onPress={toggleOrderByModalOpen}>
				<Text>Sort By</Text>
				<Text style={selectedItemText}>{getOrderbyText(orderby)}</Text>
			</TouchableOpacity>
			<Divider />
			<TouchableOpacity
				style={[rowStyle, { flexDirection: 'column' }]}
				onPress={toggleRadiusModalOpen}>
				<Text>Search Radius</Text>
				<Text style={selectedItemText}>{radius} miles</Text>
			</TouchableOpacity>
			<Divider />
		</FullScreenModal>
	);
};

export default compose(
	withFilter,
	withState('currentFilter', 'setCurrentFilter', (props: Props) => props.filter),
	withState('orderByModalOpen', 'setOrderByModalOpen', false),
	withState('radiusModalOpen', 'setRadiusModalOpen', false),
	withHandlers({
		toggleCategory: ({ currentFilter, setCurrentFilter }: Props) => (
			category: Category,
			isChecked: boolean
		) => () => {
			setCurrentFilter(
				currentFilter.update('categories', categories => {
					return isChecked ? categories.delete(category) : categories.add(category);
				})
			);
		},
		updateOrderby: ({ currentFilter, setCurrentFilter }: Props) => (orderby: OrderBy) => {
			setCurrentFilter(currentFilter.set('orderby', orderby));
		},
		updateRadius: ({ currentFilter, setCurrentFilter }: Props) => (radius: number) => {
			setCurrentFilter(currentFilter.set('radius', radius));
		},
		applyChanges: ({ onClose, currentFilter, setFilter }: Props) => () => {
			setFilter(currentFilter);
			onClose();
		},
		toggleOrderByModalOpen: ({ orderByModalOpen, setOrderByModalOpen }: Props) => () => {
			setOrderByModalOpen(!orderByModalOpen);
		},
		toggleRadiusModalOpen: ({ radiusModalOpen, setRadiusModalOpen }: Props) => () => {
			setRadiusModalOpen(!radiusModalOpen);
		},
	}),
	onlyUpdateForKeys(['isVisible', 'currentFilter', 'orderByModalOpen', 'radiusModalOpen'])
)(FilterModal);