diff options
Diffstat (limited to 'vnext/src/components')
-rw-r--r-- | vnext/src/components/Discover.js | 12 | ||||
-rw-r--r-- | vnext/src/components/Spinner.js | 15 | ||||
-rw-r--r-- | vnext/src/components/Thread.js | 28 |
3 files changed, 39 insertions, 16 deletions
diff --git a/vnext/src/components/Discover.js b/vnext/src/components/Discover.js index daf2902f..fc1ab707 100644 --- a/vnext/src/components/Discover.js +++ b/vnext/src/components/Discover.js @@ -3,7 +3,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import Message from './Message'; -import Icon from './Icon'; +import Spinner from './Spinner'; export default class Discover extends React.Component { constructor(props) { @@ -43,18 +43,10 @@ export default class Discover extends React.Component { }); 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> - ); + ) : <Spinner />; } } -const centeredStyle = { - display: 'flex', - justifyContent: 'center', - alignItems: 'center' -} - Discover.propTypes = { msgs: PropTypes.array }; diff --git a/vnext/src/components/Spinner.js b/vnext/src/components/Spinner.js new file mode 100644 index 00000000..10a247f9 --- /dev/null +++ b/vnext/src/components/Spinner.js @@ -0,0 +1,15 @@ +import React from 'react'; + +import Icon from './Icon'; + +export default function Spinner(props) { + return ( + <div id="content" style={centeredStyle}><Icon name="ei-spinner" size="m" /></div> + ) +} + +const centeredStyle = { + display: 'flex', + justifyContent: 'center', + alignItems: 'center' +}
\ No newline at end of file diff --git a/vnext/src/components/Thread.js b/vnext/src/components/Thread.js index a17a2022..5393d7d3 100644 --- a/vnext/src/components/Thread.js +++ b/vnext/src/components/Thread.js @@ -1,6 +1,9 @@ import 'whatwg-fetch'; import React from 'react'; +import Message from './Message'; +import Spinner from './Spinner'; + export default class Thread extends React.Component { constructor(props) { super(props); @@ -10,14 +13,27 @@ export default class Thread extends React.Component { }; } componentDidMount() { + this.loadReplies(); + } + loadReplies() { + this.setState({ replies: []}) + const { mid } = this.props.match.params; + const url = `https://api.juick.com/thread?mid=${mid}`; + fetch(url) + .then(response => { + return response.json() + }) + .then(data => + this.setState({ replies: data }) + ).catch(ex => { + console.log(ex); + }); } render() { - const { user, mid } = this.props.match.params; - return ( - <div> - <h1>{user}</h1> - <p>{mid}</p> - </div> + return this.state.replies && this.state.replies.length > 0 ? ( + <Message data={this.state.replies[0]}/> + ) : ( + <Spinner /> ); } } |