Skip to content

Commit

Permalink
Editor: Reuse data query in the post author components (#58760)
Browse files Browse the repository at this point in the history 
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
  • Loading branch information
@Mamaduka @youknowriad
3 people authored Feb 7, 2024
1 parent 8f8c4d7 commit 180b57a
Show file tree
Hide file tree
Showing 4 changed files with 77 additions and 101 deletions.
60 changes: 5 additions & 55 deletions packages/editor/src/components/post-author/combobox.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,70 +2,22 @@
* WordPress dependencies
*/
import { debounce } from '@wordpress/compose';
import { useState, useMemo } from '@wordpress/element';
import { useSelect, useDispatch } from '@wordpress/data';
import { useState } from '@wordpress/element';
import { useDispatch } from '@wordpress/data';
import { __ } from '@wordpress/i18n';
import { ComboboxControl } from '@wordpress/components';
import { decodeEntities } from '@wordpress/html-entities';
import { store as coreStore } from '@wordpress/core-data';

/**
* Internal dependencies
*/
import { store as editorStore } from '../../store';
import { AUTHORS_QUERY } from './constants';
import { useAuthorsQuery } from './hook';

function PostAuthorCombobox() {
export default function PostAuthorCombobox() {
const [ fieldValue, setFieldValue ] = useState();

const { authorId, authors, postAuthor } = useSelect(
( select ) => {
const { getUser, getUsers } = select( coreStore );
const { getEditedPostAttribute } = select( editorStore );
const author = getUser( getEditedPostAttribute( 'author' ), {
context: 'view',
} );
const query = { ...AUTHORS_QUERY };

if ( fieldValue ) {
query.search = fieldValue;
}

return {
authorId: getEditedPostAttribute( 'author' ),
postAuthor: author,
authors: getUsers( query ),
};
},
[ fieldValue ]
);
const { editPost } = useDispatch( editorStore );

const authorOptions = useMemo( () => {
const fetchedAuthors = ( authors ?? [] ).map( ( author ) => {
return {
value: author.id,
label: decodeEntities( author.name ),
};
} );

// Ensure the current author is included in the dropdown list.
const foundAuthor = fetchedAuthors.findIndex(
( { value } ) => postAuthor?.id === value
);

if ( foundAuthor < 0 && postAuthor ) {
return [
{
value: postAuthor.id,
label: decodeEntities( postAuthor.name ),
},
...fetchedAuthors,
];
}

return fetchedAuthors;
}, [ authors, postAuthor ] );
const { authorId, authorOptions } = useAuthorsQuery( fieldValue );

/**
* Handle author selection.
Expand Down Expand Up @@ -101,5 +53,3 @@ function PostAuthorCombobox() {
/>
);
}

export default PostAuthorCombobox;
8 changes: 6 additions & 2 deletions packages/editor/src/components/post-author/constants.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,10 @@
export const BASE_QUERY = {
_fields: 'id,name',
context: 'view', // Allows non-admins to perform requests.
};

export const AUTHORS_QUERY = {
who: 'authors',
per_page: 50,
_fields: 'id,name',
context: 'view', // Allows non-admins to perform requests.
...BASE_QUERY,
};
63 changes: 63 additions & 0 deletions packages/editor/src/components/post-author/hook.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
/**
* WordPress dependencies
*/
import { useMemo } from '@wordpress/element';
import { useSelect } from '@wordpress/data';
import { decodeEntities } from '@wordpress/html-entities';
import { store as coreStore } from '@wordpress/core-data';

/**
* Internal dependencies
*/
import { store as editorStore } from '../../store';
import { AUTHORS_QUERY, BASE_QUERY } from './constants';

export function useAuthorsQuery( search ) {
const { authorId, authors, postAuthor } = useSelect(
( select ) => {
const { getUser, getUsers } = select( coreStore );
const { getEditedPostAttribute } = select( editorStore );
const _authorId = getEditedPostAttribute( 'author' );
const query = { ...AUTHORS_QUERY };

if ( search ) {
query.search = search;
}

return {
authorId: _authorId,
authors: getUsers( query ),
postAuthor: getUser( _authorId, BASE_QUERY ),
};
},
[ search ]
);

const authorOptions = useMemo( () => {
const fetchedAuthors = ( authors ?? [] ).map( ( author ) => {
return {
value: author.id,
label: decodeEntities( author.name ),
};
} );

// Ensure the current author is included in the dropdown list.
const foundAuthor = fetchedAuthors.findIndex(
( { value } ) => postAuthor?.id === value
);

if ( foundAuthor < 0 && postAuthor ) {
return [
{
value: postAuthor.id,
label: decodeEntities( postAuthor.name ),
},
...fetchedAuthors,
];
}

return fetchedAuthors;
}, [ authors, postAuthor ] );

return { authorId, authorOptions };
}
47 changes: 3 additions & 44 deletions packages/editor/src/components/post-author/select.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,59 +2,18 @@
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import { useMemo } from '@wordpress/element';
import { useSelect, useDispatch } from '@wordpress/data';
import { decodeEntities } from '@wordpress/html-entities';
import { useDispatch } from '@wordpress/data';
import { SelectControl } from '@wordpress/components';
import { store as coreStore } from '@wordpress/core-data';

/**
* Internal dependencies
*/
import { store as editorStore } from '../../store';
import { AUTHORS_QUERY } from './constants';
import { useAuthorsQuery } from './hook';

export default function PostAuthorSelect() {
const { editPost } = useDispatch( editorStore );
const { authorId, postAuthor, authors } = useSelect( ( select ) => {
const { getUser, getUsers } = select( coreStore );
const { getEditedPostAttribute } = select( editorStore );
const _authorId = getEditedPostAttribute( 'author' );

return {
authorId: _authorId,
authors: getUsers( AUTHORS_QUERY ),
postAuthor: getUser( _authorId, {
context: 'view',
} ),
};
}, [] );

const authorOptions = useMemo( () => {
const fetchedAuthors = ( authors ?? [] ).map( ( author ) => {
return {
value: author.id,
label: decodeEntities( author.name ),
};
} );

// Ensure the current author is included in the dropdown list.
const foundAuthor = fetchedAuthors.findIndex(
( { value } ) => postAuthor?.id === value
);

if ( foundAuthor < 0 && postAuthor ) {
return [
{
value: postAuthor.id,
label: decodeEntities( postAuthor.name ),
},
...fetchedAuthors,
];
}

return fetchedAuthors;
}, [ authors, postAuthor ] );
const { authorId, authorOptions } = useAuthorsQuery();

const setAuthorId = ( value ) => {
const author = Number( value );
Expand Down

1 comment on commit 180b57a

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Flaky tests detected in 180b57a.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/7812912387
📝 Reported issues:

Please sign in to comment.