aboutsummaryrefslogtreecommitdiff
path: root/vnext/src
diff options
context:
space:
mode:
Diffstat (limited to 'vnext/src')
-rw-r--r--vnext/src/app.js27
-rw-r--r--vnext/src/components/message.jsx26
2 files changed, 28 insertions, 25 deletions
diff --git a/vnext/src/app.js b/vnext/src/app.js
index 52f35076..7971c71f 100644
--- a/vnext/src/app.js
+++ b/vnext/src/app.js
@@ -1,23 +1,21 @@
import "whatwg-fetch"
-import React, {PropTypes} from "react"
+import React from "react"
+import PropTypes from "prop-types"
import ReactDOM from "react-dom"
import Message from "./components/Message.jsx"
-const Page = React.createClass({
- getInitialState() {
- return {msgs: [], loading: false}
- },
- propTypes: {
- msgs: PropTypes.array,
- source: PropTypes.string.isRequired
- },
+class Page extends React.Component {
+ constructor(props) {
+ super(props)
+ this.state = {msgs: [], loading: false}
+ }
render() {
var nodes = this.state.msgs.map(msg => {
return (<Message key={msg.mid} mid={msg.mid} user={msg.user} body={msg.body} timestamp={msg.timestamp}/>)
});
return (<div className="msgs">{nodes}</div>)
- },
+ }
componentDidMount() {
fetch(this.props.source)
.then(response => {
@@ -29,6 +27,11 @@ const Page = React.createClass({
console.log(ex)
});
}
-});
+};
+
+Page.propTypes = {
+ msgs: PropTypes.array,
+ source: PropTypes.string.isRequired
+}
-ReactDOM.render(<Page source="https://api.juick.com/messages" />, document.getElementById("content")); \ No newline at end of file
+ReactDOM.render(<Page source="https://api.juick.com/messages" />, document.getElementById("content"));
diff --git a/vnext/src/components/message.jsx b/vnext/src/components/message.jsx
index faeb4b4e..78ebdd38 100644
--- a/vnext/src/components/message.jsx
+++ b/vnext/src/components/message.jsx
@@ -1,15 +1,7 @@
-import React, {PropTypes} from "react"
+import React from 'react'
+import PropTypes from 'prop-types'
-const Message = React.createClass({
- propTypes: {
- mid: PropTypes.number.isRequired,
- user: PropTypes.shape({
- uid: PropTypes.number.isRequired,
- uname: PropTypes.string.isRequired
- }),
- timestamp: PropTypes.string.isRequired,
- body: PropTypes.string.isRequired
- },
+export default class Message extends React.Component {
render() { return (
<article>
<aside>
@@ -21,6 +13,14 @@ const Message = React.createClass({
<time dateTime={this.props.timestamp} title={this.props.timestamp}>{this.props.timestamp}</time></a></header>
<p>{this.props.body}</p>
</article>) }
-});
+};
-export default Message \ No newline at end of file
+Message.propTypes = {
+ mid: PropTypes.number.isRequired,
+ user: PropTypes.shape({
+ uid: PropTypes.number.isRequired,
+ uname: PropTypes.string.isRequired
+ }),
+ timestamp: PropTypes.string.isRequired,
+ body: PropTypes.string.isRequired
+}