From 8bd203aca0a532d384691d8712533c1b9a4c14de Mon Sep 17 00:00:00 2001
From: Chip <chip.snyder3@gmail.com>
Date: Thu, 19 Mar 2020 17:30:16 -0400
Subject: [PATCH] [RNMobile] Latest-Posts: Resolve issue with Query Controls,
 and fix API Fetch strategy (#21025)

* Convert the categories fetchRequest to use the apiFetch API for cacheing

* Fix Conflict in Query Controls to move the stable state to Mobile

* Fix Conflict in Query Controls to move the stable state to Mobile
---
 .../src/latest-posts/edit.native.js           | 20 ++---
 .../src/latest-posts/style.native.scss        |  2 +-
 .../components/src/query-controls/index.js    | 14 ---
 .../src/query-controls/index.native.js        | 87 +++++++++++++++++++
 4 files changed, 93 insertions(+), 30 deletions(-)
 create mode 100644 packages/components/src/query-controls/index.native.js

diff --git a/packages/block-library/src/latest-posts/edit.native.js b/packages/block-library/src/latest-posts/edit.native.js
index 53481203a135c..5b37ad2a530a8 100644
--- a/packages/block-library/src/latest-posts/edit.native.js
+++ b/packages/block-library/src/latest-posts/edit.native.js
@@ -14,7 +14,7 @@ import { coreBlocks } from '@wordpress/block-library';
 import { __ } from '@wordpress/i18n';
 import { postList as icon } from '@wordpress/icons';
 import { InspectorControls } from '@wordpress/block-editor';
-import { fetchRequest } from 'react-native-gutenberg-bridge';
+import apiFetch from '@wordpress/api-fetch';
 import {
 	Icon,
 	PanelBody,
@@ -52,23 +52,13 @@ class LatestPostsEdit extends Component {
 
 	componentDidMount() {
 		this.isStillMounted = true;
-		this.fetchRequest = fetchRequest( '/wp/v2/categories' )
+		this.fetchRequest = apiFetch( { path: '/wp/v2/categories' } )
 			.then( ( categoriesList ) => {
 				if ( this.isStillMounted ) {
-					let parsedCategoriesList = categoriesList;
-
-					// TODO: remove this check after `fetchRequest` types are made consist across platforms
-					// (see: https://github.com/wordpress-mobile/gutenberg-mobile/issues/1961)
-					if ( typeof categoriesList === 'string' ) {
-						parsedCategoriesList = JSON.parse( categoriesList );
-					}
-
-					if ( isEmpty( parsedCategoriesList ) ) {
-						parsedCategoriesList = [];
-					}
-
 					this.setState( {
-						categoriesList: parsedCategoriesList,
+						categoriesList: isEmpty( categoriesList )
+							? []
+							: categoriesList,
 					} );
 				}
 			} )
diff --git a/packages/block-library/src/latest-posts/style.native.scss b/packages/block-library/src/latest-posts/style.native.scss
index cba3877e8904b..529c52f507fec 100644
--- a/packages/block-library/src/latest-posts/style.native.scss
+++ b/packages/block-library/src/latest-posts/style.native.scss
@@ -31,7 +31,7 @@
 	text-align: center;
 	margin-top: 8;
 	font-size: 14;
-	color: #2e4453;
+	color: $gray-dark;
 }
 
 .latestPostBlockMessageDark {
diff --git a/packages/components/src/query-controls/index.js b/packages/components/src/query-controls/index.js
index 67c975b8e4bee..a1a1a2bc4a4cf 100644
--- a/packages/components/src/query-controls/index.js
+++ b/packages/components/src/query-controls/index.js
@@ -2,7 +2,6 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Platform } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -13,17 +12,6 @@ const DEFAULT_MIN_ITEMS = 1;
 const DEFAULT_MAX_ITEMS = 100;
 const MAX_CATEGORIES_SUGGESTIONS = 20;
 
-// currently this is needed for consistent controls UI on mobile
-// this can be removed after control components settle on consistent defaults
-const MOBILE_CONTROL_PROPS = Platform.select( {
-	web: {},
-	native: { separatorType: 'fullWidth' },
-} );
-const MOBILE_CONTROL_PROPS_SEPARATOR_NONE = Platform.select( {
-	web: {},
-	native: { separatorType: 'none' },
-} );
-
 export default function QueryControls( {
 	categorySuggestions,
 	selectedCategories,
@@ -72,7 +60,6 @@ export default function QueryControls( {
 						onOrderByChange( newOrderBy );
 					}
 				} }
-				{ ...MOBILE_CONTROL_PROPS }
 			/>
 		),
 		onCategoryChange && (
@@ -100,7 +87,6 @@ export default function QueryControls( {
 				min={ minItems }
 				max={ maxItems }
 				required
-				{ ...MOBILE_CONTROL_PROPS_SEPARATOR_NONE }
 			/>
 		),
 	];
diff --git a/packages/components/src/query-controls/index.native.js b/packages/components/src/query-controls/index.native.js
new file mode 100644
index 0000000000000..e7932cd285499
--- /dev/null
+++ b/packages/components/src/query-controls/index.native.js
@@ -0,0 +1,87 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { RangeControl, SelectControl } from '../';
+import CategorySelect from './category-select';
+
+const DEFAULT_MIN_ITEMS = 1;
+const DEFAULT_MAX_ITEMS = 100;
+
+export default function QueryControls( {
+	categoriesList,
+	selectedCategoryId,
+	numberOfItems,
+	order,
+	orderBy,
+	maxItems = DEFAULT_MAX_ITEMS,
+	minItems = DEFAULT_MIN_ITEMS,
+	onCategoryChange,
+	onNumberOfItemsChange,
+	onOrderChange,
+	onOrderByChange,
+} ) {
+	return [
+		onOrderChange && onOrderByChange && (
+			<SelectControl
+				label={ __( 'Order by' ) }
+				value={ `${ orderBy }/${ order }` }
+				options={ [
+					{
+						label: __( 'Newest to oldest' ),
+						value: 'date/desc',
+					},
+					{
+						label: __( 'Oldest to newest' ),
+						value: 'date/asc',
+					},
+					{
+						/* translators: label for ordering posts by title in ascending order */
+						label: __( 'A → Z' ),
+						value: 'title/asc',
+					},
+					{
+						/* translators: label for ordering posts by title in descending order */
+						label: __( 'Z → A' ),
+						value: 'title/desc',
+					},
+				] }
+				onChange={ ( value ) => {
+					const [ newOrderBy, newOrder ] = value.split( '/' );
+					if ( newOrder !== order ) {
+						onOrderChange( newOrder );
+					}
+					if ( newOrderBy !== orderBy ) {
+						onOrderByChange( newOrderBy );
+					}
+				} }
+				{ ...{ separatorType: 'fullWidth' } }
+			/>
+		),
+		onCategoryChange && (
+			<CategorySelect
+				categoriesList={ categoriesList }
+				label={ __( 'Category' ) }
+				noOptionLabel={ __( 'All' ) }
+				selectedCategoryId={ selectedCategoryId }
+				onChange={ onCategoryChange }
+				{ ...{ separatorType: 'fullWidth' } }
+			/>
+		),
+		onNumberOfItemsChange && (
+			<RangeControl
+				label={ __( 'Number of items' ) }
+				value={ numberOfItems }
+				onChange={ onNumberOfItemsChange }
+				min={ minItems }
+				max={ maxItems }
+				required
+				{ ...{ separatorType: 'none' } }
+			/>
+		),
+	];
+}