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.

Sign up for GitHub

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

Jump to bottom

[RNMobile] Latest-Posts: Resolve issue with Query Controls, and fix API Fetch strategy #21025

Merged
merged 3 commits into from
Mar 19, 2020
Merged

[RNMobile] Latest-Posts: Resolve issue with Query Controls, and fix API Fetch strategy #21025

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3e04adc
Convert the categories fetchRequest to use the apiFetch API for cacheing
chipsnyder Mar 19, 2020
f21aa60
Fix Conflict in Query Controls to move the stable state to Mobile
chipsnyder Mar 19, 2020
97c57ba
Fix Conflict in Query Controls to move the stable state to Mobile
chipsnyder Mar 19, 2020
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
20 changes: 5 additions & 15 deletions packages/block-library/src/latest-posts/edit.native.js
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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' } }
/>
),
];
}