From e2089d56521eb9fdd46197e9c4aef09ff6b7cf35 Mon Sep 17 00:00:00 2001
From: Alexander Lee <alexander@open.gov.sg>
Date: Tue, 28 Nov 2023 10:24:53 +0800
Subject: [PATCH] Chore/update regex (#1703)

* chore: update linkedin regex

* chore: update twitter and linkedin regex
---
 src/layouts/Settings/SocialMediaSettings.tsx | 18 +++++++++++++++---
 src/utils/validators.js                      |  2 ++
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/src/layouts/Settings/SocialMediaSettings.tsx b/src/layouts/Settings/SocialMediaSettings.tsx
index 6d10da086..057195fc1 100644
--- a/src/layouts/Settings/SocialMediaSettings.tsx
+++ b/src/layouts/Settings/SocialMediaSettings.tsx
@@ -16,6 +16,7 @@ import {
   TIKTOK_REGEX,
   TELEGRAM_REGEX,
   YOUTUBE_REGEX,
+  LINKEDIN_REGEX,
 } from "utils/validators"
 
 import { SiteSettings } from "types/settings"
@@ -23,11 +24,16 @@ 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}`)
   }
diff --git a/src/utils/validators.js b/src/utils/validators.js
index d0f6b1c09..b3b64d7fb 100644
--- a/src/utils/validators.js
+++ b/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