Skip to content

Commit

Permalink
[RNMobile] Latest-Posts: Resolve issue with Query Controls, and fix A…
Browse files Browse the repository at this point in the history
…PI 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
  • Loading branch information
chipsnyder authored Mar 19, 2020
1 parent d4f159a commit 8017d0f
Show file tree
Hide file tree
Showing 4 changed files with 93 additions and 30 deletions.
20 changes: 5 additions & 15 deletions packages/block-library/src/latest-posts/edit.native.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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,
} );
}
} )
Expand Down
2 changes: 1 addition & 1 deletion packages/block-library/src/latest-posts/style.native.scss
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@
text-align: center;
margin-top: 8;
font-size: 14;
color: #2e4453;
color: $gray-dark;
}

.latestPostBlockMessageDark {
Expand Down
14 changes: 0 additions & 14 deletions packages/components/src/query-controls/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import { Platform } from '@wordpress/element';

/**
* Internal dependencies
Expand All @@ -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,
Expand Down Expand Up @@ -72,7 +60,6 @@ export default function QueryControls( {
onOrderByChange( newOrderBy );
}
} }
{ ...MOBILE_CONTROL_PROPS }
/>
),
onCategoryChange && (
Expand Down Expand Up @@ -100,7 +87,6 @@ export default function QueryControls( {
min={ minItems }
max={ maxItems }
required
{ ...MOBILE_CONTROL_PROPS_SEPARATOR_NONE }
/>
),
];
Expand Down
87 changes: 87 additions & 0 deletions packages/components/src/query-controls/index.native.js
Original file line number Diff line number Diff line change
@@ -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' } }
/>
),
];
}

0 comments on commit 8017d0f

Please sign in to comment.