diff options
Diffstat (limited to 'vnext/src/components')
-rw-r--r-- | vnext/src/components/Discover.js | 50 | ||||
-rw-r--r-- | vnext/src/components/Navigation.js | 42 |
2 files changed, 92 insertions, 0 deletions
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 |