From 36d8b664b05d223346c0844f6b44781728c88ef6 Mon Sep 17 00:00:00 2001
From: Filip-L <67787091+Filip-L@users.noreply.github.com>
Date: Mon, 16 Dec 2024 19:29:55 +0100
Subject: [PATCH] [Fil-480] Add validation to add storage providers input
 (#166)

* Add validation to add storage provider input
---------

Co-authored-by: Filip Lelek <filip.lelek@neti-soft.com>
---
 .../cards/dialogs/allowedSps/AllowedSps.tsx   | 41 +++++++++++++++++--
 1 file changed, 37 insertions(+), 4 deletions(-)

diff --git a/src/components/cards/dialogs/allowedSps/AllowedSps.tsx b/src/components/cards/dialogs/allowedSps/AllowedSps.tsx
index ad40f71..9d1ead3 100644
--- a/src/components/cards/dialogs/allowedSps/AllowedSps.tsx
+++ b/src/components/cards/dialogs/allowedSps/AllowedSps.tsx
@@ -50,6 +50,8 @@ export const AllowedSPs: React.FC<ComponentProps> = ({
   const [maxDeviation, setMaxDeviation] = useState<string>(initDeviation ?? '')
   const [data, setData] = useState<string[]>([''])
   const [initData, setInitData] = useState<string[]>([''])
+  const [errors, setErrors] = useState([''])
+  const [debounceTimer, setDebounceTimer] = useState<number>(0)
 
   const { getClientSPs, getClientConfig } = useWallet()
 
@@ -83,14 +85,39 @@ export const AllowedSPs: React.FC<ComponentProps> = ({
     })
   }
 
+  const isValidInput = (input: string): boolean => {
+    const regex = /^(f0)?\d+$/
+    return regex.test(input)
+  }
+
   const handleInputChange = (index: number, value: string): void => {
     const newData = [...data]
+    const updatedErrors = [...errors]
     newData[index] = value
+    value = value.trim()
+    clearTimeout(debounceTimer)
+    const timer = window.setTimeout(() => {
+      value = value.trim()
+      if (!value) {
+        updatedErrors[index] = 'Value cannot be empty'
+        setErrors([...updatedErrors])
+        return
+      } else if (!isValidInput(value)) {
+        updatedErrors[index] = 'Invalid storage provider id'
+        setErrors([...updatedErrors])
+        return
+      }
+      updatedErrors[index] = ''
+      setErrors(updatedErrors)
+    }, 200)
 
     setData(newData)
     checkIsDirty(newData)
+    setDebounceTimer(timer)
   }
 
+  const hasErrors = errors.some((error) => error)
+
   const handleAddItem = (): void => {
     const newData = [...data, '']
 
@@ -99,7 +126,10 @@ export const AllowedSPs: React.FC<ComponentProps> = ({
   }
 
   const handleRemoveItem = (index: number): void => {
+    const updatedErrors = [...errors]
     const newData = data.filter((_, i) => i !== index)
+    updatedErrors.splice(index, 1)
+    setErrors(updatedErrors)
     setData(newData)
     checkIsDirty(newData)
   }
@@ -107,12 +137,13 @@ export const AllowedSPs: React.FC<ComponentProps> = ({
   const handleSubmit = async (): Promise<void> => {
     try {
       setApiCalling(true)
-      const added = data.filter(
-        (item) => !availableAllowedSPs?.includes(item),
+      const cleanedData = data.map((item) => item.replace('f0', ''))
+      const added = cleanedData.filter(
+        (item) => !availableAllowedSPs?.includes(item) && item.length,
       ) ?? ['']
 
       const removed: string[] = availableAllowedSPs?.filter(
-        (item) => !data.includes(item),
+        (item) => !cleanedData.includes(item),
       ) ?? ['']
 
       const afterAdd = [...(availableAllowedSPs ?? ['']), ...added]
@@ -216,6 +247,8 @@ export const AllowedSPs: React.FC<ComponentProps> = ({
                     handleInputChange(index, e.target.value)
                   }}
                   className="flex-1"
+                  error={!!errors[index]}
+                  helperText={errors[index]}
                 />
                 <IconButton
                   onClick={() => {
@@ -250,7 +283,7 @@ export const AllowedSPs: React.FC<ComponentProps> = ({
           </Button>
 
           <Button
-            disabled={isApiCalling || !isDirty}
+            disabled={isApiCalling || !isDirty || hasErrors}
             onClick={() => {
               void handleSubmit()
             }}