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

refactor, move feedback out of form

This commit is contained in:
Matthias Kretschmann 2020-09-30 19:36:45 +02:00
parent 3f4590fe90
commit 9e2baac34c
Signed by: m
GPG Key ID: 606EEEF3C479A91F
7 changed files with 105 additions and 85 deletions

View File

@ -10,14 +10,19 @@ interface TabsItem {
export default function Tabs({ export default function Tabs({
items, items,
className, className,
handleTabChange handleTabChange,
defaultIndex
}: { }: {
items: TabsItem[] items: TabsItem[]
className?: string className?: string
handleTabChange?: (tabName: string) => void handleTabChange?: (tabName: string) => void
defaultIndex?: number
}): ReactElement { }): ReactElement {
return ( return (
<ReactTabs className={`${className && className}`}> <ReactTabs
className={`${className && className}`}
defaultIndex={defaultIndex}
>
<TabList className={styles.tabList}> <TabList className={styles.tabList}>
{items.map((item) => ( {items.map((item) => (
<Tab <Tab

View File

@ -5,7 +5,7 @@ import styles from './index.module.css'
import Tabs from '../../../atoms/Tabs' import Tabs from '../../../atoms/Tabs'
import Fixed from './Fixed' import Fixed from './Fixed'
import Dynamic from './Dynamic' import Dynamic from './Dynamic'
import { useField } from 'formik' import { useField, useFormikContext } from 'formik'
import { useUserPreferences } from '../../../../providers/UserPreferences' import { useUserPreferences } from '../../../../providers/UserPreferences'
import { useOcean } from '@oceanprotocol/react' import { useOcean } from '@oceanprotocol/react'
import { PriceOptionsMarket } from '../../../../@types/MetaData' import { PriceOptionsMarket } from '../../../../@types/MetaData'
@ -68,8 +68,9 @@ export default function Price(props: InputProps): ReactElement {
helpers.setValue({ ...field.value, tokensToMint }) helpers.setValue({ ...field.value, tokensToMint })
}, [price]) }, [price])
// Generate new DT name & symbol // Generate new DT name & symbol, but only once automatically
useEffect(() => { useEffect(() => {
if (!ocean || typeof field?.value?.datatoken?.name !== 'undefined') return
generateName() generateName()
}, [ocean]) }, [ocean])
@ -100,7 +101,11 @@ export default function Price(props: InputProps): ReactElement {
return ( return (
<div className={styles.price}> <div className={styles.price}>
<Tabs items={tabs} handleTabChange={handleTabChange} /> <Tabs
items={tabs}
handleTabChange={handleTabChange}
defaultIndex={field?.value?.type === 'fixed' ? 0 : 1}
/>
{debug === true && ( {debug === true && (
<pre> <pre>
<code>{JSON.stringify(field.value, null, 2)}</code> <code>{JSON.stringify(field.value, null, 2)}</code>

View File

@ -0,0 +1,30 @@
import React, { ReactElement } from 'react'
import { MetadataPublishForm } from '../../../@types/MetaData'
import styles from './index.module.css'
import { transformPublishFormToMetadata } from './utils'
export default function Debug({
values
}: {
values: Partial<MetadataPublishForm>
}): ReactElement {
return (
<div className={styles.grid}>
<div>
<h5>Collected Form Values</h5>
<pre>
<code>{JSON.stringify(values, null, 2)}</code>
</pre>
</div>
<div>
<h5>Transformed Values</h5>
<pre>
<code>
{JSON.stringify(transformPublishFormToMetadata(values), null, 2)}
</code>
</pre>
</div>
</div>
)
}

View File

@ -5,17 +5,11 @@ 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 { FormContent, FormFieldProps } from '../../../@types/Form' import { FormContent, FormFieldProps } from '../../../@types/Form'
import Loader from '../../atoms/Loader'
import { Persist } from '../../atoms/FormikPersist'
export default function PublishForm({ export default function PublishForm({
content, content
publishStepText,
isLoading
}: { }: {
content: FormContent content: FormContent
publishStepText?: string
isLoading: boolean
}): ReactElement { }): ReactElement {
const { ocean, account } = useOcean() const { ocean, account } = useOcean()
const { const {
@ -27,7 +21,6 @@ export default function PublishForm({
resetForm, resetForm,
initialValues initialValues
} = useFormikContext() } = useFormikContext()
const formName = 'ocean-publish-form'
// reset form validation on every mount // reset form validation on every mount
useEffect(() => { useEffect(() => {
@ -52,30 +45,22 @@ export default function PublishForm({
{content.data.map((field: FormFieldProps) => ( {content.data.map((field: FormFieldProps) => (
<Field key={field.name} {...field} component={Input} /> <Field key={field.name} {...field} component={Input} />
))} ))}
{isLoading ? (
<Loader message={publishStepText} />
) : (
<footer className={styles.actions}>
<Button
style="primary"
type="submit"
disabled={!ocean || !account || !isValid || status === 'empty'}
>
Submit
</Button>
{status !== 'empty' && ( <footer className={styles.actions}>
<Button <Button
style="text" style="primary"
size="small" type="submit"
onClick={resetFormAndClearStorage} disabled={!ocean || !account || !isValid || status === 'empty'}
> >
Reset Form Submit
</Button> </Button>
)}
</footer> {status !== 'empty' && (
)} <Button style="text" size="small" onClick={resetFormAndClearStorage}>
<Persist name={formName} ignoreFields={['isSubmitting']} /> Reset Form
</Button>
)}
</footer>
</Form> </Form>
) )
} }

View File

@ -15,3 +15,11 @@
top: calc(var(--spacer) / 2); top: calc(var(--spacer) / 2);
} }
} }
.feedback {
width: 100%;
min-height: 60vh;
display: flex;
justify-content: center;
align-items: center;
}

View File

@ -10,9 +10,14 @@ import { FormContent } from '../../../@types/Form'
import { initialValues, validationSchema } from '../../../models/FormPublish' import { initialValues, validationSchema } from '../../../models/FormPublish'
import { transformPublishFormToMetadata } from './utils' import { transformPublishFormToMetadata } from './utils'
import Preview from './Preview' import Preview from './Preview'
import { MetadataMarket, MetadataPublishForm } from '../../../@types/MetaData' import { MetadataPublishForm } from '../../../@types/MetaData'
import { useUserPreferences } from '../../../providers/UserPreferences' import { useUserPreferences } from '../../../providers/UserPreferences'
import { Logger, Metadata } from '@oceanprotocol/lib' import { Logger, Metadata } from '@oceanprotocol/lib'
import Loader from '../../atoms/Loader'
import { Persist } from '../../atoms/FormikPersist'
import Debug from './Debug'
const formName = 'ocean-publish-form'
export default function PublishPage({ export default function PublishPage({
content content
@ -60,56 +65,38 @@ export default function PublishPage({
} }
return ( return (
<article className={styles.grid}> <Formik
<Formik initialValues={initialValues}
initialValues={initialValues} initialStatus="empty"
initialStatus="empty" validationSchema={validationSchema}
validationSchema={validationSchema} onSubmit={async (values, { setSubmitting, resetForm }) => {
onSubmit={async (values, { setSubmitting, resetForm }) => { await handleSubmit(values, resetForm)
await handleSubmit(values, resetForm) setSubmitting(false)
setSubmitting(false) }}
}} >
> {({ values }) => (
{({ values }) => ( <>
<> <Persist name={formName} ignoreFields={['isSubmitting']} />
<PublishForm
content={content.form}
isLoading={isLoading}
publishStepText={publishStepText}
/>
<aside>
<div className={styles.sticky}>
<Preview values={values} />
<Web3Feedback />
</div>
</aside>
{debug === true && ( {isLoading ? (
<> <div className={styles.feedback}>
<div> <Loader message={publishStepText} />
<h5>Collected Form Values</h5> </div>
<pre> ) : (
<code>{JSON.stringify(values, null, 2)}</code> <article className={styles.grid}>
</pre> <PublishForm content={content.form} />
<aside>
<div className={styles.sticky}>
<Preview values={values} />
<Web3Feedback />
</div> </div>
</aside>
</article>
)}
<div> {debug === true && <Debug values={values} />}
<h5>Transformed Values</h5> </>
<pre> )}
<code> </Formik>
{JSON.stringify(
transformPublishFormToMetadata(values),
null,
2
)}
</code>
</pre>
</div>
</>
)}
</>
)}
</Formik>
</article>
) )
} }