admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix: Fixed LinkedIn links with unicode (#3953)

Browse Source 
* fix: Fixed LinkedIn links with unicode

* feat: Added checkUrlType and getDisplayValueByUrlType util functions
This commit is contained in:
Zoltán Völcsey
2024-02-20 14:22:26 +01:00
committed by GitHub
parent 36a6558289
commit 82e9f28383
7 changed files with 113 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
packages/twenty-front/src/modules/ui/field/display/components/LinkDisplay.tsx
View File

@ -7,6 +7,7 @@ import {
LinkType,
SocialLink,
} from '@/ui/navigation/link/components/SocialLink';
import { checkUrlType } from '~/utils/checkUrlType';
import { EllipsisDisplay } from './EllipsisDisplay';
@ -24,21 +25,6 @@ type LinkDisplayProps = {
value?: FieldLinkValue;
};
const checkUrlType = (url: string) => {
if (
/^(http|https):\/\/(?:www\.)?linkedin.com(\w+:{0,1}\w*@)?(\S+)(:([0-9])+)?(\/|\/([\w#!:.?+=&%@!\-/]))?/.test(
url,
)
) {
return LinkType.LinkedIn;
}
if (url.match(/^((http|https):\/\/)?(?:www\.)?twitter\.com\/(\w+)?/i)) {
return LinkType.Twitter;
}
return LinkType.Url;
};
export const LinkDisplay = ({ value }: LinkDisplayProps) => {
const handleClick = (event: MouseEvent<HTMLElement>) => {
event.stopPropagation();

16
packages/twenty-front/src/modules/ui/field/display/components/URLDisplay.tsx
View File

@ -6,6 +6,7 @@ import {
LinkType,
SocialLink,
} from '@/ui/navigation/link/components/SocialLink';
import { checkUrlType } from '~/utils/checkUrlType';
import { EllipsisDisplay } from './EllipsisDisplay';
@ -23,21 +24,6 @@ type URLDisplayProps = {
value: string | null;
};
const checkUrlType = (url: string) => {
if (
/^(http|https):\/\/(?:www\.)?linkedin.com(\w+:{0,1}\w*@)?(\S+)(:([0-9])+)?(\/|\/([\w#!:.?+=&%@!\-/]))?/.test(
url,
)
) {
return LinkType.LinkedIn;
}
if (url.match(/^((http|https):\/\/)?(?:www\.)?twitter\.com\/(\w+)?/i)) {
return LinkType.Twitter;
}
return LinkType.Url;
};
export const URLDisplay = ({ value }: URLDisplayProps) => {
const handleClick = (event: MouseEvent<HTMLElement>) => {
event.stopPropagation();

29
packages/twenty-front/src/modules/ui/navigation/link/components/SocialLink.tsx
View File

@ -1,6 +1,8 @@
import * as React from 'react';
import styled from '@emotion/styled';
import { getDisplayValueByUrlType } from '~/utils/getDisplayValueByUrlType';
import { RoundedLink } from './RoundedLink';
export enum LinkType {
@ -12,7 +14,7 @@ export enum LinkType {
type SocialLinkProps = {
href: string;
children?: React.ReactNode;
type?: LinkType;
type: LinkType;
onClick?: (event: React.MouseEvent<HTMLElement>) => void;
};
@ -32,29 +34,8 @@ export const SocialLink = ({
onClick,
type,
}: SocialLinkProps) => {
let displayValue = children;
if (type === 'linkedin') {
const matches = href.match(
/(?:https?:\/\/)?(?:www.)?linkedin.com\/(?:in|company)\/([-a-zA-Z0-9@:%_+.~#?&//=]*)/,
);
if (matches && matches[1]) {
displayValue = matches[1];
} else {
displayValue = 'LinkedIn';
}
}
if (type === 'twitter') {
const matches = href.match(
/(?:https?:\/\/)?(?:www.)?twitter.com\/([-a-zA-Z0-9@:%_+.~#?&//=]*)/,
);
if (matches && matches[1]) {
displayValue = `@${matches[1]}`;
} else {
displayValue = '@twitter';
}
}
const displayValue =
getDisplayValueByUrlType({ type: type, href: href }) ?? children;
return (
<StyledRawLink href={href} onClick={onClick}>