code fixes

client/src/components/atoms/Button.tsx

@@ -1,4 +1,4 @@
-import React, { PureComponent } from 'react'
+import React from 'react'
 import { Link } from 'react-router-dom'
 import cx from 'classnames'
 import styles from './Button.module.scss'
@@ -15,39 +15,34 @@ interface ButtonProps {
     name?: string
 }
 
-export default class Button extends PureComponent<ButtonProps, any> {
+function getClasses(primary: boolean | undefined, link: boolean | undefined) {
-    public render() {
+    return primary ? styles.buttonPrimary : link ? styles.link : styles.button
-        let classes
-        const {
-            primary,
-            link,
-            href,
-            children,
-            className,
-            to,
-            ...props
-        } = this.props
-
-        if (primary) {
-            classes = styles.buttonPrimary
-        } else if (link) {
-            classes = styles.link
-        } else {
-            classes = styles.button
-        }
-
-        return to ? (
-            <Link to={to} className={cx(classes, className)} {...props}>
-                {children}
-            </Link>
-        ) : href ? (
-            <a href={href} className={cx(classes, className)} {...props}>
-                {children}
-            </a>
-        ) : (
-            <button className={cx(classes, className)} {...props}>
-                {children}
-            </button>
-        )
-    }
 }
+
+const Button = ({
+    primary,
+    link,
+    href,
+    children,
+    className,
+    to,
+    ...props
+}: ButtonProps) => {
+    const classes = getClasses(primary, link)
+
+    return to ? (
+        <Link to={to} className={cx(classes, className)} {...props}>
+            {children}
+        </Link>
+    ) : href ? (
+        <a href={href} className={cx(classes, className)} {...props}>
+            {children}
+        </a>
+    ) : (
+        <button className={cx(classes, className)} {...props}>
+            {children}
+        </button>
+    )
+}
+
+export default Button

client/src/routes/Publish/Files/Ipfs/index.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { render, fireEvent, act } from '@testing-library/react'
+import { render } from '@testing-library/react'
 import Ipfs from '.'
 
 const addFile = jest.fn()

client/src/routes/Publish/Files/index.test.tsx

@@ -34,35 +34,6 @@ const mockResponse = {
     }
 }
 
-function flushPromises(ui: any, container: any) {
-    return new Promise(resolve =>
-        setImmediate(() => {
-            render(ui, { container })
-            resolve(container)
-        })
-    )
-}
-
-function dispatchEvt(node: any, type: string, data: any) {
-    const event = new Event(type, { bubbles: true })
-    Object.assign(event, data)
-    fireEvent(node, event)
-}
-
-function mockData(files: any) {
-    return {
-        dataTransfer: {
-            files,
-            items: files.map((file: any) => ({
-                kind: 'file',
-                type: file.type,
-                getAsFile: () => file
-            })),
-            types: ['Files']
-        }
-    }
-}
-
 const renderComponent = () =>
     render(
         <Files

client/src/routes/Publish/Files/index.tsx

@@ -10,6 +10,7 @@ import styles from './index.module.scss'
 
 import { serviceUri } from '../../../config'
 import cleanupContentType from '../../../utils/cleanupContentType'
+import shortid from 'shortid'
 
 export interface File {
     url: string
@@ -42,6 +43,19 @@ interface FilesStates {
     isIpfsFormShown: boolean
 }
 
+const buttons = [
+    {
+        id: 'url',
+        title: '+ From URL',
+        titleActive: '- Cancel'
+    },
+    {
+        id: 'ipfs',
+        title: '+ Add to IPFS',
+        titleActive: '- Cancel'
+    }
+]
+
 export default class Files extends PureComponent<FilesProps, FilesStates> {
     public state: FilesStates = {
         isFormShown: false,
@@ -55,19 +69,13 @@ export default class Files extends PureComponent<FilesProps, FilesStates> {
         this.signal.cancel()
     }
 
-    private toggleForm = (e: Event) => {
+    private toggleForm = (e: Event, form: string) => {
         e.preventDefault()
-        this.setState({
-            isFormShown: !this.state.isFormShown,
-            isIpfsFormShown: false
-        })
-    }
 
-    private toggleIpfsForm = (e: Event) => {
-        e.preventDefault()
         this.setState({
-            isIpfsFormShown: !this.state.isIpfsFormShown,
+            isFormShown: form === 'url' ? !this.state.isFormShown : false,
-            isFormShown: false
+            isIpfsFormShown:
+                form === 'ipfs' ? !this.state.isIpfsFormShown : false
         })
     }
 
@@ -90,9 +98,12 @@ export default class Files extends PureComponent<FilesProps, FilesStates> {
             const { contentLength, contentType, found } = response.data.result
 
             if (contentLength) file.contentLength = contentLength
-            if (contentType) file.contentType = contentType
+            if (contentType) {
-            if (contentType) file.compression = cleanupContentType(contentType)
+                file.contentType = contentType
-            if (found) file.found = found
+                file.compression = cleanupContentType(contentType)
+            }
+
+            file.found = found
 
             return file
         } catch (error) {
@@ -174,13 +185,23 @@ export default class Files extends PureComponent<FilesProps, FilesStates> {
                         </ul>
                     )}
 
-                    <Button link onClick={this.toggleForm}>
+                    {buttons.map(button => {
-                        {isFormShown ? '- Cancel' : '+ From URL'}
+                        const isActive =
-                    </Button>
+                            (button.id === 'url' && isFormShown) ||
+                            (button.id === 'ipfs' && isIpfsFormShown)
 
-                    <Button link onClick={this.toggleIpfsForm}>
+                        return (
-                        {isIpfsFormShown ? '- Cancel' : '+ Add to IPFS'}
+                            <Button
-                    </Button>
+                                key={shortid.generate()}
+                                link
+                                onClick={(e: Event) =>
+                                    this.toggleForm(e, button.id)
+                                }
+                            >
+                                {isActive ? button.titleActive : button.title}
+                            </Button>
+                        )
+                    })}
 
                     {isFormShown && (
                         <ItemForm