From a0806de8c40ccf8221fa1c9d8132c1b49acffd66 Mon Sep 17 00:00:00 2001 From: Cherik Date: Wed, 16 Oct 2024 18:16:09 +0330 Subject: [PATCH] add getSocialMediaHandle --- .../views/project/ProjectSocialItem.tsx | 35 ++---- src/helpers/url.tsx | 108 ++++++++++++++++++ 2 files changed, 115 insertions(+), 28 deletions(-) diff --git a/src/components/views/project/ProjectSocialItem.tsx b/src/components/views/project/ProjectSocialItem.tsx index 685c147815..6de3de69f1 100644 --- a/src/components/views/project/ProjectSocialItem.tsx +++ b/src/components/views/project/ProjectSocialItem.tsx @@ -4,6 +4,7 @@ import { B, Flex, neutralColors } from '@giveth/ui-design-system'; import { IProjectSocialMedia } from '@/apollo/types/types'; import { Shadow } from '@/components/styled-components/Shadow'; import { socialMediasArray } from '../create/SocialMediaBox/SocialMedias'; +import { ensureHttps, getSocialMediaHandle } from '@/helpers/url'; interface IProjectSocialMediaItem { socialMedia: IProjectSocialMedia; @@ -22,32 +23,6 @@ const socialMediaColor: { [key: string]: string } = { github: '#1D1E1F', }; -const removeHttpsAndWwwFromUrl = (socialMediaUrl: string) => { - return socialMediaUrl.replace('https://', '').replace('www.', ''); -}; - -/** - * Ensures that a given URL uses the https:// protocol. - * If the URL starts with http://, it will be replaced with https://. - * If the URL does not start with any protocol, https:// will be added. - * If the URL already starts with https://, it will remain unchanged. - * - * @param {string} url - The URL to be checked and possibly modified. - * @returns {string} - The modified URL with https://. - */ -function ensureHttps(url: string): string { - if (!url.startsWith('https://')) { - if (url.startsWith('http://')) { - // Replace http:// with https:// - url = url.replace('http://', 'https://'); - } else { - // Add https:// if no protocol is present - url = 'https://' + url; - } - } - return url; -} - const ProjectSocialItem = ({ socialMedia }: IProjectSocialMediaItem) => { const item = socialMediasArray.find(item => { return item.type.toLocaleLowerCase() === socialMedia.type.toLowerCase(); @@ -63,7 +38,7 @@ const ProjectSocialItem = ({ socialMedia }: IProjectSocialMediaItem) => { @@ -76,7 +51,11 @@ const ProjectSocialItem = ({ socialMedia }: IProjectSocialMediaItem) => { ], }} > - {removeHttpsAndWwwFromUrl(socialMedia.link)} + {/* Use the updated function to show a cleaner link or username */} + {getSocialMediaHandle( + socialMedia.link, + socialMedia.type, + )} diff --git a/src/helpers/url.tsx b/src/helpers/url.tsx index 2185e90b39..4fc2092f9d 100644 --- a/src/helpers/url.tsx +++ b/src/helpers/url.tsx @@ -140,3 +140,111 @@ export function removeQueryParamAndRedirect( export const convertIPFSToHTTPS = (url: string) => { return url.replace('ipfs://', 'https://ipfs.io/ipfs/'); }; + +export const getSocialMediaHandle = ( + socialMediaUrl: string, + socialMediaType: string, +) => { + let cleanedUrl = socialMediaUrl + .replace(/^https?:\/\//, '') + .replace('www.', ''); + + // Remove trailing slash if present + if (cleanedUrl.endsWith('/')) { + cleanedUrl = cleanedUrl.slice(0, -1); + } + + // Match against different social media types using custom regex + const lowerCaseType = socialMediaType.toLowerCase(); + + switch (lowerCaseType) { + case 'github': + return extractUsernameFromPattern( + cleanedUrl, + /github\.com\/([^\/]+)/, + ); + case 'x': // Former Twitter + return extractUsernameFromPattern(cleanedUrl, /x\.com\/([^\/]+)/); + case 'facebook': + return extractUsernameFromPattern( + cleanedUrl, + /facebook\.com\/([^\/]+)/, + ); + case 'instagram': + return extractUsernameFromPattern( + cleanedUrl, + /instagram\.com\/([^\/]+)/, + ); + case 'linkedin': + return extractUsernameFromPattern( + cleanedUrl, + /linkedin\.com\/(?:in|company)\/([^\/]+)/, + ); + case 'youtube': + return extractUsernameFromPattern( + cleanedUrl, + /youtube\.com\/channel\/([^\/]+)/, + ); + case 'reddit': + return extractUsernameFromPattern( + cleanedUrl, + /reddit\.com\/r\/([^\/]+)/, + ); + case 'telegram': + return extractUsernameFromPattern(cleanedUrl, /t\.me\/([^\/]+)/); + case 'discord': + return extractUsernameFromPattern( + cleanedUrl, + /discord\.gg\/([^\/]+)/, + ); + case 'farcaster': + // Assuming Farcaster uses a pattern like 'farcaster.xyz/username' + return extractUsernameFromPattern( + cleanedUrl, + /farcaster\.xyz\/([^\/]+)/, + ); + case 'lens': + // Assuming Lens uses a pattern like 'lens.xyz/username' + return extractUsernameFromPattern( + cleanedUrl, + /lens\.xyz\/([^\/]+)/, + ); + case 'website': + default: + return cleanedUrl; // Return cleaned URL for generic websites or unsupported social media + } +}; + +// Function to extract username from URL based on the regex pattern +export const extractUsernameFromPattern = ( + url: string, + regex: RegExp, +): string => { + const match = url.match(regex); + if (match && match[1]) { + return `@${match[1]}`; // Return '@username' + } + return url; // Fallback to original URL if no match is found +}; + +/** + * Ensures that a given URL uses the https:// protocol. + * If the URL starts with http://, it will be replaced with https://. + * If the URL does not start with any protocol, https:// will be added. + * If the URL already starts with https://, it will remain unchanged. + * + * @param {string} url - The URL to be checked and possibly modified. + * @returns {string} - The modified URL with https://. + */ +export function ensureHttps(url: string): string { + if (!url.startsWith('https://')) { + if (url.startsWith('http://')) { + // Replace http:// with https:// + url = url.replace('http://', 'https://'); + } else { + // Add https:// if no protocol is present + url = 'https://' + url; + } + } + return url; +}