mirror of
https://github.com/oceanprotocol/market.git
synced 2024-06-30 05:41:41 +02:00
start creating actual wizard
This commit is contained in:
parent
235d8333eb
commit
9b5cd8b8ed
|
@ -2,4 +2,6 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
padding-top: var(--spacer);
|
||||||
|
border-top: 1px solid var(--border-color);
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,34 +1,38 @@
|
||||||
import React, { FormEvent, ReactElement } from 'react'
|
import React, { ReactElement } from 'react'
|
||||||
import { useOcean } from '@context/Ocean'
|
import { useOcean } from '@context/Ocean'
|
||||||
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 { FormikContextType, useFormikContext } from 'formik'
|
import { FormikContextType, useFormikContext } from 'formik'
|
||||||
import { FormPublishData } from '../_types'
|
import { FormPublishData } from '../_types'
|
||||||
|
|
||||||
export default function FormActions({
|
export default function FormActions({ step }: { step: number }): ReactElement {
|
||||||
isValid,
|
|
||||||
resetFormAndClearStorage
|
|
||||||
}: {
|
|
||||||
isValid: boolean
|
|
||||||
resetFormAndClearStorage: (e: FormEvent<Element>) => void
|
|
||||||
}): ReactElement {
|
|
||||||
const { ocean, account } = useOcean()
|
const { ocean, account } = useOcean()
|
||||||
const { status }: FormikContextType<FormPublishData> = useFormikContext()
|
const { status, isValid, setFieldValue }: FormikContextType<FormPublishData> =
|
||||||
|
useFormikContext()
|
||||||
|
|
||||||
|
function handleNext() {
|
||||||
|
setFieldValue('step', step + 1)
|
||||||
|
}
|
||||||
|
|
||||||
|
function handlePrevious() {
|
||||||
|
setFieldValue('step', step - 1)
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<footer className={styles.actions}>
|
<footer className={styles.actions}>
|
||||||
{status !== 'empty' && (
|
<Button onClick={handlePrevious}>Back</Button>
|
||||||
<Button style="text" size="small" onClick={resetFormAndClearStorage}>
|
|
||||||
Reset Form
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<Button
|
<Button style="primary" onClick={() => handleNext()}>
|
||||||
|
Continue
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
{/* <Button
|
||||||
|
type="submit"
|
||||||
style="primary"
|
style="primary"
|
||||||
disabled={!ocean || !account || !isValid || status === 'empty'}
|
disabled={!ocean || !account || !isValid}
|
||||||
>
|
>
|
||||||
Submit
|
Submit
|
||||||
</Button>
|
</Button> */}
|
||||||
</footer>
|
</footer>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,5 +1,4 @@
|
||||||
.form {
|
.form {
|
||||||
composes: box from '@shared/atoms/Box.module.css';
|
composes: box from '@shared/atoms/Box.module.css';
|
||||||
margin-bottom: var(--spacer);
|
margin-bottom: var(--spacer);
|
||||||
padding: 0;
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,10 +1,8 @@
|
||||||
import React, { ReactElement, FormEvent } from 'react'
|
import React, { ReactElement } from 'react'
|
||||||
import { useFormikContext, Form, FormikContextType } from 'formik'
|
import { useFormikContext, Form, FormikContextType } from 'formik'
|
||||||
import FormActions from './FormActions'
|
import FormActions from './FormActions'
|
||||||
import { FormPublishData } from '../_types'
|
import { FormPublishData } from '../_types'
|
||||||
import styles from './index.module.css'
|
import styles from './index.module.css'
|
||||||
import { initialValues } from '../_constants'
|
|
||||||
import Tabs from '@shared/atoms/Tabs'
|
|
||||||
import PricingFields from './Pricing'
|
import PricingFields from './Pricing'
|
||||||
import Debug from '../Debug'
|
import Debug from '../Debug'
|
||||||
import MetadataFields from './Metadata'
|
import MetadataFields from './Metadata'
|
||||||
|
@ -12,6 +10,20 @@ import ServicesFields from './Services'
|
||||||
import content from '../../../../content/publish/form.json'
|
import content from '../../../../content/publish/form.json'
|
||||||
import Preview from './Preview'
|
import Preview from './Preview'
|
||||||
|
|
||||||
|
function Steps({ step }: { step: number }) {
|
||||||
|
switch (step) {
|
||||||
|
case 1:
|
||||||
|
return <MetadataFields />
|
||||||
|
case 2:
|
||||||
|
return <ServicesFields />
|
||||||
|
case 3:
|
||||||
|
return <PricingFields />
|
||||||
|
case 4:
|
||||||
|
return <Preview />
|
||||||
|
default:
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
export default function FormPublish(): ReactElement {
|
export default function FormPublish(): ReactElement {
|
||||||
const { isValid, values, resetForm }: FormikContextType<FormPublishData> =
|
const { isValid, values, resetForm }: FormikContextType<FormPublishData> =
|
||||||
useFormikContext()
|
useFormikContext()
|
||||||
|
@ -24,70 +36,11 @@ export default function FormPublish(): ReactElement {
|
||||||
// // setSubmitting(false)
|
// // setSubmitting(false)
|
||||||
// }, [setErrors, setTouched])
|
// }, [setErrors, setTouched])
|
||||||
|
|
||||||
const resetFormAndClearStorage = (e: FormEvent<Element>) => {
|
|
||||||
e.preventDefault()
|
|
||||||
|
|
||||||
resetForm({
|
|
||||||
values: initialValues as FormPublishData,
|
|
||||||
status: 'empty'
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
const tabs = [
|
|
||||||
{
|
|
||||||
title: content.metadata.title,
|
|
||||||
content: (
|
|
||||||
<>
|
|
||||||
<MetadataFields />
|
|
||||||
<FormActions
|
|
||||||
isValid={isValid}
|
|
||||||
resetFormAndClearStorage={resetFormAndClearStorage}
|
|
||||||
/>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: content.services.title,
|
|
||||||
content: (
|
|
||||||
<>
|
|
||||||
<ServicesFields />
|
|
||||||
<FormActions
|
|
||||||
isValid={isValid}
|
|
||||||
resetFormAndClearStorage={resetFormAndClearStorage}
|
|
||||||
/>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: content.pricing.title,
|
|
||||||
content: (
|
|
||||||
<>
|
|
||||||
<PricingFields />
|
|
||||||
<FormActions
|
|
||||||
isValid={isValid}
|
|
||||||
resetFormAndClearStorage={resetFormAndClearStorage}
|
|
||||||
/>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: content.preview.title,
|
|
||||||
content: (
|
|
||||||
<>
|
|
||||||
<Preview />
|
|
||||||
<FormActions
|
|
||||||
isValid={isValid}
|
|
||||||
resetFormAndClearStorage={resetFormAndClearStorage}
|
|
||||||
/>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
]
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Form className={styles.form}>
|
<Form className={styles.form}>
|
||||||
<Tabs items={tabs} />
|
<Steps step={values.step} />
|
||||||
|
<FormActions step={values.step} />
|
||||||
</Form>
|
</Form>
|
||||||
<Debug values={values} />
|
<Debug values={values} />
|
||||||
</>
|
</>
|
||||||
|
|
|
@ -4,6 +4,7 @@ import { allowDynamicPricing, allowFixedPricing } from '../../../app.config.js'
|
||||||
import { FormPublishData } from './_types'
|
import { FormPublishData } from './_types'
|
||||||
|
|
||||||
export const initialValues: Partial<FormPublishData> = {
|
export const initialValues: Partial<FormPublishData> = {
|
||||||
|
step: 1,
|
||||||
type: 'dataset',
|
type: 'dataset',
|
||||||
metadata: {
|
metadata: {
|
||||||
name: '',
|
name: '',
|
||||||
|
|
|
@ -14,6 +14,7 @@ export interface FormPublishService {
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface FormPublishData {
|
export interface FormPublishData {
|
||||||
|
step: number
|
||||||
type: 'dataset' | 'algorithm'
|
type: 'dataset' | 'algorithm'
|
||||||
metadata: {
|
metadata: {
|
||||||
name: string
|
name: string
|
||||||
|
|
Loading…
Reference in New Issue
Block a user