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,10 +15,11 @@ interface ButtonProps {
     name?: string
 }
 
-export default class Button extends PureComponent<ButtonProps, any> {
-    public render() {
-        let classes
-        const {
+function getClasses(primary: boolean | undefined, link: boolean | undefined) {
+    return primary ? styles.buttonPrimary : link ? styles.link : styles.button
+}
+
+const Button = ({
     primary,
     link,
     href,
@@ -26,15 +27,8 @@ export default class Button extends PureComponent<ButtonProps, any> {
     className,
     to,
     ...props
-        } = this.props
-
-        if (primary) {
-            classes = styles.buttonPrimary
-        } else if (link) {
-            classes = styles.link
-        } else {
-            classes = styles.button
-        }
+}: ButtonProps) => {
+    const classes = getClasses(primary, link)
 
     return to ? (
         <Link to={to} className={cx(classes, className)} {...props}>
@@ -50,4 +44,5 @@ export default class Button extends PureComponent<ButtonProps, any> {
         </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: false
+            isFormShown: form === 'url' ? !this.state.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) file.compression = cleanupContentType(contentType)
-            if (found) file.found = found
+            if (contentType) {
+                file.contentType = contentType
+                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}>
-                        {isFormShown ? '- Cancel' : '+ From URL'}
-                    </Button>
+                    {buttons.map(button => {
+                        const isActive =
+                            (button.id === 'url' && isFormShown) ||
+                            (button.id === 'ipfs' && isIpfsFormShown)
 
-                    <Button link onClick={this.toggleIpfsForm}>
-                        {isIpfsFormShown ? '- Cancel' : '+ Add to IPFS'}
+                        return (
+                            <Button
+                                key={shortid.generate()}
+                                link
+                                onClick={(e: Event) =>
+                                    this.toggleForm(e, button.id)
+                                }
+                            >
+                                {isActive ? button.titleActive : button.title}
                             </Button>
+                        )
+                    })}
 
                     {isFormShown && (
                         <ItemForm