Skip to content

Commit 869c7eb

Browse files
ryanwelchernoruzzamanst-hamano
authored
Update the useCommandLoader example to fix the syntax error and add missing imports. (WordPress#73660)
* Update the example to fix the syntax error and add missing imports. * Updates per code review. Co-authored-by: ryanwelcher <welcher@git.wordpress.org> Co-authored-by: noruzzamans <noruzzaman@git.wordpress.org> Co-authored-by: t-hamano <wildworks@git.wordpress.org>
1 parent ce38bbb commit 869c7eb

File tree

2 files changed

+81
-81
lines changed

2 files changed

+81
-81
lines changed

‎packages/commands/README.md‎

Lines changed: 53 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -122,65 +122,65 @@ Attach a command loader to the command palette. Used for dynamic commands.
122122
_Usage_
123123

124124
```js
125+
import { __ } from '@wordpress/i18n';
126+
import { addQueryArgs } from '@wordpress/url';
125127
import { useCommandLoader } from '@wordpress/commands';
126-
import { post, page, layout, symbolFilled } from '@wordpress/icons';
127-
128-
const icons = {
129-
post,
130-
page,
131-
wp_template: layout,
132-
wp_template_part: symbolFilled,
133-
};
128+
import { page } from '@wordpress/icons';
129+
import { useSelect } from '@wordpress/data';
130+
import { store as coreStore } from '@wordpress/core-data';
131+
import { useMemo } from '@wordpress/element';
134132

135133
function usePageSearchCommandLoader( { search } ) {
136-
// Retrieve the pages for the "search" term.
137-
const { records, isLoading } = useSelect( ( select ) => {
138-
const { getEntityRecords } = select( coreStore );
139-
const query = {
140-
search: !! search ? search : undefined,
141-
per_page: 10,
142-
orderby: search ? 'relevance' : 'date',
143-
};
144-
return {
145-
records: getEntityRecords( 'postType', 'page', query ),
146-
isLoading: ! select( coreStore ).hasFinishedResolution(
147-
'getEntityRecords',
148-
'postType', 'page', query ]
149-
),
150-
};
151-
}, [ search ] );
152-
153-
// Create the commands.
154-
const commands = useMemo( () => {
155-
return ( records ?? [] ).slice( 0, 10 ).map( ( record ) => {
156-
return {
157-
name: record.title?.rendered + ' ' + record.id,
158-
label: record.title?.rendered
159-
? record.title?.rendered
160-
: __( '(no title)' ),
161-
icon: icons[ postType ],
162-
callback: ( { close } ) => {
163-
const args = {
164-
postType,
165-
postId: record.id,
166-
...extraArgs,
167-
};
168-
document.location = addQueryArgs( 'site-editor.php', args );
169-
close();
170-
},
171-
};
172-
} );
173-
}, [ records, history ] );
174-
175-
return {
176-
commands,
177-
isLoading,
178-
};
134+
// Retrieve the pages for the "search" term.
135+
const { records, isLoading } = useSelect(
136+
( select ) => {
137+
const { getEntityRecords } = select( coreStore );
138+
const query = {
139+
search: !! search ? search : undefined,
140+
per_page: 10,
141+
orderby: search ? 'relevance' : 'date',
142+
};
143+
return {
144+
records: getEntityRecords( 'postType', 'page', query ),
145+
isLoading: ! select( coreStore ).hasFinishedResolution(
146+
'getEntityRecords',
147+
[ 'postType', 'page', query ]
148+
),
149+
};
150+
},
151+
[ search ]
152+
);
153+
154+
// Create the commands.
155+
const commands = useMemo( () => {
156+
return ( records ?? [] ).slice( 0, 10 ).map( ( record ) => {
157+
return {
158+
name: record.title?.rendered + ' ' + record.id,
159+
label: record.title?.rendered
160+
? record.title?.rendered
161+
: __( '(no title)' ),
162+
icon: page,
163+
callback: ( { close } ) => {
164+
const args = {
165+
p: '/page',
166+
postId: record.id,
167+
};
168+
document.location = addQueryArgs( 'site-editor.php', args );
169+
close();
170+
},
171+
};
172+
} );
173+
}, [ records ] );
174+
175+
return {
176+
commands,
177+
isLoading,
178+
};
179179
}
180180

181181
useCommandLoader( {
182-
name: 'myplugin/page-search',
183-
hook: usePageSearchCommandLoader,
182+
name: 'myplugin/page-search',
183+
hook: usePageSearchCommandLoader,
184184
} );
185185
```
186186

‎packages/commands/src/hooks/use-command-loader.js‎

Lines changed: 28 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -16,33 +16,34 @@ import { store as commandsStore } from '../store';
1616
*
1717
* @example
1818
* ```js
19+
* import { __ } from '@wordpress/i18n';
20+
* import { addQueryArgs } from '@wordpress/url';
1921
* import { useCommandLoader } from '@wordpress/commands';
20-
* import { post, page, layout, symbolFilled } from '@wordpress/icons';
21-
*
22-
* const icons = {
23-
* post,
24-
* page,
25-
* wp_template: layout,
26-
* wp_template_part: symbolFilled,
27-
* };
22+
* import { page } from '@wordpress/icons';
23+
* import { useSelect } from '@wordpress/data';
24+
* import { store as coreStore } from '@wordpress/core-data';
25+
* import { useMemo } from '@wordpress/element';
2826
*
2927
* function usePageSearchCommandLoader( { search } ) {
3028
* // Retrieve the pages for the "search" term.
31-
* const { records, isLoading } = useSelect( ( select ) => {
32-
* const { getEntityRecords } = select( coreStore );
33-
* const query = {
34-
* search: !! search ? search : undefined,
35-
* per_page: 10,
36-
* orderby: search ? 'relevance' : 'date',
37-
* };
38-
* return {
39-
* records: getEntityRecords( 'postType', 'page', query ),
40-
* isLoading: ! select( coreStore ).hasFinishedResolution(
41-
* 'getEntityRecords',
42-
* 'postType', 'page', query ]
43-
* ),
44-
* };
45-
* }, [ search ] );
29+
* const { records, isLoading } = useSelect(
30+
* ( select ) => {
31+
* const { getEntityRecords } = select( coreStore );
32+
* const query = {
33+
* search: !! search ? search : undefined,
34+
* per_page: 10,
35+
* orderby: search ? 'relevance' : 'date',
36+
* };
37+
* return {
38+
* records: getEntityRecords( 'postType', 'page', query ),
39+
* isLoading: ! select( coreStore ).hasFinishedResolution(
40+
* 'getEntityRecords',
41+
* [ 'postType', 'page', query ]
42+
* ),
43+
* };
44+
* },
45+
* [ search ]
46+
* );
4647
*
4748
* // Create the commands.
4849
* const commands = useMemo( () => {
@@ -52,19 +53,18 @@ import { store as commandsStore } from '../store';
5253
* label: record.title?.rendered
5354
* ? record.title?.rendered
5455
* : __( '(no title)' ),
55-
* icon: icons[ postType ],
56+
* icon: page,
5657
* callback: ( { close } ) => {
5758
* const args = {
58-
* postType,
59-
* postId: record.id,
60-
* ...extraArgs,
59+
* p: '/page',
60+
* postId: record.id,
6161
* };
6262
* document.location = addQueryArgs( 'site-editor.php', args );
6363
* close();
6464
* },
6565
* };
6666
* } );
67-
* }, [ records, history ] );
67+
* }, [ records ] );
6868
*
6969
* return {
7070
* commands,

0 commit comments

Comments
 (0)