21908 double request to semrush api

packages/js/src/components/SEMrushRelatedKeyphrasesModal.js

@@ -36,12 +36,21 @@ class SEMrushRelatedKeyphrasesModal extends Component {
 	 * @returns {void}
 	 */
 	onModalOpen() {
-		if ( ! this.props.keyphrase.trim() ) {
-			this.props.onOpenWithNoKeyphrase();
+		const {
+			keyphrase,
+			onOpenWithNoKeyphrase,
+			onOpen,
+			location,
+			newRequest,
+			countryCode,
+		} = this.props;
+		if ( ! keyphrase.trim() ) {
+			onOpenWithNoKeyphrase();
 			return;
 		}
 
-		this.props.onOpen( this.props.location );
+		onOpen( location );
+		newRequest( countryCode, keyphrase );
 	}
 
 	/**
@@ -217,6 +226,7 @@ SEMrushRelatedKeyphrasesModal.propTypes = {
 	onAuthentication: PropTypes.func.isRequired,
 	countryCode: PropTypes.string,
 	learnMoreLink: PropTypes.string,
+	newRequest: PropTypes.func.isRequired,
 };
 
 SEMrushRelatedKeyphrasesModal.defaultProps = {

packages/js/src/components/SEMrushRelatedKeyphrasesModalContent.js

@@ -1,12 +1,9 @@
-/* External dependencies */
-import { KeyphrasesTable, UserMessage, PremiumUpsell } from "@yoast/related-keyphrase-suggestions";
+import { useCallback, useState } from "@wordpress/element";
+import { CountrySelector, KeyphrasesTable, UserMessage, PremiumUpsell } from "@yoast/related-keyphrase-suggestions";
 import { Root } from "@yoast/ui-library";
 import PropTypes from "prop-types";
 import { isEmpty } from "lodash";
 
-/* Internal dependencies */
-import SEMrushCountrySelector from "./modals/SEMrushCountrySelector";
-
 /**
  * Determines whether the error property is present in the passed response object.
  *
@@ -15,6 +12,9 @@ import SEMrushCountrySelector from "./modals/SEMrushCountrySelector";
  * @returns {boolean} Whether or not the error property is present.
  */
 export function hasError( response ) {
+	if ( response?.code === "invalid_json" || response?.code === "fetch_error" ) {
+		return true;
+	}
 	return ! isEmpty( response ) && "error" in response;
 }
 
@@ -71,27 +71,34 @@ export function getUserMessage( props ) {
  */
 export default function RelatedKeyphraseModalContent( props ) {
 	const {
-		response = {},
-		lastRequestKeyphrase = "",
 		keyphrase = "",
-		newRequest,
-		setCountry,
+		relatedKeyphrases = [],
 		renderAction = null,
-		countryCode,
 		requestLimitReached = false,
-		setRequestFailed,
-		setNoResultsFound,
-		relatedKeyphrases = [],
-		setRequestSucceeded,
-		setRequestLimitReached,
-		isPending,
+		countryCode = "us",
+		setCountry,
+		newRequest,
+		response = {},
 		isRtl = false,
-		isPremium = false,
 		userLocale = "en_US",
+		isPending = false,
+		isPremium = false,
 		semrushUpsellLink = "",
 		premiumUpsellLink = "",
 	} = props;
 
+	const [ activeCountryCode, setActiveCountryCode ] = useState( countryCode );
+
+	/**
+	 * Sends a new related keyphrases request to SEMrush and updates the semrush_country_code value in the database.
+	 *
+	 * @returns {void}
+	 */
+	const relatedKeyphrasesRequest = useCallback( async() => {
+		newRequest( countryCode, keyphrase );
+		setActiveCountryCode( countryCode );
+	}, [ countryCode, keyphrase, newRequest ] );
+
 	return (
 		<Root context={ { isRtl } }>
 
@@ -100,17 +107,12 @@ export default function RelatedKeyphraseModalContent( props ) {
 				className="yst-mb-4"
 			/> }
 
-			{ ! requestLimitReached && <SEMrushCountrySelector
+			{ ! requestLimitReached && <CountrySelector
 				countryCode={ countryCode }
-				setCountry={ setCountry }
-				newRequest={ newRequest }
-				keyphrase={ keyphrase }
-				setRequestFailed={ setRequestFailed }
-				setNoResultsFound={ setNoResultsFound }
-				setRequestSucceeded={ setRequestSucceeded }
-				setRequestLimitReached={ setRequestLimitReached }
-				response={ response }
-				lastRequestKeyphrase={ lastRequestKeyphrase }
+				activeCountryCode={ activeCountryCode }
+				onChange={ setCountry }
+				onClick={ relatedKeyphrasesRequest }
+				className="yst-mb-4"
 				userLocale={ userLocale.split( "_" )[ 0 ] }
 			/> }
 
@@ -139,12 +141,7 @@ RelatedKeyphraseModalContent.propTypes = {
 	countryCode: PropTypes.string.isRequired,
 	setCountry: PropTypes.func.isRequired,
 	newRequest: PropTypes.func.isRequired,
-	setRequestSucceeded: PropTypes.func.isRequired,
-	setRequestLimitReached: PropTypes.func.isRequired,
-	setRequestFailed: PropTypes.func.isRequired,
-	setNoResultsFound: PropTypes.func.isRequired,
 	response: PropTypes.object,
-	lastRequestKeyphrase: PropTypes.string,
 	isRtl: PropTypes.bool,
 	userLocale: PropTypes.string,
 	isPending: PropTypes.bool,

packages/js/src/containers/SEMrushRelatedKeyphrases.js

@@ -42,10 +42,6 @@ export default compose( [
 		const {
 			setSEMrushChangeCountry,
 			setSEMrushNewRequest,
-			setSEMrushRequestSucceeded,
-			setSEMrushRequestFailed,
-			setSEMrushSetRequestLimitReached,
-			setSEMrushNoResultsFound,
 		 } = dispatch( "yoast-seo/editor" );
 		return {
 			setCountry: ( countryCode ) => {
@@ -54,18 +50,6 @@ export default compose( [
 			newRequest: ( countryCode, keyphrase ) => {
 				setSEMrushNewRequest( countryCode, keyphrase );
 			},
-			setRequestSucceeded: ( response ) => {
-				setSEMrushRequestSucceeded( response );
-			},
-			setRequestFailed: ( response ) => {
-				setSEMrushRequestFailed( response );
-			},
-			setRequestLimitReached: () => {
-				setSEMrushSetRequestLimitReached();
-			},
-			setNoResultsFound: () => {
-				setSEMrushNoResultsFound();
-			},
 		};
 	} ),
 ] )( RelatedKeyphrasesModalContent );

packages/js/src/containers/SEMrushRelatedKeyphrasesModal.js

@@ -11,6 +11,7 @@ export default compose( [
 			getSEMrushSelectedCountry,
 			getPreference,
 			selectLinkParams,
+			getFocusKeyphrase,
 		} = select( "yoast-seo/editor" );
 
 		return {
@@ -19,6 +20,7 @@ export default compose( [
 			countryCode: getSEMrushSelectedCountry(),
 			isRtl: getPreference( "isRtl", false ),
 			learnMoreLink: addQueryArgs( "https://yoa.st/3-v", selectLinkParams() ),
+			keyphrase: getFocusKeyphrase(),
 		};
 	} ),
 	withDispatch( ( dispatch ) => {
@@ -27,6 +29,7 @@ export default compose( [
 			setSEMrushOpenModal,
 			setSEMrushDismissModal,
 			setSEMrushLoginStatus,
+			setSEMrushNewRequest,
 		} = dispatch( "yoast-seo/editor" );
 
 		return {
@@ -42,6 +45,9 @@ export default compose( [
 			onAuthentication: ( status ) => {
 				setSEMrushLoginStatus( status );
 			},
+			newRequest: ( countryCode, keyphrase ) => {
+				setSEMrushNewRequest( countryCode, keyphrase );
+			},
 		};
 	} ),
 ] )( SEMrushRelatedKeyphrasesModal );