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
101
102
103
104
105
106
107
108
109
110
111
112
|
/**
* Publicize connections verification component.
*
* Component to create Ajax request to check
* all connections. If any connection tests failed,
* a refresh link may be provided to the user. If
* no connection tests fail, this component will
* not render anything.
*/
/**
* External dependencies
*/
import { __ } from '@wordpress/i18n';
import { Button, Notice } from '@wordpress/components';
import { Component, Fragment } from '@wordpress/element';
import { compose } from '@wordpress/compose';
import { withDispatch, withSelect } from '@wordpress/data';
class PublicizeConnectionVerify extends Component {
componentDidMount() {
this.props.refreshConnections();
}
/**
* Opens up popup so user can refresh connection
*
* Displays pop up with to specified URL where user
* can refresh a specific connection.
*
* @param {object} event Event instance for onClick.
*/
refreshConnectionClick = event => {
const { href, title } = event.target;
event.preventDefault();
// open a popup window
// when it is closed, kick off the tests again
const popupWin = window.open( href, title, '' );
const popupTimer = window.setInterval( () => {
if ( false !== popupWin.closed ) {
window.clearInterval( popupTimer );
this.props.refreshConnections();
}
}, 500 );
};
renderRefreshableConnections() {
const { failedConnections } = this.props;
const refreshableConnections = failedConnections.filter( connection => connection.can_refresh );
if ( refreshableConnections.length ) {
return (
<Notice className="jetpack-publicize-notice" isDismissible={ false } status="error">
<p>
{ __(
'Before you hit Publish, please refresh the following connection(s) to make sure we can Publicize your post:',
'jetpack'
) }
</p>
{ refreshableConnections.map( connection => (
<Button
href={ connection.refresh_url }
isSmall
key={ connection.id }
onClick={ this.refreshConnectionClick }
title={ connection.refresh_text }
>
{ connection.refresh_text }
</Button>
) ) }
</Notice>
);
}
return null;
}
renderNonRefreshableConnections() {
const { failedConnections } = this.props;
const nonRefreshableConnections = failedConnections.filter(
connection => ! connection.can_refresh
);
if ( nonRefreshableConnections.length ) {
return nonRefreshableConnections.map( connection => (
<Notice className="jetpack-publicize-notice" isDismissible={ false } status="error">
<p>{ connection.test_message }</p>
</Notice>
) );
}
return null;
}
render() {
return (
<Fragment>
{ this.renderRefreshableConnections() }
{ this.renderNonRefreshableConnections() }
</Fragment>
);
}
}
export default compose( [
withSelect( select => ( {
failedConnections: select( 'jetpack/publicize' ).getFailedConnections(),
} ) ),
withDispatch( dispatch => ( {
refreshConnections: dispatch( 'jetpack/publicize' ).refreshConnectionTestResults,
} ) ),
] )( PublicizeConnectionVerify );
|