Update Link Container #49
Conversation
… helper functions isValidURL and setIcon.
There was a problem hiding this comment.
Hey @kimchiiboiii ,
Thanks for your contribution, there are some bugs in the code, please fix it and I will merge your PR.
I have added the comments for the bugs, please check once.
src/code/index.js
Outdated
| @@ -112,6 +123,49 @@ function previewLink(button) { | |||
| console.log("Placeholder value:", inputElement.placeholder); | |||
| console.log("Input value:", inputValue); | |||
| // Rest of the code... | |||
| if (isValidURL(inputValue)) { | |||
There was a problem hiding this comment.
You can bypass this as of now...
src/code/index.js
Outdated
| const matchingKey = Object.keys(socialLinks).find(key => { | ||
| const inputValueNoUsername = socialLinks[key].replace('<username>', ''); | ||
| return inputValue.startsWith(inputValueNoUsername) && inputValue.length > inputValueNoUsername.length; | ||
| // ^ This ensures the link has text in the <username> placeholder before returning | ||
| }); | ||
| if(matchingKey) { | ||
| console.log("Key found!:", matchingKey); | ||
| } else { | ||
| console.log("No key found!"); | ||
| } | ||
| setIcon(matchingKey, parentElement); |
There was a problem hiding this comment.
It's not working, I have tried manually too, not matching with the name of the social handle.
Check screenshots attached.
Its showing the default icon only.
When https://linkedin minimum this keyword should be entered, it should show linkedin icon.
I have bypassed the ValidURL if statement with this:
if (inputValue.includes("https://linkedin.com")) {
console.log("Valid URL!")
button.disabled = false;
const matchingKey = Object.keys(socialLinks).find(key => {
const inputValueNoUsername = socialLinks[key].replace('<username>', '');
return inputValue.startsWith(inputValueNoUsername) && inputValue.length > inputValueNoUsername.length;
// ^ This ensures the link has text in the <username> placeholder before returning
});
...There was a problem hiding this comment.
When you commented above "You can bypass this as of now." you mean don't worry about it anymore, correct?
Because I noticed you added link validation so I deleted mine. Just making sure that I understood correctly.
Ahh I see, I didn't notice that some of the key values started with "www," and others didn't.
let matchingKey;
const matchingLink = Object.entries(socialLinks).find(([key, value]) => {
const url = new URL(value.replace("<username>", ""));
const domainKeyWords = url.hostname.replace("www.", "").replace(".com", "");
const isMatch = inputValue.includes(domainKeyWords);
So instead I'll get the value of the matching socialLink key, take it's domain name and remove www. and .com,
so that as soon as https://linkedin is entered it will retrieve the key and show the icon.
But right now it will still retrieve the key and show the icon if you were to just enter linkedin because
I removed isValidURL.
Let me know if anything needs work, thanks.
There was a problem hiding this comment.
Hey @kimchiiboiii ,
There's a conflict is coming of default.png.
You can fetch the latest code, it has default.png file and use that one.
Also, fetch and update with the latest code, rest your code is fine, do the required changes I will merge it.
src/code/index.js
Outdated
| let matchingKey; | ||
| const matchingLink = Object.entries(socialLinks).find(([key, value]) => { | ||
| const url = new URL(value.replace("<username>", "")); | ||
| const domainKeyWords = url.hostname.replace("www.", "").replace(".com", ""); |
There was a problem hiding this comment.
Hey,
See all URLs doesn't have www, please go through the social-links.json, and see the format of URLs, it should be generalized for all types of URLs.
For few it is working, but not for all.
There was a problem hiding this comment.
Hey,
I added in handling for the socialLinks values that start with the same domain keywords such as:
"dev.to", "devpost.com", "devfolio.co" etc.
I was stuck on how retrieve the key as soon as the minimum keyword is entered like https://www.linkedin while also not conflicting with the "dev" URLs but I think this code should handle it and any URLs in the future that start with the same domain keywords.
|
Hey @kimchiiboiii , Thanks for your contribution, the code is working but there is still some bug 😅 , but no worries, I will handle it. |
Title
Update Link Container
Description
Added event listeners to inputs in the link class, added a prototype isValidURL function that uses a regex to check
if a string is a valid URL. Added function setIcon that fetches the corresponding icon or the default icon.
Added default.png for the icon class if there is no link in socialLinks or if ${key.png} exists.
Implemented previewLink(button), matching inputValue with a key in socialLinks if possible and handling the username.
Issue Ticket Number
Fixes #42
Type of change
Checklist: