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:
parent
e86223c950
commit
82c94c5b94
@ -1,18 +1,12 @@
|
|||||||
import React, { ReactElement } from 'react'
|
import React, { ReactElement } from 'react'
|
||||||
import { useNavigate } from '@reach/router'
|
|
||||||
import { toast } from 'react-toastify'
|
|
||||||
import styles from './PublishForm.module.css'
|
import styles from './PublishForm.module.css'
|
||||||
import { useOcean, usePublish } from '@oceanprotocol/react'
|
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 Input from '../../atoms/Input'
|
||||||
import Button from '../../atoms/Button'
|
import Button from '../../atoms/Button'
|
||||||
import { transformPublishFormToMetadata } from './utils'
|
|
||||||
import { FormContent, FormFieldProps } from '../../../@types/Form'
|
import { FormContent, FormFieldProps } from '../../../@types/Form'
|
||||||
import { MetadataPublishForm } from '../../../@types/Metadata'
|
|
||||||
import { useSiteMetadata } from '../../../hooks/useSiteMetadata'
|
|
||||||
import { Persist } from 'formik-persist'
|
import { Persist } from 'formik-persist'
|
||||||
import Loader from '../../atoms/Loader'
|
import Loader from '../../atoms/Loader'
|
||||||
import { initialValues, validationSchema } from './validation'
|
|
||||||
|
|
||||||
export default function PublishForm({
|
export default function PublishForm({
|
||||||
content
|
content
|
||||||
@ -20,90 +14,30 @@ export default function PublishForm({
|
|||||||
content: FormContent
|
content: FormContent
|
||||||
}): ReactElement {
|
}): ReactElement {
|
||||||
const { ocean, account } = useOcean()
|
const { ocean, account } = useOcean()
|
||||||
const {
|
const { publishStepText, isLoading } = usePublish()
|
||||||
publish,
|
const { status, setStatus, isValid } = useFormikContext()
|
||||||
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)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Formik
|
<Form
|
||||||
initialValues={initialValues}
|
className={styles.form}
|
||||||
initialStatus="empty"
|
onChange={() => status === 'empty' && setStatus(null)}
|
||||||
validationSchema={validationSchema}
|
|
||||||
onSubmit={async (values, { setSubmitting }) => {
|
|
||||||
await handleSubmit(values)
|
|
||||||
setSubmitting(false)
|
|
||||||
}}
|
|
||||||
>
|
>
|
||||||
{({ isValid, status, setStatus }) => (
|
{content.data.map((field: FormFieldProps) => (
|
||||||
<FormFormik
|
<Field key={field.name} {...field} component={Input} />
|
||||||
className={styles.form}
|
))}
|
||||||
onChange={() => status === 'empty' && setStatus(null)}
|
|
||||||
>
|
|
||||||
{content.data.map((field: FormFieldProps) => (
|
|
||||||
<Field key={field.name} {...field} component={Input} />
|
|
||||||
))}
|
|
||||||
|
|
||||||
{isLoading ? (
|
{isLoading ? (
|
||||||
<Loader message={publishStepText} />
|
<Loader message={publishStepText} />
|
||||||
) : (
|
) : (
|
||||||
<Button
|
<Button
|
||||||
style="primary"
|
style="primary"
|
||||||
type="submit"
|
type="submit"
|
||||||
disabled={!ocean || !account || !isValid || status === 'empty'}
|
disabled={!ocean || !account || !isValid || status === 'empty'}
|
||||||
>
|
>
|
||||||
Submit
|
Submit
|
||||||
</Button>
|
</Button>
|
||||||
)}
|
|
||||||
<Persist name="ocean-publish-form" />
|
|
||||||
</FormFormik>
|
|
||||||
)}
|
)}
|
||||||
</Formik>
|
<Persist name="ocean-publish-form" />
|
||||||
|
</Form>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -1,22 +1,92 @@
|
|||||||
import React, { ReactElement } from 'react'
|
import React, { ReactElement } from 'react'
|
||||||
|
import { useNavigate } from '@reach/router'
|
||||||
import PublishForm from './PublishForm'
|
import PublishForm from './PublishForm'
|
||||||
import styles from './index.module.css'
|
import styles from './index.module.css'
|
||||||
import Web3Feedback from '../../molecules/Wallet/Feedback'
|
import Web3Feedback from '../../molecules/Wallet/Feedback'
|
||||||
import { FormContent } from '../../../@types/Form'
|
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({
|
export default function PublishPage({
|
||||||
content
|
content
|
||||||
}: {
|
}: {
|
||||||
content: { form: FormContent }
|
content: { form: FormContent }
|
||||||
}): ReactElement {
|
}): 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 (
|
return (
|
||||||
<article className={styles.grid}>
|
<article className={styles.grid}>
|
||||||
<PublishForm content={content.form} />
|
<Formik
|
||||||
<aside>
|
initialValues={initialValues}
|
||||||
<div className={styles.sticky}>
|
initialStatus="empty"
|
||||||
<Web3Feedback />
|
validationSchema={validationSchema}
|
||||||
</div>
|
onSubmit={async (values, { setSubmitting }) => {
|
||||||
</aside>
|
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>
|
</article>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user