Preferences: Use hooks instead of HoC in 'EnablePanelOption'

WordPress · Nov 14, 2024 · 8f4c4cf · 8f4c4cf
1 parent a8a8747
commit 8f4c4cf
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 34 deletions.
diff --git a/packages/edit-post/src/components/preferences-modal/enable-panel.js b/packages/edit-post/src/components/preferences-modal/enable-panel.js
@@ -1,8 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { compose, ifCondition } from '@wordpress/compose';
-import { withSelect, withDispatch } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { store as editorStore } from '@wordpress/editor';
 import { privateApis as preferencesPrivateApis } from '@wordpress/preferences';
 
@@ -13,18 +12,29 @@ import { unlock } from '../../lock-unlock';
 
 const { PreferenceBaseOption } = unlock( preferencesPrivateApis );
 
-export default compose(
-	withSelect( ( select, { panelName } ) => {
-		const { isEditorPanelEnabled, isEditorPanelRemoved } =
-			select( editorStore );
-		return {
-			isRemoved: isEditorPanelRemoved( panelName ),
-			isChecked: isEditorPanelEnabled( panelName ),
-		};
-	} ),
-	ifCondition( ( { isRemoved } ) => ! isRemoved ),
-	withDispatch( ( dispatch, { panelName } ) => ( {
-		onChange: () =>
-			dispatch( editorStore ).toggleEditorPanelEnabled( panelName ),
-	} ) )
-)( PreferenceBaseOption );
+export default function EnablePanelOption( props ) {
+	const { toggleEditorPanelEnabled } = useDispatch( editorStore );
+	const { isChecked, isRemoved } = useSelect(
+		( select ) => {
+			const { isEditorPanelEnabled, isEditorPanelRemoved } =
+				select( editorStore );
+			return {
+				isChecked: isEditorPanelEnabled( props.panelName ),
+				isRemoved: isEditorPanelRemoved( props.panelName ),
+			};
+		},
+		[ props.panelName ]
+	);
+
+	if ( isRemoved ) {
+		return null;
+	}
+
+	return (
+		<PreferenceBaseOption
+			isChecked={ isChecked }
+			onChange={ () => toggleEditorPanelEnabled( props.panelName ) }
+			{ ...props }
+		/>
+	);
+}
diff --git a/packages/editor/src/components/preferences-modal/enable-panel.js b/packages/editor/src/components/preferences-modal/enable-panel.js
@@ -1,8 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { compose, ifCondition } from '@wordpress/compose';
-import { withSelect, withDispatch } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { privateApis as preferencesPrivateApis } from '@wordpress/preferences';
 
 /**
@@ -13,18 +12,29 @@ import { store as editorStore } from '../../store';
 
 const { PreferenceBaseOption } = unlock( preferencesPrivateApis );
 
-export default compose(
-	withSelect( ( select, { panelName } ) => {
-		const { isEditorPanelEnabled, isEditorPanelRemoved } =
-			select( editorStore );
-		return {
-			isRemoved: isEditorPanelRemoved( panelName ),
-			isChecked: isEditorPanelEnabled( panelName ),
-		};
-	} ),
-	ifCondition( ( { isRemoved } ) => ! isRemoved ),
-	withDispatch( ( dispatch, { panelName } ) => ( {
-		onChange: () =>
-			dispatch( editorStore ).toggleEditorPanelEnabled( panelName ),
-	} ) )
-)( PreferenceBaseOption );
+export default function EnablePanelOption( props ) {
+	const { toggleEditorPanelEnabled } = useDispatch( editorStore );
+	const { isChecked, isRemoved } = useSelect(
+		( select ) => {
+			const { isEditorPanelEnabled, isEditorPanelRemoved } =
+				select( editorStore );
+			return {
+				isChecked: isEditorPanelEnabled( props.panelName ),
+				isRemoved: isEditorPanelRemoved( props.panelName ),
+			};
+		},
+		[ props.panelName ]
+	);
+
+	if ( isRemoved ) {
+		return null;
+	}
+
+	return (
+		<PreferenceBaseOption
+			isChecked={ isChecked }
+			onChange={ () => toggleEditorPanelEnabled( props.panelName ) }
+			{ ...props }
+		/>
+	);
+}