From 54769a8dc5f1486f361b516a575d02ce53c75f4b Mon Sep 17 00:00:00 2001
From: George Mamadashvili <georgemamadashvili@gmail.com>
Date: Fri, 15 Nov 2024 12:01:20 +0400
Subject: [PATCH] Preferences: Use hooks instead of HoC in
 'EnableCustomFieldsOption'

---
 .../preferences-modal/enable-custom-fields.js | 12 +++----
 .../test/enable-custom-fields.js              | 35 ++++++++++++-------
 2 files changed, 27 insertions(+), 20 deletions(-)

diff --git a/packages/edit-post/src/components/preferences-modal/enable-custom-fields.js b/packages/edit-post/src/components/preferences-modal/enable-custom-fields.js
index b8125e96c7c2cf..f3db9d123f9d71 100644
--- a/packages/edit-post/src/components/preferences-modal/enable-custom-fields.js
+++ b/packages/edit-post/src/components/preferences-modal/enable-custom-fields.js
@@ -4,7 +4,7 @@
 import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { Button } from '@wordpress/components';
-import { withSelect } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 import { store as editorStore } from '@wordpress/editor';
 import { privateApis as preferencesPrivateApis } from '@wordpress/preferences';
 import { getPathAndQueryString } from '@wordpress/url';
@@ -57,7 +57,10 @@ export function CustomFieldsConfirmation( { willEnable } ) {
 	);
 }
 
-export function EnableCustomFieldsOption( { label, areCustomFieldsEnabled } ) {
+export default function EnableCustomFieldsOption( { label } ) {
+	const areCustomFieldsEnabled = useSelect( ( select ) => {
+		return !! select( editorStore ).getEditorSettings().enableCustomFields;
+	}, [] );
 	const [ isChecked, setIsChecked ] = useState( areCustomFieldsEnabled );
 
 	return (
@@ -72,8 +75,3 @@ export function EnableCustomFieldsOption( { label, areCustomFieldsEnabled } ) {
 		</PreferenceBaseOption>
 	);
 }
-
-export default withSelect( ( select ) => ( {
-	areCustomFieldsEnabled:
-		!! select( editorStore ).getEditorSettings().enableCustomFields,
-} ) )( EnableCustomFieldsOption );
diff --git a/packages/edit-post/src/components/preferences-modal/test/enable-custom-fields.js b/packages/edit-post/src/components/preferences-modal/test/enable-custom-fields.js
index 2dbeadec8350ac..adfa4a3df391da 100644
--- a/packages/edit-post/src/components/preferences-modal/test/enable-custom-fields.js
+++ b/packages/edit-post/src/components/preferences-modal/test/enable-custom-fields.js
@@ -4,27 +4,38 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+
 /**
  * Internal dependencies
  */
 import {
-	EnableCustomFieldsOption,
+	default as EnableCustomFieldsOption,
 	CustomFieldsConfirmation,
 } from '../enable-custom-fields';
 
+jest.mock( '@wordpress/data/src/components/use-select', () => jest.fn() );
+
+function setupUseSelectMock( areCustomFieldsEnabled ) {
+	useSelect.mockImplementation( () => {
+		return areCustomFieldsEnabled;
+	} );
+}
+
 describe( 'EnableCustomFieldsOption', () => {
 	it( 'renders a checked checkbox when custom fields are enabled', () => {
-		const { container } = render(
-			<EnableCustomFieldsOption areCustomFieldsEnabled />
-		);
+		setupUseSelectMock( true );
+		const { container } = render( <EnableCustomFieldsOption /> );
 
 		expect( container ).toMatchSnapshot();
 	} );
 
 	it( 'renders an unchecked checkbox when custom fields are disabled', () => {
-		const { container } = render(
-			<EnableCustomFieldsOption areCustomFieldsEnabled={ false } />
-		);
+		setupUseSelectMock( false );
+		const { container } = render( <EnableCustomFieldsOption /> );
 
 		expect( container ).toMatchSnapshot();
 	} );
@@ -32,9 +43,8 @@ describe( 'EnableCustomFieldsOption', () => {
 	it( 'renders an unchecked checkbox and a confirmation message when toggled off', async () => {
 		const user = userEvent.setup();
 
-		const { container } = render(
-			<EnableCustomFieldsOption areCustomFieldsEnabled />
-		);
+		setupUseSelectMock( true );
+		const { container } = render( <EnableCustomFieldsOption /> );
 
 		await user.click( screen.getByRole( 'checkbox' ) );
 
@@ -44,9 +54,8 @@ describe( 'EnableCustomFieldsOption', () => {
 	it( 'renders a checked checkbox and a confirmation message when toggled on', async () => {
 		const user = userEvent.setup();
 
-		const { container } = render(
-			<EnableCustomFieldsOption areCustomFieldsEnabled={ false } />
-		);
+		setupUseSelectMock( false );
+		const { container } = render( <EnableCustomFieldsOption /> );
 
 		await user.click( screen.getByRole( 'checkbox' ) );