diff options
author | 2018-02-13 16:20:54 +0300 | |
---|---|---|
committer | 2023-01-13 10:37:52 +0300 | |
commit | 185af998262b3c33ee55aee87a89d9a5948110b1 (patch) | |
tree | 9f704f89e1f7c667316c2242497661e90f5408e3 /vnext/src | |
parent | 5f6126a48678ef56b3e26357ad8491c4892e3d89 (diff) |
basic navigation
Diffstat (limited to 'vnext/src')
-rw-r--r-- | vnext/src/app.js | 49 | ||||
-rw-r--r-- | vnext/src/components/Discover.js | 50 | ||||
-rw-r--r-- | vnext/src/components/Navigation.js | 42 | ||||
-rw-r--r-- | vnext/src/style/main.css | 1 | ||||
-rw-r--r-- | vnext/src/views/index.html | 8 |
5 files changed, 116 insertions, 34 deletions
diff --git a/vnext/src/app.js b/vnext/src/app.js index ba5ce816..fed735f7 100644 --- a/vnext/src/app.js +++ b/vnext/src/app.js @@ -1,37 +1,34 @@ -import "whatwg-fetch" import React from "react" -import PropTypes from "prop-types" import ReactDOM from "react-dom" +import createHistory from 'history/createBrowserHistory'; +const history = createHistory(); -import Message from "./components/Message" +import Navigation from "./components/Navigation" +import Discover from "./components/Discover" -class Page extends React.Component { +class App extends React.Component { constructor(props) { super(props) - this.state = {msgs: [], loading: false} + this.navigate = this.navigate.bind(this); + this.state = { + location: history.location + } } - render() { - var nodes = this.state.msgs.map(msg => { - return (<Message key={msg.mid} data={msg}/>) - }); - return (<div className="msgs">{nodes}</div>) + render() { + return ( + <div className="wrapper"> + <Navigation onNavigate={this.navigate} /> + <Discover params={this.state.location.search} /> + </div> + ) + } + navigate(location) { + console.log(location); + history.push(location); + this.setState({location: location}) } - componentDidMount() { - fetch(this.props.source) - .then(response => { - return response.json() - }) - .then(data => - this.setState({ msgs: data }) - ).catch(ex => { - console.log(ex) - }); - } -}; -Page.propTypes = { - msgs: PropTypes.array, - source: PropTypes.string.isRequired } -ReactDOM.render(<Page source="https://api.juick.com/messages" />, document.getElementById("content")); + +ReactDOM.render(<App />, document.getElementById("wrapper")); diff --git a/vnext/src/components/Discover.js b/vnext/src/components/Discover.js new file mode 100644 index 00000000..2d962bda --- /dev/null +++ b/vnext/src/components/Discover.js @@ -0,0 +1,50 @@ +import "whatwg-fetch" +import React from "react" +import PropTypes from "prop-types" + +import Message from "./Message" + +export default class Discover extends React.Component { + constructor(props) { + super(props) + this.state = { + msgs: [], + loading: false + } + this.loadMessages = this.loadMessages.bind(this); + } + componentDidMount() { + this.loadMessages(); + } + componentWillReceiveProps(props) { + if (props.params != this.props.params) { + this.loadMessages(); + } + } + loadMessages() { + const search = new URLSearchParams(this.props.params); + const url = "https://api.juick.com/messages"; + fetch(url) + .then(response => { + return response.json() + }) + .then(data => + this.setState({ msgs: data }) + ).catch(ex => { + console.log(ex) + }); + } + + render() { + var nodes = this.state.msgs.map(msg => { + return (<Message key={msg.mid} data={msg}/>) + }); + return ( + <div className="msgs" id="content">{nodes}</div> + ) + } +}; + +Discover.propTypes = { + msgs: PropTypes.array +} diff --git a/vnext/src/components/Navigation.js b/vnext/src/components/Navigation.js new file mode 100644 index 00000000..1f0e9483 --- /dev/null +++ b/vnext/src/components/Navigation.js @@ -0,0 +1,42 @@ +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> + ) + } +}
\ No newline at end of file diff --git a/vnext/src/style/main.css b/vnext/src/style/main.css index f1a84ceb..24108030 100644 --- a/vnext/src/style/main.css +++ b/vnext/src/style/main.css @@ -72,7 +72,6 @@ html { #wrapper { margin: 0 auto; width: 1000px; - margin-top: 50px; } #column { float: left; diff --git a/vnext/src/views/index.html b/vnext/src/views/index.html index da5ec8a5..9f8feae9 100644 --- a/vnext/src/views/index.html +++ b/vnext/src/views/index.html @@ -39,13 +39,7 @@ </script> </head> <body id="body"> -<div id="wrapper"> - <div class="page"> - <p>Login to comment</p> - </div> -<section id="content"> -</section> -</div> +<div id="wrapper"></div> <script type="text/javascript" src="app.js"></script> </body> </html> |