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

prototype live preview

This commit is contained in:
Matthias Kretschmann 2020-07-17 15:39:40 +02:00
parent e86223c950
commit 82c94c5b94
Signed by: m
GPG Key ID: 606EEEF3C479A91F
2 changed files with 97 additions and 93 deletions

View File

@ -1,18 +1,12 @@
import React, { ReactElement } from 'react'
import { useNavigate } from '@reach/router'
import { toast } from 'react-toastify'
import styles from './PublishForm.module.css'
import { useOcean, usePublish } from '@oceanprotocol/react'
import { Formik, Form as FormFormik, Field } from 'formik'
import { useFormikContext, Form, Field } from 'formik'
import Input from '../../atoms/Input'
import Button from '../../atoms/Button'
import { transformPublishFormToMetadata } from './utils'
import { FormContent, FormFieldProps } from '../../../@types/Form'
import { MetadataPublishForm } from '../../../@types/Metadata'
import { useSiteMetadata } from '../../../hooks/useSiteMetadata'
import { Persist } from 'formik-persist'
import Loader from '../../atoms/Loader'
import { initialValues, validationSchema } from './validation'
export default function PublishForm({
content
@ -20,69 +14,11 @@ export default function PublishForm({
content: FormContent
}): ReactElement {
const { ocean, account } = useOcean()
const {
publish,
publishStepText,
publishStep,
isLoading,
publishError
} = usePublish()
const navigate = useNavigate()
const { marketAddress } = useSiteMetadata()
async function handleSubmit(values: MetadataPublishForm): Promise<void> {
console.log(`
Collected form values:
----------------------
${JSON.stringify(values)}
`)
const metadata = transformPublishFormToMetadata(values)
const tokensToMint = '4' // how to know this?
const serviceType = values.access === 'Download' ? 'access' : 'compute'
console.log(`
Transformed metadata values:
----------------------
${JSON.stringify(metadata)}
Cost: 1
Tokens to mint: ${tokensToMint}
`)
try {
const ddo = await publish(metadata as any, tokensToMint, marketAddress, [
{ serviceType, cost: '1' }
])
if (publishError) {
toast.error(publishError)
return null
}
// User feedback and redirect to new asset detail page
ddo && toast.success('Asset created successfully.')
// TODO: reset form state and make sure persistant form in localStorage is cleared
navigate(`/asset/${ddo.id}`)
} catch (error) {
console.error(error.message)
toast.error(error.message)
}
}
const { publishStepText, isLoading } = usePublish()
const { status, setStatus, isValid } = useFormikContext()
return (
<Formik
initialValues={initialValues}
initialStatus="empty"
validationSchema={validationSchema}
onSubmit={async (values, { setSubmitting }) => {
await handleSubmit(values)
setSubmitting(false)
}}
>
{({ isValid, status, setStatus }) => (
<FormFormik
<Form
className={styles.form}
onChange={() => status === 'empty' && setStatus(null)}
>
@ -102,8 +38,6 @@ export default function PublishForm({
</Button>
)}
<Persist name="ocean-publish-form" />
</FormFormik>
)}
</Formik>
</Form>
)
}

View File

@ -1,22 +1,92 @@
import React, { ReactElement } from 'react'
import { useNavigate } from '@reach/router'
import PublishForm from './PublishForm'
import styles from './index.module.css'
import Web3Feedback from '../../molecules/Wallet/Feedback'
import { FormContent } from '../../../@types/Form'
import { Formik } from 'formik'
import { initialValues, validationSchema } from './validation'
import { usePublish } from '@oceanprotocol/react'
import { useSiteMetadata } from '../../../hooks/useSiteMetadata'
import { MetadataPublishForm } from '../../../@types/Metadata'
import { transformPublishFormToMetadata } from './utils'
import { toast } from 'react-toastify'
export default function PublishPage({
content
}: {
content: { form: FormContent }
}): ReactElement {
const { publish, publishError } = usePublish()
const navigate = useNavigate()
const { marketAddress } = useSiteMetadata()
async function handleSubmit(values: MetadataPublishForm): Promise<void> {
console.log(`
Collected form values:
----------------------
${JSON.stringify(values)}
`)
const metadata = transformPublishFormToMetadata(values)
const tokensToMint = '4' // how to know this?
const serviceType = values.access === 'Download' ? 'access' : 'compute'
console.log(`
Transformed metadata values:
----------------------
${JSON.stringify(metadata)}
Cost: 1
Tokens to mint: ${tokensToMint}
`)
try {
const ddo = await publish(metadata as any, tokensToMint, marketAddress, [
{ serviceType, cost: '1' }
])
if (publishError) {
toast.error(publishError)
return null
}
// User feedback and redirect to new asset detail page
ddo && toast.success('Asset created successfully.')
// TODO: reset form state and make sure persistant form in localStorage is cleared
navigate(`/asset/${ddo.id}`)
} catch (error) {
console.error(error.message)
toast.error(error.message)
}
}
return (
<article className={styles.grid}>
<Formik
initialValues={initialValues}
initialStatus="empty"
validationSchema={validationSchema}
onSubmit={async (values, { setSubmitting }) => {
await handleSubmit(values)
setSubmitting(false)
}}
>
{({ values }) => (
<>
<PublishForm content={content.form} />
<aside>
<div className={styles.sticky}>
<Web3Feedback />
<div className={styles.preview}>
<h2>{values.name}</h2>
</div>
</div>
</aside>
</>
)}
</Formik>
</article>
)
}