fix edit form validation (#1797)

* fix edit form validation

* more validation edit form

src/@utils/yup.ts

@@ -2,24 +2,37 @@ import { isCID } from '@utils/ipfs'
 import isUrl from 'is-url-superb'
 import * as Yup from 'yup'
 
-export function testLinks() {
+export function testLinks(isEdit?: boolean) {
   return Yup.string().test((value, context) => {
     const { type } = context.parent
     let validField
     let errorMessage
 
     switch (type) {
+      // we allow submit if the type input is hidden as will be ignore
+      case 'hidden':
+        validField = true
+        break
       case 'url':
         validField = isUrl(value?.toString() || '')
+        // if we're in publish, the field must be valid
         if (!validField) {
+          validField = false
           errorMessage = 'Must be a valid url.'
-        } else {
+        }
+        // we allow submit if we're in the edit page and the field is empty
+        if (
+          (!value?.toString() && isEdit) ||
+          (!value?.toString() && context.path === 'services[0].links[0].url')
+        ) {
+          validField = true
+        }
+        // if the url has google drive, we need to block the user from submit
         if (value?.toString().includes('drive.google')) {
           validField = false
           errorMessage =
             'Google Drive is not a supported hosting service. Please use an alternative.'
         }
-        }
         break
       case 'ipfs':
         validField = isCID(value?.toString())

src/components/@shared/atoms/TabsFile/index.module.css

@@ -25,6 +25,10 @@
   border: 0;
 }
 
+.tabHidden {
+  display: none !important;
+}
+
 .tab,
 .tab label {
   cursor: pointer;
@@ -61,7 +65,7 @@
   border-top: 0;
 }
 
-.tabLabel{
+.tabLabel {
   color: var(--font-color-text);
   font-size: var(--font-size-small);
   font-family: var(--font-family-heading);

src/components/@shared/atoms/TabsFile/index.tsx

@@ -55,11 +55,11 @@ export default function TabsFile({
       <div className={styles.tabListContainer}>
         <TabList className={styles.tabList}>
           {items.map((item, index) => {
-            if (isHidden) return null
-
             return (
               <Tab
-                className={styles.tab}
+                className={`${styles.tab} ${
+                  isHidden ? styles.tabHidden : null
+                }`}
                 key={`tab_${items[tabIndex].props.name}_${index}`}
                 onClick={
                   handleTabChange ? () => handleTabChange(item.title) : null

src/components/Asset/Edit/FormEditMetadata.tsx

@@ -47,12 +47,14 @@ export default function FormEditMetadata({
 
   useEffect(() => {
     // let's initiate files with empty url (we can't access the asset url) with type hidden (for UI frontend)
+    setTimeout(() => {
       setFieldValue('files', [
         {
           url: '',
           type: 'hidden'
         }
       ])
+    }, 500)
 
     const providerUrl = values?.services
       ? values?.services[0].providerUrl.url

src/components/Asset/Edit/_validation.ts

@@ -12,13 +12,11 @@ export const validationSchema = Yup.object().shape({
   files: Yup.array<FileInfo[]>()
     .of(
       Yup.object().shape({
-        url: testLinks(),
+        url: testLinks(true),
         valid: Yup.boolean().test((value, context) => {
           const { type } = context.parent
-
           // allow user to submit if the value type is hidden
           if (type === 'hidden') return true
-
           return value || false
         })
       })
@@ -26,14 +24,12 @@ export const validationSchema = Yup.object().shape({
     .nullable(),
   links: Yup.array<FileInfo[]>().of(
     Yup.object().shape({
-      url: testLinks(),
+      url: testLinks(true),
       valid: Yup.boolean().test((value, context) => {
         // allow user to submit if the value is null
         const { valid, url } = context.parent
-
         // allow user to continue if the url is empty
         if (!url) return true
-
         return valid
       })
     })

src/components/Search/index.tsx

@@ -79,8 +79,6 @@ export default function SearchPage({
     fetchAssets(parsed, chainIds)
   }, [parsed, chainIds, newCancelToken, fetchAssets])
 
-  console.log(queryResult?.results)
-
   return (
     <>
       <div className={styles.search}>