From aa8dcdaa79ece9bd64429052b646098a0fd7e1e9 Mon Sep 17 00:00:00 2001
From: EnzoVezzaro <enzo-vezzaro@live.it>
Date: Fri, 25 Nov 2022 12:41:17 -0400
Subject: [PATCH] fix edit form validation (#1797)

* fix edit form validation

* more validation edit form
---
 src/@utils/yup.ts                             | 27 ++++++++++++++-----
 .../@shared/atoms/TabsFile/index.module.css   | 16 ++++++-----
 .../@shared/atoms/TabsFile/index.tsx          |  6 ++---
 .../Asset/Edit/FormEditMetadata.tsx           | 14 +++++-----
 src/components/Asset/Edit/_validation.ts      |  8 ++----
 src/components/Search/index.tsx               |  2 --
 6 files changed, 43 insertions(+), 30 deletions(-)

diff --git a/src/@utils/yup.ts b/src/@utils/yup.ts
index 95d4fbcb5..1e0f7f994 100644
--- a/src/@utils/yup.ts
+++ b/src/@utils/yup.ts
@@ -2,23 +2,36 @@ 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 {
-          if (value?.toString().includes('drive.google')) {
-            validField = false
-            errorMessage =
-              'Google Drive is not a supported hosting service. Please use an alternative.'
-          }
+        }
+        // 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':
diff --git a/src/components/@shared/atoms/TabsFile/index.module.css b/src/components/@shared/atoms/TabsFile/index.module.css
index 0920eb964..8c2fa8a6d 100644
--- a/src/components/@shared/atoms/TabsFile/index.module.css
+++ b/src/components/@shared/atoms/TabsFile/index.module.css
@@ -25,6 +25,10 @@
   border: 0;
 }
 
+.tabHidden {
+  display: none !important;
+}
+
 .tab,
 .tab label {
   cursor: pointer;
@@ -61,13 +65,13 @@
   border-top: 0;
 }
 
-.tabLabel{
+.tabLabel {
   color: var(--font-color-text);
-    font-size: var(--font-size-small);
-    font-family: var(--font-family-heading);
-    line-height: 1.2;
-    display: block;
-    margin-bottom: calc(var(--spacer) / 2);
+  font-size: var(--font-size-small);
+  font-family: var(--font-family-heading);
+  line-height: 1.2;
+  display: block;
+  margin-bottom: calc(var(--spacer) / 2);
 }
 
 @media (min-width: 40rem) {
diff --git a/src/components/@shared/atoms/TabsFile/index.tsx b/src/components/@shared/atoms/TabsFile/index.tsx
index 3662d3b82..06642abb8 100644
--- a/src/components/@shared/atoms/TabsFile/index.tsx
+++ b/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
diff --git a/src/components/Asset/Edit/FormEditMetadata.tsx b/src/components/Asset/Edit/FormEditMetadata.tsx
index 943770df7..744f2fca9 100644
--- a/src/components/Asset/Edit/FormEditMetadata.tsx
+++ b/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)
-    setFieldValue('files', [
-      {
-        url: '',
-        type: 'hidden'
-      }
-    ])
+    setTimeout(() => {
+      setFieldValue('files', [
+        {
+          url: '',
+          type: 'hidden'
+        }
+      ])
+    }, 500)
 
     const providerUrl = values?.services
       ? values?.services[0].providerUrl.url
diff --git a/src/components/Asset/Edit/_validation.ts b/src/components/Asset/Edit/_validation.ts
index 43ac10358..1ec0b960b 100644
--- a/src/components/Asset/Edit/_validation.ts
+++ b/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
       })
     })
diff --git a/src/components/Search/index.tsx b/src/components/Search/index.tsx
index 65c3c8b32..7979e3a9a 100644
--- a/src/components/Search/index.tsx
+++ b/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}>