/
Code.js
81 lines (71 loc) · 2.17 KB
/
Code.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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import Helmet from 'react-helmet';
import { fetchActivityIfNeeded } from '../../actions/code/code';
import {
getIsFetching,
getError,
getEvents,
getHasData
} from '../../selectors/code/code';
import styles from './Code.css'
class Code extends Component {
constructor(props) {
super(props);
this.handleRetry = this.handleRetry.bind(this);
}
componentDidMount() {
Code.fetchData({
store: this.context.store,
params: this.props.params
});
}
handleRetry() {
Code.fetchData({
store: this.context.store,
params: this.props.params
});
}
render() {
const { isFetching, error, events, hasData } = this.props;
return (
<div className={styles.root}>
<Helmet title="Code" />
{isFetching ? (
<div>Loading...</div>
) : null}
{error ? (
<div onClick={this.handleRetry}>Error... {this.props.error}</div>
) : null}
{!hasData && !isFetching ? (
<div>No data.</div>
) : null}
{events.map(event => (
<div key={event.id}>
<div dangerouslySetInnerHTML={{
__html: event.html
}} />
</div>
))}
</div>
);
}
}
Code.contextTypes = {
store: PropTypes.object.isRequired
};
Code.fetchData = function({ store }) {
return store.dispatch(fetchActivityIfNeeded());
};
// Avoid creating a new instance everytime mapStateToProps is called to ensure
// shouldComponentUpdate isn't invalidated.
const EMPTY_EVENTS = [];
function mapStateToProps(state) {
return {
isFetching: getIsFetching(state).getOrElse(false),
error: getError(state).getOrElse(null),
events: getEvents(state).getOrElse(EMPTY_EVENTS),
hasData: getHasData(state).getOrElse(false)
};
}
export default connect(mapStateToProps)(Code);