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';

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 });
    };

    render() {
        const { drawerOpen } = this.state;
        return (
            <NativeRouter>
                <ThemeProvider uiTheme={theme}>
                    <Drawer
                        ref={ref => this._drawer = ref}
                        type="overlay"
                        open={drawerOpen}
                        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} />
                        </View>
                    </Drawer>
                </ThemeProvider>
            </NativeRouter>
        );
    }
}