1
0
mirror of https://github.com/oceanprotocol/market.git synced 2024-11-15 01:34:57 +01:00
This commit is contained in:
mihaisc 2020-08-27 16:13:31 +03:00
parent dfccd101f7
commit 2daab8b175
3 changed files with 51 additions and 48 deletions

View File

@ -1,71 +1,71 @@
import * as React from 'react'; import * as React from 'react'
import { FormikProps, connect } from 'formik'; import { FormikProps, connect } from 'formik'
import debounce from 'lodash.debounce'; import debounce from 'lodash.debounce'
import omit from 'lodash.omit'; import omit from 'lodash.omit'
import isEqual from 'react-fast-compare'; import isEqual from 'react-fast-compare'
export interface PersistProps { export interface PersistProps {
name: string; name: string
ignoreFields?: string[]; ignoreFields?: string[]
debounce?: number; debounce?: number
isSessionStorage?: boolean; isSessionStorage?: boolean
} }
class PersistImpl extends React.Component< class PersistImpl extends React.Component<
PersistProps & { formik: FormikProps<any> }, PersistProps & { formik: FormikProps<any> },
{} any
> { > {
static defaultProps = { static defaultProps = {
debounce: 300, debounce: 300
};
saveForm = debounce((data: FormikProps<{}>) => {
const dataToSave = this.omitIgnoredFields(data);
console.log("data tosave",dataToSave)
if (this.props.isSessionStorage) {
window.sessionStorage.setItem(
this.props.name,
JSON.stringify(dataToSave)
);
} else {
window.localStorage.setItem(this.props.name, JSON.stringify(dataToSave));
} }
}, this.props.debounce);
omitIgnoredFields = (data: FormikProps<{}>) => { saveForm = debounce((data: FormikProps<any>) => {
const { ignoreFields } = this.props; const dataToSave = this.omitIgnoredFields(data)
console.log('omit fiel',ignoreFields) console.log('data tosave', dataToSave)
const { values, touched, errors } = data; if (this.props.isSessionStorage) {
window.sessionStorage.setItem(this.props.name, JSON.stringify(dataToSave))
} else {
window.localStorage.setItem(this.props.name, JSON.stringify(dataToSave))
}
}, this.props.debounce)
console.log( "vale", values, omit(values, ignoreFields)) omitIgnoredFields = (data: FormikProps<any>) => {
const { ignoreFields } = this.props
console.log('omit fiel', ignoreFields)
const { values, touched, errors } = data
console.log('vale', values, omit(values, ignoreFields))
return ignoreFields return ignoreFields
? omit({ ? omit(
{
...data, ...data,
values: omit(values, ignoreFields), values: omit(values, ignoreFields),
touched: omit(touched, ignoreFields), touched: omit(touched, ignoreFields),
errors: omit(errors, ignoreFields), errors: omit(errors, ignoreFields)
}, ignoreFields) },
: data; ignoreFields
}; )
: data
}
componentDidUpdate(prevProps: PersistProps & { formik: FormikProps<any> }) { componentDidUpdate(prevProps: PersistProps & { formik: FormikProps<any> }) {
if (!isEqual(prevProps.formik, this.props.formik)) { if (!isEqual(prevProps.formik, this.props.formik)) {
this.saveForm(this.props.formik); this.saveForm(this.props.formik)
} }
} }
componentDidMount() { componentDidMount() {
const maybeState = this.props.isSessionStorage const maybeState = this.props.isSessionStorage
? window.sessionStorage.getItem(this.props.name) ? window.sessionStorage.getItem(this.props.name)
: window.localStorage.getItem(this.props.name); : window.localStorage.getItem(this.props.name)
if (maybeState && maybeState !== null) { if (maybeState && maybeState !== null) {
this.props.formik.setFormikState(JSON.parse(maybeState)); this.props.formik.setFormikState(JSON.parse(maybeState))
} }
} }
render():any { render(): any {
return null; return null
} }
} }
export const Persist = connect<PersistProps, any>(PersistImpl); export const Persist = connect<PersistProps, any>(PersistImpl)

View File

@ -12,11 +12,10 @@ export default function PublishForm({
content, content,
publishStepText, publishStepText,
isLoading isLoading
}: { }: {
content: FormContent, content: FormContent
publishStepText?:string, publishStepText?: string
isLoading:boolean isLoading: boolean
}): ReactElement { }): ReactElement {
const { ocean, account } = useOcean() const { ocean, account } = useOcean()
const { const {
@ -62,7 +61,7 @@ export default function PublishForm({
<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>

View File

@ -20,7 +20,7 @@ export default function PublishPage({
}): ReactElement { }): ReactElement {
const { marketFeeAddress, marketFeeAmount } = useSiteMetadata() const { marketFeeAddress, marketFeeAmount } = useSiteMetadata()
const { accountId, ocean } = useOcean() const { accountId, ocean } = useOcean()
const { publish, publishError,isLoading,publishStepText } = usePublish() const { publish, publishError, isLoading, publishStepText } = usePublish()
const navigate = useNavigate() const navigate = useNavigate()
async function handleSubmit( async function handleSubmit(
@ -104,7 +104,11 @@ export default function PublishPage({
> >
{({ values }) => ( {({ values }) => (
<> <>
<PublishForm content={content.form} isLoading={isLoading} publishStepText={publishStepText} /> <PublishForm
content={content.form}
isLoading={isLoading}
publishStepText={publishStepText}
/>
<aside> <aside>
<div className={styles.sticky}> <div className={styles.sticky}>
<Preview values={values} /> <Preview values={values} />