diff options
-rw-r--r-- | vnext/src/components/Discover.js | 22 | ||||
-rw-r--r-- | vnext/src/index.js | 8 |
2 files changed, 22 insertions, 8 deletions
diff --git a/vnext/src/components/Discover.js b/vnext/src/components/Discover.js index 63a0cad0..daf2902f 100644 --- a/vnext/src/components/Discover.js +++ b/vnext/src/components/Discover.js @@ -1,9 +1,9 @@ import 'whatwg-fetch'; import React from 'react'; import PropTypes from 'prop-types'; -import queryString from 'query-string'; import Message from './Message'; +import Icon from './Icon'; export default class Discover extends React.Component { constructor(props) { @@ -18,8 +18,14 @@ export default class Discover extends React.Component { componentDidMount() { this.loadMessages(); } - loadMessages() { - const url = 'https://api.juick.com/messages' + this.state.search; + componentWillReceiveProps(nextProps) { + if (this.props.location.search != nextProps.location.search) { + this.loadMessages(nextProps.location.search) + } + } + loadMessages(filter = '') { + this.setState({ msgs: []}) + const url = 'https://api.juick.com/messages' + filter; fetch(url) .then(response => { return response.json() @@ -35,12 +41,20 @@ export default class Discover extends React.Component { var nodes = this.state.msgs.map(msg => { return (<Message key={msg.mid} data={msg}/>); }); - return ( + return this.state.msgs.length > 0 ? ( <div className="msgs" id="content">{nodes}</div> + ) : ( + <div id="content" style={centeredStyle}><Icon name="ei-spinner" size="m"/></div> ); } } +const centeredStyle = { + display: 'flex', + justifyContent: 'center', + alignItems: 'center' +} + Discover.propTypes = { msgs: PropTypes.array }; diff --git a/vnext/src/index.js b/vnext/src/index.js index 97431188..88c13ae3 100644 --- a/vnext/src/index.js +++ b/vnext/src/index.js @@ -38,14 +38,14 @@ class App extends React.Component { <nav id="global"> <ul> {this.state.visitor.uid > 0 ? - <li><Link to={{ pathname: '/', search: '?show=discuss'}}><Icon name="ei-comment" size="s"/>Discuss</Link></li> + <li><Link to={{ pathname: '/'}}><Icon name="ei-comment" size="s"/>Discuss</Link></li> : - <li><Link to={{ pathname: '/', search: '?media=1'}} rel="nofollow"><Icon name="ei-camera" size="s"/>Photos</Link></li> + <li><Link to='/?media=1' rel="nofollow"><Icon name="ei-camera" size="s"/>Photos</Link></li> } - <li><Link to="/" rel="nofollow"><Icon name="ei-search" size="s"/>Discover</Link></li> + <li><Link to={{ pathname: '/'}} rel="nofollow"><Icon name="ei-search" size="s"/>Discover</Link></li> <li> {this.state.visitor.uid > 0 ? - <Link to="post" href="/post"><Icon name="ei-pencil" size="s"/>Post</Link> + <Link to={{ pathname: '/post'}}><Icon name="ei-pencil" size="s"/>Post</Link> : <LoginButton title="Login" onAuth={this.auth.bind(this)} /> } |