From 7e257164de3563ee86e57803b356796e2670151f Mon Sep 17 00:00:00 2001 From: Martijn van der Klis Date: Mon, 13 Jan 2025 10:50:34 +0100 Subject: [PATCH] Refactors the useEffect into a separate file --- .../js/src/components/fills/MetaboxFill.js | 36 ++++--------------- .../js/src/components/fills/SidebarFill.js | 35 +++--------------- .../fills/hooks/useToggleMarkerStatus.js | 30 ++++++++++++++++ 3 files changed, 42 insertions(+), 59 deletions(-) create mode 100644 packages/js/src/components/fills/hooks/useToggleMarkerStatus.js diff --git a/packages/js/src/components/fills/MetaboxFill.js b/packages/js/src/components/fills/MetaboxFill.js index 940703482a4..bce3c9fd99a 100644 --- a/packages/js/src/components/fills/MetaboxFill.js +++ b/packages/js/src/components/fills/MetaboxFill.js @@ -1,6 +1,6 @@ /* External dependencies */ -import { useDispatch, useSelect } from "@wordpress/data"; -import { Fragment, useEffect } from "@wordpress/element"; +import { useSelect } from "@wordpress/data"; +import { Fragment } from "@wordpress/element"; import { Fill } from "@wordpress/components"; import { __ } from "@wordpress/i18n"; import PropTypes from "prop-types"; @@ -25,6 +25,7 @@ import { BlackFridayProductEditorChecklistPromotion } from "../BlackFridayProduc import { BlackFridayPromotion } from "../BlackFridayPromotion"; import { withMetaboxWarningsCheck } from "../higherorder/withMetaboxWarningsCheck"; import isBlockEditor from "../../helpers/isBlockEditor"; +import useToggleMarkerStatus from "./hooks/useToggleMarkerStatus"; const BlackFridayProductEditorChecklistPromotionWithMetaboxWarningsCheck = withMetaboxWarningsCheck( BlackFridayProductEditorChecklistPromotion ); const BlackFridayPromotionWithMetaboxWarningsCheck = withMetaboxWarningsCheck( BlackFridayPromotion ); @@ -38,40 +39,17 @@ const BlackFridayPromotionWithMetaboxWarningsCheck = withMetaboxWarningsCheck( B * @returns {wp.Element} The Metabox component. */ export default function MetaboxFill( { settings } ) { - const { isTerm, isProduct, isWooCommerceActive, activeAIButtonId } = useSelect( ( select ) => ( { + const { isTerm, isProduct, isWooCommerceActive } = useSelect( ( select ) => ( { isTerm: select( "yoast-seo/editor" ).getIsTerm(), isProduct: select( "yoast-seo/editor" ).getIsProduct(), isWooCommerceActive: select( "yoast-seo/editor" ).getIsWooCommerceActive(), - activeAIButtonId: select( "yoast-seo/editor" ).getActiveAIFixesButton(), } ), [] ); - const editorMode = isBlockEditor() ? useSelect( ( select ) => select( "core/edit-post" ).getEditorMode(), [] ) : null; - - const { setMarkerStatus } = useDispatch( "yoast-seo/editor" ); const shouldShowWooCommerceChecklistPromo = isProduct && isWooCommerceActive; - /** - * Toggles the markers status, based on the editor mode and the AI assessment fixes button status. - * - * @param {string} editorMode The editor mode. - * @param {boolean} activeAIButtonId The active AI button ID. - * - * @returns {void} - */ - useEffect( () => { - if ( isBlockEditor() ) { - // Toggle markers based on editor mode. - if ( ( editorMode === "visual" && activeAIButtonId ) || editorMode === "text" ) { - setMarkerStatus( "disabled" ); - } else { - setMarkerStatus( "enabled" ); - } - // Cleanup function to reset the marker status when the component unmounts or editor mode changes - return () => { - setMarkerStatus( "disabled" ); - }; - } - }, [ editorMode, activeAIButtonId, setMarkerStatus ] ); + if ( isBlockEditor() ) { + useToggleMarkerStatus(); + } return ( <> diff --git a/packages/js/src/components/fills/SidebarFill.js b/packages/js/src/components/fills/SidebarFill.js index a6fedeca504..fb67c74400a 100644 --- a/packages/js/src/components/fills/SidebarFill.js +++ b/packages/js/src/components/fills/SidebarFill.js @@ -1,7 +1,6 @@ /* External dependencies */ import { Fill } from "@wordpress/components"; -import { useDispatch, useSelect } from "@wordpress/data"; -import { Fragment, useEffect } from "@wordpress/element"; +import { Fragment } from "@wordpress/element"; import PropTypes from "prop-types"; import { __ } from "@wordpress/i18n"; import { get } from "lodash"; @@ -23,6 +22,7 @@ import AdvancedSettings from "../../containers/AdvancedSettings"; import WincherSEOPerformanceModal from "../../containers/WincherSEOPerformanceModal"; import KeywordUpsell from "../modals/KeywordUpsell"; import isBlockEditor from "../../helpers/isBlockEditor"; +import useToggleMarkerStatus from "./hooks/useToggleMarkerStatus"; /* eslint-disable complexity */ /** @@ -39,35 +39,10 @@ import isBlockEditor from "../../helpers/isBlockEditor"; export default function SidebarFill( { settings } ) { const webinarIntroUrl = get( window, "wpseoScriptData.webinarIntroBlockEditorUrl", "https://yoa.st/webinar-intro-block-editor" ); const FirstEligibleNotification = useFirstEligibleNotification( { webinarIntroUrl } ); - const { editorMode, activeAIButtonId } = useSelect( ( select ) => ( { - editorMode: select( "core/edit-post" ).getEditorMode(), - activeAIButtonId: select( "yoast-seo/editor" ).getActiveAIFixesButton(), - } ), [] ); - const { setMarkerStatus } = useDispatch( "yoast-seo/editor" ); - /** - * Toggles the markers status, based on the editor mode and the AI assessment fixes button status. - * - * @param {string} editorMode The editor mode. - * @param {boolean} activeAIButtonId The active AI button ID. - * - * @returns {void} - */ - useEffect( () => { - if ( isBlockEditor() ) { - // Toggle markers based on editor mode. - if ( ( editorMode === "visual" && activeAIButtonId ) || editorMode === "text" ) { - setMarkerStatus( "disabled" ); - } else { - setMarkerStatus( "enabled" ); - } - - // Cleanup function to reset the marker status when the component unmounts or editor mode changes - return () => { - setMarkerStatus( "disabled" ); - }; - } - }, [ editorMode, activeAIButtonId, setMarkerStatus ] ); + if ( isBlockEditor() ) { + useToggleMarkerStatus(); + } return ( diff --git a/packages/js/src/components/fills/hooks/useToggleMarkerStatus.js b/packages/js/src/components/fills/hooks/useToggleMarkerStatus.js new file mode 100644 index 00000000000..28ca16f154f --- /dev/null +++ b/packages/js/src/components/fills/hooks/useToggleMarkerStatus.js @@ -0,0 +1,30 @@ +import { useDispatch, useSelect } from "@wordpress/data"; +import { useEffect } from "@wordpress/element"; + +/** + * Toggles the markers status, based on the editor mode and the AI Optimize button status. + * @returns {void} + */ +const useToggleMarkerStatus = () => { + const { editorMode, activeAIButtonId } = useSelect( ( select ) => ( { + editorMode: select( "core/edit-post" ).getEditorMode(), + activeAIButtonId: select( "yoast-seo/editor" ).getActiveAIFixesButton(), + } ), [] ); + const { setMarkerStatus } = useDispatch( "yoast-seo/editor" ); + + useEffect( () => { + // Toggle markers based on editor mode. + if ( ( editorMode === "visual" && activeAIButtonId ) || editorMode === "text" ) { + setMarkerStatus( "disabled" ); + } else { + setMarkerStatus( "enabled" ); + } + + // Cleanup function to reset the marker status when the component unmounts or editor mode changes + return () => { + setMarkerStatus( "disabled" ); + }; + }, [ editorMode, activeAIButtonId ] ); +}; + +export default useToggleMarkerStatus;