aretherecookies-mobile/js/App.js

//@flow
import React, { Component } from 'react';
import { View, StatusBar, AsyncStorage } from 'react-native'; // eslint-disable-line
import { ThemeProvider } from 'react-native-material-ui';
import theme from './ui-theme';
import DrawerMenu from './pages/DrawerMenu';
import rxjsconfig from 'recompose/rxjsObservableConfig';
import setObservableConfig from 'recompose/setObservableConfig';
import TopToolbar from './components/TopToolbar';
import { NativeRouter, Route, Redirect, AndroidBackButton, Switch } from 'react-router-native';
import List from './pages/List';
import FoodItemDetail from './pages/FoodItemDetail';
import PlaceDetail from './pages/PlaceDetail';
import Drawer from 'react-native-drawer';
import CreateFoodItem from './pages/CreateFoodItem';
import AuthManager from './AuthManager';
import LoginPage from './pages/LoginPage';
import LandingPage from './pages/LandingPage';
import ZipcodePage from './pages/ZipcodePage';

setObservableConfig(rxjsconfig);

export default class App extends Component {
	static displayName = 'App';

	_drawer: Drawer;

	closeDrawer = () => {
		this._drawer.close();
	};

	openDrawer = () => {
		this._drawer.open();
	};

	componentDidMount() {
		// uncomment this to force show the landing/zipcode screens
		// AsyncStorage.removeItem('zipcode');
	}

	render() {
		return (
			<NativeRouter>
				<AndroidBackButton>
					<ThemeProvider uiTheme={theme}>
						<Drawer
							ref={ref => (this._drawer = ref)}
							type="overlay"
							tapToClose={true}
							acceptPan={true}
							panCloseMask={0.5}
							openDrawerOffset={100}
							content={<DrawerMenu onCloseDrawer={this.closeDrawer} />}
							tweenDuration={250}
							tweenEasing="easeInOutQuad"
							tweenHandler={ratio => {
								return {
									mainOverlay: { opacity: ratio / 1.4, backgroundColor: 'black' },
								};
							}}>
							<StatusBar backgroundColor={theme.statusBarColor} />
							<Redirect from="/" to="/landing" />
							<Switch>
								<Route path="/landing" component={LandingPage} />
								<View style={theme.page.container}>
									<TopToolbar toggleSideMenu={this.openDrawer} />
									<Route path="/list/:type" component={List} />
									<Route path="/foodItem/:id" component={FoodItemDetail} />
									<Route path="/place/:id" component={PlaceDetail} />
									<Route path="/login" component={LoginPage} />
									<Route path="/zipcode" component={ZipcodePage} />
									<Route
										path="/createFoodItem"
										render={() => {
											if (!AuthManager.isLoggedIn()) {
												return <Redirect to="/login?returnto=/createFoodItem" />;
											}
											return <CreateFoodItem />;
										}}
									/>
								</View>
							</Switch>
						</Drawer>
					</ThemeProvider>
				</AndroidBackButton>
			</NativeRouter>
		);
	}
}