Merge pull request #4843 from Giveth/show-social-media-handle

Show social media handle

next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.

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) => {
 						<IconComponent
 							color={
 								socialMediaColor[
-									item.name.toLocaleLowerCase() || 'website'
+									item?.name.toLocaleLowerCase() || 'website'
 								]
 							}
 						/>
@@ -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,
+						)}
 					</B>
 				</Flex>
 			</SocialItemContainer>

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;
+}