66 lines
1.8 KiB
JavaScript
66 lines
1.8 KiB
JavaScript
import { 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)
|