From 95199054f86d515a9ff240efa0fd6ea1a628afc2 Mon Sep 17 00:00:00 2001 From: EnzoVezzaro Date: Mon, 15 Aug 2022 09:02:54 -0400 Subject: [PATCH 1/5] adding links validation in edit form --- src/components/@shared/FormFields/FilesInput/index.tsx | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/components/@shared/FormFields/FilesInput/index.tsx b/src/components/@shared/FormFields/FilesInput/index.tsx index 527fb1f38..bc903c03c 100644 --- a/src/components/@shared/FormFields/FilesInput/index.tsx +++ b/src/components/@shared/FormFields/FilesInput/index.tsx @@ -1,4 +1,4 @@ -import React, { ReactElement, useState } from 'react' +import React, { ReactElement, useEffect, useState } from 'react' import { useField, useFormikContext } from 'formik' import FileInfo from './Info' import UrlInput from '../URLInput' @@ -16,7 +16,7 @@ export default function FilesInput(props: InputProps): ReactElement { async function handleValidation(e: React.SyntheticEvent, url: string) { // File example 'https://oceanprotocol.com/tech-whitepaper.pdf' - e.preventDefault() + e?.preventDefault() try { const providerUrl = values?.services @@ -47,6 +47,12 @@ export default function FilesInput(props: InputProps): ReactElement { helpers.setTouched(false) } + useEffect(() => { + if (field.name === 'links' && asset?.metadata?.links) { + handleValidation(null, asset.metadata.links[0]) + } + }, []) + return ( <> {field?.value?.[0]?.valid === true ? ( From 8587535a445288ecb354761a236cf32fa36e1010 Mon Sep 17 00:00:00 2001 From: EnzoVezzaro Date: Mon, 15 Aug 2022 09:28:26 -0400 Subject: [PATCH 2/5] adding placeholder file url in edit form --- .../FormFields/FilesInput/Info.module.css | 4 ++++ .../@shared/FormFields/FilesInput/Info.tsx | 10 ++++++--- .../@shared/FormFields/FilesInput/index.tsx | 21 +++++++++++++++++-- 3 files changed, 30 insertions(+), 5 deletions(-) diff --git a/src/components/@shared/FormFields/FilesInput/Info.module.css b/src/components/@shared/FormFields/FilesInput/Info.module.css index a9a95d6d8..990e0ceed 100644 --- a/src/components/@shared/FormFields/FilesInput/Info.module.css +++ b/src/components/@shared/FormFields/FilesInput/Info.module.css @@ -31,6 +31,10 @@ padding-right: calc(var(--spacer) / 2); } +.hideUrl { + filter: blur(0.2rem); +} + .warning { margin-top: calc(var(--spacer) / 3); margin-left: 0; diff --git a/src/components/@shared/FormFields/FilesInput/Info.tsx b/src/components/@shared/FormFields/FilesInput/Info.tsx index 2f1e8b782..d156ff3b1 100644 --- a/src/components/@shared/FormFields/FilesInput/Info.tsx +++ b/src/components/@shared/FormFields/FilesInput/Info.tsx @@ -6,18 +6,22 @@ import { FileInfo as FileInfoData } from '@oceanprotocol/lib' export default function FileInfo({ file, - handleClose + handleClose, + hideUrl }: { file: FileInfoData handleClose(): void + hideUrl?: boolean }): ReactElement { const contentTypeCleaned = file.contentType ? cleanupContentType(file.contentType) : null return ( -
-

{file.url}

+
+

+ {file.url} +

  • ✓ URL confirmed
    • {file.contentLength &&
  • {prettySize(+file.contentLength)}
    • } diff --git a/src/components/@shared/FormFields/FilesInput/index.tsx b/src/components/@shared/FormFields/FilesInput/index.tsx index bc903c03c..33710a9a4 100644 --- a/src/components/@shared/FormFields/FilesInput/index.tsx +++ b/src/components/@shared/FormFields/FilesInput/index.tsx @@ -3,7 +3,7 @@ import { useField, useFormikContext } from 'formik' import FileInfo from './Info' import UrlInput from '../URLInput' import { InputProps } from '@shared/FormInput' -import { getFileUrlInfo } from '@utils/provider' +import { getFileDidInfo, getFileUrlInfo } from '@utils/provider' import { FormPublishData } from 'src/components/Publish/_types' import { LoggerInstance } from '@oceanprotocol/lib' import { useAsset } from '@context/Asset' @@ -11,6 +11,7 @@ import { useAsset } from '@context/Asset' export default function FilesInput(props: InputProps): ReactElement { const [field, meta, helpers] = useField(props.name) const [isLoading, setIsLoading] = useState(false) + const [hideUrl, setHideUrl] = useState(false) const { values, setFieldError } = useFormikContext() const { asset } = useAsset() @@ -50,13 +51,29 @@ export default function FilesInput(props: InputProps): ReactElement { useEffect(() => { if (field.name === 'links' && asset?.metadata?.links) { handleValidation(null, asset.metadata.links[0]) + } else if (field.name === 'files' && asset?.metadata?.links) { + getFileDidInfo( + asset?.id, + asset?.services[0]?.id, + asset?.services[0]?.serviceEndpoint + ).then((fileDidInfo) => { + setHideUrl(true) + // setting placeholder for url file to avoid txs for the url file during initializing + helpers.setValue([ + { url: 'oceanprotocol.com/placeholder', ...fileDidInfo[0] } + ]) + }) } }, []) return ( <> {field?.value?.[0]?.valid === true ? ( - + ) : ( Date: Thu, 13 Oct 2022 09:30:45 -0400 Subject: [PATCH 3/5] fix submit button disabled --- .../@shared/FormFields/FilesInput/index.tsx | 11 ++++++++--- src/components/Asset/Edit/_constants.ts | 2 +- src/components/Asset/Edit/_validation.ts | 4 ++-- 3 files changed, 11 insertions(+), 6 deletions(-) diff --git a/src/components/@shared/FormFields/FilesInput/index.tsx b/src/components/@shared/FormFields/FilesInput/index.tsx index 33710a9a4..417dbe8bd 100644 --- a/src/components/@shared/FormFields/FilesInput/index.tsx +++ b/src/components/@shared/FormFields/FilesInput/index.tsx @@ -44,14 +44,14 @@ export default function FilesInput(props: InputProps): ReactElement { } function handleClose() { - helpers.setValue(meta.initialValue) helpers.setTouched(false) + helpers.setValue(meta.initialValue) } useEffect(() => { if (field.name === 'links' && asset?.metadata?.links) { handleValidation(null, asset.metadata.links[0]) - } else if (field.name === 'files' && asset?.metadata?.links) { + } else if (field.name === 'files') { getFileDidInfo( asset?.id, asset?.services[0]?.id, @@ -60,7 +60,12 @@ export default function FilesInput(props: InputProps): ReactElement { setHideUrl(true) // setting placeholder for url file to avoid txs for the url file during initializing helpers.setValue([ - { url: 'oceanprotocol.com/placeholder', ...fileDidInfo[0] } + { + url: fileDidInfo[0].valid + ? 'http://oceanprotocol.com/placeholder' + : '', + ...fileDidInfo[0] + } ]) }) } diff --git a/src/components/Asset/Edit/_constants.ts b/src/components/Asset/Edit/_constants.ts index aefafa657..3a1031d41 100644 --- a/src/components/Asset/Edit/_constants.ts +++ b/src/components/Asset/Edit/_constants.ts @@ -11,7 +11,7 @@ export function getInitialValues( name: metadata?.name, description: metadata?.description, price, - links: metadata?.links as any, + links: [{ url: '', type: '' }], files: [{ url: '', type: '' }], timeout: secondsToString(timeout), author: metadata?.author, diff --git a/src/components/Asset/Edit/_validation.ts b/src/components/Asset/Edit/_validation.ts index 52b9faf07..1bb405bcc 100644 --- a/src/components/Asset/Edit/_validation.ts +++ b/src/components/Asset/Edit/_validation.ts @@ -10,8 +10,8 @@ export const validationSchema = Yup.object().shape({ files: Yup.array() .of( Yup.object().shape({ - url: Yup.string().url('Must be a valid URL.'), - valid: Yup.boolean().isTrue() + url: Yup.string().url('Must be a valid URL.').required('Required'), + valid: Yup.boolean().isTrue().required('File must be valid.') }) ) .nullable(), From 52a69a1e37d0980fef7aeb13625e95d717806a41 Mon Sep 17 00:00:00 2001 From: EnzoVezzaro Date: Mon, 17 Oct 2022 09:41:39 -0400 Subject: [PATCH 4/5] refactor default values (files / links) edit form --- .../FormFields/FilesInput/Info.module.css | 1 + .../@shared/FormFields/FilesInput/Info.tsx | 8 ++-- .../@shared/FormFields/FilesInput/index.tsx | 37 +++---------------- .../Asset/Edit/FormEditMetadata.tsx | 37 +++++++++++++++++-- 4 files changed, 44 insertions(+), 39 deletions(-) diff --git a/src/components/@shared/FormFields/FilesInput/Info.module.css b/src/components/@shared/FormFields/FilesInput/Info.module.css index 990e0ceed..c8687873d 100644 --- a/src/components/@shared/FormFields/FilesInput/Info.module.css +++ b/src/components/@shared/FormFields/FilesInput/Info.module.css @@ -33,6 +33,7 @@ .hideUrl { filter: blur(0.2rem); + user-select: none; } .warning { diff --git a/src/components/@shared/FormFields/FilesInput/Info.tsx b/src/components/@shared/FormFields/FilesInput/Info.tsx index d156ff3b1..6f73d9b90 100644 --- a/src/components/@shared/FormFields/FilesInput/Info.tsx +++ b/src/components/@shared/FormFields/FilesInput/Info.tsx @@ -6,21 +6,21 @@ import { FileInfo as FileInfoData } from '@oceanprotocol/lib' export default function FileInfo({ file, - handleClose, - hideUrl + handleClose }: { file: FileInfoData handleClose(): void - hideUrl?: boolean }): ReactElement { const contentTypeCleaned = file.contentType ? cleanupContentType(file.contentType) : null + const hideUrl = file.type === 'hidden' || false + return (

    - {file.url} + {hideUrl ? 'https://oceanprotocol/placeholder' : file.url}

    • ✓ URL confirmed
      • diff --git a/src/components/@shared/FormFields/FilesInput/index.tsx b/src/components/@shared/FormFields/FilesInput/index.tsx index 417dbe8bd..8d69164e6 100644 --- a/src/components/@shared/FormFields/FilesInput/index.tsx +++ b/src/components/@shared/FormFields/FilesInput/index.tsx @@ -1,9 +1,9 @@ -import React, { ReactElement, useEffect, useState } from 'react' +import React, { ReactElement, useState } from 'react' import { useField, useFormikContext } from 'formik' import FileInfo from './Info' import UrlInput from '../URLInput' import { InputProps } from '@shared/FormInput' -import { getFileDidInfo, getFileUrlInfo } from '@utils/provider' +import { getFileUrlInfo } from '@utils/provider' import { FormPublishData } from 'src/components/Publish/_types' import { LoggerInstance } from '@oceanprotocol/lib' import { useAsset } from '@context/Asset' @@ -11,7 +11,6 @@ import { useAsset } from '@context/Asset' export default function FilesInput(props: InputProps): ReactElement { const [field, meta, helpers] = useField(props.name) const [isLoading, setIsLoading] = useState(false) - const [hideUrl, setHideUrl] = useState(false) const { values, setFieldError } = useFormikContext() const { asset } = useAsset() @@ -48,37 +47,11 @@ export default function FilesInput(props: InputProps): ReactElement { helpers.setValue(meta.initialValue) } - useEffect(() => { - if (field.name === 'links' && asset?.metadata?.links) { - handleValidation(null, asset.metadata.links[0]) - } else if (field.name === 'files') { - getFileDidInfo( - asset?.id, - asset?.services[0]?.id, - asset?.services[0]?.serviceEndpoint - ).then((fileDidInfo) => { - setHideUrl(true) - // setting placeholder for url file to avoid txs for the url file during initializing - helpers.setValue([ - { - url: fileDidInfo[0].valid - ? 'http://oceanprotocol.com/placeholder' - : '', - ...fileDidInfo[0] - } - ]) - }) - } - }, []) - return ( <> - {field?.value?.[0]?.valid === true ? ( - + {field?.value?.[0]?.valid === true || + field?.value?.[0]?.type === 'hidden' ? ( + ) : ( () // This component is handled by Formik so it's not rendered like a "normal" react component, // so handleTimeoutCustomOption is called only once. @@ -41,6 +44,34 @@ export default function FormEditMetadata({ timeoutOptionsArray.push('Forever') } + 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' + } + ]) + + const providerUrl = values?.services + ? values?.services[0].providerUrl.url + : asset.services[0].serviceEndpoint + // if we have a sample file, we need to get the files' info before setting defaults links value + asset?.metadata?.links?.[0] && + getFileUrlInfo(asset.metadata.links[0], providerUrl).then( + (checkedFile) => { + console.log(checkedFile) + // initiate link with values from asset metadata + setFieldValue('links', [ + { + url: asset.metadata.links[0], + ...checkedFile[0] + } + ]) + } + ) + }, []) + return (
      {data.map( From 7b13f84a7f8e3915bbc55e4cb8453a5881388122 Mon Sep 17 00:00:00 2001 From: EnzoVezzaro Date: Wed, 19 Oct 2022 06:59:21 -0400 Subject: [PATCH 5/5] removed unnecessary required --- src/components/Asset/Edit/_validation.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Asset/Edit/_validation.ts b/src/components/Asset/Edit/_validation.ts index 1bb405bcc..52b9faf07 100644 --- a/src/components/Asset/Edit/_validation.ts +++ b/src/components/Asset/Edit/_validation.ts @@ -10,8 +10,8 @@ export const validationSchema = Yup.object().shape({ files: Yup.array() .of( Yup.object().shape({ - url: Yup.string().url('Must be a valid URL.').required('Required'), - valid: Yup.boolean().isTrue().required('File must be valid.') + url: Yup.string().url('Must be a valid URL.'), + valid: Yup.boolean().isTrue() }) ) .nullable(),