diff --git a/src/data/form-publish.json b/src/data/form-publish.json index cc221be..37c7c6e 100644 --- a/src/data/form-publish.json +++ b/src/data/form-publish.json @@ -1,90 +1,111 @@ { "title": "Publish a new data asset", "description": "A cool form description", - "fields": { - "name": { - "label": "Title", - "placeholder": "i.e. My cool data set", - "type": "text", - "required": true, - "help": "Help me Obiwan" + "steps": [ + { + "title": "Essentials", + "fields": { + "name": { + "label": "Title", + "placeholder": "i.e. My cool data set", + "type": "text", + "required": true, + "help": "Help me Obiwan" + }, + "files": { + "label": "Files", + "placeholder": "i.e. https://file.com/file.json", + "type": "text", + "required": true, + "help": "Provide one or multiple links to your data files." + } + } }, - "files": { - "label": "Files", - "placeholder": "i.e. https://file.com/file.json", - "type": "text", - "required": true, - "help": "Provide one or multiple links to your data files." + { + "title": "Information", + "fields": { + "description": { + "label": "Description", + "placeholder": "i.e. My cool data set", + "type": "textarea", + "required": true, + "rows": 5 + }, + "categories": { + "label": "Categories", + "type": "select", + "options": [ + "Image Recognition", + "Dataset Of Datasets", + "Language", + "Performing Arts", + "Visual Arts & Design", + "Philosophy", + "History", + "Theology", + "Anthropology & Archeology", + "Sociology", + "Psychology", + "Politics", + "Interdisciplinary", + "Economics & Finance", + "Demography", + "Biology", + "Chemistry", + "Physics & Energy", + "Earth & Climate", + "Space & Astronomy", + "Mathematics", + "Computer Technology", + "Engineering", + "Agriculture & Bio Engineering", + "Transportation", + "Urban Planning", + "Medicine", + "Business & Management", + "Sports & Recreation", + "Communication & Journalism", + "Other" + ] + } + } }, - "description": { - "label": "Description", - "placeholder": "i.e. My cool data set", - "type": "textarea", - "required": true, - "rows": 5 + { + "title": "Credentials", + "fields": { + "author": { + "label": "Author", + "placeholder": "i.e. Jelly McJellyfish", + "type": "text", + "required": true + }, + "copyrightHolder": { + "label": "Copyright Holder", + "placeholder": "i.e. fwhfiw", + "type": "text", + "required": true + }, + "license": { + "label": "License", + "type": "select", + "required": true, + "options": [ + "Public Domain", + "CC BY: Attribution", + "CC BY-SA: Attribution ShareAlike", + "CC BY-ND: Attribution-NoDerivs", + "CC BY-NC: Attribution-NonCommercial", + "CC BY-NC-SA: Attribution-NonCommercial-ShareAlike", + "CC BY-NC-ND: Attribution-NonCommercial-NoDerivs" + ] + } + } }, - "categories": { - "label": "Categories", - "type": "select", - "options": [ - "Image Recognition", - "Dataset Of Datasets", - "Language", - "Performing Arts", - "Visual Arts & Design", - "Philosophy", - "History", - "Theology", - "Anthropology & Archeology", - "Sociology", - "Psychology", - "Politics", - "Interdisciplinary", - "Economics & Finance", - "Demography", - "Biology", - "Chemistry", - "Physics & Energy", - "Earth & Climate", - "Space & Astronomy", - "Mathematics", - "Computer Technology", - "Engineering", - "Agriculture & Bio Engineering", - "Transportation", - "Urban Planning", - "Medicine", - "Business & Management", - "Sports & Recreation", - "Communication & Journalism", - "Other" - ] + { + "title": "Wallet" }, - "copyrightHolder": { - "label": "Copyright Holder", - "placeholder": "i.e. fwhfiw", - "type": "text", - "required": true - }, - "author": { - "label": "Author", - "placeholder": "i.e. Jelly McJellyfish", - "type": "text", - "required": true - }, - "license": { - "label": "License", - "type": "select", - "required": true, - "options": [ - "Public Domain", - "CC BY: Attribution", - "CC BY-SA: Attribution ShareAlike", - "CC BY-ND: Attribution-NoDerivs", - "CC BY-NC: Attribution-NonCommercial", - "CC BY-NC-SA: Attribution-NonCommercial-ShareAlike", - "CC BY-NC-ND: Attribution-NonCommercial-NoDerivs" - ] + { + "title": "Complete" } - } + ] } diff --git a/src/routes/Publish/Step.module.scss b/src/routes/Publish/Step.module.scss new file mode 100644 index 0000000..e56002c --- /dev/null +++ b/src/routes/Publish/Step.module.scss @@ -0,0 +1,5 @@ +@import '../../styles/variables'; + +.title { + font-size: $font-size-h2; +} diff --git a/src/routes/Publish/Step.tsx b/src/routes/Publish/Step.tsx new file mode 100644 index 0000000..56f72b7 --- /dev/null +++ b/src/routes/Publish/Step.tsx @@ -0,0 +1,121 @@ +import React, { PureComponent } from 'react' +import Input from '../../components/atoms/Form/Input' +import Label from '../../components/atoms/Form/Label' +import Row from '../../components/atoms/Form/Row' +import Button from '../../components/atoms/Button' +import { User } from '../../context/User' +import Files from './Files/' +import styles from './Step.module.scss' + +interface StepProps { + currentStep: number + index: number + inputChange: any + inputToArrayChange: any + fields?: any[] + files?: any + state: any + title: string + next: any + prev: any +} + +export default class Step extends PureComponent { + public previousButton() { + let { currentStep, prev } = this.props + + if (currentStep !== 1) { + return + } + return null + } + + public nextButton() { + let { currentStep, next } = this.props + if (currentStep < 3) { + return + } + return null + } + + public render() { + const { + currentStep, + index, + title, + fields, + inputChange, + inputToArrayChange, + files, + state + } = this.props + + if (currentStep !== index + 1) { + return null + } + + return ( + <> +

{title}

+ {fields && + Object.entries(fields).map(([key, value]) => { + let onChange = inputChange + + if (key === 'files' || key === 'categories') { + onChange = inputToArrayChange + } + + if (key === 'files') { + return ( + + + + + ) + } + + return ( + + ) + })} + + {this.previousButton()} + {this.nextButton()} + + + {states => + states.isLogged ? ( + + ) : ( + + ) + } + + + ) + } +} + +Step.contextType = User diff --git a/src/routes/Publish/index.tsx b/src/routes/Publish/index.tsx index 8e23393..f27f981 100644 --- a/src/routes/Publish/index.tsx +++ b/src/routes/Publish/index.tsx @@ -1,15 +1,10 @@ import React, { ChangeEvent, Component, FormEvent } from 'react' import { Logger } from '@oceanprotocol/squid' import Route from '../../components/templates/Route' -import Button from '../../components/atoms/Button' import Form from '../../components/atoms/Form/Form' -import Input from '../../components/atoms/Form/Input' -import Label from '../../components/atoms/Form/Label' -import Row from '../../components/atoms/Form/Row' -import { User } from '../../context/User' import AssetModel from '../../models/AssetModel' import Web3message from '../../components/Web3message' -import Files from './Files/' +import Step from './Step' import form from '../../data/form-publish.json' @@ -19,7 +14,7 @@ interface PublishState { name?: string dateCreated?: Date description?: string - files?: any[] + files?: string[] price?: number author?: string type?: AssetType @@ -31,10 +26,12 @@ interface PublishState { isPublished?: boolean publishedDid?: string publishingError?: string + currentStep?: number } class Publish extends Component<{}, PublishState> { public state = { + currentStep: 1, name: '', dateCreated: new Date(), description: '', @@ -51,48 +48,6 @@ class Publish extends Component<{}, PublishState> { publishingError: '' } - public formFields = (entries: any[]) => - entries.map(([key, value]) => { - let onChange = this.inputChange - - if (key === 'files' || key === 'categories') { - onChange = this.inputToArrayChange - } - - if (key === 'files') { - return ( - - - - - ) - } - - return ( - - ) - }) - private inputChange = ( event: ChangeEvent | ChangeEvent ) => { @@ -113,6 +68,22 @@ class Publish extends Component<{}, PublishState> { this.setState({ publishingError: '' }) } + private next = () => { + let { currentStep } = this.state + currentStep = currentStep >= 2 ? 3 : currentStep + 1 + this.setState({ + currentStep: currentStep + }) + } + + private prev = () => { + let { currentStep } = this.state + currentStep = currentStep <= 1 ? 1 : currentStep - 1 + this.setState({ + currentStep: currentStep + }) + } + private toStart = () => { this.setState({ name: '', @@ -187,8 +158,6 @@ class Publish extends Component<{}, PublishState> { } public render() { - const entries = Object.entries(form.fields) - return ( @@ -200,25 +169,27 @@ class Publish extends Component<{}, PublishState> { ) : this.state.isPublished ? ( this.publishedState() ) : ( -
- {this.formFields(entries)} + <> +

Step {this.state.currentStep}

- - {states => - states.isLogged ? ( - - ) : ( - - ) - } - -
+
+ {form.steps.map((step: any, index: number) => ( + + ))} + + )}
) @@ -249,5 +220,4 @@ class Publish extends Component<{}, PublishState> { } } -Publish.contextType = User export default Publish