1
0
mirror of https://github.com/oceanprotocol/market.git synced 2024-12-02 05:57:29 +01:00

Fix edit asset issues (#1190)

* fix loading

* fix cancel acction and some cleanups

* style typo

Co-authored-by: Matthias Kretschmann <m@kretschmann.io>

* fix title and replace router with link

* add proper loading to edit components

* add page title

* add more top spacing to form description

Co-authored-by: Matthias Kretschmann <m@kretschmann.io>
This commit is contained in:
Bogdan Fazakas 2022-03-23 17:11:42 +02:00 committed by GitHub
parent aeb6f06f75
commit 61d60fd173
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 36 additions and 51 deletions

View File

@ -14,14 +14,14 @@ export default function DebugEditMetadata({
const linksTransformed = values.links?.length && const linksTransformed = values.links?.length &&
values.links[0].valid && [values.links[0].url.replace('javascript:', '')] values.links[0].valid && [values.links[0].url.replace('javascript:', '')]
const newMetadata: Metadata = { const newMetadata: Metadata = {
...asset.metadata, ...asset?.metadata,
name: values.name, name: values.name,
description: values.description, description: values.description,
links: linksTransformed, links: linksTransformed,
author: values.author author: values.author
} }
const updatedService: Service = { const updatedService: Service = {
...asset.services[0], ...asset?.services[0],
timeout: mapTimeoutStringToSeconds(values.timeout) timeout: mapTimeoutStringToSeconds(values.timeout)
} }
const updatedAsset: Asset = { const updatedAsset: Asset = {

View File

@ -17,7 +17,6 @@ import { mapTimeoutStringToSeconds } from '@utils/ddo'
import styles from './index.module.css' import styles from './index.module.css'
import content from '../../../../content/pages/edit.json' import content from '../../../../content/pages/edit.json'
import { AssetExtended } from 'src/@types/AssetExtended' import { AssetExtended } from 'src/@types/AssetExtended'
import { setMinterToPublisher, setMinterToDispenser } from '@utils/dispenser'
import { useAbortController } from '@hooks/useAbortController' import { useAbortController } from '@hooks/useAbortController'
import DebugEditMetadata from './DebugEditMetadata' import DebugEditMetadata from './DebugEditMetadata'
import { getOceanConfig } from '@utils/ocean' import { getOceanConfig } from '@utils/ocean'
@ -36,7 +35,6 @@ export default function Edit({
const newAbortController = useAbortController() const newAbortController = useAbortController()
const [success, setSuccess] = useState<string>() const [success, setSuccess] = useState<string>()
const [error, setError] = useState<string>() const [error, setError] = useState<string>()
const [timeoutStringValue, setTimeoutStringValue] = useState<string>()
const isComputeType = asset?.services[0]?.type === 'compute' const isComputeType = asset?.services[0]?.type === 'compute'
const hasFeedback = error || success const hasFeedback = error || success
@ -130,7 +128,7 @@ export default function Edit({
await handleSubmit(values, resetForm) await handleSubmit(values, resetForm)
}} }}
> >
{({ isSubmitting, values, initialValues }) => {({ isSubmitting, values }) =>
isSubmitting || hasFeedback ? ( isSubmitting || hasFeedback ? (
<EditFeedback <EditFeedback
title="Updating Data Set" title="Updating Data Set"
@ -151,8 +149,6 @@ export default function Edit({
<article> <article>
<FormEditMetadata <FormEditMetadata
data={content.form.data} data={content.form.data}
setTimeoutStringValue={setTimeoutStringValue}
values={initialValues}
showPrice={asset?.accessDetails?.type === 'fixed'} showPrice={asset?.accessDetails?.type === 'fixed'}
isComputeDataset={isComputeType} isComputeDataset={isComputeType}
/> />

View File

@ -18,3 +18,15 @@
margin-left: calc(var(--spacer) / 2); margin-left: calc(var(--spacer) / 2);
margin-right: calc(var(--spacer) / 2); margin-right: calc(var(--spacer) / 2);
} }
.actions a {
padding: calc(var(--spacer) / 3);
font-weight: var(--font-weight-bold);
text-transform: uppercase;
transition: 0.2s ease-out;
}
.actions a:hover {
transform: translate3d(0, -0.05rem, 0);
text-decoration: none;
}

View File

@ -3,15 +3,14 @@ import React, { ReactElement } from 'react'
import { useAsset } from '@context/Asset' import { useAsset } from '@context/Asset'
import Button from '@shared/atoms/Button' import Button from '@shared/atoms/Button'
import styles from './FormActions.module.css' import styles from './FormActions.module.css'
import Link from 'next/link'
export default function FormActions({ export default function FormActions({
setShowEdit,
handleClick handleClick
}: { }: {
setShowEdit: (show: boolean) => void
handleClick?: () => void handleClick?: () => void
}): ReactElement { }): ReactElement {
const { isAssetNetwork } = useAsset() const { isAssetNetwork, asset } = useAsset()
const { isValid }: FormikContextType<Partial<any>> = useFormikContext() const { isValid }: FormikContextType<Partial<any>> = useFormikContext()
return ( return (
@ -23,9 +22,9 @@ export default function FormActions({
> >
Submit Submit
</Button> </Button>
<Button style="text" onClick={() => setShowEdit(false)}> <Link href={`/asset/${asset?.id}`} key={asset?.id}>
Cancel Cancel
</Button> </Link>
</footer> </footer>
) )
} }

View File

@ -27,7 +27,6 @@ export default function FormEditComputeDataset({
}): ReactElement { }): ReactElement {
const { appConfig } = useSiteMetadata() const { appConfig } = useSiteMetadata()
const { asset } = useAsset() const { asset } = useAsset()
const [showEditCompute, setShowEditCompute] = useState<boolean>()
const { values }: FormikContextType<ComputePrivacyForm> = useFormikContext() const { values }: FormikContextType<ComputePrivacyForm> = useFormikContext()
const [allAlgorithms, setAllAlgorithms] = useState<AssetSelectionAsset[]>() const [allAlgorithms, setAllAlgorithms] = useState<AssetSelectionAsset[]>()
const newCancelToken = useCancelToken() const newCancelToken = useCancelToken()
@ -83,8 +82,7 @@ export default function FormEditComputeDataset({
/> />
))} ))}
{/* <FormActions setShowEdit={setShowEdit} /> */} <FormActions />
<FormActions setShowEdit={setShowEditCompute} />
</Form> </Form>
) )
} }

View File

@ -53,19 +53,14 @@ function handleTimeoutCustomOption(
export default function FormEditMetadata({ export default function FormEditMetadata({
data, data,
setTimeoutStringValue,
values,
showPrice, showPrice,
isComputeDataset isComputeDataset
}: { }: {
data: InputProps[] data: InputProps[]
setTimeoutStringValue: (value: string) => void
values: Partial<MetadataEditForm>
showPrice: boolean showPrice: boolean
isComputeDataset: boolean isComputeDataset: boolean
}): ReactElement { }): ReactElement {
const { oceanConfig } = useAsset() const { oceanConfig } = useAsset()
const [showEdit, setShowEdit] = useState<boolean>()
const { const {
validateField, validateField,
setFieldValue setFieldValue
@ -118,10 +113,7 @@ export default function FormEditMetadata({
) )
)} )}
<FormActions <FormActions />
setShowEdit={setShowEdit}
// handleClick={() => setTimeoutStringValue(values?.services[0]?.timeout)}
/>
</Form> </Form>
) )
} }

View File

@ -32,6 +32,8 @@
.description { .description {
font-size: var(--font-size-large); font-size: var(--font-size-large);
margin: calc(var(--spacer) * 0.3 / var(--line-height)) 0
calc(var(--spacer) / var(--line-height)) 0;
} }
.title { .title {

View File

@ -11,24 +11,19 @@ import { useWeb3 } from '@context/Web3'
import Alert from '@shared/atoms/Alert' import Alert from '@shared/atoms/Alert'
export default function Edit({ uri }: { uri: string }): ReactElement { export default function Edit({ uri }: { uri: string }): ReactElement {
const { asset, error, loading, owner } = useAsset() const { asset, error, isInPurgatory, owner, title } = useAsset()
const [isCompute, setIsCompute] = useState(false) const [isCompute, setIsCompute] = useState(false)
const [isOnwer, setIsOwner] = useState(false) const [pageTitle, setPageTitle] = useState<string>('')
const { accountId } = useWeb3() const { accountId } = useWeb3()
// Switch type value upon tab change
function handleTabChange(tabName: string) {
LoggerInstance.log('switched to tab', tabName)
// add store restore from
}
useEffect(() => { useEffect(() => {
if (!asset || error) { if (!asset || error || accountId !== owner) {
setPageTitle('Edit action not available')
return return
} }
setPageTitle(isInPurgatory ? '' : `Edit ${title}`)
setIsCompute(asset?.services[0]?.type === 'compute') setIsCompute(asset?.services[0]?.type === 'compute')
setIsOwner(owner === accountId) }, [asset, error, isInPurgatory, title])
}, [asset, error])
const tabs = [ const tabs = [
{ {
@ -42,23 +37,14 @@ export default function Edit({ uri }: { uri: string }): ReactElement {
} }
].filter((tab) => tab !== undefined) ].filter((tab) => tab !== undefined)
return asset && !loading && isOnwer ? ( return asset && asset?.accessDetails && accountId === owner ? (
<Page uri={uri}> <Page title={pageTitle} noPageHeader uri={uri}>
<div className={styles.contianer}> <div className={styles.container}>
<Tabs <Tabs items={tabs} defaultIndex={0} className={styles.edit} />
items={tabs}
handleTabChange={handleTabChange}
defaultIndex={0}
className={styles.edit}
/>
</div> </div>
</Page> </Page>
) : !isOnwer ? ( ) : asset && asset?.accessDetails && accountId !== owner ? (
<Page <Page title={pageTitle} noPageHeader uri={uri}>
title="Edit action available only to asset owner"
noPageHeader
uri={uri}
>
<Alert <Alert
title="Edit action available only to asset owner" title="Edit action available only to asset owner"
text={error} text={error}
@ -66,7 +52,7 @@ export default function Edit({ uri }: { uri: string }): ReactElement {
/> />
</Page> </Page>
) : ( ) : (
<Page title={undefined} uri={uri}> <Page title={pageTitle} noPageHeader uri={uri}>
<Loader /> <Loader />
</Page> </Page>
) )