aretherecookies-mobile/js/pages/Nav.js

// @flow
import React from 'react';
import { View } 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, lifecycle } 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>
			<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="favorites" icon="favorite" label="Favorites" />
				<BottomNavigation.Action
					key="profile"
					icon="person"
					label="Profile"
					onPress={setRoute('/list/profile')}
				/>
			</BottomNavigation>
		</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);
		},
		getLocation: (props: Props) => async () => {
			try {
				await getLocation();
			} catch (error) {
				props.router.history.replace('/landing');
			}
		},
	}),
	lifecycle({
		componentDidMount() {
			this.props.getLocation();
		},
	})
)(Nav);