-
Notifications
You must be signed in to change notification settings - Fork 93
/
demo_ajax.js
67 lines (54 loc) · 1.67 KB
/
demo_ajax.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
import React from 'react'
import PropTypes from 'prop-types'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import $ from 'jquery'
import { shuffle, slice } from 'lodash'
import { showLoading, hideLoading } from 'react-redux-loading-bar'
import Header from './components/header'
import Photos from './components/photos'
const PHOTOS_URL = 'https://gist.githubusercontent.com/mironov/90943481802c227a1585cb979d73b261/raw/e5ffa6e7b8e160be478ef2d63b6212581930d2c1/photos.json'
class DemoAjax extends React.Component {
constructor(props) {
super(props)
this.state = {
photos: [],
}
this.boundHandleFetchPhotos = this.handleFetchPhotos.bind(this)
}
componentDidMount() {
$(document).on('ajaxStart', this.props.actions.showLoading)
$(document).on('ajaxStop', this.props.actions.hideLoading)
}
componentWillUnmount() {
$(document).off('ajaxStart', this.props.actions.showLoading)
$(document).off('ajaxStop', this.props.actions.hideLoading)
}
handleFetchPhotos() {
$.getJSON(PHOTOS_URL, (data) => {
this.setState({
photos: slice(shuffle(data), 0, 5),
})
})
}
render() {
return (
<div className="center">
<Header />
<main className="p3 mx-auto">
<Photos
photos={this.state.photos}
handleFetchPhotos={this.boundHandleFetchPhotos}
/>
</main>
</div>
)
}
}
DemoAjax.propTypes = {
actions: PropTypes.object.isRequired,
}
const mapDispatchToProps = dispatch => ({
actions: bindActionCreators({ showLoading, hideLoading }, dispatch),
})
export default connect(() => ({}), mapDispatchToProps)(DemoAjax)