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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
|
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this file,
* You can obtain one at http://mozilla.org/MPL/2.0/. */
import {
actionCreators as ac,
actionTypes as at,
} from "common/Actions.sys.mjs";
import React from "react";
export class DSEmptyState extends React.PureComponent {
constructor(props) {
super(props);
this.onReset = this.onReset.bind(this);
this.state = {};
}
componentWillUnmount() {
if (this.timeout) {
clearTimeout(this.timeout);
}
}
onReset() {
if (this.props.dispatch && this.props.feed) {
const { feed } = this.props;
const { url } = feed;
this.props.dispatch({
type: at.DISCOVERY_STREAM_FEED_UPDATE,
data: {
feed: {
...feed,
data: {
...feed.data,
status: "waiting",
},
},
url,
},
});
this.setState({ waiting: true });
this.timeout = setTimeout(() => {
this.timeout = null;
this.setState({
waiting: false,
});
}, 300);
this.props.dispatch(
ac.OnlyToMain({ type: at.DISCOVERY_STREAM_RETRY_FEED, data: { feed } })
);
}
}
renderButton() {
if (this.props.status === "waiting" || this.state.waiting) {
return (
<button
className="try-again-button waiting"
data-l10n-id="newtab-discovery-empty-section-topstories-loading"
/>
);
}
return (
<button
className="try-again-button"
onClick={this.onReset}
data-l10n-id="newtab-discovery-empty-section-topstories-try-again-button"
/>
);
}
renderState() {
if (this.props.status === "waiting" || this.props.status === "failed") {
return (
<React.Fragment>
<h2 data-l10n-id="newtab-discovery-empty-section-topstories-timed-out" />
{this.renderButton()}
</React.Fragment>
);
}
return (
<React.Fragment>
<h2 data-l10n-id="newtab-discovery-empty-section-topstories-header" />
<p data-l10n-id="newtab-discovery-empty-section-topstories-content" />
</React.Fragment>
);
}
render() {
return (
<div className="section-empty-state">
<div className="empty-state-message">{this.renderState()}</div>
</div>
);
}
}
|
