From 16254fd59b057b18b54aa322e4c9075975fe6016 Mon Sep 17 00:00:00 2001
From: Dimo Dzhurenov <dimitar@infinitex.tech>
Date: Thu, 15 Apr 2021 14:35:29 +0300
Subject: [PATCH] update the file info UI after URL re-add

---
 .vscode/launch.json                           | 15 +++++++++
 .../molecules/FormFields/FilesInput/index.tsx | 32 ++++++++++++-------
 2 files changed, 36 insertions(+), 11 deletions(-)
 create mode 100644 .vscode/launch.json

diff --git a/.vscode/launch.json b/.vscode/launch.json
new file mode 100644
index 000000000..c319bb15e
--- /dev/null
+++ b/.vscode/launch.json
@@ -0,0 +1,15 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "pwa-chrome",
+      "request": "launch",
+      "name": "Launch Chrome against localhost",
+      "url": "http://localhost:8000",
+      "webRoot": "${workspaceFolder}"
+    }
+  ]
+}
diff --git a/src/components/molecules/FormFields/FilesInput/index.tsx b/src/components/molecules/FormFields/FilesInput/index.tsx
index b99d2a40b..f779b76c5 100644
--- a/src/components/molecules/FormFields/FilesInput/index.tsx
+++ b/src/components/molecules/FormFields/FilesInput/index.tsx
@@ -15,6 +15,26 @@ export default function FilesInput(props: InputProps): ReactElement {
   const { config } = useOcean()
 
   useEffect(() => {
+    loadFileInfo()
+  }, [fileUrl, config.providerUri])
+
+  async function handleButtonClick(e: React.SyntheticEvent, url: string) {
+    // hack so the onBlur-triggered validation does not show,
+    // like when this field is required
+    helpers.setTouched(false)
+
+    // File example 'https://oceanprotocol.com/tech-whitepaper.pdf'
+    e.preventDefault()
+
+    // In the case when the user re-add the same URL after it was removed (by accident or intentionally)
+    if (fileUrl === url) {
+      loadFileInfo()
+    }
+
+    setFileUrl(url)
+  }
+
+  function loadFileInfo() {
     const source = axios.CancelToken.source()
 
     async function validateUrl() {
@@ -33,22 +53,12 @@ export default function FilesInput(props: InputProps): ReactElement {
         setIsLoading(false)
       }
     }
+
     fileUrl && validateUrl()
 
     return () => {
       source.cancel()
     }
-  }, [fileUrl, config.providerUri])
-
-  async function handleButtonClick(e: React.SyntheticEvent, url: string) {
-    // hack so the onBlur-triggered validation does not show,
-    // like when this field is required
-    helpers.setTouched(false)
-
-    // File example 'https://oceanprotocol.com/tech-whitepaper.pdf'
-    e.preventDefault()
-
-    setFileUrl(url)
   }
 
   return (