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

new publish feedback UX

This commit is contained in:
Matthias Kretschmann 2020-10-05 15:03:21 +02:00
parent 5c9eb91371
commit 22a45ec21e
Signed by: m
GPG Key ID: 606EEEF3C479A91F
9 changed files with 174 additions and 26 deletions

View File

@ -1,5 +1,5 @@
{ {
"title": "Publish Data", "title": "Publish",
"description": "Highlight the important features of your data set to make it more discoverable and catch the interest of data consumers.", "description": "Highlight the important features of your data set to make it more discoverable and catch the interest of data consumers.",
"form": { "form": {
"title": "Publish", "title": "Publish",

5
package-lock.json generated
View File

@ -12911,6 +12911,11 @@
"integrity": "sha512-yfqzAi1GFxK6EoJIZKgxqJyK6j/OjEFEUi2qkNThD/kUhoCFSG1izq31B5xuxzbJBGw9/67uPtkPMYAzWL7L7Q==", "integrity": "sha512-yfqzAi1GFxK6EoJIZKgxqJyK6j/OjEFEUi2qkNThD/kUhoCFSG1izq31B5xuxzbJBGw9/67uPtkPMYAzWL7L7Q==",
"dev": true "dev": true
}, },
"dom-confetti": {
"version": "0.2.2",
"resolved": "https://registry.npmjs.org/dom-confetti/-/dom-confetti-0.2.2.tgz",
"integrity": "sha512-+UVH9Y85qmpTnbmFURwLWjqLIykyIrsNSRkPX/eFlBuOURz9RDX8JoZHnajZHyFuCV0w/K3+tZK0ztfoTw6ejg=="
},
"dom-converter": { "dom-converter": {
"version": "0.2.0", "version": "0.2.0",
"resolved": "https://registry.npmjs.org/dom-converter/-/dom-converter-0.2.0.tgz", "resolved": "https://registry.npmjs.org/dom-converter/-/dom-converter-0.2.0.tgz",

View File

@ -35,6 +35,7 @@
"classnames": "^2.2.6", "classnames": "^2.2.6",
"date-fns": "^2.16.1", "date-fns": "^2.16.1",
"decimal.js": "^10.2.1", "decimal.js": "^10.2.1",
"dom-confetti": "^0.2.2",
"dotenv": "^8.2.0", "dotenv": "^8.2.0",
"ethereum-blockies": "github:MyEtherWallet/blockies", "ethereum-blockies": "github:MyEtherWallet/blockies",
"filesize": "^6.1.0", "filesize": "^6.1.0",

View File

@ -0,0 +1,35 @@
.feedback {
width: 100%;
min-height: 40vh;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
text-align: center;
}
.box {
composes: box from '../../atoms/Box.module.css';
width: 100%;
}
.feedback h3 {
font-size: var(--font-size-large);
text-align: center;
margin-bottom: calc(var(--spacer) / 2);
}
.feedback h3 + div {
text-align: left;
}
@media (min-width: 40rem) {
.feedback {
max-width: 30rem;
margin: 0 auto;
}
}
.action {
margin-top: calc(var(--spacer) / 1.5);
}

View File

@ -0,0 +1,45 @@
import Alert from '../../atoms/Alert'
import Success from './Success'
import Button from '../../atoms/Button'
import Loader from '../../atoms/Loader'
import React, { ReactElement } from 'react'
import styles from './Feedback.module.css'
export default function Feedback({
error,
success,
did,
publishStepText,
setError
}: {
error: string
success: string
did: string
publishStepText: string
setError: (error: string) => void
}): ReactElement {
return (
<div className={styles.feedback}>
<div className={styles.box}>
<h3>Publishing Data Set</h3>
{error ? (
<>
<Alert text={error} state="error" />
<Button
style="primary"
size="small"
className={styles.action}
onClick={() => setError(undefined)}
>
Try Again
</Button>
</>
) : success ? (
<Success success={success} did={did} />
) : (
<Loader message={publishStepText} />
)}
</div>
</div>
)
}

View File

@ -0,0 +1,3 @@
.action {
margin-top: calc(var(--spacer) / 1.5);
}

View File

@ -0,0 +1,56 @@
import Alert from '../../atoms/Alert'
import Button from '../../atoms/Button'
import React, { ReactElement, useEffect } from 'react'
import { confetti } from 'dom-confetti'
import styles from './Success.module.css'
const confettiConfig = {
angle: 90,
spread: 360,
startVelocity: 40,
elementCount: 70,
dragFriction: 0.12,
duration: 3000,
stagger: 3,
width: '10px',
height: '10px',
perspective: '500px',
colors: [
'var(--brand-pink)',
'var(--brand-purple)',
'var(--brand-violet)',
'var(--brand-grey-light)',
'var(--brand-grey-lighter)'
]
}
export default function Success({
success,
did
}: {
success: string
did: string
}): ReactElement {
// Have some confetti upon success
useEffect(() => {
if (!success || typeof window === 'undefined') return
const startElement: HTMLElement = document.querySelector('a[data-confetti]')
confetti(startElement, confettiConfig)
}, [success])
return (
<>
<Alert text={success} state="success" />
<Button
style="primary"
size="small"
href={`/asset/${did}`}
className={styles.action}
data-confetti
>
Go to data set
</Button>
</>
)
}

View File

@ -15,11 +15,3 @@
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

@ -1,6 +1,4 @@
import React, { ReactElement } from 'react' import React, { ReactElement, useState } from 'react'
import { useNavigate } from '@reach/router'
import { toast } from 'react-toastify'
import { Formik } from 'formik' import { Formik } from 'formik'
import { usePublish } from '@oceanprotocol/react' import { usePublish } from '@oceanprotocol/react'
import styles from './index.module.css' import styles from './index.module.css'
@ -13,9 +11,9 @@ import Preview from './Preview'
import { 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 { Persist } from '../../atoms/FormikPersist'
import Debug from './Debug' import Debug from './Debug'
import Feedback from './Feedback'
const formName = 'ocean-publish-form' const formName = 'ocean-publish-form'
@ -26,7 +24,12 @@ export default function PublishPage({
}): ReactElement { }): ReactElement {
const { debug } = useUserPreferences() const { debug } = useUserPreferences()
const { publish, publishError, isLoading, publishStepText } = usePublish() const { publish, publishError, isLoading, publishStepText } = usePublish()
const navigate = useNavigate()
const [success, setSuccess] = useState<string>()
const [error, setError] = useState<string>()
const [did, setDid] = useState<string>()
const hasFeedback = isLoading || error || success
async function handleSubmit( async function handleSubmit(
values: Partial<MetadataPublishForm>, values: Partial<MetadataPublishForm>,
@ -49,18 +52,22 @@ export default function PublishPage({
price.datatoken price.datatoken
) )
// Publish failed
if (publishError) { if (publishError) {
toast.error(publishError) && console.error(publishError) setError(publishError)
return null Logger.error(publishError)
return
} }
// User feedback and redirect to new asset detail page // Publish succeeded
ddo && toast.success('Asset created successfully.') && resetForm() if (ddo) {
// Go to new asset detail page setDid(ddo.id)
navigate(`/asset/${ddo.id}`) setSuccess('🎉 Successfully published your data set. 🎉')
resetForm()
}
} catch (error) { } catch (error) {
console.error(error.message) setError(error.message)
toast.error(error.message) Logger.error(error.message)
} }
} }
@ -78,10 +85,14 @@ export default function PublishPage({
<> <>
<Persist name={formName} ignoreFields={['isSubmitting']} /> <Persist name={formName} ignoreFields={['isSubmitting']} />
{isLoading ? ( {hasFeedback ? (
<div className={styles.feedback}> <Feedback
<Loader message={publishStepText} /> error={error}
</div> success={success}
publishStepText={publishStepText}
did={did}
setError={setError}
/>
) : ( ) : (
<article className={styles.grid}> <article className={styles.grid}>
<PublishForm content={content.form} /> <PublishForm content={content.form} />