aboutsummaryrefslogtreecommitdiff
path: root/vnext/src
diff options
context:
space:
mode:
authorGravatar Vitaly Takmazov2018-03-15 16:12:24 +0300
committerGravatar Vitaly Takmazov2023-01-13 10:37:52 +0300
commita87c3fcaafc8c839ae1263f84502634ef61081ec (patch)
treeeaac74b23d924248f4104749370a50a123c8acfa /vnext/src
parent60e2fe05bd65480ac175378d5bb6cc903b8b1132 (diff)
switch to react-router
Diffstat (limited to 'vnext/src')
-rw-r--r--vnext/src/app.js51
-rw-r--r--vnext/src/components/Navigation.js42
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>
- )
- }
-}