Framework: Refactor PostTaxonomies to use withApiData HoC

[youknowriad]

Just some more consistency in fetching API DATA

[youknowriad]

@aduth Do you have any idea how to use withAPIData when they depend on a local state value? (Thinking about the TermSelectors)? I guess one option would be to store this state value in Redux, but seems weird to do so just for this?

[aduth]

Do you have any idea how to use withAPIData when they depend on a local state value?

You could have a parent component which manages the state, then passes the state as a prop to a child component, then available to withAPIData.

This is precisely how search is implemented in Calypso's TermTreeSelector component.

[youknowriad]

Can I get a 👍 or 👎?

[codecov]

Codecov Report

Merging #2537 into master will increase coverage by 0.53%.
The diff coverage is 0%.

@@            Coverage Diff             @@
##           master    #2537      +/-   ##
==========================================
+ Coverage   31.42%   31.95%   +0.53%     
==========================================
  Files         177      177              
  Lines        5407     5576     +169     
  Branches      946      981      +35     
==========================================
+ Hits         1699     1782      +83     
- Misses       3135     3197      +62     
- Partials      573      597      +24

Impacted Files	Coverage Δ
editor/sidebar/post-taxonomies/index.js	0% <0%> (ø)	⬆️
blocks/library/latest-posts/index.js	7.4% <0%> (-2.6%)	⬇️
...ebar/post-taxonomies/hierarchical-term-selector.js	0% <0%> (ø)	⬆️
blocks/api/registration.js	100% <0%> (ø)	⬆️
editor/inserter/menu.js	48.46% <0%> (+0.05%)	⬆️
blocks/library/embed/index.js	60.31% <0%> (+14.86%)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 5885233...f129648. Read the comment docs.

[aduth]

Minor: Lodash's filter handles both undefined and Object types, so this could be simplified:

const availableTaxonomies = filter( taxonomies.data, ( { types } ) => includes( types, postType ) );

[aduth]

I think we should seek to avoid content flickering in and out of the sidebar as the page loads. Especially if we're more likely to have taxonomies than not, we could at least show the panel heading, even if the body can't be known yet. Alternatively, #2501 was designed for this purpose, and we could consider preloading taxonomies.

[aduth]

To the above point, Lodash's reduce similarly handles undefined and object types, so this could even manage the filtering and mapping in one, ensuring the panel heading is always shown.

<PanelBody
	title={ __( 'Categories & Tags' ) }
	opened={ isOpened }
	onToggle={ onTogglePanel }
>
	{ reduce( taxonomies.data, ( result, taxonomy ) => {
		if ( includes( taxonomy.types, postType ) ) {
			const TaxonomyComponent = taxonomy.hierarchical 
				? HierarchicalTermSelector 
				: FlatTermSelector;

			result.push(
				<TaxonomyComponent
					key={ taxonomy.slug }
					label={ taxonomy.name }
					restBase={ taxonomy.rest_base }
					slug={ taxonomy.slug }
				/>
			);
		}

		return result;
	}, [] ) }
</PanelBody>

[youknowriad]

you know I prefer filter + map over reduce on small loops. I do understand the performance reasons for long loops.

[aduth]

I meant nothing of performance by my comment, filter / map or whatever is fine, just that we can skip the early return and account for undefined type with Lodash methods.