From 5b133c76939f524c17ea244574dfe46a701373da Mon Sep 17 00:00:00 2001 From: Jose Zena Zamora Date: Tue, 2 Aug 2022 10:10:46 -0500 Subject: [PATCH 1/4] feat: fixing source url validation issue --- src/common/utils/index.tsx | 14 +++++++++++--- .../AddBlockTypeModal/LinkSourceModal/index.tsx | 3 +-- 2 files changed, 12 insertions(+), 5 deletions(-) diff --git a/src/common/utils/index.tsx b/src/common/utils/index.tsx index eaafea5..da4fcf0 100644 --- a/src/common/utils/index.tsx +++ b/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 = []; diff --git a/src/components/AddBlockTypeModal/LinkSourceModal/index.tsx b/src/components/AddBlockTypeModal/LinkSourceModal/index.tsx index 68c620b..b626556 100644 --- a/src/components/AddBlockTypeModal/LinkSourceModal/index.tsx +++ b/src/components/AddBlockTypeModal/LinkSourceModal/index.tsx @@ -35,8 +35,7 @@ export const LinkSourceModal: FC = ({ const onHandleSave = () => { if ( - validURL(inputRef.current.value) && - sources.length === 0 + sources.length === 0 && validURL(inputRef.current.value) ) { sources.push(inputRef.current.value) setError(false); From 91b0c7ddb81f661231c25f1ba9049abadffab320 Mon Sep 17 00:00:00 2001 From: Jose Zena Zamora Date: Tue, 2 Aug 2022 16:47:57 -0500 Subject: [PATCH 2/4] source multiple and validation working --- .../LinkSourceModal/index.tsx | 38 +++++++++++++------ .../LinkSourceModal/styles.tsx | 12 ++++++ src/components/AddBlockTypeModal/index.tsx | 5 ++- 3 files changed, 42 insertions(+), 13 deletions(-) diff --git a/src/components/AddBlockTypeModal/LinkSourceModal/index.tsx b/src/components/AddBlockTypeModal/LinkSourceModal/index.tsx index b626556..c2f6219 100644 --- a/src/components/AddBlockTypeModal/LinkSourceModal/index.tsx +++ b/src/components/AddBlockTypeModal/LinkSourceModal/index.tsx @@ -1,4 +1,4 @@ -import { FC, useRef, useState } from "react"; +import { FC, useEffect, useRef, useState } from "react"; import { validURL } from "@/common/utils"; import { subText } from "@/theme"; import { @@ -19,7 +19,8 @@ interface ILinkSource { } export const LinkSourceModal: FC = ({ - sources,onSave + sources, + onSave, }) => { const AnimatedBox = a(Box); const [linkStyle, api] = useSpring(() => { @@ -29,37 +30,44 @@ export const LinkSourceModal: FC = ({ const [error, setError] = useState(false); const inputRef = useRef(null); const [isOpen, setIsOpen] = useState(false); + // const [sources, setSources] = useState([]) const open = () => setIsOpen(!isOpen); const close = () => setIsOpen(false); + + const onHandleSave = () => { if ( - sources.length === 0 && validURL(inputRef.current.value) + sources.length >= 0 && + validURL(inputRef.current.value) && + !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); } } + + console.log('sources(LinkModal)', sources); + const onHandleCancel = () => { inputRef.current.value = "" close(); } + const onHandleDeleteSource = (name: string) => { + + sources = sources.filter( x => x !== name) + onSave([...sources]) + + console.log('filter:', sources.filter( x => x !== name)); + } + return ( @@ -80,6 +88,12 @@ export const LinkSourceModal: FC = ({ {s} + ))} diff --git a/src/components/AddBlockTypeModal/LinkSourceModal/styles.tsx b/src/components/AddBlockTypeModal/LinkSourceModal/styles.tsx index 5071f7c..1265717 100644 --- a/src/components/AddBlockTypeModal/LinkSourceModal/styles.tsx +++ b/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" +} diff --git a/src/components/AddBlockTypeModal/index.tsx b/src/components/AddBlockTypeModal/index.tsx index 15316b6..8b59b08 100644 --- a/src/components/AddBlockTypeModal/index.tsx +++ b/src/components/AddBlockTypeModal/index.tsx @@ -135,7 +135,7 @@ export const AddBlockTypeModal: FC = ({ useEffect(() => { if (nodeData?.sources && (nodeData?.sources.length > 0)) { - setSources([nodeData.sources?.[0]?.source || '']); + setSources(nodeData?.sources?.map(x=> x.source)); } else { setSources([]) } @@ -703,6 +703,9 @@ export const AddBlockTypeModal: FC = ({ setSources([...sources]) } + console.log('sources:', nodeData?.sources) + console.log('entity:', nodeData?.entities) + return ( <> Date: Tue, 2 Aug 2022 16:54:23 -0500 Subject: [PATCH 3/4] source multiple and validation fixed --- .../AddBlockTypeModal/LinkSourceModal/index.tsx | 9 +-------- src/components/AddBlockTypeModal/index.tsx | 3 --- 2 files changed, 1 insertion(+), 11 deletions(-) diff --git a/src/components/AddBlockTypeModal/LinkSourceModal/index.tsx b/src/components/AddBlockTypeModal/LinkSourceModal/index.tsx index c2f6219..4f5e097 100644 --- a/src/components/AddBlockTypeModal/LinkSourceModal/index.tsx +++ b/src/components/AddBlockTypeModal/LinkSourceModal/index.tsx @@ -30,13 +30,10 @@ export const LinkSourceModal: FC = ({ const [error, setError] = useState(false); const inputRef = useRef(null); const [isOpen, setIsOpen] = useState(false); - // const [sources, setSources] = useState([]) const open = () => setIsOpen(!isOpen); const close = () => setIsOpen(false); - - const onHandleSave = () => { if ( sources.length >= 0 && @@ -53,19 +50,15 @@ export const LinkSourceModal: FC = ({ } } - console.log('sources(LinkModal)', sources); - const onHandleCancel = () => { inputRef.current.value = "" close(); + setError(false); } const onHandleDeleteSource = (name: string) => { - sources = sources.filter( x => x !== name) onSave([...sources]) - - console.log('filter:', sources.filter( x => x !== name)); } return ( diff --git a/src/components/AddBlockTypeModal/index.tsx b/src/components/AddBlockTypeModal/index.tsx index 8b59b08..3966d9d 100644 --- a/src/components/AddBlockTypeModal/index.tsx +++ b/src/components/AddBlockTypeModal/index.tsx @@ -703,9 +703,6 @@ export const AddBlockTypeModal: FC = ({ setSources([...sources]) } - console.log('sources:', nodeData?.sources) - console.log('entity:', nodeData?.entities) - return ( <> Date: Tue, 2 Aug 2022 16:58:36 -0500 Subject: [PATCH 4/4] update in imports --- src/components/AddBlockTypeModal/LinkSourceModal/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/AddBlockTypeModal/LinkSourceModal/index.tsx b/src/components/AddBlockTypeModal/LinkSourceModal/index.tsx index 4f5e097..8f45234 100644 --- a/src/components/AddBlockTypeModal/LinkSourceModal/index.tsx +++ b/src/components/AddBlockTypeModal/LinkSourceModal/index.tsx @@ -1,4 +1,4 @@ -import { FC, useEffect, useRef, useState } from "react"; +import { FC, useRef, useState } from "react"; import { validURL } from "@/common/utils"; import { subText } from "@/theme"; import {