aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--vnext/src/components/Discover.js12
-rw-r--r--vnext/src/components/Spinner.js15
-rw-r--r--vnext/src/components/Thread.js28
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 />
);
}
}