Merge pull request #16 from oceanprotocol/feature/files

Adding multiple files UI

package-lock.json

@@ -1164,6 +1164,11 @@
       "integrity": "sha512-ui3WwXmjTaY73fOQ3/m3nnajU/Orhi6cEu5rzX+BrAAJxa3eITXZ5ch9suPqtM03OWhAHhPSyBGCN4UKoxO20Q==",
       "dev": true
     },
+    "@types/is-url": {
+      "version": "1.2.28",
+      "resolved": "https://registry.npmjs.org/@types/is-url/-/is-url-1.2.28.tgz",
+      "integrity": "sha1-kU2r1QVG2bAUKAbkLHK8fCt+B4c="
+    },
     "@types/jest": {
       "version": "24.0.0",
       "resolved": "https://registry.npmjs.org/@types/jest/-/jest-24.0.0.tgz",
@@ -1247,6 +1252,14 @@
         "@types/react-router": "*"
       }
     },
+    "@types/react-transition-group": {
+      "version": "2.0.15",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-2.0.15.tgz",
+      "integrity": "sha512-S0QnNzbHoWXDbKBl/xk5dxA4FT+BNlBcI3hku991cl8Cz3ytOkUMcCRtzdX11eb86E131bSsQqy5WrPCdJYblw==",
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/tapable": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/@types/tapable/-/tapable-1.0.2.tgz",
@@ -5616,6 +5629,14 @@
         "utila": "~0.4"
       }
     },
+    "dom-helpers": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-3.4.0.tgz",
+      "integrity": "sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==",
+      "requires": {
+        "@babel/runtime": "^7.1.2"
+      }
+    },
     "dom-serializer": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.1.0.tgz",
@@ -9865,6 +9886,11 @@
       "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
       "integrity": "sha1-5HnICFjfDBsR3dppQPlgEfzaSpo="
     },
+    "is-url": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/is-url/-/is-url-1.2.4.tgz",
+      "integrity": "sha512-ITvGim8FhRiYe4IQ5uHSkj7pVaPDrCTkNd3yq3cV7iZAcJdHTUMPMEHcqSOy9xZ9qFenQCvi+2wjH9a1nXqHww=="
+    },
     "is-utf8": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/is-utf8/-/is-utf8-0.2.1.tgz",
@@ -16571,6 +16597,11 @@
         "react-side-effect": "^1.1.0"
       }
     },
+    "react-lifecycles-compat": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
+    },
     "react-router": {
       "version": "4.3.1",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-4.3.1.tgz",
@@ -16938,6 +16969,17 @@
         "shallowequal": "^1.0.1"
       }
     },
+    "react-transition-group": {
+      "version": "2.5.3",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.5.3.tgz",
+      "integrity": "sha512-2DGFck6h99kLNr8pOFk+z4Soq3iISydwOFeeEVPjTN6+Y01CmvbWmnN02VuTWyFdnRtIDPe+wy2q6Ui8snBPZg==",
+      "requires": {
+        "dom-helpers": "^3.3.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2",
+        "react-lifecycles-compat": "^3.0.4"
+      }
+    },
     "read-pkg": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-2.0.0.tgz",

package.json

@@ -17,14 +17,18 @@
   "dependencies": {
     "@oceanprotocol/art": "^2.2.0",
     "@oceanprotocol/squid": "^0.2.8",
+    "@types/is-url": "^1.2.28",
     "@types/react-helmet": "^5.0.8",
+    "@types/react-transition-group": "^2.0.15",
     "classnames": "^2.2.6",
     "eslint": "^5.6.0",
+    "is-url": "^1.2.4",
     "query-string": "^6.2.0",
     "react": "^16.8.1",
     "react-dom": "^16.8.1",
     "react-helmet": "^5.2.0",
     "react-router-dom": "^4.3.1",
+    "react-transition-group": "^2.5.3",
     "slugify": "^1.3.4",
     "web3": "^1.0.0-beta.43"
   },

src/Routes.tsx

@@ -5,7 +5,7 @@ import About from './routes/About'
 import Details from './routes/Details'
 import Home from './routes/Home'
 import NotFound from './routes/NotFound'
-import Publish from './routes/Publish'
+import Publish from './routes/Publish/'
 import Search from './routes/Search'
 import Styleguide from './routes/Styleguide'
 

src/components/atoms/Form/Input.tsx

@@ -22,6 +22,7 @@ interface InputProps {
     onChange?: any
     rows?: number
     group?: any
+    multiple?: boolean
 }
 
 interface InputState {
@@ -150,7 +151,14 @@ export default class Input extends PureComponent<InputProps, InputState> {
     }
 
     public render() {
-        const { name, label, required, help, additionalComponent } = this.props
+        const {
+            name,
+            label,
+            required,
+            help,
+            additionalComponent,
+            multiple
+        } = this.props
 
         return (
             <Row>
@@ -162,6 +170,8 @@ export default class Input extends PureComponent<InputProps, InputState> {
 
                 {help && <Help>{help}</Help>}
 
+                {multiple && 'hello'}
+
                 {additionalComponent && additionalComponent}
             </Row>
         )

src/data/form-publish.json

@@ -7,7 +7,14 @@
       "placeholder": "i.e. My cool data set",
       "type": "text",
       "required": true,
-      "help": "Help me"
+      "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."
     },
     "description": {
       "label": "Description",
@@ -16,11 +23,11 @@
       "required": true,
       "rows": 5
     },
-    "price": {
+    "type": {
-      "label": "Price",
+      "label": "Type",
-      "placeholder": "i.e. 1000",
+      "type": "select",
-      "type": "number",
+      "required": true,
-      "required": true
+      "options": ["Data set", "Algorithm", "Container", "Workflow", "Other"]
     },
     "author": {
       "label": "Author",
@@ -28,18 +35,6 @@
       "type": "text",
       "required": true
     },
-    "files": {
-      "label": "Files",
-      "placeholder": "i.e. https://file.com/file.json",
-      "type": "text",
-      "required": true
-    },
-    "type": {
-      "label": "Type",
-      "type": "select",
-      "required": true,
-      "options": ["Data set", "Algorithm", "Container", "Workflow", "Other"]
-    },
     "license": {
       "label": "License",
       "type": "select",

src/routes/Publish/Files/Item.module.scss

@@ -0,0 +1,34 @@
+@import '../../../styles/variables';
+
+.linkUrl {
+    font-size: $font-size-mini;
+    display: block;
+    font-family: $font-family-base;
+
+    // TODO: truncate long urls with ellipsis
+}
+
+.remove {
+    margin: 0;
+    padding: 0;
+    appearance: none;
+    border: 0;
+    background: none;
+    font-family: $font-family-button;
+    font-size: $font-size-h4;
+    color: $brand-grey-light;
+    line-height: $line-height;
+    cursor: pointer;
+    margin-left: $spacer / 2;
+    display: inline-block;
+    vertical-align: middle;
+    position: absolute;
+    top: $spacer / 4;
+    right: 0;
+    transition: .2s ease-out;
+
+    &:hover,
+    &:focus {
+        opacity: .7;
+    }
+}

src/routes/Publish/Files/Item.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import styles from './Item.module.scss'
+
+const Item = ({ item, removeItem }: { item: string; removeItem: any }) => (
+    <li>
+        <a href={item}>{item}</a>
+        <button
+            type="button"
+            className={styles.remove}
+            title="Remove item"
+            onClick={removeItem}
+        >
+            &times;
+        </button>
+    </li>
+)
+
+export default Item

src/routes/Publish/Files/ItemForm.module.scss

@@ -0,0 +1,16 @@
+@import '../../../styles/variables';
+
+.itemForm {
+    margin-top: $spacer / 2;
+    padding-left: $spacer / 2;
+
+    button {
+        margin-top: -($spacer * 2);
+    }
+}
+
+.error {
+    font-size: $font-size-small;
+    color: $red;
+    margin-left: $spacer / 4;
+}

src/routes/Publish/Files/ItemForm.tsx

@@ -0,0 +1,90 @@
+import React, { PureComponent } from 'react'
+import isUrl from 'is-url'
+import Input from '../../../components/atoms/Form/Input'
+import Button from '../../../components/atoms/Button'
+import styles from './ItemForm.module.scss'
+
+interface ItemFormProps {
+    addItem: any
+    placeholder: string
+}
+
+interface ItemFormStates {
+    url: string
+    hasError: boolean
+    noUrl: boolean
+}
+
+export default class ItemForm extends PureComponent<
+    ItemFormProps,
+    ItemFormStates
+> {
+    public state: ItemFormStates = {
+        url: '',
+        hasError: false,
+        noUrl: false
+    }
+
+    public handleSubmit = (e: Event) => {
+        e.preventDefault()
+
+        const { url } = this.state
+
+        // return when required fields are empty, and url value is no url
+        // Can't use browser validation cause we are in a form within a form
+        if (!url) {
+            this.setState({ hasError: true })
+            return
+        }
+
+        if (url && !isUrl(url)) {
+            this.setState({ noUrl: true })
+            return
+        }
+
+        this.props.addItem(url)
+    }
+
+    public onChangeUrl = (e: React.FormEvent<HTMLInputElement>) => {
+        this.setState({ url: e.currentTarget.value })
+        this.clearErrors()
+    }
+
+    public clearErrors() {
+        if (this.state.hasError) this.setState({ hasError: false })
+        if (this.state.noUrl) this.setState({ noUrl: true })
+    }
+
+    public render() {
+        const { url, hasError, noUrl } = this.state
+
+        return (
+            <div className={styles.itemForm}>
+                <Input
+                    label="Url"
+                    name="url"
+                    required
+                    type="url"
+                    placeholder={this.props.placeholder}
+                    value={url}
+                    onChange={this.onChangeUrl}
+                />
+
+                <Button onClick={(e: Event) => this.handleSubmit(e)}>
+                    Add File
+                </Button>
+
+                {hasError && (
+                    <span className={styles.error}>
+                        Please fill in all required fields.
+                    </span>
+                )}
+                {noUrl && (
+                    <span className={styles.error}>
+                        Please enter a valid URL.
+                    </span>
+                )}
+            </div>
+        )
+    }
+}

src/routes/Publish/Files/index.module.scss

@@ -0,0 +1,31 @@
+@import '../../../styles/variables';
+
+.newItems {
+    margin-top: $spacer / 2;
+}
+
+.itemsList {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    margin-bottom: $spacer / 2;
+    font-family: $font-family-button;
+    color: $brand-grey-light;
+    border-bottom: 1px solid $brand-grey-lighter;
+
+    li {
+        border-top: 1px solid $brand-grey-lighter;
+        padding: $spacer / 3 $spacer / 2 $spacer / 3 $spacer / 2;
+        position: relative;
+        display: block;
+        margin: 0;
+
+        &:before {
+            display: none;
+        }
+    }
+
+    a {
+        color: $brand-grey;
+    }
+}

src/routes/Publish/Files/index.tsx

@@ -0,0 +1,102 @@
+import React, { PureComponent } from 'react'
+import { CSSTransition, TransitionGroup } from 'react-transition-group'
+import Button from '../../../components/atoms/Button'
+import Help from '../../../components/atoms/Form/Help'
+import ItemForm from './ItemForm'
+import Item from './Item'
+import styles from './index.module.scss'
+
+interface FilesProps {
+    files: string[]
+    placeholder: string
+    help?: string
+    name: string
+    onChange: any
+    // resetForm: any
+}
+
+interface FilesStates {
+    isFormShown: boolean
+}
+
+export default class Files extends PureComponent<FilesProps, FilesStates> {
+    public state: FilesStates = {
+        isFormShown: false
+    }
+
+    public toggleForm = (e: Event) => {
+        e.preventDefault()
+
+        this.setState({ isFormShown: !this.state.isFormShown })
+    }
+
+    public addItem = (value: string) => {
+        this.props.files.push(value)
+        // this.props.resetForm()
+        this.setState({ isFormShown: !this.state.isFormShown })
+    }
+
+    public removeItem = (index: number) => {
+        this.props.files.splice(index, 1)
+    }
+
+    public render() {
+        const { isFormShown } = this.state
+        const { files, help, placeholder, name, onChange } = this.props
+
+        return (
+            <>
+                {help && <Help>{help}</Help>}
+
+                {/* Use hidden input to collect files */}
+                <input
+                    type="hidden"
+                    name={name}
+                    value={files}
+                    onChange={onChange}
+                />
+
+                <div className={styles.newItems}>
+                    {files.length > 0 && (
+                        <TransitionGroup
+                            component="ul"
+                            className={styles.itemsList}
+                        >
+                            {files.map((item: string, index: number) => (
+                                <CSSTransition
+                                    key={index}
+                                    timeout={400}
+                                    classNames="fade"
+                                >
+                                    <Item
+                                        item={item}
+                                        removeItem={() =>
+                                            this.removeItem(index)
+                                        }
+                                    />
+                                </CSSTransition>
+                            ))}
+                        </TransitionGroup>
+                    )}
+
+                    <Button link onClick={this.toggleForm}>
+                        {isFormShown ? '- Cancel' : '+ Add a file'}
+                    </Button>
+
+                    <CSSTransition
+                        classNames="grow"
+                        in={isFormShown}
+                        timeout={200}
+                        unmountOnExit
+                        onExit={() => this.setState({ isFormShown: false })}
+                    >
+                        <ItemForm
+                            placeholder={placeholder}
+                            addItem={this.addItem}
+                        />
+                    </CSSTransition>
+                </div>
+            </>
+        )
+    }
+}

src/routes/Publish/index.tsx

@@ -1,14 +1,17 @@
 import React, { ChangeEvent, Component, FormEvent } from 'react'
 import { Logger } from '@oceanprotocol/squid'
-import Route from '../components/templates/Route'
+import Route from '../../components/templates/Route'
-import Button from '../components/atoms/Button'
+import Button from '../../components/atoms/Button'
-import Form from '../components/atoms/Form/Form'
+import Form from '../../components/atoms/Form/Form'
-import Input from '../components/atoms/Form/Input'
+import Input from '../../components/atoms/Form/Input'
-import { User } from '../context/User'
+import Label from '../../components/atoms/Form/Label'
-import AssetModel from '../models/AssetModel'
+import Row from '../../components/atoms/Form/Row'
-import Web3message from '../components/Web3message'
+import { User } from '../../context/User'
+import AssetModel from '../../models/AssetModel'
+import Web3message from '../../components/Web3message'
+import Files from './Files/'
 
-import form from '../data/form-publish.json'
+import form from '../../data/form-publish.json'
 
 type AssetType = 'dataset' | 'algorithm' | 'container' | 'workflow' | 'other'
 
@@ -35,13 +38,13 @@ class Publish extends Component<{}, PublishState> {
         name: '',
         dateCreated: new Date(),
         description: '',
-        files: [''],
+        files: [],
         price: 0,
         author: '',
         type: 'dataset' as AssetType,
         license: '',
         copyrightHolder: '',
-        categories: [''],
+        categories: [],
         isPublishing: false,
         isPublished: false,
         publishedDid: '',
@@ -56,6 +59,23 @@ class Publish extends Component<{}, PublishState> {
                 onChange = this.inputToArrayChange
             }
 
+            if (key === 'files') {
+                return (
+                    <Row key={key}>
+                        <Label htmlFor={key} required>
+                            {value.label}
+                        </Label>
+                        <Files
+                            placeholder={value.placeholder}
+                            name={value.name}
+                            help={value.help}
+                            files={this.state.files}
+                            onChange={onChange}
+                        />
+                    </Row>
+                )
+            }
+
             return (
                 <Input
                     key={key}
@@ -77,7 +97,7 @@ class Publish extends Component<{}, PublishState> {
         event: ChangeEvent<HTMLInputElement> | ChangeEvent<HTMLSelectElement>
     ) => {
         this.setState({
-            [event.target.name]: event.target.value
+            [event.currentTarget.name]: event.currentTarget.value
         })
     }
 
@@ -85,7 +105,7 @@ class Publish extends Component<{}, PublishState> {
         event: ChangeEvent<HTMLInputElement> | ChangeEvent<HTMLSelectElement>
     ) => {
         this.setState({
-            [event.target.name]: [event.target.value]
+            [event.currentTarget.name]: [event.currentTarget.value]
         })
     }
 
@@ -143,6 +163,7 @@ class Publish extends Component<{}, PublishState> {
                 AssetModel.additionalInformation
             )
         }
+
         try {
             const asset = await this.context.ocean.registerAsset(
                 newAsset,

src/styles/_animations.scss

@@ -0,0 +1,43 @@
+.fade {
+    &-enter {
+        opacity: .01;
+    }
+
+    &-enter-active {
+        opacity: 1;
+        transition: opacity 400ms ease-out;
+    }
+
+    &-exit {
+        opacity: 1;
+    }
+
+    &-exit-active {
+        opacity: .01;
+        transition: opacity 400ms ease-in;
+    }
+}
+
+.grow {
+    &-enter {
+        opacity: .01;
+        max-height: 0;
+    }
+
+    &-enter-active {
+        opacity: 1;
+        max-height: 500px;
+        transition: 200ms ease-out;
+    }
+
+    &-exit {
+        opacity: 1;
+        max-height: 500px;
+    }
+
+    &-exit-active {
+        opacity: .01;
+        max-height: 0;
+        transition: 200ms ease-in;
+    }
+}

src/styles/global.scss

@@ -1,6 +1,7 @@
 // stylelint-disable selector-no-qualifying-type, declaration-no-important, selector-no-vendor-prefix
 
 @import 'variables';
+@import 'animations';
 
 *,
 *:before,