Source url validation issue

src/common/utils/index.tsx

@@ -4,8 +4,8 @@ export function truncateAddress(address = "", width = 10): string {
   }
   return `${address.slice(0, width)}...${address.slice(-width)}`;
 }
-export function validURL(str: string) {
-  var pattern = new RegExp(
+export function validURL(str: string) {  
+  const pattern = new RegExp(
     "^(https?:\\/\\/)?" + // protocol
       "((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|" + // domain name
       "((\\d{1,3}\\.){3}\\d{1,3}))" + // OR ip (v4) address
@@ -14,7 +14,15 @@ export function validURL(str: string) {
       "(\\#[-a-z\\d_]*)?$",
     "i"
   ); // fragment locator
-  return !!pattern.test(str);
+
+  const listOfUrl = str.split('https://').filter(x => x.length>0)
+  const validUrl = listOfUrl.every(url => {
+    if (!!pattern.test(`https://${url}`)) {
+      return true
+    }
+    return false
+  });
+  return validURL;
 }
 export const filterUniqueObjects = (objectArray: any[], key: string) => {
   const tempArray = [];

src/components/AddBlockTypeModal/LinkSourceModal/index.tsx

@@ -19,7 +19,8 @@ interface ILinkSource {
 }
 
 export const LinkSourceModal: FC<ILinkSource> = ({
-  sources,onSave
+  sources,
+  onSave,
 }) => {
   const AnimatedBox = a(Box);
   const [linkStyle, api] = useSpring(() => {
@@ -35,30 +36,29 @@ export const LinkSourceModal: FC<ILinkSource> = ({
 
   const onHandleSave = () => {
     if (
+      sources.length >= 0 &&
       validURL(inputRef.current.value) &&
-      sources.length === 0
+      !sources.includes(inputRef.current.value)
     ) {
       sources.push(inputRef.current.value)
       setError(false);
       inputRef.current.value = ""
       onSave([...sources])
       close();
-    } else if (
-      validURL(inputRef.current.value) &&
-      sources.length > 0
-    ) {
-      sources[0] = inputRef.current.value
-      setError(false)
-      inputRef.current.value = ""
-      onSave([...sources])
-      close() 
     } else {
       setError(true);
     }
   }
+
   const onHandleCancel = () => {
     inputRef.current.value = ""
     close();
+    setError(false);
+  }
+
+  const onHandleDeleteSource = (name: string) => {
+    sources = sources.filter( x => x !== name)
+    onSave([...sources])
   }
 
   return (
@@ -81,6 +81,12 @@ export const LinkSourceModal: FC<ILinkSource> = ({
                           {s}
                         </span>
                       </Tooltip>
+                      <Button
+                        sx={styles.URLDeleteButton}
+                        onClick={() => onHandleDeleteSource(s)}
+                      >
+                        x
+                      </Button>
                     </Box>
                   ))}
                 </>

src/components/AddBlockTypeModal/LinkSourceModal/styles.tsx

@@ -68,3 +68,15 @@ export const URLCancelButton = {
   color: "red",
   fontWeigth: "400"
 }
+
+export const URLDeleteButton = {
+  color: "red",
+  width: "10px !important",
+  height: "10px !important",
+  fontWeight: "400",
+  fontSize: "12px",
+  padding: "0px !important",
+  ml: "5px",
+  minWidth: "10px",
+  minHeight: "10px"
+}

src/components/AddBlockTypeModal/index.tsx

@@ -210,8 +210,8 @@ export const AddBlockTypeModal: FC<IAddBlockTypeModal> = ({
   }, [isOpen]);
 
   useEffect(() => {
-    if (nodeData?.sources && nodeData?.sources.length > 0) {
-      setSources([nodeData.sources?.[0]?.source || '']);
+    if (nodeData?.sources && (nodeData?.sources.length > 0)) {
+      setSources(nodeData?.sources?.map(x=> x.source));
     } else {
       setSources([]);
     }