71 lines
1.9 KiB
JavaScript
71 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)
|