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

added local persist

This commit is contained in:
mihaisc 2020-08-27 13:30:36 +03:00
parent b114d7c529
commit dfccd101f7
5 changed files with 122 additions and 29 deletions

32
package-lock.json generated
View File

@ -5174,6 +5174,24 @@
"resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.159.tgz",
"integrity": "sha512-gF7A72f7WQN33DpqOWw9geApQPh4M3PxluMtaHxWHXEGSN12/WbcEk/eNSqWNQcQhF66VSZ06vCF94CrHwXJDg=="
},
"@types/lodash.debounce": {
"version": "4.0.6",
"resolved": "https://registry.npmjs.org/@types/lodash.debounce/-/lodash.debounce-4.0.6.tgz",
"integrity": "sha512-4WTmnnhCfDvvuLMaF3KV4Qfki93KebocUF45msxhYyjMttZDQYzHkO639ohhk8+oco2cluAFL3t5+Jn4mleylQ==",
"dev": true,
"requires": {
"@types/lodash": "*"
}
},
"@types/lodash.omit": {
"version": "4.5.6",
"resolved": "https://registry.npmjs.org/@types/lodash.omit/-/lodash.omit-4.5.6.tgz",
"integrity": "sha512-KXPpOSNX2h0DAG2w7ajpk7TXvWF28ZHs5nJhOJyP0BQHkehgr948RVsToItMme6oi0XJkp19CbuNXkIX8FiBlQ==",
"dev": true,
"requires": {
"@types/lodash": "*"
}
},
"@types/lodash.sample": {
"version": "4.2.6",
"resolved": "https://registry.npmjs.org/@types/lodash.sample/-/lodash.sample-4.2.6.tgz",
@ -14469,15 +14487,6 @@
}
}
},
"formik-persist": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/formik-persist/-/formik-persist-1.1.0.tgz",
"integrity": "sha512-tZyyghHinnoqptYVD8vfkN8rg8sFKIuc1INFpuspTXffq1H8eeI1aYFiyoq2gNE1qIVJfPy+bzUItx/9qyO8Hw==",
"requires": {
"lodash.debounce": "^4.0.8",
"react-fast-compare": "^2.0.1"
}
},
"forwarded": {
"version": "0.1.2",
"resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.1.2.tgz",
@ -23643,6 +23652,11 @@
"resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
"integrity": "sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4="
},
"lodash.omit": {
"version": "4.5.0",
"resolved": "https://registry.npmjs.org/lodash.omit/-/lodash.omit-4.5.0.tgz",
"integrity": "sha1-brGa5aHuHdnfC5aeZs4Lf6MLXmA="
},
"lodash.orderby": {
"version": "4.6.0",
"resolved": "https://registry.npmjs.org/lodash.orderby/-/lodash.orderby-4.6.0.tgz",

View File

@ -39,7 +39,6 @@
"ethereum-blockies": "github:MyEtherWallet/blockies",
"filesize": "^6.1.0",
"formik": "^2.1.5",
"formik-persist": "^1.1.0",
"gatsby": "^2.24.47",
"gatsby-image": "^2.4.16",
"gatsby-plugin-manifest": "^2.4.23",
@ -55,6 +54,8 @@
"gatsby-transformer-sharp": "^2.5.13",
"intersection-observer": "^0.11.0",
"is-url-superb": "^4.0.0",
"lodash.debounce": "^4.0.8",
"lodash.omit": "^4.5.0",
"query-string": "^6.13.1",
"react": "^16.13.1",
"react-data-table-component": "^6.11.0",
@ -76,6 +77,8 @@
},
"devDependencies": {
"@babel/core": "^7.11.1",
"@types/lodash.debounce": "^4.0.3",
"@types/lodash.omit": "^4.5.6",
"@babel/preset-typescript": "^7.10.1",
"@storybook/addon-actions": "^6.0.12",
"@storybook/addon-storyshots": "^6.0.12",

View File

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

View File

@ -5,16 +5,20 @@ import { useFormikContext, Form, Field } from 'formik'
import Input from '../../atoms/Input'
import Button from '../../atoms/Button'
import { FormContent, FormFieldProps } from '../../../@types/Form'
import { Persist } from 'formik-persist'
import Loader from '../../atoms/Loader'
import { Persist } from '../../atoms/FormikPersist'
export default function PublishForm({
content
content,
publishStepText,
isLoading
}: {
content: FormContent
content: FormContent,
publishStepText?:string,
isLoading:boolean
}): ReactElement {
const { ocean, account } = useOcean()
const { publishStepText, isLoading } = usePublish()
const {
status,
setStatus,
@ -30,6 +34,7 @@ export default function PublishForm({
useEffect(() => {
setErrors({})
setTouched({})
// setSubmitting(false)
}, [])
@ -73,7 +78,7 @@ export default function PublishForm({
)}
</footer>
)}
<Persist name={formName} />
<Persist name={formName} ignoreFields={['isSubmitting']} />
</Form>
)
}

View File

@ -20,18 +20,18 @@ export default function PublishPage({
}): ReactElement {
const { marketFeeAddress, marketFeeAmount } = useSiteMetadata()
const { accountId, ocean } = useOcean()
const { publish, publishError } = usePublish()
const { publish, publishError,isLoading,publishStepText } = usePublish()
const navigate = useNavigate()
async function handleSubmit(
values: MetadataPublishForm,
resetForm: () => void
): Promise<void> {
console.log(`
Collected form values:
----------------------
${JSON.stringify(values, null, 2)}
`)
// console.log(`
// Collected form values:
// ----------------------
// ${JSON.stringify(values, null, 2)}
// `)
const metadata = transformPublishFormToMetadata(values)
const {
@ -42,12 +42,12 @@ export default function PublishPage({
} = values.price
const serviceType = values.access === 'Download' ? 'access' : 'compute'
console.log(`
Transformed metadata values:
----------------------
${JSON.stringify(metadata, null, 2)}
Tokens to mint: ${tokensToMint}
`)
// console.log(`
// Transformed metadata values:
// ----------------------
// ${JSON.stringify(metadata, null, 2)}
// Tokens to mint: ${tokensToMint}
// `)
try {
// mpAddress and mpFee are not yet implemented in ocean js so are not uset
@ -104,7 +104,7 @@ export default function PublishPage({
>
{({ values }) => (
<>
<PublishForm content={content.form} />
<PublishForm content={content.form} isLoading={isLoading} publishStepText={publishStepText} />
<aside>
<div className={styles.sticky}>
<Preview values={values} />