No error shown for invalid file url (#1221)

* check file url

* logic fix

* display error message

* use x mark sign

* change border and background color for wrong input

* invalid input red border

* make error visible only for touched field

Co-authored-by: ClaudiaHolhos <claudia@oceanprotocol.com>

src/components/@shared/FormFields/FilesInput/Info.module.css

@@ -6,6 +6,11 @@
   position: relative;
 }
 
+.hasError {
+  border-color: var(--brand-alert-red);
+  background-color: var(--brand-white);
+}
+
 .url {
   margin: 0;
   font-size: var(--font-size-base);
@@ -42,3 +47,7 @@
 .info li.success {
   color: var(--brand-alert-green);
 }
+
+.info li.error {
+  color: var(--brand-alert-red);
+}

src/components/@shared/FormFields/FilesInput/Info.tsx

@@ -11,7 +11,7 @@ export default function FileInfo({
   file: FileMetadata
   handleClose(): void
 }): ReactElement {
-  return (
+  return file.valid ? (
     <div className={styles.info}>
       <h3 className={styles.url}>{file.url}</h3>
       <ul>
@@ -23,5 +23,20 @@ export default function FileInfo({
         &times;
       </button>
     </div>
+  ) : (
+    <div className={`${styles.info} ${!file.valid ? styles.hasError : ''}`}>
+      <h3 className={styles.url}>{file.url}</h3>
+      <ul>
+        <li className={styles.error}>
+          {' '}
+          ✗ No valid file detected. Check your URL and try again.
+        </li>
+        {file.contentLength && <li>{prettySize(+file.contentLength)}</li>}
+        {file.contentType && <li>{cleanupContentType(file.contentType)}</li>}
+      </ul>
+      <button className={styles.removeButton} onClick={handleClose}>
+        &times;
+      </button>
+    </div>
   )
 }

src/components/@shared/FormFields/FilesInput/index.tsx

@@ -10,6 +10,7 @@ import { FormPublishData } from 'src/components/Publish/_types'
 
 export default function FilesInput(props: InputProps): ReactElement {
   const [field, meta, helpers] = useField(props.name)
+  const [isInvalidUrl, setIsInvalidUrl] = useState(false)
   const [isLoading, setIsLoading] = useState(false)
   const { values } = useFormikContext<FormPublishData>()
 
@@ -23,6 +24,7 @@ export default function FilesInput(props: InputProps): ReactElement {
         try {
           setIsLoading(true)
           const checkedFile = await getFileUrlInfo(url, providerUri)
+          setIsInvalidUrl(!checkedFile[0].valid)
           checkedFile && helpers.setValue([{ url, ...checkedFile[0] }])
         } catch (error) {
           toast.error(
@@ -63,16 +65,14 @@ export default function FilesInput(props: InputProps): ReactElement {
 
   return (
     <>
-      {field?.value?.length &&
+      {field.value[0].valid !== undefined ? (
-      field.value[0].url !== '' &&
-      field.value[0].valid ? (
         <FileInfo file={field.value[0]} handleClose={handleClose} />
       ) : (
         <UrlInput
           submitText="Validate"
           {...props}
           name={`${field.name}[0].url`}
-          hasError={Boolean(meta.touched && meta.error)}
+          hasError={Boolean(meta.touched && isInvalidUrl)}
           isLoading={isLoading}
           handleButtonClick={handleButtonClick}
         />

src/components/@shared/FormFields/URLInput/index.tsx

@@ -41,7 +41,9 @@ export default function URLInput({
       <InputGroup>
         <InputElement
           className={`${styles.input} ${
-            !isLoading && hasError ? styles.hasError : ''
+            !isLoading && meta.error !== undefined && meta.touched
+              ? styles.hasError
+              : ''
           }`}
           {...props}
           {...field}