65 lines
1.4 KiB
JavaScript
65 lines
1.4 KiB
JavaScript
require('whatwg-fetch')
|
|
|
|
const React = require('react')
|
|
const ReactDOM = require('react-dom')
|
|
|
|
class ResourceList extends React.Component {
|
|
constructor(props) {
|
|
super(props)
|
|
this.state = {
|
|
loading: false,
|
|
items: [],
|
|
}
|
|
}
|
|
|
|
componentWillMount() {
|
|
this.setState(Object.assign({}, this.state, { loading: true }))
|
|
|
|
fetch('http://app.tubbsfireinfo.com/recent_news.json')
|
|
.then(response => {
|
|
return response.json()
|
|
})
|
|
.then(json => {
|
|
console.log('parsed json', json)
|
|
this.setState(
|
|
Object.assign({}, this.state, { items: json, loading: false })
|
|
)
|
|
})
|
|
.catch(ex => {
|
|
console.log('parsing failed', ex)
|
|
this.setState(Object.assign({}, this.state, { loading: false }))
|
|
})
|
|
}
|
|
|
|
render() {
|
|
return <List items={this.state.items} loading={this.state.loading} />
|
|
}
|
|
}
|
|
|
|
function List({ loading, items }) {
|
|
if (loading) {
|
|
return (
|
|
<p className="lead text-center">
|
|
<i className="fa fa-spinner fa-spin mr-3" /> Loading news...
|
|
</p>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<ul className="list-group">
|
|
{items.map((item, key) => <Item item={item} key={key} />)}
|
|
</ul>
|
|
)
|
|
}
|
|
|
|
function Item({ item }) {
|
|
return (
|
|
<li className="list-group-item">
|
|
<i className="fa fa-warning mr-3" />
|
|
{item.fields.Description}
|
|
</li>
|
|
)
|
|
}
|
|
|
|
ReactDOM.render(<ResourceList />, document.getElementById('resource-list'))
|