add logic for update/retire

client/src/components/atoms/Form/Input.tsx

@@ -30,6 +30,7 @@ interface InputProps {
     rows?: number
     group?: any
     multiple?: boolean
+    disabled?: boolean
 }
 
 interface InputState {
@@ -79,7 +80,8 @@ export default class Input extends PureComponent<InputProps, InputState> {
             name,
             required,
             onChange,
-            value
+            value,
+            disabled
         } = this.props
 
         const wrapClass = this.inputWrapClasses()
@@ -97,6 +99,7 @@ export default class Input extends PureComponent<InputProps, InputState> {
                             onBlur={this.toggleFocus}
                             onChange={onChange}
                             value={value}
+                            disabled={disabled}
                         >
                             <option value="">---</option>
                             {options &&
@@ -139,6 +142,7 @@ export default class Input extends PureComponent<InputProps, InputState> {
                                         value={slugify(option, {
                                             lower: true
                                         })}
+                                        disabled={disabled}
                                     />
                                     <label
                                         className={styles.radioLabel}
@@ -163,6 +167,7 @@ export default class Input extends PureComponent<InputProps, InputState> {
                             onBlur={this.toggleFocus}
                             id={name}
                             name={name}
+                            disabled={disabled}
                         />
                     </div>
                 )

client/src/routes/Details/AssetDetails.tsx

@@ -1,12 +1,14 @@
 import React, { PureComponent, ChangeEvent } from 'react'
 import { Link } from 'react-router-dom'
 import Moment from 'react-moment'
-import { DDO, MetaData, File } from '@oceanprotocol/squid'
+import { DDO, MetaData, File, Logger } from '@oceanprotocol/squid'
 import Input from '../../components/atoms/Form/Input'
 import Markdown from '../../components/atoms/Markdown'
 import styles from './AssetDetails.module.scss'
 import AssetFilesDetails from './AssetFilesDetails'
 import Button from '../../components/atoms/Button'
+import Spinner from '../../components/atoms/Spinner'
+import { serviceHost, servicePort, serviceScheme } from '../../config'
 
 const { steps } = require('../../data/form-publish.json') // eslint-disable-line
 
@@ -22,6 +24,7 @@ interface AssetDetailsState {
     description?: string
     copyrightHolder?: string
     categories?: string
+    feedback?: string
 }
 
 export default class AssetDetails extends PureComponent<
@@ -30,7 +33,12 @@ export default class AssetDetails extends PureComponent<
 > {
     public state = {
         isEditMode: false,
-        isLoading: false
+        isLoading: false,
+        feedback: '',
+        dateCreated: this.props.metadata.base.dateCreated,
+        description: this.props.metadata.base.description,
+        copyrightHolder: this.props.metadata.base.copyrightHolder,
+        categories: this.props.metadata.base.categories
     }
 
     private inputChange = (
@@ -45,22 +53,153 @@ export default class AssetDetails extends PureComponent<
         this.setState({ isEditMode: !this.state.isEditMode })
     }
 
-    private updateAsset = () => {
+    private fetch = async (method: string, body: any) => {
-        this.setState({ isLoading: true })
+        try {
-        // TODO: update asset metadata
+            const response = await fetch(
+                `${serviceScheme}://${serviceHost}:${servicePort}/api/v1/ddo/${
+                    this.props.ddo
+                }`,
+                {
+                    method,
+                    body: JSON.stringify({ body }),
+                    headers: { 'Content-Type': 'application/json' }
+                }
+            )
+            const json = await response.json()
+
+            if (json && json.status === 'error') {
+                this.setState({ feedback: json.message })
+            }
+        } catch (error) {
+            Logger.error(error)
+            this.setState({ feedback: error.message })
+        }
     }
 
-    private retireAsset = () => {
+    private updateAsset = async () => {
-        this.setState({ isLoading: true })
+        this.setState({ isLoading: true, feedback: 'Updating asset...' })
-        // TODO: retire asset
+
+        const {
+            dateCreated,
+            description,
+            copyrightHolder,
+            categories
+        } = this.state
+
+        const body = {
+            metadata: {
+                base: {
+                    dateCreated,
+                    description,
+                    copyrightHolder,
+                    categories
+                }
+            },
+            signature: ''
+        }
+
+        await this.fetch('PUT', body)
+        this.setState({ isLoading: false })
     }
 
-export function datafilesLine(files: File[]) {
+    private retireAsset = async () => {
-    if (files.length === 1) {
+        this.setState({ isLoading: true, feedback: 'Retiring asset...' })
-        return <span>{files.length} data file</span>
+
+        const body = {
+            signature: ''
+        }
+
+        await this.fetch('DELETE', body)
+        this.setState({ isLoading: false })
     }
-    return <span>{files.length} data files</span>
+
-}
+    private renderDatafilesLine = (files: any) =>
+        files.length === 1 ? (
+            <span>{files.length} data file</span>
+        ) : (
+            <span>{files.length} data files</span>
+        )
+
+    private Date = ({ value }: { value: string }) =>
+        this.state.isEditMode ? (
+            <Input
+                name={'dateCreated'}
+                label={steps[1].fields.dateCreated.label}
+                placeholder={steps[1].fields.dateCreated.placeholder}
+                required={steps[1].fields.dateCreated.required}
+                type={steps[1].fields.dateCreated.type}
+                onChange={this.inputChange}
+                value={value}
+                disabled={this.state.isLoading}
+            />
+        ) : (
+            <Moment date={value} format="L" interval={0} />
+        )
+
+    private Category = ({ value }: { value: string }) =>
+        this.state.isEditMode ? (
+            <Input
+                name={'categories'}
+                label={steps[1].fields.categories.label}
+                placeholder={steps[1].fields.categories.placeholder}
+                required={steps[1].fields.categories.required}
+                type={steps[1].fields.categories.type}
+                onChange={this.inputChange}
+                options={steps[1].fields.categories.options}
+                value={value}
+                disabled={this.state.isLoading}
+            />
+        ) : (
+            // TODO: Make this link to search for respective category
+            <Link to={`/search?text=${value}`}>{value}</Link>
+        )
+
+    private Description = ({ value }: { value: string }) =>
+        this.state.isEditMode ? (
+            <Input
+                name={'description'}
+                label={steps[1].fields.description.label}
+                placeholder={steps[1].fields.description.placeholder}
+                required={steps[1].fields.description.required}
+                type={steps[1].fields.description.type}
+                onChange={this.inputChange}
+                rows={10}
+                value={value}
+                disabled={this.state.isLoading}
+            />
+        ) : (
+            <Markdown text={value} className={styles.description} />
+        )
+
+    private MetadataActions = () => (
+        <div className={styles.metadataActions}>
+            {this.state.isEditMode ? (
+                this.state.isLoading ? (
+                    <Spinner message={this.state.feedback} />
+                ) : (
+                    <>
+                        <Button primary onClick={this.updateAsset}>
+                            Save Changes
+                        </Button>
+
+                        {this.state.feedback !== '' && (
+                            <div>{this.state.feedback}</div>
+                        )}
+                    </>
+                )
+            ) : (
+                <>
+                    <Button link onClick={this.toggleEditMode}>
+                        Edit Metadata
+                    </Button>
+
+                    <Button link onClick={this.retireAsset}>
+                        Retire Asset
+                    </Button>
+                </>
+            )}
+        </div>
+    )
 
 export default class AssetDetails extends PureComponent<AssetDetailsProps> {
     public render() {
@@ -82,75 +221,20 @@ export default class AssetDetails extends PureComponent<AssetDetailsProps> {
                                 base.datePublished
                             }`}
                         >
-                            <Moment
+                            <this.Date value={base.dateCreated} />
-                                date={base.dateCreated}
-                                format="L"
-                                interval={0}
-                            />
                         </span>
 
-                        {base.categories &&
+                        {base.categories && (
-                            (this.state.isEditMode ? (
+                            <this.Category value={base.categories[0]} />
-                                <Input
+                        )}
-                                    name={Object.keys(steps[1].fields)[1]}
-                                    label={steps[1].fields.categories.label}
-                                    placeholder={
-                                        steps[1].fields.categories.placeholder
-                                    }
-                                    required={
-                                        steps[1].fields.categories.required
-                                    }
-                                    type={steps[1].fields.categories.type}
-                                    onChange={this.inputChange}
-                                    options={steps[1].fields.categories.options}
-                                    value={base.categories[0]}
-                                />
-                            ) : (
-                                // TODO: Make this link to search for respective category
-                                <Link to={`/search?text=${base.categories[0]}`}>
-                                    {base.categories[0]}
-                                </Link>
-                            ))}
 
-                        {base.files && datafilesLine(base.files)}
+                        {base.files && this.renderDatafilesLine(base.files)}
                     </div>
                 </aside>
 
-                {this.state.isEditMode ? (
+                <this.Description value={base.description} />
-                    <Input
-                        name={Object.keys(steps[1].fields)[0]}
-                        label={steps[1].fields.description.label}
-                        placeholder={steps[1].fields.description.placeholder}
-                        required={steps[1].fields.description.required}
-                        type={steps[1].fields.description.type}
-                        onChange={this.inputChange}
-                        rows={10}
-                        value={base.description}
-                    />
-                ) : (
-                    <Markdown
-                        text={base.description}
-                        className={styles.description}
-                    />
-                )}
 
-                <div className={styles.metadataActions}>
+                <this.MetadataActions />
-                    {this.state.isEditMode ? (
-                        <Button primary onClick={this.toggleEditMode}>
-                            Save Changes
-                        </Button>
-                    ) : (
-                        <>
-                            <Button link onClick={this.toggleEditMode}>
-                                Edit Metadata
-                            </Button>
-
-                            <Button link onClick={this.retireAsset}>
-                                Retire Asset
-                            </Button>
-                        </>
-                    )}
-                </div>
 
                 <ul className={styles.meta}>
                     <li>

client/src/routes/Publish/index.tsx

@@ -1,5 +1,6 @@
 import React, { ChangeEvent, Component, FormEvent } from 'react'
 import { Logger } from '@oceanprotocol/squid'
+import ReactGA from 'react-ga'
 import Route from '../../components/templates/Route'
 import Form from '../../components/atoms/Form/Form'
 import AssetModel from '../../models/AssetModel'
@@ -7,7 +8,6 @@ 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'