diff options
-rw-r--r-- | vnext/package.json | 4 | ||||
-rw-r--r-- | vnext/src/app.js | 51 | ||||
-rw-r--r-- | vnext/src/components/Navigation.js | 42 | ||||
-rw-r--r-- | vnext/yarn.lock | 55 |
4 files changed, 81 insertions, 71 deletions
diff --git a/vnext/package.json b/vnext/package.json index b9491701..13d6df20 100644 --- a/vnext/package.json +++ b/vnext/package.json @@ -6,7 +6,7 @@ "test": "echo \"Error: no test specified\" && exit 1", "compile": "webpack --mode=development", "dist": "webpack --mode=production", - "start": "webpack-serve" + "start": "webpack-serve --mode=development" }, "keywords": [], "author": "", @@ -35,10 +35,10 @@ ] }, "dependencies": { - "history": "^4.7.2", "react": "^16.2.0", "react-dom": "^16.2.0", "react-markdown": "^3.3.0", + "react-router-dom": "^4.2.2", "whatwg-fetch": "^2.0.3" } } diff --git a/vnext/src/app.js b/vnext/src/app.js index 1991a14d..82209e45 100644 --- a/vnext/src/app.js +++ b/vnext/src/app.js @@ -1,37 +1,50 @@ import React from "react" import ReactDOM from "react-dom" -import createHistory from 'history/createBrowserHistory'; -const history = createHistory(); +import { BrowserRouter as Router, Route, Link } from "react-router-dom" -import Navigation from "./components/Navigation" import Discover from "./components/Discover" import Post from "./components/Post" class App extends React.Component { constructor(props) { - super(props) - this.navigate = this.navigate.bind(this); + super(props); this.state = { - location: history.location + visitor: { uid: 0 } } } render() { return ( - <div className="wrapper"> - <Navigation onNavigate={this.navigate} /> - { location.pathname === "/" && - <Discover params={this.state.location.search} /> } - { location.pathname === "/post" && - <Post /> } - </div> + <Router> + <div className="wrapper"> + <header> + <div id="header_wrapper"> + <div id="logo"><Link to="/">Juick</Link></div> + <nav id="global"> + <ul> + {this.state.visitor.uid ? + <li><Link to="/?show=discuss"><i data-icon="ei-comment" data-size="s"></i>Discuss</Link></li> + : + <li><Link to="/?show=photos" rel="nofollow"><i data-icon="ei-camera" data-size="s"></i>Photos</Link></li> + } + <li><Link to="/?show=all" rel="nofollow"><i data-icon="ei-search" data-size="s"></i>Discover</Link></li> + <li><Link to="post" href="/post"><i data-icon="ei-pencil" data-size="s"></i>Post</Link> + </li> + </ul> + </nav> + <div id="search"> + <form action="/"> + <input name="search" className="text" + placeholder="Search..." /> + </form> + </div> + </div> + </header> + <Route exact path="/" component={Discover} /> + <Route path="/post" component={Post} /> + </div> + </Router> ) - } - navigate(location) { - console.log(location); - history.push(location); - this.setState({location: location}) } - } diff --git a/vnext/src/components/Navigation.js b/vnext/src/components/Navigation.js deleted file mode 100644 index 95693d81..00000000 --- a/vnext/src/components/Navigation.js +++ /dev/null @@ -1,42 +0,0 @@ -import React from 'react'; - -export default class Navigation extends React.Component { - constructor(props) { - super(props); - this.state = { - visitor: {uid: 0} - } - this.transition = this.transition.bind(this); - } - transition(event) { - event.preventDefault(); - this.props.onNavigate({ pathname: event.currentTarget.pathname, search: event.currentTarget.search}); - }; - render() { - return ( - <header> - <div id="header_wrapper"> - <div id="logo"><a href="/" onClick={this.transition}>Juick</a></div> - <nav id="global"> - <ul> - { this.state.visitor.uid ? - <li><a href="/?show=discuss" onClick={this.transition}><i data-icon="ei-comment" data-size="s"></i>Discuss</a></li> - : - <li><a href="/?show=photos" rel="nofollow" onClick={this.transition}><i data-icon="ei-camera" data-size="s"></i>Photos</a></li> - } - <li><a href="/?show=all" rel="nofollow" onClick={this.transition}><i data-icon="ei-search" data-size="s"></i>Discover</a></li> - <li><a id="post" href="/post" onClick={this.transition}><i data-icon="ei-pencil" data-size="s"></i>Post</a> - </li> - </ul> - </nav> - <div id="search"> - <form action="/"> - <input name="search" className="text" - placeholder="Search..." /> - </form> - </div> - </div> - </header> - ) - } -} diff --git a/vnext/yarn.lock b/vnext/yarn.lock index 16604c83..62d58f59 100644 --- a/vnext/yarn.lock +++ b/vnext/yarn.lock @@ -2743,7 +2743,7 @@ hoek@2.x.x: version "2.16.3" resolved "https://registry.yarnpkg.com/hoek/-/hoek-2.16.3.tgz#20bb7403d3cea398e91dc4710a8ff1b8274a25ed" -hoist-non-react-statics@^2.5.0: +hoist-non-react-statics@^2.3.0, hoist-non-react-statics@^2.5.0: version "2.5.0" resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.0.tgz#d2ca2dfc19c5a91c5a6615ce8e564ef0347e2a40" @@ -2929,7 +2929,13 @@ into-stream@^3.1.0: from2 "^2.1.1" p-is-promise "^1.1.0" -invariant@^2.2.1, invariant@^2.2.2: +invariant@^2.2.1: + version "2.2.4" + resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6" + dependencies: + loose-envify "^1.0.0" + +invariant@^2.2.2: version "2.2.2" resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.2.tgz#9e1f56ac0acdb6bf303306f338be3b204ae60360" dependencies: @@ -3223,6 +3229,10 @@ is-wsl@^1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/is-wsl/-/is-wsl-1.1.0.tgz#1f16e4aa22b04d1336b66188a66af3c600c3a66d" +isarray@0.0.1: + version "0.0.1" + resolved "https://registry.yarnpkg.com/isarray/-/isarray-0.0.1.tgz#8a18acfca9a8f4177e09abfc6038939b05d1eedf" + isarray@1.0.0, isarray@^1.0.0, isarray@~1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11" @@ -4369,6 +4379,12 @@ path-parse@^1.0.5: version "1.0.5" resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.5.tgz#3c1adf871ea9cd6c9431b6ea2bd74a0ff055c4c1" +path-to-regexp@^1.7.0: + version "1.7.0" + resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-1.7.0.tgz#59fde0f435badacba103a84e9d3bc64e96b9937d" + dependencies: + isarray "0.0.1" + path-type@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/path-type/-/path-type-3.0.0.tgz#cef31dc8e0a1a3bb0d105c0cd97cf3bf47f4e36f" @@ -4713,17 +4729,17 @@ promise@^7.1.1: dependencies: asap "~2.0.3" -prop-types@^15.6.0: - version "15.6.0" - resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.0.tgz#ceaf083022fc46b4a35f69e13ef75aed0d639856" +prop-types@^15.5.4, prop-types@^15.6.1: + version "15.6.1" + resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.1.tgz#36644453564255ddda391191fb3a125cbdf654ca" dependencies: fbjs "^0.8.16" loose-envify "^1.3.1" object-assign "^4.1.1" -prop-types@^15.6.1: - version "15.6.1" - resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.1.tgz#36644453564255ddda391191fb3a125cbdf654ca" +prop-types@^15.6.0: + version "15.6.0" + resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.0.tgz#ceaf083022fc46b4a35f69e13ef75aed0d639856" dependencies: fbjs "^0.8.16" loose-envify "^1.3.1" @@ -4867,6 +4883,29 @@ react-markdown@^3.3.0: unist-util-visit "^1.3.0" xtend "^4.0.1" +react-router-dom@^4.2.2: + version "4.2.2" + resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-4.2.2.tgz#c8a81df3adc58bba8a76782e946cbd4eae649b8d" + dependencies: + history "^4.7.2" + invariant "^2.2.2" + loose-envify "^1.3.1" + prop-types "^15.5.4" + react-router "^4.2.0" + warning "^3.0.0" + +react-router@^4.2.0: + version "4.2.0" + resolved "https://registry.yarnpkg.com/react-router/-/react-router-4.2.0.tgz#61f7b3e3770daeb24062dae3eedef1b054155986" + dependencies: + history "^4.7.2" + hoist-non-react-statics "^2.3.0" + invariant "^2.2.2" + loose-envify "^1.3.1" + path-to-regexp "^1.7.0" + prop-types "^15.5.4" + warning "^3.0.0" + react@^16.2.0: version "16.2.0" resolved "https://registry.yarnpkg.com/react/-/react-16.2.0.tgz#a31bd2dab89bff65d42134fa187f24d054c273ba" |