Chore/update regex (#1703)

* chore: update linkedin regex

* chore: update twitter and linkedin regex

src/layouts/Settings/SocialMediaSettings.tsx

@@ -16,18 +16,24 @@ import {
   TIKTOK_REGEX,
   TELEGRAM_REGEX,
   YOUTUBE_REGEX,
+  LINKEDIN_REGEX,
 } from "utils/validators"
 
 import { SiteSettings } from "types/settings"
 
 interface SocialMediaField {
   label: StringKeyOf<SiteSettings["socialMediaContent"]>
   placeholder: string
+  customLabel?: string
 }
 
 const SOCIAL_MEDIA_LABELS: SocialMediaField[] = [
   { label: "facebook", placeholder: "https://www.facebook.com/" },
-  { label: "twitter", placeholder: "https://www.twitter.com/" },
+  {
+    label: "twitter",
+    placeholder: "https://www.twitter.com/",
+    customLabel: "X / Twitter",
+  },
   { label: "youtube", placeholder: "https://www.youtube.com/" },
   { label: "instagram", placeholder: "https://www.instagram.com/" },
   { label: "linkedin", placeholder: "https://sg.linkedin.com/" },
@@ -46,8 +52,9 @@ export const SocialMediaSettings = ({
     <Section id="social-media-fields">
       <SectionHeader label="Social Media" />
       <VStack spacing="1.5rem" align="flex-start" w="50%">
-        {SOCIAL_MEDIA_LABELS.map(({ label, placeholder }) => (
+        {SOCIAL_MEDIA_LABELS.map(({ label, placeholder, customLabel }) => (
           <ValidatedFormInput
+            customLabel={customLabel}
             label={label}
             isError={isError}
             placeholder={placeholder}
@@ -63,11 +70,12 @@ interface ValidatedFormInputProps extends SocialMediaField {
 
 // Helper component for social media as this is the only validated input
 const ValidatedFormInput = ({
+  customLabel,
   label,
   placeholder,
   isError,
 }: ValidatedFormInputProps) => {
-  const displayedLabel = upperFirst(label)
+  const displayedLabel = upperFirst(customLabel || label)
   const { register } = useFormContext()
   const { errors } = useFormState<{
     socialMediaContent: Record<
@@ -107,6 +115,10 @@ const getRegExp = (
       return RegExp(`${URL_REGEX_PREFIX}${TELEGRAM_REGEX}`)
     case "tiktok":
       return RegExp(`${URL_REGEX_PREFIX}${label}${TIKTOK_REGEX}`)
+    case "linkedin":
+      return RegExp(`${URL_REGEX_PREFIX}${label}${LINKEDIN_REGEX}`)
+    case "twitter":
+      return RegExp(`${URL_REGEX_PREFIX}(x|twitter)${URL_REGEX_SUFFIX}`)
     default:
       return RegExp(`${URL_REGEX_PREFIX}${label}${URL_REGEX_SUFFIX}`)
   }

src/utils/validators.js

@@ -18,6 +18,8 @@ export const URL_REGEX_SUFFIX = ".com/)([a-zA-Z0-9_-]+([/.])?)+$"
 export const YOUTUBE_REGEX = ".com/(@)?)([a-zA-Z0-9_-]+([/.])?)+$"
 export const TELEGRAM_REGEX = "telegram|t).me/([a-zA-Z0-9_-]+([/.])?)+$"
 export const TIKTOK_REGEX = ".com/@)([a-zA-Z0-9_-]+([/.])?)+$"
+// Linkedin doesn't seem to restrict special characters
+export const LINKEDIN_REGEX = ".com/).+$"
 // Domain name regex (source: https://regexr.com/3au3g and https://stackoverflow.com/a/30007882)
 // 1. The first group (up till the "+") matches each segment of the domain (split by ".")
 //    a. Each segment of the domain must start and end with an alphanumeric character