diff options
author | 2018-06-16 22:13:40 +0300 | |
---|---|---|
committer | 2023-01-13 10:37:52 +0300 | |
commit | 67afd8e9378c65bff11a2aac21d95577fa916dc5 (patch) | |
tree | 299ae99f74df6285687d978c74875fc583af98e3 /vnext/src/components/Feeds.js | |
parent | 9177719daf40ca63b73f78602283902b3c615bae (diff) |
Discussions
Diffstat (limited to 'vnext/src/components/Feeds.js')
-rw-r--r-- | vnext/src/components/Feeds.js | 71 |
1 files changed, 71 insertions, 0 deletions
diff --git a/vnext/src/components/Feeds.js b/vnext/src/components/Feeds.js new file mode 100644 index 00000000..3c183f7f --- /dev/null +++ b/vnext/src/components/Feeds.js @@ -0,0 +1,71 @@ +import 'whatwg-fetch'; +import React from 'react'; +import PropTypes from 'prop-types'; +import * as qs from 'query-string'; + +import Message from './Message'; +import Spinner from './Spinner'; + +export function Discover(props) { + return (<Feed baseUrl="https://api.juick.com/messages" {...props} />) +} + +export function Discussions(props) { + return (<Feed authRequired="true" baseUrl="https://api.juick.com/messages/discussions" {...props} />) +} + +class Feed extends React.Component { + constructor(props) { + super(props); + this.state = { + msgs: [] + }; + this.loadMessages = this.loadMessages.bind(this); + } + componentDidMount() { + this.loadMessages(this.props.visitor.hash); + } + componentWillReceiveProps(nextProps) { + if (this.props.location.search != nextProps.location.search + || this.props.visitor != nextProps.visitor) { + this.loadMessages(nextProps.visitor.hash, nextProps.location.search) + } + } + loadMessages(hash = '', filter = '') { + this.setState({ msgs: [] }) + let params = qs.parse(filter) || {} + let url = this.props.baseUrl; + if (hash) { + params.hash = hash; + } + if (Object.keys(params).length > 0) { + url = `${url}?${qs.stringify(params)}`; + } + if (!params.hash && this.props.authRequired) { + return + } + 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 this.state.msgs.length > 0 ? ( + <div className="msgs" id="content">{nodes}</div> + ) : <Spinner />; + } +} + +Feed.propTypes = { + msgs: PropTypes.array, + baseUrl: PropTypes.string +}; |