From 0450034e75bf32d910f20018c785e0798d66a92d Mon Sep 17 00:00:00 2001 From: Jernej Pregelj Date: Fri, 26 Apr 2019 15:49:12 +0200 Subject: [PATCH] extend json, setup loader --- client/src/components/atoms/Form/Input.tsx | 2 +- client/src/data/form-publish.json | 746 +++++++++++++++++---- client/src/routes/Publish/index.tsx | 360 +--------- client/src/routes/Publish/loader.tsx | 261 +++++++ 4 files changed, 917 insertions(+), 452 deletions(-) create mode 100644 client/src/routes/Publish/loader.tsx diff --git a/client/src/components/atoms/Form/Input.tsx b/client/src/components/atoms/Form/Input.tsx index 047d32f..7bb954c 100644 --- a/client/src/components/atoms/Form/Input.tsx +++ b/client/src/components/atoms/Form/Input.tsx @@ -67,7 +67,7 @@ export default class Input extends PureComponent { const event = { currentTarget: { name: 'dateCreated', - value: date + value: date.toISOString() } } this.props.onChange!(event as any) // eslint-disable-line @typescript-eslint/no-non-null-assertion diff --git a/client/src/data/form-publish.json b/client/src/data/form-publish.json index ab011a8..0a0c8c8 100644 --- a/client/src/data/form-publish.json +++ b/client/src/data/form-publish.json @@ -1,128 +1,638 @@ { - "steps": [ - { - "title": "Essentials", - "description": "Start by adding a title and URLs for your data set.", - "fields": { - "name": { - "label": "Title", - "placeholder": "e.g. Shapes of Desert Plants", - "type": "text", - "required": true, - "help": "Enter a concise title. You will be able to enter a more thorough description in the next step." - }, - "files": { - "label": "Files", - "placeholder": "e.g. https://file.com/file.json", - "type": "text", - "required": true, - "help": "Provide one or multiple urls to your data set files." - } + "dataset": { + "defaults": { + "name": "", + "dateCreated": "", + "description": "", + "files": [], + "price": 0, + "author": "", + "type": "dataset", + "license": "", + "copyrightHolder": "", + "categories": "" + }, + "validation": { + "1": { + "name": false, + "files": false, + "allFieldsValid": false + }, + "2": { + "description": false, + "categories": false, + "dateCreated": false, + "allFieldsValid": false + }, + "3": { + "author": false, + "copyrightHolder": false, + "license": false, + "allFieldsValid": false } }, - { - "title": "Information", - "description": "Further describe and categorize your data set to help people discover it.", - "fields": { - "description": { - "label": "Description", - "help": "Add a thorough description with as much detail as possible.", - "placeholder": "e.g. Shapes of 23 common desert plants.", - "type": "textarea", - "required": true, - "rows": 5 - }, - "categories": { - "label": "Category", - "help": "Pick a category which best fits your data set.", - "type": "select", - "required": true, - "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", - "Deep Learning", - "Law", - "Other" - ] - }, - "dateCreated": { - "label": "Creation Date", - "help": "Select the date the asset was created, or was updated for the last time.", - "type": "date", - "required": true + "steps": [ + { + "title": "Essentials", + "description": "Start by adding a title and URLs for your data set.", + "fields": { + "name": { + "label": "Title", + "placeholder": "e.g. Shapes of Desert Plants", + "type": "text", + "required": true, + "help": "Enter a concise title. You will be able to enter a more thorough description in the next step." + }, + "files": { + "label": "Files", + "placeholder": "e.g. https://file.com/file.json", + "type": "text", + "required": true, + "help": "Provide one or multiple urls to your data set files." + } } + }, + { + "title": "Information", + "description": "Further describe and categorize your data set to help people discover it.", + "fields": { + "description": { + "label": "Description", + "help": "Add a thorough description with as much detail as possible.", + "placeholder": "e.g. Shapes of 23 common desert plants.", + "type": "textarea", + "required": true, + "rows": 5 + }, + "categories": { + "label": "Category", + "help": "Pick a category which best fits your data set.", + "type": "select", + "required": true, + "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", + "Deep Learning", + "Law", + "Other" + ] + }, + "dateCreated": { + "label": "Creation Date", + "help": "Select the date the asset was created, or was updated for the last time.", + "type": "date", + "required": true + } + } + }, + { + "title": "Authorship", + "description": "Give proper attribution for your data set.", + "fields": { + "author": { + "label": "Author", + "placeholder": "e.g. Jelly McJellyfish", + "type": "text", + "required": true + }, + "copyrightHolder": { + "label": "Copyright Holder", + "placeholder": "e.g. Marine Institute of Jellyfish", + "type": "text", + "required": true + }, + "license": { + "label": "License", + "type": "select", + "required": true, + "options": [ + "Public Domain", + "PDDL: Public Domain Dedication and License", + "ODC-By: Attribution License", + "ODC-ODbL: Open Database License", + "CDLA-Sharing: Community Data License Agreement", + "CDLA-Permissive: Community Data License Agreement", + "CC0: Public Domain Dedication", + "CC BY: Attribution 4.0 International", + "CC BY-SA: Attribution-ShareAlike 4.0 International", + "CC BY-ND: Attribution-NoDerivatives 4.0 International", + "CC BY-NC: Attribution-NonCommercial 4.0 International", + "CC BY-NC-SA: Attribution-NonCommercial-ShareAlike 4.0 International", + "CC BY-NC-ND: Attribution-NonCommercial-NoDerivatives 4.0 International" + ] + } + } + }, + { + "title": "Register", + "description": "Splendid, we got all the data. Now let's register your data set.", + "content": "After clicking the button below you will be asked by your wallet to sign this request." + } + ] + }, + "algorithm": { + "defaults": { + "name": "", + "dateCreated": "", + "description": "", + "files": [], + "price": 0, + "author": "", + "type": "algorithm", + "license": "", + "copyrightHolder": "", + "categories": "" + }, + "validation": { + "1": { + "name": false, + "files": false, + "allFieldsValid": false + }, + "2": { + "description": false, + "categories": false, + "dateCreated": false, + "allFieldsValid": false + }, + "3": { + "author": false, + "copyrightHolder": false, + "license": false, + "allFieldsValid": false } }, - { - "title": "Authorship", - "description": "Give proper attribution for your data set.", - "fields": { - "author": { - "label": "Author", - "placeholder": "e.g. Jelly McJellyfish", - "type": "text", - "required": true - }, - "copyrightHolder": { - "label": "Copyright Holder", - "placeholder": "e.g. Marine Institute of Jellyfish", - "type": "text", - "required": true - }, - "license": { - "label": "License", - "type": "select", - "required": true, - "options": [ - "Public Domain", - "PDDL: Public Domain Dedication and License", - "ODC-By: Attribution License", - "ODC-ODbL: Open Database License", - "CDLA-Sharing: Community Data License Agreement", - "CDLA-Permissive: Community Data License Agreement", - "CC0: Public Domain Dedication", - "CC BY: Attribution 4.0 International", - "CC BY-SA: Attribution-ShareAlike 4.0 International", - "CC BY-ND: Attribution-NoDerivatives 4.0 International", - "CC BY-NC: Attribution-NonCommercial 4.0 International", - "CC BY-NC-SA: Attribution-NonCommercial-ShareAlike 4.0 International", - "CC BY-NC-ND: Attribution-NonCommercial-NoDerivatives 4.0 International" - ] + "steps": [ + { + "title": "Essentials", + "description": "Start by adding a title and URLs for your algorithm.", + "fields": { + "name": { + "label": "Title", + "placeholder": "e.g. Shapes of Desert Plants", + "type": "text", + "required": true, + "help": "Enter a concise title. You will be able to enter a more thorough description in the next step." + }, + "files": { + "label": "Files", + "placeholder": "e.g. https://file.com/file.json", + "type": "text", + "required": true, + "help": "Provide one or multiple urls to your algorithm files." + } } + }, + { + "title": "Information", + "description": "Further describe and categorize your algorithm to help people discover it.", + "fields": { + "description": { + "label": "Description", + "help": "Add a thorough description with as much detail as possible.", + "placeholder": "e.g. Shapes of 23 common desert plants.", + "type": "textarea", + "required": true, + "rows": 5 + }, + "categories": { + "label": "Category", + "help": "Pick a category which best fits your algorithm.", + "type": "select", + "required": true, + "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", + "Deep Learning", + "Law", + "Other" + ] + }, + "dateCreated": { + "label": "Creation Date", + "help": "Select the date the asset was created, or was updated for the last time.", + "type": "date", + "required": true + } + } + }, + { + "title": "Authorship", + "description": "Give proper attribution for your algorithm.", + "fields": { + "author": { + "label": "Author", + "placeholder": "e.g. Jelly McJellyfish", + "type": "text", + "required": true + }, + "copyrightHolder": { + "label": "Copyright Holder", + "placeholder": "e.g. Marine Institute of Jellyfish", + "type": "text", + "required": true + }, + "license": { + "label": "License", + "type": "select", + "required": true, + "options": [ + "Public Domain", + "PDDL: Public Domain Dedication and License", + "ODC-By: Attribution License", + "ODC-ODbL: Open Database License", + "CDLA-Sharing: Community Data License Agreement", + "CDLA-Permissive: Community Data License Agreement", + "CC0: Public Domain Dedication", + "CC BY: Attribution 4.0 International", + "CC BY-SA: Attribution-ShareAlike 4.0 International", + "CC BY-ND: Attribution-NoDerivatives 4.0 International", + "CC BY-NC: Attribution-NonCommercial 4.0 International", + "CC BY-NC-SA: Attribution-NonCommercial-ShareAlike 4.0 International", + "CC BY-NC-ND: Attribution-NonCommercial-NoDerivatives 4.0 International" + ] + } + } + }, + { + "title": "Register", + "description": "Splendid, we got all the data. Now let's register your algorithm.", + "content": "After clicking the button below you will be asked by your wallet to sign this request." + } + ] + }, + "workflow": { + "defaults": { + "name": "", + "dateCreated": "", + "description": "", + "files": [], + "price": 0, + "author": "", + "type": "workflow", + "license": "", + "copyrightHolder": "", + "categories": "" + }, + "validation": { + "1": { + "name": false, + "files": false, + "allFieldsValid": false + }, + "2": { + "description": false, + "categories": false, + "dateCreated": false, + "allFieldsValid": false + }, + "3": { + "author": false, + "copyrightHolder": false, + "license": false, + "allFieldsValid": false } }, - { - "title": "Register", - "description": "Splendid, we got all the data. Now let's register your data set.", - "content": "After clicking the button below you will be asked by your wallet to sign this request." - } - ] + "steps": [ + { + "title": "Essentials", + "description": "Start by adding a title and URLs for your workflow.", + "fields": { + "name": { + "label": "Title", + "placeholder": "e.g. Shapes of Desert Plants", + "type": "text", + "required": true, + "help": "Enter a concise title. You will be able to enter a more thorough description in the next step." + }, + "files": { + "label": "Files", + "placeholder": "e.g. https://file.com/file.json", + "type": "text", + "required": true, + "help": "Provide one or multiple urls to your workflow files." + } + } + }, + { + "title": "Information", + "description": "Further describe and categorize your workflow to help people discover it.", + "fields": { + "description": { + "label": "Description", + "help": "Add a thorough description with as much detail as possible.", + "placeholder": "e.g. Shapes of 23 common desert plants.", + "type": "textarea", + "required": true, + "rows": 5 + }, + "categories": { + "label": "Category", + "help": "Pick a category which best fits your workflow.", + "type": "select", + "required": true, + "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", + "Deep Learning", + "Law", + "Other" + ] + }, + "dateCreated": { + "label": "Creation Date", + "help": "Select the date the asset was created, or was updated for the last time.", + "type": "date", + "required": true + } + } + }, + { + "title": "Authorship", + "description": "Give proper attribution for your workflow.", + "fields": { + "author": { + "label": "Author", + "placeholder": "e.g. Jelly McJellyfish", + "type": "text", + "required": true + }, + "copyrightHolder": { + "label": "Copyright Holder", + "placeholder": "e.g. Marine Institute of Jellyfish", + "type": "text", + "required": true + }, + "license": { + "label": "License", + "type": "select", + "required": true, + "options": [ + "Public Domain", + "PDDL: Public Domain Dedication and License", + "ODC-By: Attribution License", + "ODC-ODbL: Open Database License", + "CDLA-Sharing: Community Data License Agreement", + "CDLA-Permissive: Community Data License Agreement", + "CC0: Public Domain Dedication", + "CC BY: Attribution 4.0 International", + "CC BY-SA: Attribution-ShareAlike 4.0 International", + "CC BY-ND: Attribution-NoDerivatives 4.0 International", + "CC BY-NC: Attribution-NonCommercial 4.0 International", + "CC BY-NC-SA: Attribution-NonCommercial-ShareAlike 4.0 International", + "CC BY-NC-ND: Attribution-NonCommercial-NoDerivatives 4.0 International" + ] + } + } + }, + { + "title": "Register", + "description": "Splendid, we got all the data. Now let's register your workflow.", + "content": "After clicking the button below you will be asked by your wallet to sign this request." + } + ] + }, + "container": { + "defaults": { + "name": "", + "dateCreated": "", + "description": "", + "files": [], + "price": 0, + "author": "", + "type": "container", + "license": "", + "copyrightHolder": "", + "categories": "" + }, + "validation": { + "1": { + "name": false, + "files": false, + "allFieldsValid": false + }, + "2": { + "description": false, + "categories": false, + "dateCreated": false, + "allFieldsValid": false + }, + "3": { + "author": false, + "copyrightHolder": false, + "license": false, + "allFieldsValid": false + } + }, + "steps": [ + { + "title": "Essentials", + "description": "Start by adding a title and URLs for your container.", + "fields": { + "name": { + "label": "Title", + "placeholder": "e.g. Shapes of Desert Plants", + "type": "text", + "required": true, + "help": "Enter a concise title. You will be able to enter a more thorough description in the next step." + }, + "files": { + "label": "Files", + "placeholder": "e.g. https://file.com/file.json", + "type": "text", + "required": true, + "help": "Provide one or multiple urls to your container files." + } + } + }, + { + "title": "Information", + "description": "Further describe and categorize your container to help people discover it.", + "fields": { + "description": { + "label": "Description", + "help": "Add a thorough description with as much detail as possible.", + "placeholder": "e.g. Shapes of 23 common desert plants.", + "type": "textarea", + "required": true, + "rows": 5 + }, + "categories": { + "label": "Category", + "help": "Pick a category which best fits your container.", + "type": "select", + "required": true, + "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", + "Deep Learning", + "Law", + "Other" + ] + }, + "dateCreated": { + "label": "Creation Date", + "help": "Select the date the asset was created, or was updated for the last time.", + "type": "date", + "required": true + } + } + }, + { + "title": "Authorship", + "description": "Give proper attribution for your container.", + "fields": { + "author": { + "label": "Author", + "placeholder": "e.g. Jelly McJellyfish", + "type": "text", + "required": true + }, + "copyrightHolder": { + "label": "Copyright Holder", + "placeholder": "e.g. Marine Institute of Jellyfish", + "type": "text", + "required": true + }, + "license": { + "label": "License", + "type": "select", + "required": true, + "options": [ + "Public Domain", + "PDDL: Public Domain Dedication and License", + "ODC-By: Attribution License", + "ODC-ODbL: Open Database License", + "CDLA-Sharing: Community Data License Agreement", + "CDLA-Permissive: Community Data License Agreement", + "CC0: Public Domain Dedication", + "CC BY: Attribution 4.0 International", + "CC BY-SA: Attribution-ShareAlike 4.0 International", + "CC BY-ND: Attribution-NoDerivatives 4.0 International", + "CC BY-NC: Attribution-NonCommercial 4.0 International", + "CC BY-NC-SA: Attribution-NonCommercial-ShareAlike 4.0 International", + "CC BY-NC-ND: Attribution-NonCommercial-NoDerivatives 4.0 International" + ] + } + } + }, + { + "title": "Register", + "description": "Splendid, we got all the data. Now let's register your container.", + "content": "After clicking the button below you will be asked by your wallet to sign this request." + } + ] + } } diff --git a/client/src/routes/Publish/index.tsx b/client/src/routes/Publish/index.tsx index eac62f3..1c05847 100644 --- a/client/src/routes/Publish/index.tsx +++ b/client/src/routes/Publish/index.tsx @@ -1,352 +1,46 @@ -import React, { ChangeEvent, Component, FormEvent } from 'react' -import { Logger } from '@oceanprotocol/squid' +import React, { Component } from 'react' import Route from '../../components/templates/Route' -import Form from '../../components/atoms/Form/Form' -import AssetModel from '../../models/AssetModel' import { User } from '../../context' -import Web3message from '../../components/organisms/Web3message' -import Step from './Step' -import Progress from './Progress' -import ReactGA from 'react-ga' - -import { steps } from '../../data/form-publish.json' - -type AssetType = 'dataset' | 'algorithm' | 'container' | 'workflow' | 'other' +import Loader from './loader' interface PublishState { - name?: string - dateCreated?: string - description?: string - files?: string[] - price?: number - author?: string - type?: AssetType - license?: string - copyrightHolder?: string - categories?: string - tags?: string[] - isPublishing?: boolean - isPublished?: boolean - publishedDid?: string - publishingError?: string - currentStep?: number - validationStatus?: any + type: string } class Publish extends Component<{}, PublishState> { public state = { - currentStep: 1, - name: '', - dateCreated: new Date().toISOString(), - description: '', - files: [], - price: 0, - author: '', - type: 'dataset' as AssetType, - license: '', - copyrightHolder: '', - categories: '', - isPublishing: false, - isPublished: false, - publishedDid: '', - publishingError: '', - validationStatus: { - 1: { name: false, files: false, allFieldsValid: false }, - 2: { - description: false, - categories: false, - allFieldsValid: false - }, - 3: { - author: false, - copyrightHolder: false, - license: false, - allFieldsValid: false - } - } + type: 'start' } - - private inputChange = ( - event: ChangeEvent | ChangeEvent - ) => { - this.validateInputs(event.currentTarget.name, event.currentTarget.value) - - this.setState({ - [event.currentTarget.name]: event.currentTarget.value - }) + publishDataset = () => { + this.setState({ type: 'dataset' }) } - - private inputToArrayChange = ( - event: ChangeEvent | ChangeEvent - ) => { - this.validateInputs(event.currentTarget.name, event.currentTarget.value) - - this.setState({ - [event.currentTarget.name]: [event.currentTarget.value] - }) + publishContainer = () => { + this.setState({ type: 'container' }) } - - private next = () => { - let { currentStep } = this.state - const totalSteps = steps.length - - currentStep = - currentStep >= totalSteps - 1 ? totalSteps : currentStep + 1 - - ReactGA.event({ - category: 'Publish', - action: 'nextStep ' + currentStep - }) - - this.setState({ currentStep }) + publishAlgorithm = () => { + this.setState({ type: 'algorithm' }) } - - private prev = () => { - let { currentStep } = this.state - currentStep = currentStep <= 1 ? 1 : currentStep - 1 - this.setState({ currentStep }) + publishWorkflow = () => { + this.setState({ type: 'workflow' }) } - - private tryAgain = () => { - this.setState({ publishingError: '' }) - } - - private toStart = () => { - this.setState({ - name: '', - dateCreated: new Date().toISOString(), - description: '', - files: [], - price: 0, - author: '', - type: 'dataset' as AssetType, - license: '', - copyrightHolder: '', - categories: '', - isPublishing: false, - isPublished: false, - currentStep: 1 - }) - } - - private validateInputs = (name: string, value: string) => { - let hasContent = value.length > 0 - - // Setting state for all fields - if (hasContent) { - this.setState( - prevState => ({ - validationStatus: { - ...prevState.validationStatus, - [this.state.currentStep]: { - ...prevState.validationStatus[ - this.state.currentStep - ], - [name]: true - } - } - }), - this.runValidation - ) - } else { - this.setState( - prevState => ({ - validationStatus: { - ...prevState.validationStatus, - [this.state.currentStep]: { - ...prevState.validationStatus[ - this.state.currentStep - ], - [name]: false - } - } - }), - this.runValidation - ) - } - } - - private runValidation = () => { - let { validationStatus } = this.state - // - // Step 1 - // - if (validationStatus[1].name && validationStatus[1].files) { - this.setState(prevState => ({ - validationStatus: { - ...prevState.validationStatus, - 1: { - ...prevState.validationStatus[1], - allFieldsValid: true - } - } - })) - } else { - this.setState(prevState => ({ - validationStatus: { - ...prevState.validationStatus, - 1: { - ...prevState.validationStatus[1], - allFieldsValid: false - } - } - })) - } - - // - // Step 2 - // - if (validationStatus[2].description && validationStatus[2].categories) { - this.setState(prevState => ({ - validationStatus: { - ...prevState.validationStatus, - 2: { - ...prevState.validationStatus[2], - allFieldsValid: true - } - } - })) - } else { - this.setState(prevState => ({ - validationStatus: { - ...prevState.validationStatus, - 2: { - ...prevState.validationStatus[2], - allFieldsValid: false - } - } - })) - } - - // - // Step 3 - // - if ( - validationStatus[3].author && - validationStatus[3].copyrightHolder && - validationStatus[3].license - ) { - this.setState(prevState => ({ - validationStatus: { - ...prevState.validationStatus, - 3: { - ...prevState.validationStatus[3], - allFieldsValid: true - } - } - })) - } else { - this.setState(prevState => ({ - validationStatus: { - ...prevState.validationStatus, - 3: { - ...prevState.validationStatus[3], - allFieldsValid: false - } - } - })) - } - } - - private registerAsset = async (event: FormEvent) => { - event.preventDefault() - ReactGA.event({ - category: 'Publish', - action: 'registerAsset-start' - }) - this.setState({ - publishingError: '', - isPublishing: true - }) - const { ocean } = this.context - const account = await ocean.accounts.list() - const newAsset = { - // OEP-08 Attributes - // https://github.com/oceanprotocol/OEPs/tree/master/8 - base: Object.assign(AssetModel.base, { - name: this.state.name, - description: this.state.description, - dateCreated: new Date(this.state.dateCreated).toISOString(), - author: this.state.author, - license: this.state.license, - copyrightHolder: this.state.copyrightHolder, - files: this.state.files, - price: this.state.price, - type: this.state.type, - categories: [this.state.categories], - workExample: undefined, - inLanguage: undefined, - tags: '' - }), - curation: Object.assign(AssetModel.curation), - additionalInformation: Object.assign( - AssetModel.additionalInformation - ) - } - - try { - const asset = await this.context.ocean.assets.create( - newAsset, - account[0] - ) - this.setState({ - publishedDid: asset.id, - isPublished: true - }) - ReactGA.event({ - category: 'Publish', - action: 'registerAsset-end' + asset.id - }) - } catch (e) { - // make readable errors - Logger.log('error:', e) - this.setState({ - publishingError: e.message - }) - ReactGA.event({ - category: 'Publish', - action: 'registerAsset-error' + e.message - }) - } - this.setState({ - isPublishing: false - }) - } - public render() { return ( - - {(!this.context.isLogged || !this.context.isNile) && ( - +
+ {this.state.type !== 'start' && ( + )} - - - -
- {steps.map((step: any, index: number) => ( - - ))} - - + {this.state.type === 'start' && ( + + + + + + + )} +
) } } diff --git a/client/src/routes/Publish/loader.tsx b/client/src/routes/Publish/loader.tsx new file mode 100644 index 0000000..8ef4448 --- /dev/null +++ b/client/src/routes/Publish/loader.tsx @@ -0,0 +1,261 @@ +import React, { ChangeEvent, Component, FormEvent } from 'react' +import { Logger } from '@oceanprotocol/squid' +import Route from '../../components/templates/Route' +import Form from '../../components/atoms/Form/Form' +import AssetModel from '../../models/AssetModel' +import { User } from '../../context' +import Web3message from '../../components/organisms/Web3message' +import Step from './Step' +import Progress from './Progress' +import ReactGA from 'react-ga' +import dataPublishForm from '../../data/form-publish.json' + +interface LoaderState { + currentStep?: number + isPublishing?: boolean + isPublished?: boolean + publishedDid?: string + publishingError?: string + validationStatus?: any + [defaultsState: string]: any +} + +interface LoaderProps { + loadType: string +} + +class Loader extends Component { + public state = { + currentStep: 1, + isPublishing: false, + isPublished: false, + publishedDid: '', + publishingError: '', + validationStatus: ((dataPublishForm as any)[this.props.loadType]).validation, + ...((dataPublishForm as any)[this.props.loadType]).defaults + } + + private inputChange = ( + event: ChangeEvent | ChangeEvent + ) => { + this.validateInputs(event.currentTarget.name, event.currentTarget.value) + + this.setState({ + [event.currentTarget.name]: event.currentTarget.value + }) + } + + private inputToArrayChange = ( + event: ChangeEvent | ChangeEvent + ) => { + this.validateInputs(event.currentTarget.name, event.currentTarget.value) + + this.setState({ + [event.currentTarget.name]: [event.currentTarget.value] + }) + } + + private next = () => { + let { currentStep } = this.state + const totalSteps = ((dataPublishForm as any)[this.props.loadType]).steps.length + + currentStep = + currentStep >= totalSteps - 1 ? totalSteps : currentStep + 1 + + ReactGA.event({ + category: 'Publish', + action: 'nextStep ' + currentStep + }) + + this.setState({ currentStep }) + } + + private prev = () => { + let { currentStep } = this.state + currentStep = currentStep <= 1 ? 1 : currentStep - 1 + this.setState({ currentStep }) + } + + private tryAgain = () => { + this.setState({ publishingError: '' }) + } + + private toStart = () => { + this.setState({ + isPublishing: false, + isPublished: false, + currentStep: 1, + ...((dataPublishForm as any)[this.props.loadType]).defaults + }) + } + + private validateInputs = (name: string, value: string) => { + let hasContent = value && value.length > 0 + + // Setting state for all fields + if (hasContent) { + this.setState( + prevState => ({ + validationStatus: { + ...prevState.validationStatus, + [this.state.currentStep]: { + ...prevState.validationStatus[ + this.state.currentStep + ], + [name]: true + } + } + }), + this.runValidation + ) + } else { + this.setState( + prevState => ({ + validationStatus: { + ...prevState.validationStatus, + [this.state.currentStep]: { + ...prevState.validationStatus[ + this.state.currentStep + ], + [name]: false + } + } + }), + this.runValidation + ) + } + } + + private runValidation = () => { + let { validationStatus } = this.state + for (let step of Object.keys(validationStatus)) { + const { allFieldsValid, ...keysToCheck } = validationStatus[step] + if (Object.values(keysToCheck).every(item => item === true)) { + this.setState(prevState => ({ + validationStatus: { + ...prevState.validationStatus, + [step]: { + ...prevState.validationStatus[step], + allFieldsValid: true + } + } + })) + } else { + this.setState(prevState => ({ + validationStatus: { + ...prevState.validationStatus, + [step]: { + ...prevState.validationStatus[step], + allFieldsValid: false + } + } + })) + } + } + } + + private submitAction = async (event: FormEvent) => { + event.preventDefault() + ReactGA.event({ + category: 'Publish', + action: 'registerAsset-start' + }) + this.setState({ + publishingError: '', + isPublishing: true + }) + const { ocean } = this.context + const account = await ocean.accounts.list() + const newAsset = { + // OEP-08 Attributes + // https://github.com/oceanprotocol/OEPs/tree/master/8 + base: Object.assign(AssetModel.base, { + name: this.state.name, + description: this.state.description, + dateCreated: new Date(this.state.dateCreated).toISOString(), + author: this.state.author, + license: this.state.license, + copyrightHolder: this.state.copyrightHolder, + files: this.state.files, + price: this.state.price, + type: this.state.type, + categories: [this.state.categories], + workExample: undefined, + inLanguage: undefined, + tags: '' + }), + curation: Object.assign(AssetModel.curation), + additionalInformation: Object.assign( + AssetModel.additionalInformation + ) + } + + try { + const asset = await this.context.ocean.assets.create( + newAsset, + account[0] + ) + this.setState({ + publishedDid: asset.id, + isPublished: true + }) + ReactGA.event({ + category: 'Publish', + action: 'registerAsset-end' + asset.id + }) + } catch (e) { + // make readable errors + Logger.log('error:', e) + this.setState({ + publishingError: e.message + }) + ReactGA.event({ + category: 'Publish', + action: 'registerAsset-error' + e.message + }) + } + this.setState({ + isPublishing: false + }) + } + + public render() { + return ( + + {(!this.context.isLogged || !this.context.isNile) && ( + + )} + + + +
+ {((dataPublishForm as any)[this.props.loadType]).steps.map((step: any, index: number) => ( + + ))} + +
+ ) + } +} + +Loader.contextType = User +export default Loader