Fixes Lint problems

Yoast · Jul 9, 2024 · f8d00fb · f8d00fb
1 parent 6bd1048
commit f8d00fb
Showing 1 changed file with 44 additions and 52 deletions.
diff --git a/packages/js/src/ai-assessment-fixes/components/ai-assessment-fixes-button.js b/packages/js/src/ai-assessment-fixes/components/ai-assessment-fixes-button.js
@@ -22,15 +22,14 @@ import { ReactComponent as LockClosed } from "../../../images/lock-closed.svg";
  *
  * @returns {JSX.Element} The AI Assessment Fixes button.
  */
-const AIAssessmentFixesButton = ({ id, isPremium }) => {
+const AIAssessmentFixesButton = ( { id, isPremium } ) => {
 	const aiFixesId = id + "AIFixes";
-	const ariaLabel = __("Optimize with AI", "wordpress-seo");
-	const [isModalOpen, , , setIsModalOpenTrue, setIsModalOpenFalse] = useToggleState(false);
-	const activeAIButtonId = useSelect(select => select("yoast-seo/editor").getActiveAIFixesButton(), []);
-	const activeMarker = useSelect(select => select("yoast-seo/editor").getActiveMarker(), []);
-	const { setActiveAIFixesButton, setActiveMarker, setMarkerPauseStatus } = useDispatch("yoast-seo/editor");
-	const focusElementRef = useRef(null);
-	const [buttonClass, setButtonClass] = useState("");
+	const [ isModalOpen, , , setIsModalOpenTrue, setIsModalOpenFalse ] = useToggleState( false );
+	const activeAIButtonId = useSelect( select => select( "yoast-seo/editor" ).getActiveAIFixesButton(), [] );
+	const activeMarker = useSelect( select => select( "yoast-seo/editor" ).getActiveMarker(), [] );
+	const { setActiveAIFixesButton, setActiveMarker, setMarkerPauseStatus } = useDispatch( "yoast-seo/editor" );
+	const focusElementRef = useRef( null );
+	const [ buttonClass, setButtonClass ] = useState( "" );
 
 	const defaultLabel = __( "Optimize with AI", "wordpress-seo" );
 	const tooLongLabel = __( "Your text is too long for the AI model to process.", "wordpress-seo" );
@@ -71,81 +70,74 @@ const AIAssessmentFixesButton = ({ id, isPremium }) => {
 	 */
 	const handlePressedButton = () => {
 		// If there is an active marker when the AI fixes button is clicked, remove it.
-		if (activeMarker) {
-			setActiveMarker(null);
-			setMarkerPauseStatus(false);
+		if ( activeMarker ) {
+			setActiveMarker( null );
+			setMarkerPauseStatus( false );
 			// Remove highlighting from the editor.
-			window.YoastSEO.analysis.applyMarks(new Paper("", {}), []);
+			window.YoastSEO.analysis.applyMarks( new Paper( "", {} ), [] );
 		}
 
 		/* If the current pressed button ID is the same as the active AI button id,
 		we want to set the active AI button to null. Otherwise, update the active AI button ID. */
-		if (aiFixesId === activeAIButtonId) {
-			setActiveAIFixesButton(null);
+		if ( aiFixesId === activeAIButtonId ) {
+			setActiveAIFixesButton( null );
 		} else {
-			setActiveAIFixesButton(aiFixesId);
+			setActiveAIFixesButton( aiFixesId );
 		}
 
 		// Dismiss the tooltip when the button is pressed.
-		setButtonClass("");
+		setButtonClass( "" );
 	};
 
-	const handleClick = useCallback(() => {
-		if (isPremium) {
-			doAction("yoast.ai.fixAssessments", aiFixesId);
+	const handleClick = useCallback( () => {
+		if ( isPremium ) {
+			doAction( "yoast.ai.fixAssessments", aiFixesId );
 			/* Only handle the pressed button state in Premium.
 			We don't want to change the background color of the button and other styling when it's pressed in Free.
 			This is because clicking on the button in Free will open the modal, and the button will not be in a pressed state. */
 			handlePressedButton();
 		} else {
 			setIsModalOpenTrue();
 		}
-	}, [handlePressedButton, setIsModalOpenTrue]);
+	}, [ handlePressedButton, setIsModalOpenTrue ] );
 
 	// The button is pressed when the active AI button id is the same as the current button id.
 	const isButtonPressed = activeAIButtonId === aiFixesId;
 
 	// Add tooltip classes on mouse enter and remove them on mouse leave.
 	const handleMouseEnter = useCallback( () => {
 		const direction = isEnabled ? "yoast-tooltip-w" : "yoast-tooltip-nw";
-		setTooltipClass( `yoast-tooltip ${ direction }` );
+		setButtonClass( `yoast-tooltip ${ direction }` );
 	}, [ isEnabled ] );
 
-	const handleMouseLeave = useCallback(() => {
+	const handleMouseLeave = useCallback( () => {
 		// Remove tooltip classes on mouse leave
-		setButtonClass("");
-	}, []);
+		setButtonClass( "" );
+	}, [] );
 
 	return (
-		<div
-			aria-label={ ariaLabel }
-			className={ tooltipClass }
-			onMouseEnter={ handleMouseEnter }
-			onMouseLeave={ handleMouseLeave }
+		<IconAIFixesButton
+			onClick={ handleClick }
+			ariaLabel={ ariaLabel }
+			onPointerEnter={ handleMouseEnter }
+			onPointerLeave={ handleMouseLeave }
+			id={ aiFixesId }
+			className={ `ai-button ${buttonClass}` }
+			pressed={ isButtonPressed }
+			disabled={ ! isEnabled }
 		>
-			<IconAIFixesButton
-				onClick={handleClick}
-				ariaLabel={ariaLabel}
-				onPointerEnter={handleMouseEnter}
-				onPointerLeave={handleMouseLeave}
-				id={aiFixesId}
-				className={`ai-button ${buttonClass}`}
-				pressed={isButtonPressed}
-				// disabled={!isEnabled}
-			>
-				{!isPremium && <LockClosed className="yst-fixes-button__lock-icon" />}
-				<SparklesIcon pressed={isButtonPressed} />
-				{
-					// We put the logic for the Upsell component in place.
-					// The Modal below is only a placeholder/mock. When we have the design for the real upsell, the modal should be replaced.
-					isModalOpen && <Modal className="yst-introduction-modal" isOpen={isModalOpen} onClose={setIsModalOpenFalse} initialFocus={focusElementRef}>
-						<Modal.Panel className="yst-max-w-lg yst-p-0 yst-rounded-3xl yst-introduction-modal-panel">
-							<ModalContent onClose={setIsModalOpenFalse} focusElementRef={focusElementRef} />
-						</Modal.Panel>
-					</Modal>
-				}
-			</IconAIFixesButton>
-		</div>
+			{ ! isPremium && <LockClosed className="yst-fixes-button__lock-icon" /> }
+			<SparklesIcon pressed={ isButtonPressed } />
+			{
+				// We put the logic for the Upsell component in place.
+				// The Modal below is only a placeholder/mock. When we have the design for the real upsell, the modal should be replaced.
+				isModalOpen && <Modal className="yst-introduction-modal" isOpen={ isModalOpen } onClose={ setIsModalOpenFalse } initialFocus={ focusElementRef }>
+					<Modal.Panel className="yst-max-w-lg yst-p-0 yst-rounded-3xl yst-introduction-modal-panel">
+						<ModalContent onClose={ setIsModalOpenFalse } focusElementRef={ focusElementRef } />
+					</Modal.Panel>
+				</Modal>
+			}
+		</IconAIFixesButton>
 	);
 };