5fe311b4c6220f16ac1565bfb7df0761aaed9853

Committed 20 Nov 2024 09:23AM UTC coverage: 54.684% (-0.004%) from 54.688%

Build # 5fe311b4c6220f16ac1565bfb7df0761aaed9853

Build Type

push

github

Committed by

web-flow

Commit Message

Merge pull request #21810 from Yoast/314-fix-country-selector-in-package-and-implement

fix translations and docs in country selector

Run Details

7594 of 13598 branches covered (55.85%)

Branch coverage included in aggregate %.

13 of 24 new or added lines in 1 file covered. (54.17%)

1 existing line in 1 file now uncovered.

29746 of 54685 relevant lines covered (54.4%)

41969.0 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

53.49

/packages/js/src/components/modals/SEMrushCountrySelector.js

/* External dependencies */
import PropTypes from "prop-types";
import { useEffect, useCallback, useState } from "@wordpress/element";
import apiFetch from "@wordpress/api-fetch";
import { addQueryArgs } from "@wordpress/url";

/* Yoast dependencies */
import { CountrySelector } from "@yoast/related-keyphrase-suggestions";

/**
 * The SEMrush Country Selector wrapper component.
 *
 * @param {string} [countryCode] The country code.
 * @param {Function} setCountry The function to set the country code.
 * @param {Function} newRequest The function to fire a new request.
 * @param {string} [keyphrase] The keyphrase.
 * @param {Function} setRequestFailed The function to set the request as failed.
 * @param {Function} setNoResultsFound The function to set the request as having no results.
 * @param {Function} setRequestSucceeded The function to set the request as succeeded.
 * @param {Function} setRequestLimitReached The function to set the request as having reached the limit.
 * @param {Object} response The response object.
 * @param {string} lastRequestKeyphrase The last requested keyphrase.
 * @param {string} userLocale The user locale.
 *
 * @returns {JSX.Element} The SEMrush Country Selector component.
 */
const SEMrushCountrySelector = ( {
        countryCode,
        setCountry,
        newRequest,
        keyphrase,
        setRequestFailed,
        setNoResultsFound,
        setRequestSucceeded,
        setRequestLimitReached,
        response,
        lastRequestKeyphrase,
        userLocale,
} ) => {
        const [ activeCountryCode, setActiveCountryCode ] = useState( countryCode );

        /**
         * Handles a failed response.
         *
         * @param {Object} res The response object.
         *
         * @returns {void}
         */
        const handleFailedResponse = useCallback( ( res ) => {
                if ( ! ( "error" in res ) ) {
                        return;
                }

                if ( res.error.includes( "TOTAL LIMIT EXCEEDED" ) ) {
                        setRequestLimitReached();

                        return;
                }

                setRequestFailed( res );
        }, [ setRequestLimitReached, setRequestFailed ] );

        /**
         * 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 );

                apiFetch( {
                        path: "yoast/v1/semrush/country_code",
                        method: "POST",
                        // eslint-disable-next-line camelcase
                        data: { country_code: countryCode },
                } );

                const res = await apiFetch( {
                        path: addQueryArgs(
                                "/yoast/v1/semrush/related_keyphrases",
                                {
                                        keyphrase,
                                        // eslint-disable-next-line camelcase
                                        country_code: countryCode,
                                }
                        ),
                } );

                if ( res.status === 200 ) {
                        if ( res.results.rows.length === 0 ) {
                                // No results found.
                                setNoResultsFound();
                                return;
                        }

                        setRequestSucceeded( res );
                        setActiveCountryCode( countryCode );
                        return;
                }

                handleFailedResponse( res );
        }, [ countryCode, keyphrase, newRequest ] );

        // Listens to the change action and fires the SEMrush request.
        // Fire a new request when the modal is first opened and when the keyphrase has been changed.
        // Should only fire once at the start.
        useEffect( ()=>{
                if ( ! response || keyphrase !== lastRequestKeyphrase ) {
                        relatedKeyphrasesRequest();
                }
        }, [] );

        return (
                <CountrySelector
                        countryCode={ countryCode }
                        activeCountryCode={ activeCountryCode }
                        onChange={ setCountry }
                        onClick={ relatedKeyphrasesRequest }
                        className="yst-my-5 lg:yst-w-4/5"
                        userLocale={ userLocale }
                />
        );
};

SEMrushCountrySelector.propTypes = {
        keyphrase: PropTypes.string,
        countryCode: PropTypes.string,
        response: PropTypes.object,
        lastRequestKeyphrase: PropTypes.string,
        setCountry: PropTypes.func.isRequired,
        newRequest: PropTypes.func.isRequired,
        setNoResultsFound: PropTypes.func.isRequired,
        setRequestSucceeded: PropTypes.func.isRequired,
        setRequestLimitReached: PropTypes.func.isRequired,
        setRequestFailed: PropTypes.func.isRequired,
        userLocale: PropTypes.string,
};

SEMrushCountrySelector.defaultProps = {
        keyphrase: "",
        countryCode: "us",
        response: {},
        lastRequestKeyphrase: "",
        userLocale: null,
};

export default SEMrushCountrySelector;

1	/* External dependencies */
2	import PropTypes from "prop-types";
3	import { useEffect, useCallback, useState } from "@wordpress/element";
4	import apiFetch from "@wordpress/api-fetch";
5	import { addQueryArgs } from "@wordpress/url";
6
7	/* Yoast dependencies */
8	import { CountrySelector } from "@yoast/related-keyphrase-suggestions";
9
10	/**
11	* The SEMrush Country Selector wrapper component.
12	*
13	* @param {string} [countryCode] The country code.
14	* @param {Function} setCountry The function to set the country code.
15	* @param {Function} newRequest The function to fire a new request.
16	* @param {string} [keyphrase] The keyphrase.
17	* @param {Function} setRequestFailed The function to set the request as failed.
18	* @param {Function} setNoResultsFound The function to set the request as having no results.
19	* @param {Function} setRequestSucceeded The function to set the request as succeeded.
20	* @param {Function} setRequestLimitReached The function to set the request as having reached the limit.
21	* @param {Object} response The response object.
22	* @param {string} lastRequestKeyphrase The last requested keyphrase.
23	* @param {string} userLocale The user locale.
24	*
25	* @returns {JSX.Element} The SEMrush Country Selector component.
26	*/
27	const SEMrushCountrySelector = ( {	4✔
28	countryCode,
29	setCountry,
30	newRequest,
31	keyphrase,
32	setRequestFailed,
33	setNoResultsFound,
34	setRequestSucceeded,
35	setRequestLimitReached,
36	response,
37	lastRequestKeyphrase,
38	userLocale,
39	} ) => {
40	const [ activeCountryCode, setActiveCountryCode ] = useState( countryCode );	4✔
41
42	/**
43	* Handles a failed response.
44	*
45	* @param {Object} res The response object.
46	*
47	* @returns {void}
48	*/
49	const handleFailedResponse = useCallback( ( res ) => {	4✔
50	if ( ! ( "error" in res ) ) {	2!
51	return;	2✔
52	}
53
NEW 54	if ( res.error.includes( "TOTAL LIMIT EXCEEDED" ) ) {	×
NEW 55	setRequestLimitReached();	×
56
NEW 57	return;	×
58	}
59
NEW 60	setRequestFailed( res );	×
61	}, [ setRequestLimitReached, setRequestFailed ] );
62
63	/**
64	* Sends a new related keyphrases request to SEMrush and updates the semrush_country_code value in the database.
65	*
66	* @returns {void}
67	*/
68	const relatedKeyphrasesRequest = useCallback( async() => {	4✔
69	newRequest( countryCode, keyphrase );	2✔
70
71	apiFetch( {	2✔
72	path: "yoast/v1/semrush/country_code",
73	method: "POST",
74	// eslint-disable-next-line camelcase
75	data: { country_code: countryCode },
76	} );
77
78	const res = await apiFetch( {	2✔
79	path: addQueryArgs(
80	"/yoast/v1/semrush/related_keyphrases",
81	{
82	keyphrase,
83	// eslint-disable-next-line camelcase
84	country_code: countryCode,
85	}
86	),
87	} );
88
89	if ( res.status === 200 ) {	2!
NEW 90	if ( res.results.rows.length === 0 ) {	×
91	// No results found.
NEW 92	setNoResultsFound();	×
NEW 93	return;	×
94	}
95
NEW 96	setRequestSucceeded( res );	×
NEW 97	setActiveCountryCode( countryCode );	×
NEW 98	return;	×
99	}
100
101	handleFailedResponse( res );	2✔
102	}, [ countryCode, keyphrase, newRequest ] );
103
104	// Listens to the change action and fires the SEMrush request.
105	// Fire a new request when the modal is first opened and when the keyphrase has been changed.
106	// Should only fire once at the start.
107	useEffect( ()=>{	4✔
108	if ( ! response \|\| keyphrase !== lastRequestKeyphrase ) {	4!
NEW 109	relatedKeyphrasesRequest();	×
110	}
111	}, [] );
112
113	return (	4✔
114	<CountrySelector
115	countryCode={ countryCode }
116	activeCountryCode={ activeCountryCode }
117	onChange={ setCountry }
118	onClick={ relatedKeyphrasesRequest }
119	className="yst-my-5 lg:yst-w-4/5"
120	userLocale={ userLocale }
121	/>
122	);
123	};
124
125	SEMrushCountrySelector.propTypes = {	4✔
126	keyphrase: PropTypes.string,
127	countryCode: PropTypes.string,
128	response: PropTypes.object,
129	lastRequestKeyphrase: PropTypes.string,
130	setCountry: PropTypes.func.isRequired,
131	newRequest: PropTypes.func.isRequired,
132	setNoResultsFound: PropTypes.func.isRequired,
133	setRequestSucceeded: PropTypes.func.isRequired,
134	setRequestLimitReached: PropTypes.func.isRequired,
135	setRequestFailed: PropTypes.func.isRequired,
136	userLocale: PropTypes.string,
137	};
138
139	SEMrushCountrySelector.defaultProps = {	4✔
140	keyphrase: "",
141	countryCode: "us",
142	response: {},
143	lastRequestKeyphrase: "",
144	userLocale: null,
145	};
146
147	export default SEMrushCountrySelector;

Yoast / wordpress-seo / 5fe311b4c6220f16ac1565bfb7df0761aaed9853

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous