From 04a8edd6b141d1193523aeb310cc7dd16d54fb8f Mon Sep 17 00:00:00 2001 From: Siddharth Thevaril Date: Fri, 1 Mar 2024 18:03:34 +0530 Subject: [PATCH 1/8] move useIsPluginActive to TS --- hooks/use-is-plugin-active/index.js | 20 -------------------- hooks/use-is-plugin-active/index.ts | 29 +++++++++++++++++++++++++++++ 2 files changed, 29 insertions(+), 20 deletions(-) delete mode 100644 hooks/use-is-plugin-active/index.js create mode 100644 hooks/use-is-plugin-active/index.ts diff --git a/hooks/use-is-plugin-active/index.js b/hooks/use-is-plugin-active/index.js deleted file mode 100644 index 4f44ebe1..00000000 --- a/hooks/use-is-plugin-active/index.js +++ /dev/null @@ -1,20 +0,0 @@ -import { useSelect } from '@wordpress/data'; -import { store as coreStore } from '@wordpress/core-data'; - -const ACTIVE_STATUSES = ['active', 'network-active']; - -export const useIsPluginActive = (pluginName) => { - return useSelect( - (select) => { - const plugin = select(coreStore).getPlugin(pluginName); - const hasResolvedPlugins = select(coreStore).hasFinishedResolution('getPlugin', [ - pluginName, - ]); - - const isPluginActive = ACTIVE_STATUSES.includes(plugin?.status); - - return [isPluginActive, hasResolvedPlugins]; - }, - [pluginName], - ); -}; diff --git a/hooks/use-is-plugin-active/index.ts b/hooks/use-is-plugin-active/index.ts new file mode 100644 index 00000000..e9476b14 --- /dev/null +++ b/hooks/use-is-plugin-active/index.ts @@ -0,0 +1,29 @@ +import { useSelect } from '@wordpress/data'; +import { store as coreStore } from '@wordpress/core-data'; +import type { Plugin } from '@wordpress/core-data'; + +const ACTIVE_STATUSES: string[] = ['active', 'network-active']; + +/** + * Custom hook to check if a plugin is active and whether its resolution has finished. + * + * @param pluginName The name of the plugin to check. + * @returns A tuple containing two boolean values: the first indicating whether the plugin is active, + * and the second indicating whether the resolution for the plugin has finished. + */ +export const useIsPluginActive = (pluginName: string): [boolean, boolean] => { + return useSelect( + (select) => { + const storeSelectors = select(coreStore); + const plugin: Plugin = (storeSelectors as any).getPlugin(pluginName); + const hasResolvedPlugins: boolean = (storeSelectors as any).hasFinishedResolution('getPlugin', [ + pluginName, + ]); + + const isPluginActive: boolean = ACTIVE_STATUSES.includes(plugin?.status); + + return [isPluginActive, hasResolvedPlugins] as [boolean, boolean]; + }, + [pluginName], + ); +}; From 7c5ee73dcb61d56d3d1490db9889b7b8921a8eff Mon Sep 17 00:00:00 2001 From: Siddharth Thevaril Date: Fri, 1 Mar 2024 18:11:33 +0530 Subject: [PATCH 2/8] add as const --- hooks/use-is-plugin-active/index.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/hooks/use-is-plugin-active/index.ts b/hooks/use-is-plugin-active/index.ts index e9476b14..da30475b 100644 --- a/hooks/use-is-plugin-active/index.ts +++ b/hooks/use-is-plugin-active/index.ts @@ -2,7 +2,7 @@ import { useSelect } from '@wordpress/data'; import { store as coreStore } from '@wordpress/core-data'; import type { Plugin } from '@wordpress/core-data'; -const ACTIVE_STATUSES: string[] = ['active', 'network-active']; +const ACTIVE_STATUSES = ['active', 'network-active'] as const; /** * Custom hook to check if a plugin is active and whether its resolution has finished. @@ -22,8 +22,8 @@ export const useIsPluginActive = (pluginName: string): [boolean, boolean] => { const isPluginActive: boolean = ACTIVE_STATUSES.includes(plugin?.status); - return [isPluginActive, hasResolvedPlugins] as [boolean, boolean]; + return [isPluginActive, hasResolvedPlugins]; }, [pluginName], - ); + ) as [boolean, boolean]; }; From 535e9e96c53c56c83c25490657d5ccb8d18c5f48 Mon Sep 17 00:00:00 2001 From: Siddharth Thevaril Date: Fri, 1 Mar 2024 19:09:11 +0530 Subject: [PATCH 3/8] add TS support for `IsAdmin` component --- components/is-admin/{index.js => index.ts} | 18 +++++++++++++----- 1 file changed, 13 insertions(+), 5 deletions(-) rename components/is-admin/{index.js => index.ts} (51%) diff --git a/components/is-admin/index.js b/components/is-admin/index.ts similarity index 51% rename from components/is-admin/index.js rename to components/is-admin/index.ts index a674bad5..4df468e0 100644 --- a/components/is-admin/index.js +++ b/components/is-admin/index.ts @@ -1,5 +1,10 @@ import { useSelect } from '@wordpress/data'; +interface IsAdminProps { + fallback: React.ReactNode | null; + children: React.ReactNode; +} + /** * IsAdmin * @@ -8,12 +13,15 @@ import { useSelect } from '@wordpress/data'; * fallback component via the fallback prop. * * @param {object} props react props - * @param {*} props.fallback fallback component - * @param {*} props.children child components - * @returns {*} + * @param {React.ReactNode|null} props.fallback fallback component + * @param {React.ReactNode} props.children child components + * @returns {null|React.ReactNode} */ -export const IsAdmin = ({ fallback = null, children }) => { - const hasAdminPermissions = useSelect( +export const IsAdmin: React.FC = ({ + fallback = null, + children, +}): null | React.ReactNode => { + const hasAdminPermissions: boolean = useSelect( (select) => select('core').canUser('read', 'users?roles=1'), [], ); From dae728e9e3e5c1e6fa625da04376fe033d6bba02 Mon Sep 17 00:00:00 2001 From: Siddharth Thevaril Date: Fri, 1 Mar 2024 20:55:57 +0530 Subject: [PATCH 4/8] remove unnecesary jsdoc comments --- components/is-admin/index.ts | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/components/is-admin/index.ts b/components/is-admin/index.ts index 4df468e0..400073e2 100644 --- a/components/is-admin/index.ts +++ b/components/is-admin/index.ts @@ -1,7 +1,14 @@ import { useSelect } from '@wordpress/data'; interface IsAdminProps { + /** + * Fallback component. + */ fallback: React.ReactNode | null; + + /** + * Child component. + */ children: React.ReactNode; } @@ -11,11 +18,6 @@ interface IsAdminProps { * A wrapper component that checks wether the current user has admin capabilities * and only returns the child components if the user is an admin. You can pass a * fallback component via the fallback prop. - * - * @param {object} props react props - * @param {React.ReactNode|null} props.fallback fallback component - * @param {React.ReactNode} props.children child components - * @returns {null|React.ReactNode} */ export const IsAdmin: React.FC = ({ fallback = null, From 3f853735035de60d2097a45953fb42b8b18ae0ad Mon Sep 17 00:00:00 2001 From: Siddharth Thevaril Date: Sun, 3 Mar 2024 16:11:06 +0530 Subject: [PATCH 5/8] add TS support for `DragHandle` component --- components/drag-handle/{index.js => index.tsx} | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) rename components/drag-handle/{index.js => index.tsx} (79%) diff --git a/components/drag-handle/index.js b/components/drag-handle/index.tsx similarity index 79% rename from components/drag-handle/index.js rename to components/drag-handle/index.tsx index 1ebef8ca..cba84aef 100644 --- a/components/drag-handle/index.js +++ b/components/drag-handle/index.tsx @@ -1,10 +1,13 @@ +import type { SVGProps } from 'react'; + /** * Renders an SVG drag handle. * * @param {object} props The prop object. * @returns {*} React JSX */ -export const DragHandle = (props) => ( + +export const DragHandle: React.FC> = (props) => ( Date: Sun, 3 Mar 2024 15:36:34 +0530 Subject: [PATCH 6/8] remove return type --- components/is-admin/{index.ts => index.tsx} | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) rename components/is-admin/{index.ts => index.tsx} (95%) diff --git a/components/is-admin/index.ts b/components/is-admin/index.tsx similarity index 95% rename from components/is-admin/index.ts rename to components/is-admin/index.tsx index 400073e2..fb8ab700 100644 --- a/components/is-admin/index.ts +++ b/components/is-admin/index.tsx @@ -22,7 +22,7 @@ interface IsAdminProps { export const IsAdmin: React.FC = ({ fallback = null, children, -}): null | React.ReactNode => { +}) => { const hasAdminPermissions: boolean = useSelect( (select) => select('core').canUser('read', 'users?roles=1'), [], From c66af52060ba63e0e37a1493468ce90208ba7349 Mon Sep 17 00:00:00 2001 From: Siddharth Thevaril Date: Sun, 3 Mar 2024 20:01:42 +0530 Subject: [PATCH 7/8] remove return type --- hooks/use-is-plugin-active/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/hooks/use-is-plugin-active/index.ts b/hooks/use-is-plugin-active/index.ts index da30475b..715d4b9d 100644 --- a/hooks/use-is-plugin-active/index.ts +++ b/hooks/use-is-plugin-active/index.ts @@ -11,7 +11,7 @@ const ACTIVE_STATUSES = ['active', 'network-active'] as const; * @returns A tuple containing two boolean values: the first indicating whether the plugin is active, * and the second indicating whether the resolution for the plugin has finished. */ -export const useIsPluginActive = (pluginName: string): [boolean, boolean] => { +export const useIsPluginActive = (pluginName: string) => { return useSelect( (select) => { const storeSelectors = select(coreStore); From 1c98f8f887db86f78a4c9dfc90c8ea4d89028443 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=B6ren=20Wrede?= Date: Thu, 7 Mar 2024 11:00:26 +0100 Subject: [PATCH 8/8] Fix useMedia example Use `media.alt_text` to show the correct alt text of the mediafile. --- hooks/use-media/readme.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/hooks/use-media/readme.md b/hooks/use-media/readme.md index 786a7096..478c1afe 100644 --- a/hooks/use-media/readme.md +++ b/hooks/use-media/readme.md @@ -18,7 +18,7 @@ function BlockEdit(props) { } return ( - {image.alt} + { ); } ```