T365634: Fix warnings (#122)

* Fix preview.js warning * Fix popover.js warning * Fix inline.js warning * Wrap insertControllersMenu with a useCallback * Fix tooltip.js warnings
wikimedia · Jun 12, 2024 · f06b10d · f06b10d
1 parent ee478a0
commit f06b10d
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 23 deletions.
diff --git a/src/link/inline.js b/src/link/inline.js
@@ -28,7 +28,7 @@ export const InlineEditUI = ( {
 	useEffect( () => {
 		setTitle( activeAttributes.title || getTextContent( slice( value ) ) );
 		setLang( activeAttributes.lang || getSiteLanguage() );
-	}, [ activeAttributes ] );
+	}, [ activeAttributes, value ] );
 
 	useEffect( () => {
 		if ( title ) {

diff --git a/src/link/popover.js b/src/link/popover.js
@@ -35,7 +35,7 @@ export const WikipediaPreviewPopover = ( {
 		if ( e.target.className === 'components-popover__content' ) {
 			stopViewingPreview();
 		}
-	}, [] );
+	}, [ stopViewingPreview ] );
 
 	const setPlacement = () => {
 		if ( isTextNearTheEdge( anchor ) ) {

diff --git a/src/link/preview.js b/src/link/preview.js
@@ -2,6 +2,7 @@ import {
 	useState,
 	useEffect,
 	useLayoutEffect,
+	useCallback,
 } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import wikipediaPreview from 'wikipedia-preview';
@@ -27,7 +28,7 @@ export const PreviewEditUI = ( {
 		setSelectingSection( true );
 	};
 
-	const insertControllersMenu = () => {
+	const insertControllersMenu = useCallback( () => {
 		const preview = document.querySelector( '.wikipediapreview' );
 		const previewHeader = document.querySelector(
 			'.wikipediapreview-header'
@@ -56,7 +57,7 @@ export const PreviewEditUI = ( {
 				.querySelector( '.wikipediapreview-edit-preview-container' )
 				.setAttribute( 'dir', preview.getAttribute( 'dir' ) );
 		}
-	};
+	}, [] );
 
 	useEffect( () => {
 		const { title, lang } = activeAttributes;
@@ -81,7 +82,7 @@ export const PreviewEditUI = ( {
 					?.removeEventListener( 'click', toggleControllersMenu );
 			};
 		}
-	}, [ previewHtml, selectingSection ] );
+	}, [ previewHtml, selectingSection, insertControllersMenu ] );
 
 	useLayoutEffect( () => {
 		document
@@ -92,7 +93,7 @@ export const PreviewEditUI = ( {
 				.querySelector( '.wikipediapreview-header-closebtn' )
 				?.removeEventListener( 'click', onForceClose );
 		};
-	}, [ previewHtml, selectingSection ] );
+	}, [ previewHtml, onForceClose, selectingSection ] );
 
 	return (
 		<>

diff --git a/src/link/tooltip.js b/src/link/tooltip.js
@@ -1,7 +1,7 @@
 /* global wikipediapreviewCustomTooltip */
 import { __ } from '@wordpress/i18n';
 import { Popover } from '@wordpress/components';
-import { useEffect, useState } from '@wordpress/element';
+import { useEffect, useState, useCallback } from '@wordpress/element';
 
 export const CustomTooltip = ( {
 	anchorRef,
@@ -23,19 +23,26 @@ export const CustomTooltip = ( {
 		} );
 	};
 
-	const finishDisplayingTooltip = () => {
+	const finishDisplayingTooltip = useCallback( () => {
 		setDisplayTooltip( false );
 		wikipediapreviewCustomTooltip.tooltipDuration = 1;
 		updateStoredProperty( 'duration' );
-	};
+	}, [] );
 
-	const clearTimeouts = () => {
+	const clearTimeouts = useCallback( () => {
 		timeoutIds.forEach( ( id ) => {
 			clearTimeout( id );
 		} );
-	};
+	}, [ timeoutIds ] );
+
+	const waitFiveSecsThenHideTooltip = useCallback( () => {
+		const fiveSecId = setTimeout( () => {
+			finishDisplayingTooltip();
+		}, 5000 );
+		setTimeoutIds( ( timeoutIds ) => [ ...timeoutIds, fiveSecId ] );
+	}, [ finishDisplayingTooltip ] );
 
-	const waitOneSecThenDisplayTooltip = () => {
+	const waitOneSecThenDisplayTooltip = useCallback( () => {
 		const oneSecId = setTimeout( () => {
 			if ( anchorRef.current ) {
 				setDisplayTooltip( true );
@@ -47,34 +54,27 @@ export const CustomTooltip = ( {
 			}
 		}, 1000 );
 		setTimeoutIds( ( timeoutIds ) => [ ...timeoutIds, oneSecId ] );
-	};
-
-	const waitFiveSecsThenHideTooltip = () => {
-		const fiveSecId = setTimeout( () => {
-			finishDisplayingTooltip();
-		}, 5000 );
-		setTimeoutIds( ( timeoutIds ) => [ ...timeoutIds, fiveSecId ] );
-	};
+	}, [ anchorRef, tooltipDisplayedCount, waitFiveSecsThenHideTooltip ] );
 
 	useEffect( () => {
 		if ( tooltipDisplayedCount < tooltipDisplayedLimit && tooltipDisplayedFullDuration < 1 ) {
 			waitOneSecThenDisplayTooltip();
 		}
-	}, [] );
+	}, [ tooltipDisplayedCount, tooltipDisplayedFullDuration, waitOneSecThenDisplayTooltip ] );
 
 	useEffect( () => {
 		// Clear all timeouts when unmounting
 		return () => {
 			clearTimeouts();
 		};
-	}, [ timeoutIds ] );
+	}, [ timeoutIds, clearTimeouts ] );
 
 	useEffect( () => {
 		if ( addingPreview ) {
 			clearTimeouts();
 			finishDisplayingTooltip();
 		}
-	}, [ addingPreview ] );
+	}, [ addingPreview, clearTimeouts, finishDisplayingTooltip ] );
 
 	return (
 		<div>