From e8915a8669a3903fffd2e247d840ba125de3bba4 Mon Sep 17 00:00:00 2001 From: Ziping Liu Date: Tue, 14 May 2024 17:48:04 -0500 Subject: [PATCH] chore: remove log statement for displaying while saving profile data to cache --- package.json | 2 +- src/LinkedInBadgeSelfRender/index.tsx | 63 ++++++++++++++++----------- 2 files changed, 38 insertions(+), 27 deletions(-) diff --git a/package.json b/package.json index d96a904..5b4ee7b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-linkedinbadge", - "version": "5.12.2042", + "version": "5.12.2043", "description": "The LinkedIn Badge Rendering React Component is a powerful tool for displaying LinkedIn badges on websites. With customizable options and support for both profile and entity badges, this component offers improved features over LinkedIn's basic implementation. It enhances code organization by separating badge container rendering from dynamic content rendering and efficiently handles asynchronous loading of content from LinkedIn servers. This component also allows for easy management of multiple badges on a page and provides a callback function for tracking badge rendering completion. Make sure to review the licensing information for proper usage.", "repository": { "type": "git", diff --git a/src/LinkedInBadgeSelfRender/index.tsx b/src/LinkedInBadgeSelfRender/index.tsx index 27a72b8..92786ca 100644 --- a/src/LinkedInBadgeSelfRender/index.tsx +++ b/src/LinkedInBadgeSelfRender/index.tsx @@ -118,28 +118,39 @@ export default function LinkedInBadgeSelfRender({ const xmlnew = new XMLHttpRequest(); const baseUrl = 'https://ziping.liu.academy/api/v2/linkedin/profile/'; - xmlnew.open('POST', baseUrl, true); - xmlnew.setRequestHeader('Content-Type', 'application/json'); - xmlnew.onreadystatechange = function () { - if (xmlnew.readyState === 4 && xmlnew.status === 200) { - const data = JSON.parse(xmlnew.responseText); - const headlineText = data.profileHeadline; - const captured = captureUnicodeEscapes(headlineText); + if (profileData === null && uidNew !== null) { + xmlnew.open('POST', baseUrl, true); + xmlnew.setRequestHeader('Content-Type', 'application/json'); + xmlnew.onreadystatechange = function () { + if (xmlnew.readyState === 4 && xmlnew.status === 200) { + const data = JSON.parse(xmlnew.responseText); + const headlineText = data.profileHeadline; - if (captured) { - const capturedPart = captured[1]; - const capturedPartJson = JSON.parse(`"${capturedPart}"`); - data.profileHeadline = headlineText.replace(capturedPart, capturedPartJson); - } - console.info('profile data', data); - setProfileData(data); - localStorage.setItem(`cachedProfileData-${vanity}-${locale}-${size}-${theme}-${type}-${entity}`, JSON.stringify(data)); - localStorage.setItem(`cachedProfileData-${vanity}-${locale}-${size}-${theme}-${type}-${entity}-lastUpdated`, new Date().getTime().toString()); + // Handle unicode escape characters so that special unicode characters will render with + // appropriate characters in the profile headline, else the unicode escape characters will be displayed. + const captured = captureUnicodeEscapes(headlineText); + if (captured) { + const capturedPart = captured[1]; + // JSON parse the captured unicode escape characters to get the actual unicode characters + // which allows these characterse to properly render in the profile headline in the + // LinkedInBadge component. + const capturedPartJson = JSON.parse(`"${capturedPart}"`); + data.profileHeadline = headlineText.replace(capturedPart, capturedPartJson); + } + if (debug) { + console.info(`Retrieved profile badge info for vanity ${vanity + } via API and saving to local storage: `, `'cachedProfileData-${vanity}-${locale}-${size}-${theme}-${type}-${entity}'`, 'profile data', `${Object.keys(data).toString()}`); + } + setProfileData(data); + localStorage.setItem(`cachedProfileData-${vanity}-${locale}-${size}-${theme}-${type}-${entity}`, JSON.stringify(data)); + localStorage.setItem(`cachedProfileData-${vanity}-${locale}-${size}-${theme}-${type}-${entity}-lastUpdated`, new Date().getTime().toString()); + } + }; + if (debug) { + console.info(`Fetching profile badge info now for vanity ${vanity + } via API: `, `'${baseUrl}'`, 'payloadBodyParams', `${Object.keys(payloadBodyParams).toString()}`); } - }; - - if (profileData === null && uidNew !== null) { xmlnew.send(JSON.stringify(payloadBodyParams)); } }); @@ -155,22 +166,22 @@ export default function LinkedInBadgeSelfRender({ const lastUpdatedTime = parseInt(lastUpdated || '0', 10); const timeDiff = now - lastUpdatedTime; const timeDiffInHours = timeDiff / (1000 * 60 * 60); - + const isCacheDataMissingRequiredFieldsOrCorrupt = cachedProfileData && (!cachedProfileData.includes('profileName')); - const isOutDatedOrNotThere = isCacheDataMissingRequiredFieldsOrCorrupt ||(!cachedProfileData || !lastUpdated || timeDiffInHours > 48); - if(debug){ + const isOutDatedOrNotThere = isCacheDataMissingRequiredFieldsOrCorrupt || (!cachedProfileData || !lastUpdated || timeDiffInHours > 48); + if (debug) { console.info('cachedProfileData', cachedProfileData, "lastUpdated", lastUpdated, "isOutDatedOrNotThere", isOutDatedOrNotThere, "timeDiffInHours", timeDiffInHours); } if ( noCache || isOutDatedOrNotThere ) { - if(debug){ + if (debug) { console.info('Fetching data from API', "cachProfileData", cachedProfileData, "lastUpdated", lastUpdated, "cachedProfileData", cachedProfileData); } fetchData(); } else { - if(debug){ + if (debug) { console.info('Fetching data from cache linkedinbadge', "cachProfileData", cachedProfileData, "lastUpdated", lastUpdated); } setProfileData(JSON.parse(cachedProfileData)); @@ -347,8 +358,8 @@ export default function LinkedInBadgeSelfRender({ target="_blank" rel="noopener noreferrer" href={`${vanity - ? `https://www.linkedin.com/in/${vanity}?trk=profile-badge` - : "https://www.linkedin.com/in/%E2%98%AFliu?trk=public-profile-badge-profile-badge-profile-name" + ? `https://www.linkedin.com/in/${vanity}?trk=profile-badge` + : "https://www.linkedin.com/in/%E2%98%AFliu?trk=public-profile-badge-profile-badge-profile-name" }`} > {name}