Here we are extracting getSelectedGiphyAttributes to utils. getSelect…

…edGiphyAttributes is not referencing any props or state so we can use it in the useEffect hook and not reference it.
Automattic · Mar 11, 2021 · 7cefa79 · 7cefa79
1 parent 902471a
commit 7cefa79
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 30 deletions.
diff --git a/projects/plugins/jetpack/extensions/blocks/gif/edit.js b/projects/plugins/jetpack/extensions/blocks/gif/edit.js
@@ -3,15 +3,15 @@
  */
 import classNames from 'classnames';
 import { __ } from '@wordpress/i18n';
-import { createRef, useState, useEffect, useCallback } from '@wordpress/element';
+import { createRef, useState, useEffect } from '@wordpress/element';
 import { Placeholder } from '@wordpress/components';
 import { RichText } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
 import { icon, title } from './';
-import { getUrl, getPaddingTop, getEmbedUrl } from './utils';
+import { getUrl, getPaddingTop, getEmbedUrl, getSelectedGiphyAttributes } from './utils';
 import SearchForm from './components/search-form';
 import Controls from './controls';
 import useFetchGiphyData from './hooks/use-fetch-giphy-data';
@@ -25,32 +25,19 @@ function GifEdit( {
 	const { align, caption, giphyUrl, searchText, paddingTop } = attributes;
 	const classes = classNames( className, `align${ align }` );
 	const [ captionFocus, setCaptionFocus ] = useState( false );
-	const [ selectedItem, setSelectedItem ] = useState( false );
 	const searchFormInputRef = createRef();
 	const { isFetching, giphyData, fetchGiphyData } = useFetchGiphyData();
 
-	const setSelectedGiphy = useCallback( ( item ) => {
-		setAttributes( { giphyUrl: getEmbedUrl( item ), paddingTop: getPaddingTop( item ) } );
-	}, [ selectedItem ] );
-
 	const setSearchInputFocus = () => {
 		searchFormInputRef.current.focus();
 		setCaptionFocus( false );
 	};
 
-	// Handle the effects of receiving an updated API response.
 	useEffect( () => {
 		if ( giphyData && giphyData[ 0 ] ) {
-			setSelectedItem( giphyData[ 0 ] );
-		}
-	}, [ giphyData, setSelectedItem ] );
-
-	// Handle the side effects of selecting an item from the thumbnail list.
-	useEffect( () => {
-		if ( selectedItem ) {
-			setSelectedGiphy( selectedItem );
+			setAttributes( getSelectedGiphyAttributes( giphyData[ 0 ] ) );
 		}
-	}, [ selectedItem, setSelectedGiphy ] );
+	}, [ giphyData ] );
 
 	const onSubmit = ( event ) => {
 		event.preventDefault();
@@ -63,7 +50,7 @@ function GifEdit( {
 	};
 
 	const onChange = ( event ) => setAttributes( { searchText: event.target.value } );
-	const onSelectItem = ( thumbnail ) => setSelectedItem( thumbnail );
+	const onSelectThumbnail = ( thumbnail ) => setAttributes( getSelectedGiphyAttributes( thumbnail ) );
 
 	return (
 		<div className={ classes }>
@@ -102,7 +89,7 @@ function GifEdit( {
 									<button
 										className="wp-block-jetpack-gif_thumbnail-container"
 										key={ thumbnail.id }
-										onClick={ () => onSelectItem( thumbnail ) }
+										onClick={ () => onSelectThumbnail( thumbnail ) }
 										style={ thumbnailStyle }
 									/>
 								);

diff --git a/projects/plugins/jetpack/extensions/blocks/gif/test/utils.js b/projects/plugins/jetpack/extensions/blocks/gif/test/utils.js
@@ -10,11 +10,29 @@ import '@testing-library/jest-dom/extend-expect';
 /**
  * Internal dependencies
  */
-import { getUrl, getPaddingTop, getEmbedUrl, getSearchUrl, getUrlWithId, splitStringAndReturnLastItem } from '../utils';
+import {
+	getUrl,
+	getPaddingTop,
+	getEmbedUrl,
+	getSearchUrl,
+	getUrlWithId,
+	splitStringAndReturnLastItem,
+	getSelectedGiphyAttributes
+} from '../utils';
 import { GIPHY_API_KEY } from '../constants';
 
 
 describe( 'Gif Block utils', () => {
+	const GIPHY_ITEM = {
+		embed_url: 'fuzz',
+		images: {
+			original: {
+				height: 10,
+				width: 10,
+			},
+		},
+	};
+
 	describe( 'getUrl', () => {
 		test( 'returns getSearchUrl where there is no id', () => {
 			expect( getUrl( 'bubble tea' ) ).toEqual( `https://api.giphy.com/v1/gifs/search?q=bubble%20tea&api_key=${ GIPHY_API_KEY }&limit=10` );
@@ -28,21 +46,13 @@ describe( 'Gif Block utils', () => {
 
 	describe( 'getPaddingTop', () => {
 		test( 'returns padding as a percentage', () => {
-			const item = {
-				images: {
-					original: {
-						height: 10,
-						width: 10,
-					},
-				},
-			};
-			expect( getPaddingTop( item ) ).toEqual( '100%' );
+			expect( getPaddingTop( GIPHY_ITEM ) ).toEqual( '100%' );
 		} );
 	} );
 
 	describe( 'getEmbedUrl', () => {
 		test( 'returns embed url property', () => {
-			expect( getEmbedUrl( { embed_url: 'fuzz' } ) ).toEqual( 'fuzz' );
+			expect( getEmbedUrl( GIPHY_ITEM ) ).toEqual( GIPHY_ITEM.embed_url );
 		} );
 
 		test( 'returns undefined if no property found', () => {
@@ -77,4 +87,12 @@ describe( 'Gif Block utils', () => {
 			expect( splitStringAndReturnLastItem() ).toEqual( '' );
 		} );
 	} );
+
+	describe( 'getSelectedGiphyAttributes', () => {
+		test( 'returns expected object', () => {
+			expect( getSelectedGiphyAttributes( GIPHY_ITEM ) ).toStrictEqual(
+				{ giphyUrl: getEmbedUrl( GIPHY_ITEM ), paddingTop: getPaddingTop( GIPHY_ITEM ) }
+			);
+		} );
+	} );
 } );
diff --git a/projects/plugins/jetpack/extensions/blocks/gif/utils.js b/projects/plugins/jetpack/extensions/blocks/gif/utils.js
@@ -59,3 +59,5 @@ export const getPaddingTop = ( item ) =>
 	) }%`;
 
 export const getEmbedUrl = ( item ) => item?.embed_url;
+
+export const getSelectedGiphyAttributes = ( item ) => ( { giphyUrl: getEmbedUrl( item ), paddingTop: getPaddingTop( item ) } );