70 lines
1.9 KiB
JavaScript
70 lines
1.9 KiB
JavaScript
|
|
import React, { Component } from 'react'
|
|
import { connect } from 'react-redux'
|
|
import { bindActionCreators } from 'redux'
|
|
import { loadExampleData, loadingExampleDataFailure } from '../store'
|
|
|
|
class DataList extends Component {
|
|
state = {
|
|
isDataLoading: false
|
|
}
|
|
|
|
componentDidMount () {
|
|
const { loadExampleData, loadingExampleDataFailure } = this.props
|
|
const self = this
|
|
|
|
this.setState({ isDataLoading: true })
|
|
window.fetch('https://jsonplaceholder.typicode.com/users')
|
|
.then(
|
|
function (response) {
|
|
if (response.status !== 200) {
|
|
console.log('Looks like there was a problem. Status Code: ' +
|
|
response.status)
|
|
loadingExampleDataFailure()
|
|
self.setState({ isDataLoading: false })
|
|
return
|
|
}
|
|
response.json().then(function (data) {
|
|
loadExampleData(data)
|
|
self.setState({ isDataLoading: false })
|
|
})
|
|
}
|
|
)
|
|
.catch(function (err) {
|
|
console.log('Fetch Error :-S', err)
|
|
loadingExampleDataFailure()
|
|
self.setState({ isDataLoading: false })
|
|
})
|
|
}
|
|
|
|
render () {
|
|
const { exampleData, error } = this.props
|
|
const { isDataLoading } = this.state
|
|
|
|
return (
|
|
<div>
|
|
<h1>
|
|
API DATA:
|
|
</h1>
|
|
{exampleData && !isDataLoading ? (
|
|
<pre>
|
|
<code>{JSON.stringify(exampleData, null, 2)}</code>
|
|
</pre>
|
|
) : (<p style={{ color: 'blue' }}>Loading...</p>) }
|
|
{error && <p style={{ color: 'red' }}>Error fetching data.</p>}
|
|
</div>
|
|
)
|
|
}
|
|
}
|
|
|
|
function mapStateToProps (state) {
|
|
const { exampleData, error } = state
|
|
return { exampleData, error }
|
|
}
|
|
const mapDispatchToProps = dispatch =>
|
|
bindActionCreators({ loadExampleData, loadingExampleDataFailure }, dispatch)
|
|
|
|
export default connect(
|
|
mapStateToProps,
|
|
mapDispatchToProps
|
|
)(DataList)
|