aretherecookies-mobile/js/components/ActionsButton.js

// @flow
import React from 'react';
import { ActionButton } from 'react-native-material-ui';
import { compose, pure, withHandlers } from 'recompose';
import { withRouterContext, withViewMode, withPushRoute } from '../enhancers/routeEnhancers';
import queryString from 'query-string';
import { routeWithTitle } from '../helpers/RouteHelpers';

type Props = {
	actions: Array<'add-food' | 'filter-modal' | 'view-mode'>,
	icon: string,
	viewMode: string,
	actionPressed: Function,
	toggleFilterModal: ?Function,
	pushRoute: Function,
	router: Object,
	addFoodItem: Function,
	setViewMode: (mode: string) => void,
};

const actionDefs = {
	'add-food': () => ({ icon: 'add', label: 'Add New', name: 'add-food' }),
	'filter-modal': () => ({ icon: 'filter-list', label: 'Filter', name: 'filter-modal' }),
	'view-mode': props =>
		props.viewMode === 'map'
			? { icon: 'list', label: 'View list', name: 'list-view' }
			: { icon: 'map', label: 'View map', name: 'map-view' },
};

const ActionsButton = (props: Props) => {
	const actions = (props.actions || []).map(action => actionDefs[action](props));

	return (
		<ActionButton
			actions={actions}
			icon={props.icon || 'add'}
			transition="speedDial"
			onPress={props.actionPressed}
		/>
	);
};

export default compose(
	pure,
	withRouterContext,
	withViewMode,
	withPushRoute,
	withHandlers({
		addFoodItem: ({ pushRoute }: Props) => () => {
			pushRoute(routeWithTitle('/createFoodItem', 'Add a Food Item'));
		},
		setViewMode: ({ router }: Props) => (viewMode: string) => {
			const history = router.history;
			const search = router.route.location.search;

			history.replace({
				search: queryString.stringify({
					search,
					viewMode,
				}),
			});
		},
	}),
	withHandlers({
		actionPressed: (props: Props) => (action: ?String) => {
			switch (action) {
				case 'add-food':
					props.addFoodItem();
					break;
				case 'filter-modal':
					props.toggleFilterModal && props.toggleFilterModal();
					break;
				case 'map-view':
					props.setViewMode('map');
					break;
				case 'list-view':
					props.setViewMode('list');
					break;
				default:
					break;
			}
		},
	})
)(ActionsButton);