Features/navbar skeleton 73 #14
Conversation
client/src/containers/app/index.js
Outdated
|
|
||
| <main> | ||
| <Route exact path="/" component={Home} /> | ||
| <Route exact path="/about-us" component={About} /> | ||
| <Route exact path="/navbar" component={Navbar} /> |
There was a problem hiding this comment.
Remove line, we don't need a route for the navbar
client/src/containers/app/index.js
Outdated
| <Link to="/">Home</Link> | ||
| <Link to="/about-us">About</Link> | ||
| </header> | ||
| <Navbar /> |
client/src/containers/app/index.js
Outdated
| @@ -1,7 +1,9 @@ | |||
| import React, { Component } from 'react'; | |||
| import { Route, Link } from 'react-router-dom' | |||
There was a problem hiding this comment.
remove Link from import as it's not being used anymore
client/src/containers/home/index.js
Outdated
| <button onClick={() => changePage()}>Go to about page via redux</button> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| const mapStateToProps = state => { | ||
| return { | ||
| message: state.app.example.message | ||
| //message: state.app.example.message | ||
| message: state.navbar |
There was a problem hiding this comment.
revert this back to original state, just so we don't have unnecessary file changes
| "About" | ||
| */ | ||
| export default () => ( | ||
| <div> |
There was a problem hiding this comment.
I don't think we need this wrapping div
| <FlatButton | ||
| href="/" | ||
| label="MESA" | ||
| /> |
There was a problem hiding this comment.
add this to the line above
like:
<FlatButton
href="/"
label="MESA" />
client/src/containers/app/index.js
Outdated
|
|
||
| <main> | ||
| <Route exact path="/" component={Home} /> | ||
| <Route exact path="/about-us" component={About} /> | ||
| <Route exact path="/navbar" component={Navbar} /> | ||
| <Route exact path="/demo" component={Demo} /> |
client/src/containers/home/index.js
Outdated
| @@ -3,21 +3,24 @@ import { push } from 'react-router-redux' | |||
| import { bindActionCreators } from 'redux' | |||
| import { connect } from 'react-redux' | |||
|
|
|||
|
|
|||
client/src/containers/home/index.js
Outdated
| const Home = props => { | ||
| const { changePage, message } = props | ||
|
|
||
| return ( | ||
| <div> | ||
| <h1>Home</h1> | ||
| <p>{message}</p> | ||
|
|
| </Toolbar> | ||
| </header> | ||
| </div> | ||
| ); |
There was a problem hiding this comment.
remove ';'
<MenuItem
containerElement={<Link to="/about" />}
value="about"
primaryText="About" />
For the links to work correctly we need to wrap them in our router Link component. If we don't do this then the server makes a roundtrip and reloads the page with the new route. With this in place the browser doesn't need to refresh see: mui/material-ui#204
client/package.json
Outdated
| @@ -21,6 +26,7 @@ | |||
| "start": "react-scripts start", | |||
| "build": "react-scripts build", | |||
| "test": "react-scripts test --env=jsdom", | |||
| "eject": "react-scripts eject" | |||
| "eject": "react-scripts eject", | |||
| "toolbox": "react-toolbox-themr" | |||
There was a problem hiding this comment.
remove anything eject and react-toolbox related
afterwards be sure to run 'yarn' on the command line to update the yarn.lock file
client/src/containers/app/index.js
Outdated
| import Home from '../home' | ||
| import About from '../about' | ||
| import Navbar from '../navbar' | ||
| import Demo from '../demo' |
There was a problem hiding this comment.
Is this supposed to include deleting "import Navbar ..." ?
| @@ -0,0 +1,80 @@ | |||
| import React from 'react' | |||
| import { Route, Link } from 'react-router-dom' | |||
| import About from '../about' | |||
There was a problem hiding this comment.
remove line, unnecessary import
| @@ -0,0 +1,80 @@ | |||
| import React from 'react' | |||
| import { Route, Link } from 'react-router-dom' | |||
There was a problem hiding this comment.
remove route from import, it isn't being used
| import RaisedButton from 'material-ui/RaisedButton' | ||
| import FlatButton from 'material-ui/FlatButton' | ||
| import Divider from 'material-ui/Divider' | ||
| import TextField from 'material-ui/TextField' |
There was a problem hiding this comment.
You can replace all those import statements with this:
import {
IconMenu,
IconButton,
MenuItem,
RaisedButton,
FlatButton,
Divider,
TextField
} from 'material-ui'
Added in a navigation bar including empty links to all planned pages: