Refactors the useEffect into a separate file

Yoast · Jan 13, 2025 · 7e25716 · 7e25716
1 parent 6292c95
commit 7e25716
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 59 deletions.
diff --git 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
@@ -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 (
 		<Fragment>

diff --git a/packages/js/src/components/fills/hooks/useToggleMarkerStatus.js 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;