aretherecookies-mobile/js/modals/FilterModal.js

// @flow
import React from 'react';
import { View, TouchableOpacity, Text } from 'react-native';
// import CheckBox from 'react-native-checkbox';
import { Checkbox } from 'react-native-material-ui';
import Modal from './Modal';
import { withFilter } from '../enhancers/filterEnhancers';
import typeof FilterRecord from '../records/FilterRecord';
import { CATEGORIES, type Category } from '../constants/CategoryConstants';
import { getCategoryText } from '../helpers/CategoryHelpers';
import OrderbyPicker, { type Orderby } from '../components/OrderbyPicker';
import RadiusPicker from '../components/RadiusPicker';
import { compose, withHandlers, withState, onlyUpdateForKeys } from 'recompose';

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,
};

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

	return (
		<Modal isVisible={isVisible}>
			<Text style={{ marginLeft: 20, marginTop: 15, fontSize: 20, fontWeight: 'bold' }}>
				Filters
			</Text>
			<View
				style={{
					padding: 15,
					flexDirection: 'column',
					justifyContent: 'space-around',
					height: 400,
				}}>
				{CATEGORIES.map((category: Category) => {
					const isChecked = categories.has(category);
					return (
						<View key={category} style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
							<Text style={{ fontSize: 15 }}>{getCategoryText(category)}</Text>
							<View style={{ width: 40 }}>
								<Checkbox
									value={isChecked ? 0 : 1}
									checked={isChecked}
									onCheck={toggleCategory(category, isChecked)}
									label=""
								/>
							</View>
						</View>
					);
				})}
				<View
					style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
					<Text>Sort By</Text>
					<OrderbyPicker
						selected={orderby}
						onValueChange={updateOrderby}
						style={theme.modalDropDown}
					/>
				</View>
				<View
					style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
					<Text>Search Radius</Text>
					<RadiusPicker
						selected={radius}
						onValueChange={updateRadius}
						style={theme.modalDropDown}
					/>
				</View>
				<View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-end' }}>
					<View style={{ width: 150, flexDirection: 'row', justifyContent: 'flex-end' }}>
						<TouchableOpacity onPress={onClose}>
							<Text style={theme.modalButton}>CANCEL</Text>
						</TouchableOpacity>
						<TouchableOpacity onPress={applyChanges}>
							<Text style={theme.modalButton}>APPLY</Text>
						</TouchableOpacity>
					</View>
				</View>
			</View>
		</Modal>
	);
};

export default compose(
	withFilter,
	withState('currentFilter', 'setCurrentFilter', (props: Props) => props.filter),
	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();
		},
	}),
	onlyUpdateForKeys(['isVisible', 'currentFilter'])
)(FilterModal);