Jetpack: Fix some minor eslint lints (#39753)

Should be no functionality changes, unless some of the `react-hooks/` things were obscure bugs. * `curly` × 2: Missing `{}` around `if` bodies. * `eqeqeq` × 11: Use `===` and `!==` for comparisons. * `no-case-declarations` × 8: If a `case` has `const` or `let` inside, wrap it in a block for scoping. * `no-extra-boolean-cast` × 1: `if ( !! foo )` → `if ( foo )`. * `no-redeclare` × 2: A few useless `/* global JSON */`. * `no-undef` × 3: Remove some unused variables. * `no-unused-expressions` × 7: All ignored by updating `projects/plugins/jetpack/modules/.eslintrc.js`. * `no-useless-escape` × 4: Remove unnecessary `\`s in regexes. * `react-hooks/exhaustive-deps` × 3: Added missing deps. * One case needed a bit of refactoring. * `react-hooks/rules-of-hooks` × 5: Used `useSelect` and `useResizeObserver` unconditionally, and defined one that needed a conditional outside of `render()`. * `valid-typeof` × 2: Broken `undefined !== typeof window` check, changed to just use `window?` in later conditionals. * `@wordpress/no-global-active-element` × 2: Use `ownerDocument`.
Automattic · Oct 25, 2024 · 5b47b63 · 5b47b63
1 parent 6c64126
commit 5b47b63
Show file tree

Hide file tree

Showing 28 changed files with 129 additions and 144 deletions.
diff --git a/...gins/jetpack/_inc/client/components/module-settings/with-module-settings-form-helpers.jsx b/...gins/jetpack/_inc/client/components/module-settings/with-module-settings-form-helpers.jsx
@@ -124,7 +124,7 @@ export function withModuleSettingsFormHelpers( InnerComponent ) {
 					const saneOptions = {};
 
 					each( this.state.options, ( value, key ) => {
-						key = key.replace( /\-/, '_' );
+						key = key.replace( /-/, '_' );
 						saneOptions[ key ] = value;
 					} );
 

diff --git a/projects/plugins/jetpack/_inc/client/components/popover/util.js b/projects/plugins/jetpack/_inc/client/components/popover/util.js
@@ -117,7 +117,8 @@ function choosePrimary( prefered, room ) {
 
 		// less chopped of than other sides
 		if ( space > best ) {
-			( best = space ), ( bestPos = prefered );
+			best = space;
+			bestPos = prefered;
 		}
 	}
 
@@ -161,7 +162,8 @@ function chooseSecondary( primary, prefered, el, target, w, h ) {
 
 		// shows more of the tip than the other positions
 		if ( area > best ) {
-			( best = area ), ( bestPos = pos );
+			best = area;
+			bestPos = pos;
 		}
 	}
 

diff --git a/projects/plugins/jetpack/_inc/client/components/section-nav/tabs.jsx b/projects/plugins/jetpack/_inc/client/components/section-nav/tabs.jsx
@@ -155,7 +155,7 @@ class NavTabs extends React.Component {
 			case 32: // space
 			case 13: // enter
 				event.preventDefault();
-				document.activeElement.click();
+				event.target.ownerDocument.activeElement.click();
 				break;
 		}
 	};

diff --git a/projects/plugins/jetpack/_inc/client/components/select-dropdown/index.jsx b/projects/plugins/jetpack/_inc/client/components/select-dropdown/index.jsx
@@ -312,7 +312,7 @@ class SelectDropdown extends Component {
 		if ( ! this.state.isOpen ) {
 			return this.openDropdown();
 		}
-		document.activeElement.click();
+		this.dropdownContainerRef.current.ownerDocument.activeElement.click();
 	}
 
 	focusSibling( direction ) {

diff --git a/projects/plugins/jetpack/_inc/client/pro-status/index.jsx b/projects/plugins/jetpack/_inc/client/pro-status/index.jsx
@@ -109,9 +109,10 @@ class ProStatus extends React.Component {
 				break;
 			case 'invalid_key':
 				return;
-			case 'rewind_connected':
+			case 'rewind_connected': {
 				const rewindMessage = this.getRewindMessage();
 				return <Status status={ rewindMessage.status } text={ rewindMessage.text } />;
+			}
 			case 'active':
 				return <Status status="active" />;
 		}

diff --git a/projects/plugins/jetpack/_inc/client/state/connection/reducer.js b/projects/plugins/jetpack/_inc/client/state/connection/reducer.js
@@ -73,9 +73,10 @@ export const user = ( state = window.Initial_State.userData || {}, action ) => {
 		case USER_CONNECTION_DATA_FETCH_SUCCESS:
 			return assign( {}, state, action.userConnectionData );
 
-		case UNLINK_USER_SUCCESS:
+		case UNLINK_USER_SUCCESS: {
 			const currentUser = assign( {}, state.currentUser, { isConnected: false } );
 			return assign( {}, state, { currentUser } );
+		}
 
 		case MOCK_SWITCH_USER_PERMISSIONS:
 			return merge( {}, state, action.initialState );

diff --git a/projects/plugins/jetpack/_inc/client/state/modules/reducer.js b/projects/plugins/jetpack/_inc/client/state/modules/reducer.js
@@ -31,14 +31,15 @@ export const items = ( state = {}, action ) => {
 			return assign( {}, state, {
 				[ action.module ]: assign( {}, state[ action.module ], { activated: false } ),
 			} );
-		case JETPACK_MODULE_UPDATE_OPTIONS_SUCCESS:
+		case JETPACK_MODULE_UPDATE_OPTIONS_SUCCESS: {
 			const updatedModule = assign( {}, state[ action.module ] );
 			Object.keys( action.newOptionValues ).forEach( key => {
 				updatedModule.options[ key ].current_value = action.newOptionValues[ key ];
 			} );
 			return assign( {}, state, {
 				[ action.module ]: updatedModule,
 			} );
+		}
 		default:
 			return state;
 	}
@@ -84,7 +85,7 @@ export const requests = ( state = initialRequestsState, action ) => {
 					[ action.module ]: false,
 				} ),
 			} );
-		case JETPACK_MODULE_UPDATE_OPTIONS:
+		case JETPACK_MODULE_UPDATE_OPTIONS: {
 			const updatingOption = assign( {}, state.updatingOption );
 			updatingOption[ action.module ] = assign( {}, updatingOption[ action.module ] );
 			Object.keys( action.newOptionValues ).forEach( key => {
@@ -93,8 +94,9 @@ export const requests = ( state = initialRequestsState, action ) => {
 			return assign( {}, state, {
 				updatingOption: assign( {}, state.updatingOption, updatingOption ),
 			} );
+		}
 		case JETPACK_MODULE_UPDATE_OPTIONS_FAIL:
-		case JETPACK_MODULE_UPDATE_OPTIONS_SUCCESS:
+		case JETPACK_MODULE_UPDATE_OPTIONS_SUCCESS: {
 			const _updatingOption = assign( {}, state.updatingOption );
 			_updatingOption[ action.module ] = assign( {}, _updatingOption[ action.module ] );
 			Object.keys( action.newOptionValues ).forEach( key => {
@@ -103,6 +105,7 @@ export const requests = ( state = initialRequestsState, action ) => {
 			return assign( {}, state, {
 				updatingOption: assign( {}, state.updatingOption, _updatingOption ),
 			} );
+		}
 		default:
 			return state;
 	}

diff --git a/projects/plugins/jetpack/_inc/client/state/settings/reducer.js b/projects/plugins/jetpack/_inc/client/state/settings/reducer.js
@@ -21,11 +21,12 @@ export const items = ( state = {}, action ) => {
 			return assign( {}, state, action.initialState.settings );
 		case JETPACK_SETTINGS_FETCH_RECEIVE:
 			return assign( {}, action.settings );
-		case JETPACK_SETTING_UPDATE_SUCCESS:
+		case JETPACK_SETTING_UPDATE_SUCCESS: {
 			const key = Object.keys( action.updatedOption )[ 0 ];
 			return assign( {}, state, {
 				[ key ]: action.updatedOption[ key ],
 			} );
+		}
 		case JETPACK_SETTINGS_UPDATE_SUCCESS:
 			return assign( {}, state, action.updatedOptions );
 		default:

diff --git a/projects/plugins/jetpack/_inc/client/writing/composing.jsx b/projects/plugins/jetpack/_inc/client/writing/composing.jsx
@@ -21,7 +21,7 @@ export class Composing extends React.Component {
 	 * @return {*}           the updated value
 	 */
 	updateFormStateByMarkdown = module => {
-		if ( !! this.props.getSettingCurrentValue( 'wpcom_publish_comments_with_markdown', module ) ) {
+		if ( this.props.getSettingCurrentValue( 'wpcom_publish_comments_with_markdown', module ) ) {
 			return this.props.updateFormStateModuleOption( module, 'wpcom_publish_posts_with_markdown' );
 		}
 		return this.props.updateFormStateModuleOption(

diff --git a/projects/plugins/jetpack/_inc/jetpack-deactivate-dialog.js b/projects/plugins/jetpack/_inc/jetpack-deactivate-dialog.js
@@ -30,19 +30,20 @@
 						$( '#TB_window' ).addClass( 'jetpack-disconnect-modal' );
 						deactivationModalCentralize();
 
-						$( '#TB_closeWindowButton, #TB_overlay' ).on( 'click', function ( e ) {
+						$( '#TB_closeWindowButton, #TB_overlay' ).on( 'click', function () {
 							deactivationModalTrackCloseEvent();
 						} );
 
 						document.onkeyup = function ( e ) {
+							var keycode;
 							if ( e === null ) {
 								// ie
 								keycode = event.keyCode;
 							} else {
 								// mozilla
 								keycode = e.which;
 							}
-							if ( keycode == 27 ) {
+							if ( keycode === 27 ) {
 								// close
 								deactivationModalTrackCloseEvent();
 							}
@@ -77,12 +78,12 @@
 	deactivateLinkElem.attr( 'title', deactivate_dialog.title );
 	deactivateLinkElem.addClass( 'thickbox' );
 	deactivateLinkElem.html( deactivate_dialog.deactivate_label );
-	deactivateLinkElem.on( 'click', function ( e ) {
+	deactivateLinkElem.on( 'click', function () {
 		observer.observe( body, { childList: true } );
 		analytics.tracks.recordEvent( 'jetpack_termination_dialog_open', tracksProps );
 	} );
 
-	$( '#jetpack_deactivation_dialog_content__button-cancel' ).on( 'click', function ( e ) {
+	$( '#jetpack_deactivation_dialog_content__button-cancel' ).on( 'click', function () {
 		tb_remove();
 		deactivationModalTrackCloseEvent();
 	} );

diff --git a/projects/plugins/jetpack/_inc/jetpack-modules.js b/projects/plugins/jetpack/_inc/jetpack-modules.js
@@ -1,19 +1,10 @@
 ( function ( window, $, items, models, views, i18n, modalinfo, nonces ) {
 	'use strict';
 
-	var modules,
-		list_table,
-		handle_module_tag_click,
-		$the_table,
-		$the_filters,
-		$the_search,
-		$jp_frame,
-		$bulk_button;
-
-	$the_table = $( '.wp-list-table.jetpack-modules' );
+	var modules, list_table, handle_module_tag_click, $the_filters, $the_search, $bulk_button;
+
 	$the_filters = $( '.navbar-form' );
 	$the_search = $( '#srch-term-search-input' );
-	$jp_frame = $( '.jp-frame' );
 	$bulk_button = $( '#doaction' );
 
 	modules = new models.Modules( {

diff --git a/projects/plugins/jetpack/changelog/fix-various-eslint-lints b/projects/plugins/jetpack/changelog/fix-various-eslint-lints
@@ -0,0 +1,5 @@
+Significance: patch
+Type: other
+Comment: Fix various eslint lints. Should be no change to functionality, although it's possible some obscure React bugs got fixed.
+
+
diff --git a/projects/plugins/jetpack/extensions/blocks/eventbrite/utils.js b/projects/plugins/jetpack/extensions/blocks/eventbrite/utils.js
@@ -24,7 +24,7 @@ export function eventIdFromUrl( url ) {
 		return null;
 	}
 
-	const match = url.match( /(\d+)\/?(?:\?[^\/]*)?\s*$/ );
+	const match = url.match( /(\d+)\/?(?:\?[^/]*)?\s*$/ );
 	return match && match[ 1 ] ? parseInt( match[ 1 ], 10 ) : null;
 }
 

diff --git a/projects/plugins/jetpack/extensions/blocks/image-compare/edit.js b/projects/plugins/jetpack/extensions/blocks/image-compare/edit.js
@@ -14,34 +14,30 @@ import './view.js';
 
 const Edit = ( { attributes, clientId, isSelected, setAttributes } ) => {
 	const { align, imageBefore, imageAfter, caption, orientation } = attributes;
-	// Check for useResizeObserver, not available in older Gutenberg.
-	let resizeListener = null;
-	let sizes = null;
 
 	const blockProps = useBlockProps();
 	const juxtaposeRef = useRef( undefined );
-	if ( useResizeObserver ) {
-		// Let's look for resize so we can trigger the thing.
-		[ resizeListener, sizes ] = useResizeObserver();
 
-		useDebounce(
-			sz => {
-				if ( sz > 0 ) {
-					if ( typeof juxtapose !== 'undefined' && juxtapose.sliders ) {
-						// only update for *this* slide
-						juxtapose.sliders.forEach( elem => {
-							const parentElem = elem.wrapper.parentElement;
-							if ( parentElem.id === clientId ) {
-								elem.optimizeWrapper( sz );
-							}
-						} );
-					}
+	// Let's look for resize so we can trigger the thing.
+	const [ resizeListener, sizes ] = useResizeObserver();
+
+	useDebounce(
+		sz => {
+			if ( sz > 0 ) {
+				if ( typeof juxtapose !== 'undefined' && juxtapose.sliders ) {
+					// only update for *this* slide
+					juxtapose.sliders.forEach( elem => {
+						const parentElem = elem.wrapper.parentElement;
+						if ( parentElem.id === clientId ) {
+							elem.optimizeWrapper( sz );
+						}
+					} );
 				}
-			},
-			200,
-			sizes.width
-		);
-	}
+			}
+		},
+		200,
+		sizes.width
+	);
 
 	// Initial state if attributes already set or not.
 	// If both images are set, add juxtapose class, which is picked up by the library.

diff --git a/projects/plugins/jetpack/extensions/blocks/opentable/edit.js b/projects/plugins/jetpack/extensions/blocks/opentable/edit.js
@@ -119,7 +119,7 @@ function OpenTableEdit( {
 		// Need to force attribute to be updated after switch to using block styles
 		// so it still meets frontend rendering expectations.
 		setAttributes( { style } );
-	}, [ style ] );
+	}, [ align, style, prevStyle, setAttributes ] );
 
 	const parseEmbedCode = embedCode => {
 		const newAttributes = getAttributesFromEmbedCode( embedCode );

diff --git a/projects/plugins/jetpack/extensions/blocks/opentable/restaurant-picker.js b/projects/plugins/jetpack/extensions/blocks/opentable/restaurant-picker.js
@@ -11,7 +11,7 @@ export default function RestaurantPicker( props ) {
 	const { restaurants, hasRequestFailed } = useRestaurantSearch( input, MAX_SUGGESTIONS );
 	const [ selectedRestaurants, setSelectedRestaurants ] = useState( props.rids || [] );
 
-	const idRegex = /^(\d+)$|\(\#(\d+)\)$/;
+	const idRegex = /^(\d+)$|\(#(\d+)\)$/;
 
 	const onChange = selected => {
 		const selectedIds = selected.map( restaurant => {

diff --git a/projects/plugins/jetpack/extensions/blocks/opentable/use-restaurant-search.js b/projects/plugins/jetpack/extensions/blocks/opentable/use-restaurant-search.js
@@ -1,38 +1,42 @@
-import { useState, useEffect, useCallback } from '@wordpress/element';
+import { useState, useEffect, useCallback, useMemo } from '@wordpress/element';
 import { unionBy, throttle, isEmpty } from 'lodash';
 
-export const possibleEmbed = /^\s*(http[s]?:\/\/|\<script)/;
+export const possibleEmbed = /^\s*(http[s]?:\/\/|<script)/;
 
 export default function useRestaurantSearch( searchTerm, maxResults ) {
 	const [ restaurants, setRestaurants ] = useState( [] );
 	const [ hasRequestFailed, setHasRequestFailed ] = useState( false );
 
-	const searchRestaurants = ( input = '' ) => {
-		setHasRequestFailed( false );
+	const searchRestaurants = useCallback(
+		( input = '' ) => {
+			setHasRequestFailed( false );
 
-		fetch(
-			'https://www.opentable.com/widget/reservation/restaurant-search?pageSize=' +
-				maxResults +
-				'&query=' +
-				encodeURIComponent( input )
-		)
-			.then( result => result.json() )
-			.then( restaurantResponse => {
-				setHasRequestFailed( false );
-				setRestaurants( unionBy( restaurants, restaurantResponse.items, 'rid' ) );
-			} )
-			.catch( () => setHasRequestFailed( true ) );
-	};
+			fetch(
+				'https://www.opentable.com/widget/reservation/restaurant-search?pageSize=' +
+					maxResults +
+					'&query=' +
+					encodeURIComponent( input )
+			)
+				.then( result => result.json() )
+				.then( restaurantResponse => {
+					setHasRequestFailed( false );
+					setRestaurants( unionBy( restaurants, restaurantResponse.items, 'rid' ) );
+				} )
+				.catch( () => setHasRequestFailed( true ) );
+		},
+		[ restaurants, maxResults ]
+	);
 
-	const throttledSearchRestaurants = useCallback( throttle( searchRestaurants, 500 ), [
-		restaurants,
-	] );
+	const throttledSearchRestaurants = useMemo(
+		() => throttle( searchRestaurants, 500 ),
+		[ searchRestaurants ]
+	);
 
 	useEffect( () => {
 		if ( ! isEmpty( searchTerm ) && ! possibleEmbed.test( searchTerm ) ) {
 			throttledSearchRestaurants( searchTerm );
 		}
-	}, [ searchTerm ] );
+	}, [ searchTerm, throttledSearchRestaurants ] );
 
 	return { restaurants, hasRequestFailed };
 }
diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/edit.js b/projects/plugins/jetpack/extensions/blocks/subscriptions/edit.js
@@ -39,6 +39,7 @@ import SubscriptionSkeletonLoader from './subscription-skeleton-loader';
 
 const { getComputedStyle } = window;
 const isGradientAvailable = !! useGradient;
+const useGradientIfAvailable = isGradientAvailable ? useGradient : () => ( {} );
 const name = metadata.name.replace( 'jetpack/', '' );
 
 const applyFallbackStyles = withFallbackStyles( ( node, ownProps ) => {
@@ -125,18 +126,14 @@ export function SubscriptionEdit( props ) {
 		};
 	} );
 
-	const emailFieldGradient = isGradientAvailable
-		? useGradient( {
-				gradientAttribute: 'emailFieldGradient',
-				customGradientAttribute: 'customEmailFieldGradient',
-		  } )
-		: {};
-	const buttonGradient = isGradientAvailable
-		? useGradient( {
-				gradientAttribute: 'buttonGradient',
-				customGradientAttribute: 'customButtonGradient',
-		  } )
-		: {};
+	const emailFieldGradient = useGradientIfAvailable( {
+		gradientAttribute: 'emailFieldGradient',
+		customGradientAttribute: 'customEmailFieldGradient',
+	} );
+	const buttonGradient = useGradientIfAvailable( {
+		gradientAttribute: 'buttonGradient',
+		customGradientAttribute: 'customButtonGradient',
+	} );
 
 	const sharedClasses = {
 		'no-border-radius': borderRadius === 0,