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

Merge pull request #394 from oceanprotocol/publish-algo-tabs

Browse Source 
refactor publish page for tab usage
This commit is contained in:
Matthias Kretschmann 2021-02-23 11:30:57 +01:00 committed by GitHub
commit 7b8c11ea36
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
15 changed files with 137 additions and 150 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
content/pages/form-algorithm.json → content/pages/publish/form-algorithm.json
View File

@ -1,5 +1,5 @@
{
"title": "Publish",
"title": "Publish an Algorithm",
"data": [
{
"name": "name",

2
content/pages/form-dataset.json → content/pages/publish/form-dataset.json
View File

@ -1,5 +1,5 @@
{
"title": "Publish",
"title": "Publish a Data Set",
"data": [
{
"name": "name",

2
content/pages/index.json → content/pages/publish/index.json
View File

@ -1,5 +1,5 @@
{
"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 or algorithm to make it more discoverable and catch the interest of data consumers.",
"warning": "Given the beta status, publishing on Ropsten or Rinkeby first is strongly recommended. Please familiarize yourself with [the market](https://oceanprotocol.com/technology/marketplaces), [the risks](https://blog.oceanprotocol.com/on-staking-on-data-in-ocean-market-3d8e09eb0a13), and the [Terms of Use](/terms)."
}

3
src/components/atoms/Tabs.module.css
View File

@ -13,6 +13,7 @@
text-transform: uppercase;
cursor: pointer;
color: var(--color-secondary);
background-color: var(--background-body);
border: 1px solid var(--border-color);
margin-right: -1px;
min-width: 100px;
@ -29,7 +30,7 @@
}
.tab[aria-selected='true'] {
background: var(--font-color-heading);
background-color: var(--font-color-heading);
color: var(--background-body);
border-color: var(--font-color-heading);
}

1
src/components/molecules/MetadataPreview.module.css
View File

@ -1,5 +1,6 @@
.preview {
font-size: var(--font-size-small);
margin-top: calc(var(--spacer) / 2);
margin-bottom: var(--spacer);
}

1
src/components/organisms/AssetActions/index.tsx
View File

@ -3,7 +3,6 @@ import styles from './index.module.css'
import Compute from './Compute'
import Consume from './Consume'
import { Logger } from '@oceanprotocol/lib'
import { ConfigHelperConfig } from '@oceanprotocol/lib/dist/node/utils/ConfigHelper'
import Tabs from '../../atoms/Tabs'
import { useOcean } from '@oceanprotocol/react'
import compareAsBN from '../../../utils/compareAsBN'

10
src/components/pages/Publish/FormAlgoPublish.tsx
View File

@ -7,15 +7,16 @@ import Input from '../../atoms/Input'
import Button from '../../atoms/Button'
import { FormContent, FormFieldProps } from '../../../@types/Form'
import { MetadataPublishFormAlgorithm } from '../../../@types/MetaData'
import stylesIndex from './index.module.css'
const query = graphql`
query {
content: allFile(
filter: { relativePath: { eq: "pages/form-algorithm.json" } }
filter: { relativePath: { eq: "pages/publish/form-algorithm.json" } }
) {
edges {
node {
childPagesJson {
childPublishJson {
title
data {
name
@ -38,7 +39,7 @@ const query = graphql`
export default function FormPublish(): ReactElement {
const data = useStaticQuery(query)
const content: FormContent = data.content.edges[0].node.childPagesJson
const content: FormContent = data.content.edges[0].node.childPublishJson
const { ocean, account } = useOcean()
const {
status,
@ -56,7 +57,7 @@ export default function FormPublish(): ReactElement {
useEffect(() => {
setErrors({})
setTouched({})
resetForm({ values: initialValues, status: 'empty' })
// setSubmitting(false)
}, [setErrors, setTouched])
@ -124,6 +125,7 @@ export default function FormPublish(): ReactElement {
// do we need this?
onChange={() => status === 'empty' && setStatus(null)}
>
<h2 className={stylesIndex.formTitle}>{content.title}</h2>
{content.data.map((field: FormFieldProps) => (
<Field
key={field.name}

3
src/components/pages/Publish/FormPublish.module.css
View File

@ -1,6 +1,9 @@
.form {
composes: box from '../../atoms/Box.module.css';
margin-bottom: var(--spacer);
border-top: none;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.actions {

8
src/components/pages/Publish/FormPublish.tsx
View File

@ -7,15 +7,16 @@ import Input from '../../atoms/Input'
import Button from '../../atoms/Button'
import { FormContent, FormFieldProps } from '../../../@types/Form'
import { MetadataPublishFormDataset } from '../../../@types/MetaData'
import stylesIndex from './index.module.css'
const query = graphql`
query {
content: allFile(
filter: { relativePath: { eq: "pages/form-dataset.json" } }
filter: { relativePath: { eq: "pages/publish/form-dataset.json" } }
) {
edges {
node {
childPagesJson {
childPublishJson {
title
data {
name
@ -38,7 +39,7 @@ const query = graphql`
export default function FormPublish(): ReactElement {
const data = useStaticQuery(query)
const content: FormContent = data.content.edges[0].node.childPagesJson
const content: FormContent = data.content.edges[0].node.childPublishJson
const { ocean, account } = useOcean()
const {
status,
@ -82,6 +83,7 @@ export default function FormPublish(): ReactElement {
// do we need this?
onChange={() => status === 'empty' && setStatus(null)}
>
<h2 className={stylesIndex.formTitle}>{content.title}</h2>
{content.data.map((field: FormFieldProps) => (
<Field
key={field.name}

29
src/components/pages/Publish/PublishType.module.css
View File

@ -1,29 +0,0 @@
.tabElement,
button.tabElement,
.tabElement:hover,
.tabElement:active,
.tabElement:focus {
border: 1px solid var(--border-color);
text-transform: uppercase;
border-radius: var(--border-radius);
margin-right: calc(var(--spacer) / 6);
margin-bottom: calc(var(--spacer) / 6);
color: var(--color-secondary);
background: var(--background-body);
/* the only thing not possible to overwrite button style="text" with more specifity of selectors, so sledgehammer */
padding: calc(var(--spacer) / 5) !important;
}
.tabElement:hover,
.tabElement:focus {
color: var(--font-color-text);
background: inherit;
transform: none;
}
.tabElement.selected {
color: var(--background-body);
background: var(--font-color-text);
border-color: var(--background-body);
}

48
src/components/pages/Publish/PublishType.tsx
View File

@ -1,48 +0,0 @@
import React, { ReactElement, useEffect } from 'react'
import styles from './PublishType.module.css'
import classNames from 'classnames/bind'
import Button from '../../atoms/Button'
const cx = classNames.bind(styles)
export const TypeOfPublish = {
dataset: 'dataset',
algorithm: 'algorithm'
} as const
type TypeOfPublish = typeof TypeOfPublish[keyof typeof TypeOfPublish]
export function PublishType({
type,
setType
}: {
type: string
setType: React.Dispatch<React.SetStateAction<string>>
}): ReactElement {
useEffect(() => {
setType(TypeOfPublish.dataset)
}, [])
return (
<div>
{Object.keys(TypeOfPublish).map((key, index) => {
const tabElement = cx({
[styles.selected]: key === type,
[styles.tabElement]: true
})
return (
<Button
size="small"
style="text"
key={index}
className={tabElement}
onClick={async () => {
setType(key)
}}
>
{key}
</Button>
)
})}
</div>
)
}

22
src/components/pages/Publish/index.module.css
View File

@ -1,3 +1,16 @@
.tabs ul[class*='tabList'] {
background-color: var(--background-body);
border: 1px solid var(--border-color);
border-top-left-radius: var(--border-radius);
border-top-right-radius: var(--border-radius);
}
.tabs div[class*='tabContent'] {
padding-left: 0;
padding-right: 0;
padding-top: 0;
}
.grid {
display: grid;
gap: calc(var(--spacer) * 1.5);
@ -16,8 +29,17 @@ div.alert {
grid-template-columns: 1.618fr 1fr;
}
.tabs ul[class*='tabList'] {
/* fake the above 1.618fr column */
max-width: calc((100% / 1.618) - calc(var(--spacer) / 1.075));
}
.sticky {
position: sticky;
top: calc(var(--spacer) / 2);
}
}
.formTitle {
font-size: var(--font-size-h4);
}

146
src/components/pages/Publish/index.tsx
View File

@ -4,9 +4,8 @@ import { usePublish, useOcean } from '@oceanprotocol/react'
import styles from './index.module.css'
import FormPublish from './FormPublish'
import FormAlgoPublish from './FormAlgoPublish'
import { PublishType, TypeOfPublish } from './PublishType'
import Web3Feedback from '../../molecules/Wallet/Feedback'
import { FormContent } from '../../../@types/Form'
import Tabs from '../../atoms/Tabs'
import { initialValues, validationSchema } from '../../../models/FormPublish'
import {
initialValues as initialValuesAlgorithm,
@ -27,14 +26,40 @@ import {
MetadataPublishFormAlgorithm
} from '../../../@types/MetaData'
import { useUserPreferences } from '../../../providers/UserPreferences'
import { Logger, Metadata } from '@oceanprotocol/lib'
import { Logger, Metadata, MetadataMain } from '@oceanprotocol/lib'
import { Persist } from '../../atoms/FormikPersist'
import Debug from './Debug'
import Alert from '../../atoms/Alert'
import MetadataFeedback from '../../molecules/MetadataFeedback'
import Button from '../../atoms/Button'
const formName = 'ocean-publish-form'
const formNameDatasets = 'ocean-publish-form-datasets'
const formNameAlgorithms = 'ocean-publish-form-algorithms'
function TabContent({
publishType,
values
}: {
publishType: MetadataMain['type']
values: Partial<MetadataPublishFormAlgorithm | MetadataPublishFormDataset>
}) {
return (
<article className={styles.grid}>
{publishType === 'dataset' ? <FormPublish /> : <FormAlgoPublish />}
<aside>
<div className={styles.sticky}>
{publishType === 'dataset' ? (
<MetadataPreview values={values} />
) : (
<MetadataAlgorithmPreview values={values} />
)}
<Web3Feedback />
</div>
</aside>
</article>
)
}
export default function PublishPage({
content
@ -48,12 +73,14 @@ export default function PublishPage({
const [error, setError] = useState<string>()
const [title, setTitle] = useState<string>()
const [did, setDid] = useState<string>()
const [publishType, setPublishType] = useState<string>()
const [publishType, setPublishType] = useState<MetadataMain['type']>(
'dataset'
)
const hasFeedback = isLoading || error || success
useEffect(() => {
publishType === TypeOfPublish.dataset
publishType === 'dataset'
? setTitle('Publishing Data Set')
: setTitle('Publishing Algorithm')
}, [publishType])
@ -137,73 +164,78 @@ export default function PublishPage({
return isInPurgatory && purgatoryData ? null : (
<Formik
initialValues={
publishType === TypeOfPublish.dataset
? initialValues
: initialValuesAlgorithm
publishType === 'dataset' ? initialValues : initialValuesAlgorithm
}
initialStatus="empty"
validationSchema={
publishType === TypeOfPublish.dataset
? validationSchema
: validationSchemaAlgorithm
publishType === 'dataset' ? validationSchema : validationSchemaAlgorithm
}
onSubmit={async (values, { resetForm }) => {
// move user's focus to top of screen
window.scrollTo({ top: 0, left: 0, behavior: 'smooth' })
// kick off publishing
publishType === TypeOfPublish.dataset
publishType === 'dataset'
? await handleSubmit(values, resetForm)
: await handleAlgorithmSubmit(values, resetForm)
}}
>
{({ values }) => (
<>
<Persist name={formName} ignoreFields={['isSubmitting']} />
{({ values }) => {
const tabs = [
{
title: 'Data Set',
content: <TabContent values={values} publishType={publishType} />
},
{
title: 'Algorithm',
content: <TabContent values={values} publishType={publishType} />
}
]
{hasFeedback ? (
<MetadataFeedback
title={title}
error={error}
success={success}
loading={publishStepText}
setError={setError}
successAction={{
name: 'Go to data set →',
to: `/asset/${did}`
}}
return (
<>
<Persist
name={
publishType === 'dataset'
? formNameDatasets
: formNameAlgorithms
}
ignoreFields={['isSubmitting']}
/>
) : (
<>
<PublishType type={publishType} setType={setPublishType} />
<Alert
text={content.warning}
state="info"
className={styles.alert}
{hasFeedback ? (
<MetadataFeedback
title={title}
error={error}
success={success}
loading={publishStepText}
setError={setError}
successAction={{
name: 'Go to data set →',
to: `/asset/${did}`
}}
/>
<article className={styles.grid}>
{publishType === TypeOfPublish.dataset ? (
<FormPublish />
) : (
<FormAlgoPublish />
)}
) : (
<>
<Alert
text={content.warning}
state="info"
className={styles.alert}
/>
<aside>
<div className={styles.sticky}>
{publishType === TypeOfPublish.dataset ? (
<MetadataPreview values={values} />
) : (
<MetadataAlgorithmPreview values={values} />
)}
<Web3Feedback />
</div>
</aside>
</article>
</>
)}
<Tabs
className={styles.tabs}
items={tabs}
handleTabChange={(title) =>
setPublishType(title.toLowerCase().replace(' ', '') as any)
}
/>
</>
)}
{debug === true && <Debug values={values} />}
</>
)}
{debug === true && <Debug values={values} />}
</>
)
}}
</Formik>
)
}

8
src/pages/publish.tsx
View File

@ -4,7 +4,7 @@ import Page from '../components/templates/Page'
import { graphql, PageProps } from 'gatsby'
export default function PageGatsbyPublish(props: PageProps): ReactElement {
const content = (props.data as any).content.edges[0].node.childPagesJson
const content = (props.data as any).content.edges[0].node.childPublishJson
const { title, description } = content
return (
@ -16,10 +16,12 @@ export default function PageGatsbyPublish(props: PageProps): ReactElement {
export const contentQuery = graphql`
query PublishPageQuery {
content: allFile(filter: { relativePath: { eq: "pages/index.json" } }) {
content: allFile(
filter: { relativePath: { eq: "pages/publish/index.json" } }
) {
edges {
node {
childPagesJson {
childPublishJson {
title
description
warning

2
tests/unit/pages/publish.test.tsx
View File

@ -1,7 +1,7 @@
import React from 'react'
import { render } from '@testing-library/react'
import Publish from '../../../src/components/pages/Publish'
import content from '../../../content/pages/index.json'
import content from '../../../content/pages/publish/index.json'
describe('Home', () => {
it('renders without crashing', () => {