Sidebar: Refactor to use withAPIData for page attributes

WordPress · Aug 27, 2017 · 500cc4f · 500cc4f
1 parent 5f0fe6f
commit 500cc4f
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 39 deletions.
diff --git a/editor/sidebar/page-attributes/index.js b/editor/sidebar/page-attributes/index.js
@@ -2,13 +2,14 @@
  * External dependencies
  */
 import { connect } from 'react-redux';
+import { get, flowRight } from 'lodash';
 
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
 import { Component } from '@wordpress/element';
-import { PanelBody, PanelRow, withInstanceId } from '@wordpress/components';
+import { PanelBody, PanelRow, withAPIData, withInstanceId } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -27,29 +28,6 @@ export class PageAttributes extends Component {
 		};
 	}
 
-	componentDidMount() {
-		this.fetchSupports();
-	}
-
-	fetchSupports() {
-		const { postTypeSlug } = this.props;
-		this.fetchSupportsRequest = new wp.api.models.Type( { id: postTypeSlug } )
-			.fetch( { data: { context: 'edit' } } )
-			.done( ( postType ) => {
-				const {
-					'page-attributes': supportsPageAttributes = false,
-				} = postType.supports;
-
-				this.setState( { supportsPageAttributes } );
-			} );
-	}
-
-	componentWillUnmount() {
-		if ( this.fetchSupportsRequest ) {
-			this.fetchSupportsRequest.abort();
-		}
-	}
-
 	setUpdatedOrder( event ) {
 		const order = Number( event.target.value );
 		if ( order >= 0 ) {
@@ -58,8 +36,11 @@ export class PageAttributes extends Component {
 	}
 
 	render() {
-		const { instanceId, order } = this.props;
-		const { supportsPageAttributes } = this.state;
+		const { instanceId, order, postType } = this.props;
+		const supportsPageAttributes = get( postType.data, [
+			'supports',
+			'page-attributes',
+		], false );
 
 		// Only render fields if post type supports page attributes
 		if ( ! supportsPageAttributes ) {
@@ -90,7 +71,7 @@ export class PageAttributes extends Component {
 	}
 }
 
-export default connect(
+const applyConnect = connect(
 	( state ) => {
 		return {
 			postTypeSlug: getCurrentPostType( state ),
@@ -106,4 +87,18 @@ export default connect(
 			},
 		};
 	}
-)( withInstanceId( PageAttributes ) );
+);
+
+const applyWithAPIData = withAPIData( ( props ) => {
+	const { postTypeSlug } = props;
+
+	return {
+		postType: `/wp/v2/types/${ postTypeSlug }?context=edit`,
+	};
+} );
+
+export default flowRight( [
+	applyConnect,
+	applyWithAPIData,
+	withInstanceId,
+] )( PageAttributes );
diff --git a/editor/sidebar/page-attributes/test/index.js b/editor/sidebar/page-attributes/test/index.js
@@ -9,32 +9,44 @@ import { shallow } from 'enzyme';
 import { PageAttributes } from '../';
 
 describe( 'PageAttributes', () => {
-	let fetchSupports;
-	beforeEach( () => {
-		fetchSupports = PageAttributes.prototype.fetchSupports;
-		PageAttributes.prototype.fetchSupports = jest.fn();
-	} );
+	const postType = {
+		data: {
+			supports: {
+				'page-attributes': true,
+			},
+		},
+	};
+
+	it( 'should not render anything if unknown page attributes support', () => {
+		const wrapper = shallow( <PageAttributes postType={ {} } /> );
 
-	afterEach( () => {
-		PageAttributes.prototype.fetchSupports = fetchSupports;
+		expect( wrapper.type() ).toBe( null );
 	} );
 
 	it( 'should not render anything if no page attributes support', () => {
-		const wrapper = shallow( <PageAttributes /> );
+		const wrapper = shallow( <PageAttributes postType={ {
+			data: {
+				supports: {
+					'page-attributes': false,
+				},
+			},
+		} } /> );
 
 		expect( wrapper.type() ).toBe( null );
 	} );
 
 	it( 'should render input if page attributes support', () => {
-		const wrapper = shallow( <PageAttributes /> );
+		const wrapper = shallow( <PageAttributes postType={ postType } /> );
 		wrapper.setState( { supportsPageAttributes: true } );
 
 		expect( wrapper.type() ).not.toBe( null );
 	} );
 
 	it( 'should reject invalid input', () => {
 		const onUpdateOrder = jest.fn();
-		const wrapper = shallow( <PageAttributes onUpdateOrder={ onUpdateOrder } /> );
+		const wrapper = shallow(
+			<PageAttributes postType={ postType } onUpdateOrder={ onUpdateOrder } />
+		);
 		wrapper.setState( { supportsPageAttributes: true } );
 
 		wrapper.find( 'input' ).simulate( 'change', {
@@ -54,7 +66,9 @@ describe( 'PageAttributes', () => {
 
 	it( 'should update with valid input', () => {
 		const onUpdateOrder = jest.fn();
-		const wrapper = shallow( <PageAttributes onUpdateOrder={ onUpdateOrder } /> );
+		const wrapper = shallow(
+			<PageAttributes postType={ postType } onUpdateOrder={ onUpdateOrder } />
+		);
 		wrapper.setState( { supportsPageAttributes: true } );
 
 		wrapper.find( 'input' ).simulate( 'change', {