- Menu is not working

hhimanshu · Apr 24, 2017 · 844b7b7 · 844b7b7
1 parent 298022b
commit 844b7b7
Show file tree

Hide file tree

Showing 10 changed files with 212 additions and 59 deletions.
diff --git a/README.md b/README.md
@@ -118,7 +118,7 @@ my-app/
     favicon.ico
   src/
     App.css
-    App.js
+    .App.js
     App.test.js
     index.css
     index.js
@@ -438,7 +438,7 @@ Then in `package.json`, add the following lines to `scripts`:
 
 >Note: To use a different preprocessor, replace `build-css` and `watch-css` commands according to your preprocessor’s documentation.
 
-Now you can rename `src/App.css` to `src/App.scss` and run `npm run watch-css`. The watcher will find every Sass file in `src` subdirectories, and create a corresponding CSS file next to it, in our case overwriting `src/App.css`. Since `src/App.js` still imports `src/App.css`, the styles become a part of your application. You can now edit `src/App.scss`, and `src/App.css` will be regenerated.
+Now you can rename `src/App.css` to `src/App.scss` and run `npm run watch-css`. The watcher will find every Sass file in `src` subdirectories, and create a corresponding CSS file next to it, in our case overwriting `src/App.css`. Since `src/.App.js` still imports `src/App.css`, the styles become a part of your application. You can now edit `src/App.scss`, and `src/App.css` will be regenerated.
 
 To share variables between Sass files, you can use Sass imports. For example, `src/App.scss` and other component style files could include `@import "./shared.scss";` with variable definitions.
 
@@ -605,13 +605,13 @@ import 'bootstrap/dist/css/bootstrap-theme.css';
 // components takes precedence over default styles.
 ```
 
-Import required React Bootstrap components within ```src/App.js``` file or your custom component files:
+Import required React Bootstrap components within ```src/.App.js``` file or your custom component files:
 
 ```js
 import { Navbar, Jumbotron, Button } from 'react-bootstrap';
 ```
 
-Now you are ready to use the imported React Bootstrap components within your component hierarchy defined in the render method. Here is an example [`App.js`](https://gist.githubusercontent.com/gaearon/85d8c067f6af1e56277c82d19fd4da7b/raw/6158dd991b67284e9fc8d70b9d973efe87659d72/App.js) redone using React Bootstrap.
+Now you are ready to use the imported React Bootstrap components within your component hierarchy defined in the render method. Here is an example [`.App.js`](https://gist.githubusercontent.com/gaearon/85d8c067f6af1e56277c82d19fd4da7b/raw/6158dd991b67284e9fc8d70b9d973efe87659d72/App.js) redone using React Bootstrap.
 
 ### Using a Custom Theme
 
@@ -635,7 +635,7 @@ To add Flow to a Create React App project, follow these steps:
 1. Run `npm install --save-dev flow-bin` (or `yarn add --dev flow-bin`).
 2. Add `"flow": "flow"` to the `scripts` section of your `package.json`.
 3. Run `npm run flow -- init` (or `yarn flow -- init`) to create a [`.flowconfig` file](https://flowtype.org/docs/advanced-configuration.html) in the root directory.
-4. Add `// @flow` to any files you want to type check (for example, to `src/App.js`).
+4. Add `// @flow` to any files you want to type check (for example, to `src/.App.js`).
 
 Now you can run `npm run flow` (or `yarn flow`) to check the files for type errors.
 You can optionally use an IDE like [Nuclide](https://nuclide.io/docs/languages/flow/) for a better integrated experience.
@@ -912,7 +912,7 @@ Jest will look for test files with any of the following popular naming conventio
 
 The `.test.js` / `.spec.js` files (or the `__tests__` folders) can be located at any depth under the `src` top level folder.
 
-We recommend to put the test files (or `__tests__` folders) next to the code they are testing so that relative imports appear shorter. For example, if `App.test.js` and `App.js` are in the same folder, the test just needs to `import App from './App'` instead of a long relative path. Colocation also helps find tests more quickly in larger projects.
+We recommend to put the test files (or `__tests__` folders) next to the code they are testing so that relative imports appear shorter. For example, if `App.test.js` and `.App.js` are in the same folder, the test just needs to `import App from './App'` instead of a long relative path. Colocation also helps find tests more quickly in larger projects.
 
 ### Command Line Interface
 

diff --git a/package.json b/package.json
@@ -8,6 +8,7 @@
     "react": "^15.5.4",
     "react-dom": "^15.5.4",
     "react-flexbox-grid": "^1.0.2",
+    "react-router-dom": "^4.1.1",
     "react-tap-event-plugin": "^2.0.1"
   },
   "devDependencies": {

diff --git a/src/.App.js b/src/.App.js
@@ -0,0 +1,48 @@
+import React from "react";
+import "./App.css";
+import {Row} from "react-flexbox-grid";
+import MuiThemeProvider from "material-ui/styles/MuiThemeProvider";
+import getMuiTheme from 'material-ui/styles/getMuiTheme';
+import {AppBar, MenuItem, IconMenu, IconButton} from "material-ui";
+import MoreVertIcon from "material-ui/svg-icons/navigation/more-vert";
+import SpicyMenu from "./menus/SpicyMenu";
+import foodItems from "./data/food";
+
+const AppMenu = () => {
+    return (
+        <IconMenu
+            iconButtonElement={<IconButton><MoreVertIcon /></IconButton>}
+            anchorOrigin={{horizontal: 'right', vertical: 'top'}}
+            targetOrigin={{horizontal: 'right', vertical: 'top'}}>
+            <MenuItem primaryText="Menus"/>
+            <MenuItem primaryText="Summary"/>
+        </IconMenu>
+    );
+};
+
+
+const muiTheme = getMuiTheme({
+    appBar: {
+        color: '#16a085',
+    },
+});
+const App = () => (
+    <MuiThemeProvider muiTheme={muiTheme}>
+        <div>
+            <div>
+                <Row around="lg">
+                    <AppBar
+                        title="spicyveggie"
+                        showMenuIconButton={false}
+                        iconElementRight={<AppMenu />}
+                    />
+                </Row>
+            </div>
+            <div id="content-root">
+                <SpicyMenu foodItems={foodItems}/>
+            </div>
+        </div>
+    </MuiThemeProvider>
+);
+
+export default App;
diff --git a/src/App.js b/src/App.js
@@ -1,48 +1,53 @@
 import React from "react";
-import "./App.css";
-import {Row} from "react-flexbox-grid";
-import MuiThemeProvider from "material-ui/styles/MuiThemeProvider";
-import getMuiTheme from 'material-ui/styles/getMuiTheme';
-import {AppBar, MenuItem, IconMenu, IconButton} from "material-ui";
-import MoreVertIcon from "material-ui/svg-icons/navigation/more-vert";
-import SpicyMenu from "./menus/SpicyMenu";
-import foodItems from "./data/food";
+import {AppBar, MenuItem, Drawer} from "material-ui";
+import Link from 'react-router-dom';
 
-const AppMenu = () => {
-    return (
-        <IconMenu
-            iconButtonElement={<IconButton><MoreVertIcon /></IconButton>}
-            anchorOrigin={{horizontal: 'right', vertical: 'top'}}
-            targetOrigin={{horizontal: 'right', vertical: 'top'}}>
-            <MenuItem primaryText="Menus"/>
-            <MenuItem primaryText="Summary"/>
-        </IconMenu>
-    );
-};
+class App extends React.Component {
+    constructor(props) {
+        super(props);
 
+        this.state = {
+            open: false
+        }
+    }
 
-const muiTheme = getMuiTheme({
-    appBar: {
-        color: '#16a085',
-    },
-});
-const App = () => (
-    <MuiThemeProvider muiTheme={muiTheme}>
-        <div>
+    toggleDrawer = () => this.setState({open: !this.state.open})
+
+    render() {
+        return (
             <div>
-                <Row around="lg">
-                    <AppBar
-                        title="spicyveggie"
-                        showMenuIconButton={false}
-                        iconElementRight={<AppMenu />}
+                <AppBar
+                    title="SpicyVeggie"
+                    iconClassNameRight="muidocs-icon-navigation-expand-more"
+                    onLeftIconButtonTouchTap={this.toggleDrawer}
+                />
+
+                <Drawer
+                    docked={false}
+                    width={300}
+                    onRequestChange={this.toggleDrawer}
+                    open={this.state.open}
+                >
+                    <MenuItem
+                        primaryText="Menu"
+                        containerElement={<Link to="/menu"/>}
+                        onTouchTap={() => {
+                            console.log('going home')
+                            this.toggleDrawer()
+                        }}
                     />
-                </Row>
-            </div>
-            <div id="content-root">
-                <SpicyMenu foodItems={foodItems}/>
+                    <MenuItem
+                        primaryText="Summary"
+                        containerElement={<Link to="/summary"/>}
+                        onTouchTap={() => {
+                            console.log('going summary')
+                            this.toggleDrawer()
+                        }}
+                    />
+                </Drawer>
             </div>
-        </div>
-    </MuiThemeProvider>
-);
+        );
+    }
+}
 
-export default App;
+export default App;
diff --git a/src/App.test.js b/src/App.test.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import App from './App';
+import App from './.App';
 
 it('renders without crashing', () => {
   const div = document.createElement('div');

diff --git a/src/components/menus/Menu.js b/src/components/menus/Menu.js
@@ -0,0 +1,7 @@
+import React from 'react';
+
+const Menu = () => {
+    return <h1>Menu</h1>;
+};
+
+export default Menu;
diff --git a/src/menus/SpicyMenu.js → src/components/menus/SpicyMenu.js b/src/menus/SpicyMenu.js → src/components/menus/SpicyMenu.js
@@ -2,14 +2,30 @@ import React from "react";
 import {Avatar, List, ListItem} from 'material-ui';
 import {Grid, Row, Col} from 'react-flexbox-grid';
 
+import foodItems from '../../data/food.js';
+
+
 // https://www.pexels.com/photo-license/
 // All photos on Pexels are free for any personal and commercial purpose.
+class SpicyMenu extends React.Component {
 
-const SpicyMenu = (props) => (
-    <List>
-        {props.foodItems.map(foodItem => <SpicyMenuItem key={foodItem.name} {...foodItem}/>)}
-    </List>
-);
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            foodItems: foodItems
+        }
+    }
+
+    render() {
+        return (
+            <List>
+                {this.state.foodItems.map(foodItem => <SpicyMenuItem key={foodItem.name} {...foodItem}/>)}
+            </List>
+
+        );
+    }
+}
 
 const RowItemStyle = {
     alignItems: "center"

diff --git a/src/components/summary/Summary.js b/src/components/summary/Summary.js
@@ -0,0 +1,7 @@
+import React from 'react';
+
+const Summary = () => {
+    return <h1>Summary</h1>;
+};
+
+export default Summary;
diff --git a/src/index.js b/src/index.js
@@ -1,12 +1,36 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import MuiThemeProvider from "material-ui/styles/MuiThemeProvider";
+import getMuiTheme from 'material-ui/styles/getMuiTheme';
 import injectTapEventPlugin from 'react-tap-event-plugin';
-import App from './App'
 import './index.css';
 
+import App from './App';
+import Summary from './components/summary/Summary';
+import Menu from './components/menus/Menu';
+
+import {
+    BrowserRouter as Router,
+    Route,
+    Link,
+    Switch,
+    browserHistory
+} from 'react-router-dom';
 
-// Needed for onTouchTap
-// http://stackoverflow.com/a/34015469/988941
 injectTapEventPlugin();
 
-ReactDOM.render(<App />, document.getElementById('root'));
+
+const Root = () => (
+    <MuiThemeProvider>
+        <Router history={browserHistory}>
+            <Switch>
+                <Route exact path="/" component={App}/>
+                <Route path="/menu" component={Menu}/>
+                <Route path="/summary" component={Summary}/>
+            </Switch>
+        </Router>
+    </MuiThemeProvider>
+);
+
+
+ReactDOM.render(<Root />, document.getElementById('root'));