From 3f8580849ba6b7796e5811c8041edf809f04d3b8 Mon Sep 17 00:00:00 2001 From: Welly Shen Date: Mon, 28 Oct 2024 20:32:00 +0800 Subject: [PATCH 1/3] Fix: URL params & error msg --- web/packages/hovercards/src/add-query-arg.ts | 21 ++++++++++++++++++++ web/packages/hovercards/src/core.ts | 21 ++++++++++++-------- 2 files changed, 34 insertions(+), 8 deletions(-) create mode 100644 web/packages/hovercards/src/add-query-arg.ts diff --git a/web/packages/hovercards/src/add-query-arg.ts b/web/packages/hovercards/src/add-query-arg.ts new file mode 100644 index 0000000..b9d9d25 --- /dev/null +++ b/web/packages/hovercards/src/add-query-arg.ts @@ -0,0 +1,21 @@ +/** + * Adds or updates a query parameter to the given URL. + * + * @param {string} url - The URL to which the query parameter will be added. + * @param {string} key - The query parameter key to add or update. + * @param {string} value - The value of the query parameter to add or update. + * @return {string} - The updated URL with the new or updated query parameter, or an empty string if the URL is invalid. + */ +export default function addQueryArg( url: string, key: string, value: string ): string { + try { + const urlObject = new URL( url ); + urlObject.searchParams.set( key, value ); + + return urlObject.toString(); + } catch ( error ) { + // eslint-disable-next-line no-console + console.error( `Failed to add query param: "${ key }" to "${ url }".`, error ); + + return ''; + } +} diff --git a/web/packages/hovercards/src/core.ts b/web/packages/hovercards/src/core.ts index 893c5bc..4d1f507 100644 --- a/web/packages/hovercards/src/core.ts +++ b/web/packages/hovercards/src/core.ts @@ -1,6 +1,7 @@ import type { Placement } from './compute-position'; import computePosition from './compute-position'; import { escUrl, escHtml } from './sanitizer'; +import addQueryArg from './add-query-arg'; import __ from './i18n'; interface AccountData { @@ -255,7 +256,7 @@ export default class Hovercards { const hovercard = dc.createElement( 'div' ); hovercard.className = `gravatar-hovercard${ additionalClass ? ` ${ additionalClass }` : '' }`; - const trackedProfileUrl = escUrl( `${ profileUrl }?utm_source=hovercard` ); + const trackedProfileUrl = escUrl( addQueryArg( profileUrl, 'utm_source', 'hovercard' ) ); const username = escHtml( displayName ); const isEditProfile = ! description && myHash === hash; const renderSocialLinks = verifiedAccounts @@ -411,7 +412,7 @@ export default class Hovercards { this._onFetchProfileStart( hash ); - fetch( `${ BASE_API_URL }/${ hash }?source=hovercard` ) + fetch( addQueryArg( `${ BASE_API_URL }/${ hash }`, 'source', 'hovercard' ) ) .then( ( res ) => { // API error handling if ( res.status !== 200 ) { @@ -457,12 +458,16 @@ export default class Hovercards { .catch( ( code ) => { let message = __( this._i18n, 'Sorry, we are unable to load this Gravatar profile.' ); - if ( code === 429 ) { - message = __( this._i18n, 'Too Many Requests.' ); - } - - if ( code === 500 ) { - message = __( this._i18n, 'Internal Server Error.' ); + switch ( code ) { + case 404: + message = __( this._i18n, 'Profile not found.' ); + break; + case 429: + message = __( this._i18n, 'Too Many Requests.' ); + break; + case 500: + message = __( this._i18n, 'Internal Server Error.' ); + break; } const hovercardInner = Hovercards.createHovercardError( From d89040d6fb43866eaa315c92c92944ae29be3639 Mon Sep 17 00:00:00 2001 From: Welly Shen Date: Mon, 28 Oct 2024 20:36:29 +0800 Subject: [PATCH 2/3] Update doc --- web/packages/hovercards/README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/web/packages/hovercards/README.md b/web/packages/hovercards/README.md index 60dfdfd..db55912 100644 --- a/web/packages/hovercards/README.md +++ b/web/packages/hovercards/README.md @@ -492,6 +492,7 @@ The following phrases are used: - `Edit your profile` - `View profile` - `Sorry, we are unable to load this Gravatar profile.` +- `Profile not found.` - `Too Many Requests.` - `Internal Server Error.` From 7ee58980ee8adabe66338a4ee928023a88f86140 Mon Sep 17 00:00:00 2001 From: Welly Shen Date: Tue, 29 Oct 2024 01:41:25 +0800 Subject: [PATCH 3/3] Use lightweight solution --- web/packages/hovercards/src/add-query-arg.ts | 13 ++++--------- 1 file changed, 4 insertions(+), 9 deletions(-) diff --git a/web/packages/hovercards/src/add-query-arg.ts b/web/packages/hovercards/src/add-query-arg.ts index b9d9d25..bf13d49 100644 --- a/web/packages/hovercards/src/add-query-arg.ts +++ b/web/packages/hovercards/src/add-query-arg.ts @@ -7,15 +7,10 @@ * @return {string} - The updated URL with the new or updated query parameter, or an empty string if the URL is invalid. */ export default function addQueryArg( url: string, key: string, value: string ): string { - try { - const urlObject = new URL( url ); - urlObject.searchParams.set( key, value ); + const [ baseUrl, queryStr ] = url.split( '?' ); + const queryParams = new URLSearchParams( queryStr || '' ); - return urlObject.toString(); - } catch ( error ) { - // eslint-disable-next-line no-console - console.error( `Failed to add query param: "${ key }" to "${ url }".`, error ); + queryParams.set( key, value ); - return ''; - } + return `${ baseUrl }?${ queryParams.toString() }`; }