switch to axios for file publish

client/package-lock.json

@@ -1315,17 +1315,6 @@
       "resolved": "https://registry.npmjs.org/@oceanprotocol/typographies/-/typographies-0.1.0.tgz",
       "integrity": "sha512-kMsZsqvzpz9KzVbVZzllwhPoIC3zbqsdRrClagZL/C2PHzgLrKGC1kYn3gPt0RMIFg9ZjrwieKaxlgIK9i9zzg=="
     },
-    "@react-mock/fetch": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/@react-mock/fetch/-/fetch-0.3.0.tgz",
-      "integrity": "sha512-q1tqyrqeW4+J0R/rRghK86VG21fFFIMli1kxhi2z9wLAko10YNHB3UuI4fnXc+/kbjne0yVxyTp0s1xdzv+YzA==",
-      "dev": true,
-      "requires": {
-        "@babel/runtime": "^7.1.2",
-        "fetch-mock": "^7.0.7",
-        "lodash": "^4.17.11"
-      }
-    },
     "@react-mock/state": {
       "version": "0.1.8",
       "resolved": "https://registry.npmjs.org/@react-mock/state/-/state-0.1.8.tgz",
@@ -2712,31 +2701,6 @@
       "integrity": "sha512-eqj0hVcJUR57/Ug2zE1Yswsw4LhuqqHhD+8v120T1cl3kjg76QwtyBrdIk4WVwK+lAhBJVYCd/v+4nc4y+8JsA==",
       "dev": true
     },
-    "babel-polyfill": {
-      "version": "6.26.0",
-      "resolved": "https://registry.npmjs.org/babel-polyfill/-/babel-polyfill-6.26.0.tgz",
-      "integrity": "sha1-N5k3q8Z9eJWXCtxiHyhM2WbPIVM=",
-      "dev": true,
-      "requires": {
-        "babel-runtime": "^6.26.0",
-        "core-js": "^2.5.0",
-        "regenerator-runtime": "^0.10.5"
-      },
-      "dependencies": {
-        "core-js": {
-          "version": "2.6.9",
-          "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.9.tgz",
-          "integrity": "sha512-HOpZf6eXmnl7la+cUdMnLvUxKNqLUzJvgIziQ0DiF3JwSImNphIqdGqzj6hIKyX04MmV0poclQ7+wjWvxQyR2A==",
-          "dev": true
-        },
-        "regenerator-runtime": {
-          "version": "0.10.5",
-          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.10.5.tgz",
-          "integrity": "sha1-M2w+/BIgrc7dosn6tntaeVWjNlg=",
-          "dev": true
-        }
-      }
-    },
     "babel-preset-jest": {
       "version": "24.6.0",
       "resolved": "https://registry.npmjs.org/babel-preset-jest/-/babel-preset-jest-24.6.0.tgz",
@@ -6497,43 +6461,6 @@
         "pend": "~1.2.0"
       }
     },
-    "fetch-mock": {
-      "version": "7.3.3",
-      "resolved": "https://registry.npmjs.org/fetch-mock/-/fetch-mock-7.3.3.tgz",
-      "integrity": "sha512-MHKcwZ4n9TmnfnVfelUBrrfxtC9tztafIR+F8l/Yu9N+y48fU1BAwj3iSxhYFYELVw73rCZh2DPWtWCekY/t+w==",
-      "dev": true,
-      "requires": {
-        "babel-polyfill": "^6.26.0",
-        "glob-to-regexp": "^0.4.0",
-        "path-to-regexp": "^2.2.1",
-        "whatwg-url": "^6.5.0"
-      },
-      "dependencies": {
-        "glob-to-regexp": {
-          "version": "0.4.1",
-          "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz",
-          "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==",
-          "dev": true
-        },
-        "path-to-regexp": {
-          "version": "2.4.0",
-          "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-2.4.0.tgz",
-          "integrity": "sha512-G6zHoVqC6GGTQkZwF4lkuEyMbVOjoBKAEybQUypI1WTkqinCOrq2x6U2+phkJ1XsEMTy4LjtwPI7HW+NVrRR2w==",
-          "dev": true
-        },
-        "whatwg-url": {
-          "version": "6.5.0",
-          "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-6.5.0.tgz",
-          "integrity": "sha512-rhRZRqx/TLJQWUpQ6bmrt2UV4f0HCQ463yQuONJqC6fO2VoEb1pTYddbe59SkYq87aoM5A3bdhMZiUiVws+fzQ==",
-          "dev": true,
-          "requires": {
-            "lodash.sortby": "^4.7.0",
-            "tr46": "^1.0.1",
-            "webidl-conversions": "^4.0.2"
-          }
-        }
-      }
-    },
     "figgy-pudding": {
       "version": "3.5.1",
       "resolved": "https://registry.npmjs.org/figgy-pudding/-/figgy-pudding-3.5.1.tgz",

client/package.json

@@ -40,7 +40,6 @@
     "web3": "1.0.0-beta.37"
   },
   "devDependencies": {
-    "@react-mock/fetch": "^0.3.0",
     "@react-mock/state": "^0.1.8",
     "@testing-library/react": "^8.0.1",
     "@types/classnames": "^2.2.7",

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

@@ -17,7 +17,7 @@ const Item = ({
 }) => (
     <li>
         <a href={item.url} className={styles.linkUrl} title={item.url}>
-            <Dotdotdot clamp={1}>{item.url}</Dotdotdot>
+            <Dotdotdot clamp={2}>{item.url}</Dotdotdot>
         </a>
         <div className={styles.details}>
             <span>URL {item.found ? 'confirmed' : ' not confirmed'}</span>

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

@@ -1,11 +1,15 @@
 import React from 'react'
 import { render, fireEvent, waitForElement } from '@testing-library/react'
-import { FetchMock } from '@react-mock/fetch'
+import mockAxios from 'jest-mock-axios'
 import { serviceUri } from '../../../config'
 import Files from '.'
 
 const onChange = jest.fn()
 
+afterEach(() => {
+    mockAxios.reset()
+})
+
 const files = [
     {
         url: 'https://hello.com',
@@ -20,31 +24,25 @@ const files = [
     }
 ]
 
+const mockResponse = {
+    data: {
+        result: {
+            url: 'https://demo.com',
+            contentType: 'application/zip',
+            contentLength: 237347827,
+            found: true
+        }
+    }
+}
+
 const renderComponent = () =>
     render(
-        <FetchMock
+        <Files
-            mocks={[
+            files={files}
-                {
+            placeholder={'Hello'}
-                    matcher: `${serviceUri}/api/v1/urlcheck`,
+            name={'Hello'}
-                    method: 'POST',
+            onChange={onChange}
-                    response: {
+        />
-                        result: {
-                            url: 'https://demo.com',
-                            contentType: 'application/zip',
-                            contentLength: 237347827,
-                            found: true
-                        }
-                    }
-                }
-            ]}
-        >
-            <Files
-                files={files}
-                placeholder={'Hello'}
-                name={'Hello'}
-                onChange={onChange}
-            />
-        </FetchMock>
     )
 
 describe('Files', () => {
@@ -85,5 +83,7 @@ describe('Files', () => {
             target: { value: 'https://hello.com' }
         })
         fireEvent.click(getByText('Add File'))
+        mockAxios.mockResponse(mockResponse)
+        expect(mockAxios).toHaveBeenCalled()
     })
 })

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

@@ -1,5 +1,6 @@
 import React, { FormEvent, PureComponent, ChangeEvent } from 'react'
 import { CSSTransition, TransitionGroup } from 'react-transition-group'
+import axios from 'axios'
 import Button from '../../../components/atoms/Button'
 import Help from '../../../components/atoms/Form/Help'
 import ItemForm from './ItemForm'
@@ -45,6 +46,13 @@ export default class Files extends PureComponent<FilesProps, FilesStates> {
         isFormShown: false
     }
 
+    // for canceling axios requests
+    public signal = axios.CancelToken.source()
+
+    public componentWillUnmount() {
+        this.signal.cancel()
+    }
+
     private toggleForm = (e: Event) => {
         e.preventDefault()
 
@@ -59,23 +67,21 @@ export default class Files extends PureComponent<FilesProps, FilesStates> {
         }
 
         try {
-            const response = await fetch(`${serviceUri}/api/v1/urlcheck`, {
+            const response = await axios({
                 method: 'POST',
-                body: JSON.stringify({ url: value }),
+                headers: { 'Content-Type': 'application/json' },
-                headers: {
+                url: `${serviceUri}/api/v1/urlcheck`,
-                    'Content-Type': 'application/json'
+                data: { url: value },
-                }
+                cancelToken: this.signal.token
             })
 
-            const json = await response.json()
+            const { contentLength, contentType, found } = response.data.result
-            const { contentLength, contentType, found } = json.result
-
             file.contentLength = contentLength
             file.contentType = contentType
             file.compression = await cleanupContentType(contentType)
             file.found = found
         } catch (error) {
-            Logger.error(error.message)
+            !axios.isCancel(error) && Logger.error(error.message)
         }
 
         this.props.files.push(file)