switch to react-router

2 files changed, 32 insertions, 61 deletions

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