LBRYCommunity/spee.ch
1
0
Fork 0
Code Issues 95 Pull requests 2 Projects Releases 4 Packages Wiki Activity

updated nav bar to use react router Link

Browse source
This commit is contained in:
bill bittner 2018-01-29 12:27:22 -08:00
parent c96ec875cd
commit 728c0440d8
3 changed files with 16 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
react/components/AboutPage/index.js
View file

@ -6,7 +6,7 @@ class AboutPage extends React.Component {
return ( return (
<div> <div>
<NavBar/> <NavBar/>
<h1>About page</h1>; <h1>About page</h1>
</div> </div>
); );
} }

13
react/containers/NavBar/view.jsx
View file

@ -1,7 +1,8 @@
import React from 'react'; import React from 'react';
import request from 'utils/request'; import { Link, withRouter } from 'react-router-dom';
import Logo from 'components/Logo'; import Logo from 'components/Logo';
import NavBarChannelDropdown from 'components/NavBarChannelOptionsDropdown'; import NavBarChannelDropdown from 'components/NavBarChannelOptionsDropdown';
import request from 'utils/request';
const VIEW = 'VIEW'; const VIEW = 'VIEW';
const LOGOUT = 'LOGOUT'; const LOGOUT = 'LOGOUT';
@ -48,7 +49,7 @@ class NavBar extends React.Component {
break; break;
case VIEW: case VIEW:
// redirect to channel page // redirect to channel page
window.location.href = `/${this.props.channelName}:${this.props.channelLongId}`; this.props.history.push(`/${this.props.channelName}:${this.props.channelLongId}`);
break; break;
default: default:
break; break;
@ -63,8 +64,8 @@ class NavBar extends React.Component {
<span className="nav-bar-tagline">Open-source, decentralized image and video sharing.</span> <span className="nav-bar-tagline">Open-source, decentralized image and video sharing.</span>
</div> </div>
<div className="nav-bar--right"> <div className="nav-bar--right">
<a className="nav-bar-link link--nav-active" href="/">Publish</a> <Link className="nav-bar-link link--nav-active" to="/">Publish</Link>
<a className="nav-bar-link link--nav" href="/about">About</a> <Link className="nav-bar-link link--nav" to="/about">About</Link>
{ this.props.channelName ? ( { this.props.channelName ? (
<NavBarChannelDropdown <NavBarChannelDropdown
channelName={this.props.channelName} channelName={this.props.channelName}
@ -73,7 +74,7 @@ class NavBar extends React.Component {
LOGOUT={LOGOUT} LOGOUT={LOGOUT}
/> />
) : ( ) : (
<a id="nav-bar-login-link" className="nav-bar-link link--nav" href="/login">Channel</a> <Link id="nav-bar-login-link" className="nav-bar-link link--nav" to="/login">Channel</Link>
)} )}
</div> </div>
</div> </div>
@ -82,4 +83,4 @@ class NavBar extends React.Component {
} }
} }
export default NavBar; export default withRouter(NavBar);

12
react/root.js
View file

@ -1,7 +1,7 @@
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { Provider } from 'react-redux'; import { Provider } from 'react-redux';
import { BrowserRouter as Router, Route } from 'react-router-dom'; import { BrowserRouter, Route, Switch } from 'react-router-dom';
import PublishPage from 'components/PublishPage'; import PublishPage from 'components/PublishPage';
import AboutPage from 'components/AboutPage'; import AboutPage from 'components/AboutPage';
@ -9,9 +9,13 @@ import LoginPage from 'components/LoginPage';
const Root = ({ store }) => ( const Root = ({ store }) => (
<Provider store={store}> <Provider store={store}>
<Router> <BrowserRouter>
<Route exact path="/" component={PublishPage} /> <Switch>
</Router> <Route exact path="/" component={PublishPage} />
<Route exact path="/about" component={AboutPage} />
<Route exact path="/login" component={LoginPage} />
</Switch>
</BrowserRouter>
</Provider> </Provider>
) )