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 />
     );
   }
 }