show actions button in both list and map views

js/components/ActionsButton.js

@@ -7,6 +7,8 @@ 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,
@@ -16,19 +18,24 @@ type Props = {
 	setViewMode: (mode: string) => void,
 };
 
-const ActionsButton = ({ viewMode, actionPressed, toggleFilterModal }: Props) => {
+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={[
-				{ icon: 'add', label: 'Add New', name: 'add' },
-				toggleFilterModal && { icon: 'filter-list', label: 'Filter', name: 'filter' },
-				viewMode === 'map'
-					? { icon: 'list', label: 'View list', name: 'list' }
-					: { icon: 'map', label: 'View map', name: 'map' },
-			].filter(Boolean)}
-			icon="add"
+			actions={actions}
+			icon={props.icon || 'add'}
 			transition="speedDial"
-			onPress={actionPressed}
+			onPress={props.actionPressed}
 		/>
 	);
 };
@@ -55,21 +62,19 @@ export default compose(
 		},
 	}),
 	withHandlers({
-		actionPressed: ({ addFoodItem, setViewMode, toggleFilterModal }: Props) => (
-			action: ?String
-		) => {
+		actionPressed: (props: Props) => (action: ?String) => {
 			switch (action) {
-				case 'add':
-					addFoodItem();
+				case 'add-food':
+					props.addFoodItem();
 					break;
-				case 'filter':
-					toggleFilterModal && toggleFilterModal();
+				case 'filter-modal':
+					props.toggleFilterModal && props.toggleFilterModal();
 					break;
-				case 'map':
-					setViewMode('map');
+				case 'map-view':
+					props.setViewMode('map');
 					break;
-				case 'list':
-					setViewMode('list');
+				case 'list-view':
+					props.setViewMode('list');
 					break;
 				default:
 					break;

js/pages/Food.js

@@ -1,5 +1,5 @@
 // @flow
-import { compose, branch, withState } from 'recompose';
+import { compose, branch, withState, withHandlers } from 'recompose';
 import FoodList from './FoodList';
 import FoodMap from './FoodMap';
 import { withRouterContext, withViewMode, withPushRoute } from '../enhancers/routeEnhancers';
@@ -8,7 +8,12 @@ export default compose(
 	withRouterContext,
 	withViewMode,
 	withPushRoute,
-	withState('isFilterModalOpen', 'toggleFilterModal', false),
+	withState('isFilterModalOpen', 'setFilterModalOpen', false),
+	withHandlers({
+		toggleFilterModal: ({ isFilterModalOpen, setFilterModalOpen }) => () => {
+			setFilterModalOpen(!isFilterModalOpen);
+		},
+	}),
 	branch(({ viewMode }) => {
 		return viewMode === 'map';
 	}, FoodMap)

js/pages/FoodList.js

@@ -24,20 +24,21 @@ class FoodList extends Component {
 
 	props: {
 		isFilterModalOpen: boolean,
-		toggleFilterModal: (val: boolean) => void,
+		toggleFilterModal: () => void,
 		foodItemsSeq: SetSeq<FoodItemRecord>,
 		isRefreshing: boolean,
 		onRefresh: () => Promise<any>,
 		onPulldown: () => {},
 	};
 
-	toggleFilterModal = () => {
-		const { isFilterModalOpen, toggleFilterModal } = this.props;
-		toggleFilterModal(!isFilterModalOpen);
-	};
-
 	render() {
-		const { isFilterModalOpen, foodItemsSeq, isRefreshing, onPulldown } = this.props;
+		const {
+			isFilterModalOpen,
+			foodItemsSeq,
+			isRefreshing,
+			onPulldown,
+			toggleFilterModal,
+		} = this.props;
 
 		const refreshing = isRefreshing || !foodItemsSeq;
 
@@ -48,8 +49,12 @@ class FoodList extends Component {
 					refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onPulldown} />}>
 					<FoodItemList foodItemsSeq={foodItemsSeq} renderFoodItem={renderFoodItem} />
 				</ScrollView>
-				<FilterModal isVisible={isFilterModalOpen} onClose={this.toggleFilterModal} />
-				<ActionsButton toggleFilterModal={this.toggleFilterModal} />
+				<FilterModal isVisible={isFilterModalOpen} onClose={toggleFilterModal} />
+				<ActionsButton
+					toggleFilterModal={toggleFilterModal}
+					actions={['add-food', 'filter-modal', 'view-mode']}
+					icon="add"
+				/>
 			</View>
 		);
 	}

js/pages/FoodMap.js

@@ -13,8 +13,7 @@ import { withPlaces } from '../enhancers/placeEnhancers';
 import typeof PlaceRecord from '../records/PlaceRecord';
 import FoodItemTile from '../components/FoodItemTile';
 import ActionsButton from '../components/ActionsButton';
-
-// import theme from '../ui-theme';
+import FilterModal from '../modals/FilterModal';
 
 type Region = {
 	latitude: number,
@@ -30,6 +29,8 @@ type Props = {
 	region: Region,
 	onRegionChange: Region => void,
 	pushRoute: () => {},
+	toggleFilterModal: () => void,
+	isFilterModalOpen: boolean,
 };
 
 const FoodMap = ({
@@ -38,6 +39,8 @@ const FoodMap = ({
 	region,
 	onRegionChange,
 	pushRoute,
+	toggleFilterModal,
+	isFilterModalOpen,
 }: Props) => {
 	return (
 		<View style={{ flex: 1 }}>
@@ -67,7 +70,12 @@ const FoodMap = ({
 					})
 					.toList()}
 			</MapView>
-			<ActionsButton />
+			<FilterModal isVisible={isFilterModalOpen} onClose={toggleFilterModal} />
+			<ActionsButton
+				actions={['add-food', 'filter-modal', 'view-mode']}
+				icon="add"
+				toggleFilterModal={toggleFilterModal}
+			/>
 		</View>
 	);
 };