aretherecookies-mobile/js/App.js

//@flow
import React, { Component } from 'react';
import { View } from 'react-native';
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 } 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';

setObservableConfig(rxjsconfig);

type State = {
	drawerOpen: boolean,
};

export default class App extends Component {
	state = { drawerOpen: false };

	state: State;

	toggleDrawer = () => {
		this.setState(({ drawerOpen }) => ({ drawerOpen: !drawerOpen }));
	};

	closeDrawer = () => {
		this.setState({ drawerOpen: false });
	};

	openDrawer = () => {
		this.setState({ drawerOpen: true });
	};

	render() {
		const { drawerOpen } = this.state;
		return (
			<NativeRouter>
				<ThemeProvider uiTheme={theme}>
					<Drawer
						ref={ref => (this._drawer = ref)}
						type="overlay"
						open={drawerOpen}
						onOpen={this.openDrawer}
						onClose={this.closeDrawer}
						openDrawerOffset={100}
						content={<DrawerMenu onCloseDrawer={this.closeDrawer} />}
					>
						<View style={theme.page.container}>
							<TopToolbar toggleSideMenu={this.toggleDrawer} />
							<Redirect from="/" to="/list/food" />
							<Route path="/list/:type" component={List} />
							<Route path="/foodItem/:id" component={FoodItemDetail} />
							<Route path="/place/:id" component={PlaceDetail} />
							<Route path="/createFoodItem" component={CreateFoodItem} />
						</View>
					</Drawer>
				</ThemeProvider>
			</NativeRouter>
		);
	}
}