aretherecookies-mobile/js/pages/Nav.js

// @flow
import React from 'react';
import { View, SafeAreaView } from 'react-native';
import Food from './Food';
import Places from './Places';
import { BottomNavigation } from 'react-native-material-ui';
import { getLocation } from '../apis/PositionApi';
import { compose, pure, withHandlers, withProps } from 'recompose';
import { withRouterContext, type routerContext } from '../enhancers/routeEnhancers';
import { pathOr } from 'ramda';
import uiTheme from '../ui-theme';
import ProfilePage from './ProfilePage';
import AuthManager from '../AuthManager';

type Props = {
	activeTab: string,
	router: routerContext,
	setRoute: (route: string) => () => void,
};

const Nav = ({ activeTab, setRoute }: Props) => {
	return (
		<View style={uiTheme.listView}>
			<View style={{ flex: 1 }}>
				{activeTab === 'food' && <Food onRefresh={getLocation} />}
				{activeTab === 'places' && <Places onRefresh={getLocation} />}
				{activeTab === 'profile' && <ProfilePage isLoggedIn={AuthManager.isLoggedIn()} />}
			</View>
			<SafeAreaView>
				<BottomNavigation active={activeTab}>
					<BottomNavigation.Action
						key="food"
						icon="local-pizza"
						label="Food"
						onPress={setRoute('/list/food')}
					/>
					<BottomNavigation.Action
						key="places"
						icon="restaurant"
						label="Places"
						onPress={setRoute('/list/places')}
					/>
					<BottomNavigation.Action
						key="profile"
						icon="person"
						label="Profile"
						onPress={setRoute('/list/profile')}
					/>
				</BottomNavigation>
			</SafeAreaView>
		</View>
	);
};

export default compose(
	pure,
	withRouterContext,
	withProps((props: Props) => {
		const activeTab = pathOr('food', ['router', 'route', 'match', 'params', 'type'], props);
		return { activeTab };
	}),
	withHandlers({
		setRoute: (props: Props) => (route: string) => () => {
			props.router.history.replace(route);
		},
	})
)(Nav);