Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Plugins: Add QueryJetpackPlugins query component #8275

Merged
merged 4 commits into from
Oct 18, 2016
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 19 additions & 0 deletions client/components/data/query-jetpack-plugins/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
Query Jetpack Plugins
=================

`<QueryJetpackPlugins />` is a React component used in managing network requests for Jetpack plugins.

## Usage

Render the component, passing `siteIds`. It does not accept any children, nor does it render any elements to the page. You can use it adjacent to other sibling components which make use of the fetched data made available through the global application state.

## Props

### `siteIds`

<table>
<tr><th>Type</th><td>Array</td></tr>
<tr><th>Required</th><td>Yes</td></tr>
</table>

The array of site IDs for which Jetpack plugins should be requested.
52 changes: 52 additions & 0 deletions client/components/data/query-jetpack-plugins/index.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
/**
* External dependencies
*/
import { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import { isEqual } from 'lodash';

/**
* Internal dependencies
*/
import { fetchPlugins } from 'state/plugins/installed/actions';
import { isRequestingForSites } from 'state/plugins/installed/selectors';

class QueryJetpackPlugins extends Component {
componentWillMount() {
if ( this.props.siteIds && ! this.props.isRequestingForSites ) {
this.props.fetchPlugins( this.props.siteIds );
}
}

componentWillReceiveProps( nextProps ) {
if ( isEqual( nextProps.siteIds, this.props.siteIds ) ) {
return;
}
this.refresh( nextProps.isRequestingForSites, nextProps.siteIds );
}

refresh( isRequesting, siteIds ) {
if ( ! isRequesting ) {
this.props.fetchPlugins( siteIds );
}
}

render() {
return null;
}
}

QueryJetpackPlugins.propTypes = {
siteIds: PropTypes.array.isRequired,
isRequestingForSites: PropTypes.bool,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's ask a native english speaker about it, but shouldn't it be "isRequestingSites", without the 'for' ?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

isRequestingForSites makes sense to me because we're checking if it's requesting plugins for sites, but I can see it either way. English ¯_(ツ)_/¯

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ok, yeah, that makes sense ... "isRequestingForSites" sounds ok if you think about it like that .

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I agree with @ryelle on this one - we're requesting the plugins for the given sites, so naming makes sense.

fetchPlugins: PropTypes.func
};

export default connect(
( state, props ) => {
return {
isRequestingForSites: isRequestingForSites( state, props.siteIds ),
};
},
{ fetchPlugins }
)( QueryJetpackPlugins );
2 changes: 1 addition & 1 deletion client/state/plugins/installed/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ A module for managing installed plugins on connected sites.

## Actions

### `fetchPlugins( sites: Array )`
### `fetchPlugins( siteIds: Array )`

### `installPlugin( siteId: Number, plugin: Object )`

Expand Down
10 changes: 5 additions & 5 deletions client/state/plugins/installed/actions.js
Original file line number Diff line number Diff line change
Expand Up @@ -302,11 +302,11 @@ export function removePlugin( siteId, plugin ) {
};
}

export function fetchPlugins( sites ) {
export function fetchPlugins( siteIds ) {
return ( dispatch ) => {
return sites.map( ( site ) => {
return siteIds.map( ( siteId ) => {
const defaultAction = {
siteId: site.ID,
siteId
};
dispatch( { ...defaultAction, type: PLUGINS_REQUEST } );

Expand All @@ -316,7 +316,7 @@ export function fetchPlugins( sites ) {

data.plugins.map( plugin => {
if ( plugin.update && plugin.autoupdate ) {
updatePlugin( site.ID, plugin )( dispatch );
updatePlugin( siteId, plugin )( dispatch );
}
} );
};
Expand All @@ -326,7 +326,7 @@ export function fetchPlugins( sites ) {
dispatch( { ...defaultAction, type: PLUGINS_REQUEST_FAILURE, error } );
};

return wpcom.site( site.ID ).pluginsList().then( receivePluginsDispatchSuccess ).catch( receivePluginsDispatchFail );
return wpcom.site( siteId ).pluginsList().then( receivePluginsDispatchSuccess ).catch( receivePluginsDispatchFail );
} );
};
}
35 changes: 18 additions & 17 deletions client/state/plugins/installed/test/actions.js
Original file line number Diff line number Diff line change
Expand Up @@ -55,15 +55,16 @@ import {
} from '../actions';
import { akismet, helloDolly, jetpack, jetpackUpdated } from './fixtures/plugins';
import useNock from 'test/helpers/use-nock';
import { useSandbox } from 'test/helpers/use-sinon';

describe( 'actions', () => {
const spy = sinon.spy();

beforeEach( () => {
spy.reset();
let spy;
useSandbox( ( sandbox ) => {
spy = sandbox.spy();
sandbox.stub( console, 'error' );
} );

describe( '#fetch()', () => {
describe( '#fetchPlugins()', () => {
useNock( ( nock ) => {
nock( 'https://public-api.wordpress.com:443' )
.persist()
Expand All @@ -81,7 +82,7 @@ describe( 'actions', () => {
} );

it( 'should dispatch fetch action when triggered', () => {
fetchPlugins( [ { ID: 2916284, jetpack: true } ] )( spy );
fetchPlugins( [ 2916284 ] )( spy );

expect( spy ).to.have.been.calledWith( {
type: PLUGINS_REQUEST,
Expand All @@ -90,7 +91,7 @@ describe( 'actions', () => {
} );

it( 'should dispatch plugins receive action when request completes', () => {
const responses = fetchPlugins( [ { ID: 2916284, jetpack: true } ] )( spy );
const responses = fetchPlugins( [ 2916284 ] )( spy );
return Promise.all( responses ).then( () => {
expect( spy ).to.have.been.calledWith( {
type: PLUGINS_RECEIVE,
Expand All @@ -100,7 +101,7 @@ describe( 'actions', () => {
} );

it( 'should dispatch plugin request success action when request completes', () => {
const responses = fetchPlugins( [ { ID: 2916284, jetpack: true } ] )( spy );
const responses = fetchPlugins( [ 2916284 ] )( spy );
return Promise.all( responses ).then( () => {
expect( spy ).to.have.been.calledWith( {
type: PLUGINS_REQUEST_SUCCESS,
Expand All @@ -111,7 +112,7 @@ describe( 'actions', () => {
} );

it( 'should dispatch fail action when request fails', () => {
const responses = fetchPlugins( [ { ID: 77203074, jetpack: true } ] )( spy );
const responses = fetchPlugins( [ 77203074 ] )( spy );
return Promise.all( responses ).then( () => {
expect( spy ).to.have.been.calledWith( {
type: PLUGINS_REQUEST_FAILURE,
Expand All @@ -122,7 +123,7 @@ describe( 'actions', () => {
} );

it( 'should dispatch plugin update request if any site plugins need updating', () => {
const responses = fetchPlugins( [ { ID: 2916284, jetpack: true } ] )( spy );
const responses = fetchPlugins( [ 2916284 ] )( spy );
return Promise.all( responses ).then( () => {
expect( spy ).to.have.been.calledWith( {
type: PLUGIN_UPDATE_REQUEST,
Expand All @@ -134,7 +135,7 @@ describe( 'actions', () => {
} );
} );

describe( '#activate()', () => {
describe( '#activatePlugin()', () => {
useNock( ( nock ) => {
nock( 'https://public-api.wordpress.com:443' )
.persist()
Expand Down Expand Up @@ -185,7 +186,7 @@ describe( 'actions', () => {
} );
} );

describe( '#deactivate()', () => {
describe( '#deactivatePlugin()', () => {
useNock( ( nock ) => {
nock( 'https://public-api.wordpress.com:443' )
.persist()
Expand Down Expand Up @@ -236,7 +237,7 @@ describe( 'actions', () => {
} );
} );

describe( '#update()', () => {
describe( '#updatePlugin()', () => {
const site = {
ID: 2916284,
jetpack: true,
Expand Down Expand Up @@ -303,7 +304,7 @@ describe( 'actions', () => {
} );
} );

describe( '#enableAutoupdate()', () => {
describe( '#enableAutoupdatePlugin()', () => {
const site = {
ID: 2916284,
jetpack: true,
Expand Down Expand Up @@ -380,7 +381,7 @@ describe( 'actions', () => {
} );
} );

describe( '#disableAutoupdate()', () => {
describe( '#disableAutoupdatePlugin()', () => {
const site = {
ID: 2916284,
jetpack: true,
Expand Down Expand Up @@ -441,7 +442,7 @@ describe( 'actions', () => {
} );
} );

describe( '#install()', () => {
describe( '#installPlugin()', () => {
const site = {
ID: 2916284,
jetpack: true,
Expand Down Expand Up @@ -510,7 +511,7 @@ describe( 'actions', () => {
} );
} );

describe( '#remove()', () => {
describe( '#removePlugin()', () => {
const site = {
ID: 2916284,
jetpack: true,
Expand Down