Merge pull request #209 from oceanprotocol/feature/react-scripts-update

bump to react-scripts v3.3
2023-03-15 18:03:00 +01:00 · 2020-02-01 15:41:44 +01:00 · 2020-02-01 15:41:44 +01:00 · ba2de2e69c
commit ba2de2e69c
parent b9f83021c7 3e814b98a7
40 changed files with 8682 additions and 8149 deletions
--- a/client/package-lock.json
+++ b/client/package-lock.json
--- a/client/package.json
+++ b/client/package.json
@ -14,62 +14,59 @@
  },
  "dependencies": {
    "@oceanprotocol/art": "^2.2.0",
-    "@oceanprotocol/squid": "^1.1.0",
+    "@oceanprotocol/squid": "^1.3.0",
    "@oceanprotocol/typographies": "^0.1.0",
-    "@sindresorhus/slugify": "^0.9.1",
-    "@truffle/hdwallet-provider": "^1.0.26",
-    "axios": "^0.19.0",
+    "@sindresorhus/slugify": "^0.10.0",
+    "@truffle/hdwallet-provider": "^1.0.30",
+    "axios": "^0.19.2",
    "bip39": "^3.0.2",
    "classnames": "^2.2.6",
    "ethereum-blockies": "github:MyEtherWallet/blockies",
    "filesize": "^6.0.1",
    "history": "^4.10.1",
-    "ipfs-http-client": "^39.0.2",
+    "ipfs-http-client": "39.0.2",
    "is-url-superb": "^3.0.0",
    "moment": "^2.24.0",
-    "query-string": "^6.9.0",
+    "node-sass": "^4.13.1",
+    "query-string": "^6.10.1",
    "react": "^16.12.0",
    "react-collapsed": "^2.2.3",
-    "react-datepicker": "^2.10.1",
+    "react-datepicker": "^2.11.0",
    "react-dom": "^16.12.0",
    "react-dotdotdot": "^1.3.1",
    "react-dropzone": "^10.2.1",
    "react-ga": "^2.7.0",
    "react-helmet": "^5.2.1",
-    "react-markdown": "^4.2.2",
+    "react-markdown": "^4.3.1",
    "react-modal": "^3.11.1",
-    "react-moment": "^0.9.6",
+    "react-moment": "^0.9.7",
    "react-paginate": "^6.3.2",
-    "react-popper": "^1.3.6",
+    "react-popper": "^1.3.7",
    "react-router-dom": "^5.1.2",
    "react-transition-group": "^4.3.0",
    "shortid": "^2.2.15",
-    "web3": "^1.2.4"
+    "web3": "^1.2.5"
  },
  "devDependencies": {
    "@react-mock/state": "^0.1.8",
-    "@testing-library/jest-dom": "^4.2.4",
-    "@testing-library/react": "^9.3.2",
+    "@testing-library/jest-dom": "^5.0.2",
+    "@testing-library/react": "^9.4.0",
    "@types/classnames": "^2.2.9",
    "@types/is-url": "^1.2.28",
-    "@types/jest": "^24.0.23",
-    "@types/react": "^16.9.15",
-    "@types/react-datepicker": "^2.9.5",
-    "@types/react-dom": "^16.9.4",
-    "@types/react-helmet": "^5.0.14",
-    "@types/react-modal": "^3.10.0",
+    "@types/jest": "^24.9.1",
+    "@types/react": "^16.9.19",
+    "@types/react-datepicker": "^2.10.0",
+    "@types/react-dom": "^16.9.5",
+    "@types/react-helmet": "^5.0.15",
+    "@types/react-modal": "^3.10.4",
    "@types/react-paginate": "^6.2.1",
    "@types/react-router-dom": "^5.1.3",
    "@types/react-transition-group": "^4.2.3",
    "@types/shortid": "^0.0.29",
-    "@typescript-eslint/eslint-plugin": "^1.6.0",
-    "@typescript-eslint/parser": "^1.6.0",
-    "eslint": "^5.16.0",
-    "jest-mock-axios": "^3.1.2",
-    "node-sass": "^4.13.0",
-    "react-scripts": "3.0.1",
-    "source-map-explorer": "^2.1.2",
-    "typescript": "^3.7.3"
+    "jest-mock-axios": "^3.2.0",
+    "react-scripts": "^3.3.1",
+    "source-map-explorer": "^2.2.2",
+    "typescript": "^3.7.5"
  },
  "repository": {
    "type": "git",
--- a/client/src/App.test.tsx
+++ b/client/src/App.test.tsx
@ -2,7 +2,7 @@ import React from 'react'
 import { render } from '@testing-library/react'
 import App from './App'
 import { User } from './context'
-import { userMock, userMockConnected } from '../__mocks__/user-mock'
+import { userMock, userMockConnected } from './__mocks__/user-mock'

 describe('App', () => {
    it('should be able to run tests', () => {
--- a/client/src/Routes.test.tsx
+++ b/client/src/Routes.test.tsx
@ -3,7 +3,7 @@ import { BrowserRouter as Router } from 'react-router-dom'
 import { render } from '@testing-library/react'
 import Routes from './Routes'
 import { User } from './context'
-import { userMockConnected } from '../__mocks__/user-mock'
+import { userMockConnected } from './__mocks__/user-mock'

 describe('Routes', () => {
    it('renders without crashing', () => {
--- a/client/src/mocks/axios.ts
+++ b/client/src/mocks/axios.ts
--- a/client/src/mocks/market-mock.ts
+++ b/client/src/mocks/market-mock.ts
--- a/client/src/mocks/ocean-mock.ts
+++ b/client/src/mocks/ocean-mock.ts
--- a/client/src/mocks/user-mock.ts
+++ b/client/src/mocks/user-mock.ts
--- a/client/src/components/atoms/Account.test.tsx
+++ b/client/src/components/atoms/Account.test.tsx
@ -3,7 +3,7 @@ import { render, fireEvent } from '@testing-library/react'
 import { toDataUrl } from 'ethereum-blockies'
 import Account from './Account'
 import { User } from '../../context'
-import { userMockConnected } from '../../../__mocks__/user-mock'
+import { userMockConnected } from '../../__mocks__/user-mock'

 describe('Account', () => {
    it('renders without crashing', () => {
--- a/client/src/components/atoms/Form/Input.tsx
+++ b/client/src/components/atoms/Form/Input.tsx
@ -56,7 +56,7 @@ export default class Input extends PureComponent<InputProps, InputState> {
        }
    }

-    public toggleFocus = () => {
+    public handleFocus = () => {
        this.setState({ isFocused: !this.state.isFocused })
    }

@ -94,8 +94,8 @@ export default class Input extends PureComponent<InputProps, InputState> {
                            className={styles.select}
                            name={name}
                            required={required}
-                            onFocus={this.toggleFocus}
-                            onBlur={this.toggleFocus}
+                            onFocus={this.handleFocus}
+                            onBlur={this.handleFocus}
                            onChange={onChange}
                            value={value}
                        >
@ -117,8 +117,8 @@ export default class Input extends PureComponent<InputProps, InputState> {
                        <textarea
                            id={name}
                            className={styles.input}
-                            onFocus={this.toggleFocus}
-                            onBlur={this.toggleFocus}
+                            onFocus={this.handleFocus}
+                            onBlur={this.handleFocus}
                            {...this.props}
                        />
                    </div>
@ -154,8 +154,8 @@ export default class Input extends PureComponent<InputProps, InputState> {
                            selected={this.state.dateCreated}
                            onChange={this.handleDateChange}
                            className={styles.input}
-                            onFocus={this.toggleFocus}
-                            onBlur={this.toggleFocus}
+                            onFocus={this.handleFocus}
+                            onBlur={this.handleFocus}
                            id={name}
                            name={name}
                        />
@ -170,8 +170,8 @@ export default class Input extends PureComponent<InputProps, InputState> {
                                    id={name}
                                    type={type || 'text'}
                                    className={styles.input}
-                                    onFocus={this.toggleFocus}
-                                    onBlur={this.toggleFocus}
+                                    onFocus={this.handleFocus}
+                                    onBlur={this.handleFocus}
                                    {...this.props}
                                />
                                {group}
@ -181,8 +181,8 @@ export default class Input extends PureComponent<InputProps, InputState> {
                                id={name}
                                type={type || 'text'}
                                className={styles.input}
-                                onFocus={this.toggleFocus}
-                                onBlur={this.toggleFocus}
+                                onFocus={this.handleFocus}
+                                onBlur={this.handleFocus}
                                {...this.props}
                            />
                        )}
--- a/client/src/components/atoms/Modal.tsx
+++ b/client/src/components/atoms/Modal.tsx
@ -8,7 +8,7 @@ const Modal = ({
    title,
    description,
    isOpen,
-    toggleModal,
+    onToggleModal,
    children,
    onAfterOpen,
    onRequestClose,
@ -17,7 +17,7 @@ const Modal = ({
    title: string
    description?: string
    isOpen: boolean
-    toggleModal: () => void
+    onToggleModal: () => void
    children: any
    onAfterOpen?: () => void
    onRequestClose?: () => void
@ -34,7 +34,7 @@ const Modal = ({
        >
            <button
                className={styles.close}
-                onClick={toggleModal}
+                onClick={onToggleModal}
                data-testid="closeModal"
            >
                &times;
--- a/client/src/components/molecules/AccountStatus/Popover.test.tsx
+++ b/client/src/components/molecules/AccountStatus/Popover.test.tsx
@ -1,8 +1,8 @@
 import React from 'react'
 import { render } from '@testing-library/react'
 import Popover from './Popover'
-import { userMock, userMockConnected } from '../../../../__mocks__/user-mock'
-import { marketMock } from '../../../../__mocks__/market-mock'
+import { userMock, userMockConnected } from '../../../__mocks__/user-mock'
+import { marketMock } from '../../../__mocks__/market-mock'
 import { User, Market } from '../../../context'

 describe('Popover', () => {
--- a/client/src/components/molecules/AccountStatus/Popover.tsx
+++ b/client/src/components/molecules/AccountStatus/Popover.tsx
@ -18,8 +18,6 @@ export default class Popover extends PureComponent<{
                ref={this.props.forwardedRef}
                style={this.props.style}
            >
-                {
-                    <>
                <div className={styles.popoverInfoline}>
                    <Account />
                </div>
@ -31,9 +29,7 @@ export default class Popover extends PureComponent<{
                            title={(balance.eth / 1e18).toFixed(10)}
                        >
                            <strong>
-                                        {(balance.eth / 1e18)
-                                            .toFixed(3)
-                                            .slice(0, -1)}
+                                {(balance.eth / 1e18).toFixed(3).slice(0, -1)}
                            </strong>{' '}
                            ETH
                        </span>
@ -57,13 +53,10 @@ export default class Popover extends PureComponent<{
                                                   ? 'https://duero.dev-ocean.com'
                                                   : 'http://localhost:8545'
                                           }`
-                                        : network &&
-                                          `Connected to ${network} network`}
+                                : network && `Connected to ${network} network`}
                        </div>
                    )}
                </Market.Consumer>
-                    </>
-                }
            </div>
        )
    }
--- a/client/src/components/molecules/VersionNumbers/index.test.tsx
+++ b/client/src/components/molecules/VersionNumbers/index.test.tsx
@ -5,7 +5,7 @@ import { StateMock } from '@react-mock/state'
 import VersionNumbers from '.'

 import { User } from '../../../context'
-import { userMockConnected } from '../../../../__mocks__/user-mock'
+import { userMockConnected } from '../../../__mocks__/user-mock'

 afterEach(() => {
    mockAxios.reset()
--- a/client/src/components/organisms/AssetsLatest.test.tsx
+++ b/client/src/components/organisms/AssetsLatest.test.tsx
@ -3,7 +3,7 @@ import { BrowserRouter } from 'react-router-dom'
 import { render } from '@testing-library/react'
 import AssetsLatest from './AssetsLatest'
 import { User } from '../../context'
-import { userMockConnected } from '../../../__mocks__/user-mock'
+import { userMockConnected } from '../../__mocks__/user-mock'

 describe('AssetsLatest', () => {
    it('renders without crashing', () => {
--- a/client/src/components/organisms/ChannelTeaser.test.tsx
+++ b/client/src/components/organisms/ChannelTeaser.test.tsx
@ -3,7 +3,7 @@ import { render } from '@testing-library/react'
 import ChannelTeaser from './ChannelTeaser'
 import { BrowserRouter } from 'react-router-dom'
 import { User } from '../../context'
-import { userMockConnected } from '../../../__mocks__/user-mock'
+import { userMockConnected } from '../../__mocks__/user-mock'

 describe('ChannelTeaser', () => {
    it('renders without crashing', () => {
--- a/client/src/components/organisms/WalletSelector.test.tsx
+++ b/client/src/components/organisms/WalletSelector.test.tsx
@ -3,8 +3,8 @@ import { render, fireEvent } from '@testing-library/react'
 import ReactModal from 'react-modal'
 import WalletSelector from './WalletSelector'
 import { User, Market } from '../../context'
-import { userMockConnected } from '../../../__mocks__/user-mock'
-import { marketMock } from '../../../__mocks__/market-mock'
+import { userMockConnected } from '../../__mocks__/user-mock'
+import { marketMock } from '../../__mocks__/market-mock'

 describe('WalletSelector', () => {
    it('renders without crashing', () => {
--- a/client/src/components/organisms/WalletSelector.tsx
+++ b/client/src/components/organisms/WalletSelector.tsx
@ -90,7 +90,7 @@ export default class WalletSelector extends PureComponent<
                    title={content.title}
                    description={content.description}
                    isOpen={this.state.isModalOpen}
-                    toggleModal={this.handleToggleModal}
+                    onToggleModal={this.handleToggleModal}
                >
                    <div className={styles.info}>
                        {content.buttons.map(({ title, description, icon }) => (
--- a/client/src/components/organisms/Web3message.test.tsx
+++ b/client/src/components/organisms/Web3message.test.tsx
@ -2,8 +2,8 @@ import React from 'react'
 import { render } from '@testing-library/react'
 import Web3message from './Web3message'
 import { User, Market } from '../../context'
-import { userMock, userMockConnected } from '../../../__mocks__/user-mock'
-import { marketMock } from '../../../__mocks__/market-mock'
+import { userMock, userMockConnected } from '../../__mocks__/user-mock'
+import { marketMock } from '../../__mocks__/market-mock'

 describe('Web3message', () => {
    it('renders with burner wallet message', () => {
--- a/client/src/components/templates/Asset/AssetFile.test.tsx
+++ b/client/src/components/templates/Asset/AssetFile.test.tsx
@ -7,8 +7,8 @@ import { StateMock } from '@react-mock/state'
 import ReactGA from 'react-ga'
 import { User, Market } from '../../../context'
 import AssetFile, { messages } from './AssetFile'
-import { userMockConnected } from '../../../../__mocks__/user-mock'
-import { marketMock } from '../../../../__mocks__/market-mock'
+import { userMockConnected } from '../../../__mocks__/user-mock'
+import { marketMock } from '../../../__mocks__/market-mock'

 const file = {
    index: 0,
--- a/client/src/components/templates/Asset/Report.tsx
+++ b/client/src/components/templates/Asset/Report.tsx
@ -36,13 +36,13 @@ export default class Report extends PureComponent<
        this.signal.cancel()
    }

-    private inputChange = (event: ChangeEvent<HTMLInputElement>) => {
+    private handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
        this.setState({
            comment: event.target.value
        })
    }

-    private toggleModal = () => {
+    private handleToggleModal = () => {
        this.setState({ isModalOpen: !this.state.isModalOpen })
        this.state.isModalOpen && this.reset()
    }
@ -100,7 +100,7 @@ export default class Report extends PureComponent<
                <Button
                    link
                    className={styles.openLink}
-                    onClick={this.toggleModal}
+                    onClick={this.handleToggleModal}
                >
                    Report Data Set
                </Button>
@ -108,7 +108,7 @@ export default class Report extends PureComponent<
                    title="Report Data Set"
                    description="Found some faulty metadata, wrongly attributed data, or anything else wrong with this data set? Tell us about it and we will take a look."
                    isOpen={this.state.isModalOpen}
-                    toggleModal={this.toggleModal}
+                    onToggleModal={this.handleToggleModal}
                >
                    <div className={styles.info}>
                        <h3>{this.props.title}</h3>
@ -135,7 +135,7 @@ export default class Report extends PureComponent<
                                    help="Briefly describe what is wrong with this asset. If you want to get contacted by us, add your email at the end."
                                    required
                                    value={this.state.comment}
-                                    onChange={this.inputChange}
+                                    onChange={this.handleInputChange}
                                    rows={1}
                                />
                                <Button
--- a/client/src/components/templates/Channel.test.tsx
+++ b/client/src/components/templates/Channel.test.tsx
@ -3,7 +3,7 @@ import { render } from '@testing-library/react'
 import Channel from './Channel'
 import { User } from '../../context'
 import { createMemoryHistory } from 'history'
-import { userMockConnected } from '../../../__mocks__/user-mock'
+import { userMockConnected } from '../../__mocks__/user-mock'
 import { MemoryRouter } from 'react-router'

 describe('Channel', () => {
--- a/client/src/components/templates/Channel.tsx
+++ b/client/src/components/templates/Channel.tsx
@ -73,13 +73,16 @@ export default class Channel extends PureComponent<ChannelProps, ChannelState> {
        }
    }

-    private handlePageClick = async (data: { selected: number }) => {
+    private onPageClick = async (data: { selected: number }) => {
        // react-pagination starts counting at 0, we start at 1
        const toPage = data.selected + 1

        this.props.history.push({ search: `?page=${toPage}` })

-        await this.setState({ currentPage: toPage, isLoading: true })
+        this.setState({
+            currentPage: toPage,
+            isLoading: true
+        })
        await this.getChannelAssets()
    }

@ -105,7 +108,7 @@ export default class Channel extends PureComponent<ChannelProps, ChannelState> {
                    <Pagination
                        totalPages={totalPages}
                        currentPage={currentPage}
-                        handlePageClick={this.handlePageClick}
+                        handlePageClick={this.onPageClick}
                    />
                </Content>
            </Route>
--- a/client/src/context/MarketProvider.test.tsx
+++ b/client/src/context/MarketProvider.test.tsx
@ -2,7 +2,7 @@ import React from 'react'
 import { render } from '@testing-library/react'
 import MarketProvider from './MarketProvider'
 import { User, Market } from '../context'
-import { userMockConnected } from '../../__mocks__/user-mock'
+import { userMockConnected } from '../__mocks__/user-mock'

 describe('MarketProvider', () => {
    it('renders without crashing', () => {
--- a/client/src/routes/Channels.test.tsx
+++ b/client/src/routes/Channels.test.tsx
@ -4,7 +4,7 @@ import { createMemoryHistory, createLocation } from 'history'
 import { render } from '@testing-library/react'
 import Channels from './Channels'
 import { User } from '../context'
-import { userMockConnected } from '../../__mocks__/user-mock'
+import { userMockConnected } from '../__mocks__/user-mock'

 const history = createMemoryHistory()
 const location = createLocation('/channels')
--- a/client/src/routes/Faucet/index.test.tsx
+++ b/client/src/routes/Faucet/index.test.tsx
@ -4,7 +4,7 @@ import { MemoryRouter } from 'react-router'
 import { createMemoryHistory, createLocation } from 'history'
 import Faucet from '.'
 import { User, Market } from '../../context'
-import { userMockConnected } from '../../../__mocks__/user-mock'
+import { userMockConnected } from '../../__mocks__/user-mock'

 const history = createMemoryHistory()
 const location = createLocation('/faucet')
--- a/client/src/routes/Home/Search.tsx
+++ b/client/src/routes/Home/Search.tsx
@ -16,7 +16,7 @@ export default class Search extends PureComponent<SearchProps, SearchState> {
        search: ''
    }

-    private inputChange = (event: ChangeEvent<HTMLInputElement>) => {
+    private handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
        this.setState({
            search: event.target.value
        })
@ -38,7 +38,7 @@ export default class Search extends PureComponent<SearchProps, SearchState> {
                    label="Search for data sets"
                    placeholder="e.g. shapes of plants"
                    value={search}
-                    onChange={this.inputChange}
+                    onChange={this.handleInputChange}
                    group={
                        <Button primary disabled={!search}>
                            Search
--- a/client/src/routes/Home/index.test.tsx
+++ b/client/src/routes/Home/index.test.tsx
@ -3,7 +3,7 @@ import { Router } from 'react-router'
 import { createMemoryHistory, createLocation } from 'history'
 import { render } from '@testing-library/react'
 import Home from '.'
-import { userMock } from '../../../__mocks__/user-mock'
+import { userMock } from '../../__mocks__/user-mock'
 import { User } from '../../context'

 const history = createMemoryHistory()
--- a/client/src/routes/Publish/Files/ItemForm.tsx
+++ b/client/src/routes/Publish/Files/ItemForm.tsx
@ -45,7 +45,7 @@ export default class ItemForm extends PureComponent<
        this.props.addFile(url)
    }

-    private onChangeUrl = (e: React.FormEvent<HTMLInputElement>) => {
+    private handleChangeUrl = (e: React.FormEvent<HTMLInputElement>) => {
        this.setState({ url: e.currentTarget.value })
        this.clearErrors()
    }
@ -67,7 +67,7 @@ export default class ItemForm extends PureComponent<
                    type="url"
                    placeholder={this.props.placeholder}
                    value={url}
-                    onChange={this.onChangeUrl}
+                    onChange={this.handleChangeUrl}
                    help="Supported protocols are http(s):// and ipfs://"
                />

--- a/client/src/routes/Publish/Files/index.test.tsx
+++ b/client/src/routes/Publish/Files/index.test.tsx
@ -46,7 +46,6 @@ describe('Files', () => {

    it('renders without crashing', () => {
        const { container } = render(ui)
-
        expect(container.firstChild).toBeInTheDocument()
        expect(container.querySelector('.itemForm')).not.toBeInTheDocument()
    })
@ -82,21 +81,21 @@ describe('Files', () => {
    })

    it('item can be removed', () => {
-        const { getByTitle } = render(ui)
-
-        fireEvent.click(getByTitle('Remove item'))
+        const { getAllByTitle } = render(ui)
+        fireEvent.click(getAllByTitle('Remove item')[0])
        expect(files.length).toBe(0)
    })

    it('item can be added', async () => {
-        const { getByText, getByPlaceholderText } = render(ui)
+        const { getAllByText, getByText, getByPlaceholderText } = render(ui)

-        fireEvent.click(getByText('+ From URL'))
+        fireEvent.click(getAllByText('+ From URL')[0])
        await waitForElement(() => getByText('- Cancel'))
        fireEvent.change(getByPlaceholderText('Hello'), {
            target: { value: 'https://hello.com' }
        })
        fireEvent.click(getByText('Add File'))
+
        mockAxios.mockResponse(mockResponse)
        expect(mockAxios).toHaveBeenCalled()
    })
--- a/client/src/routes/Publish/index.test.tsx
+++ b/client/src/routes/Publish/index.test.tsx
@ -4,7 +4,7 @@ import { render, fireEvent } from '@testing-library/react'
 import { createMemoryHistory, createLocation } from 'history'
 import Publish from '.'
 import { User } from '../../context'
-import { userMockConnected } from '../../../__mocks__/user-mock'
+import { userMockConnected } from '../../__mocks__/user-mock'

 const history = createMemoryHistory()
 const location = createLocation('/publish')
--- a/client/src/routes/Publish/index.tsx
+++ b/client/src/routes/Publish/index.tsx
@ -256,7 +256,7 @@ class Publish extends Component<{}, PublishState> {
        }
    }

-    private registerAsset = async (event: FormEvent<HTMLFormElement>) => {
+    private handleRegisterAsset = async (event: FormEvent<HTMLFormElement>) => {
        event.preventDefault()

        ReactGA.event({ category: 'Publish', action: 'registerAsset-start' })
@ -348,7 +348,7 @@ class Publish extends Component<{}, PublishState> {
                                currentStep={this.state.currentStep}
                            />

-                            <Form onSubmit={this.registerAsset}>
+                            <Form onSubmit={this.handleRegisterAsset}>
                                {steps.map((step: any, index: number) => (
                                    <Step
                                        key={index}
--- a/client/src/routes/Search.test.tsx
+++ b/client/src/routes/Search.test.tsx
@ -4,7 +4,7 @@ import Search from './Search'
 import { User } from '../context'
 import { createMemoryHistory } from 'history'
 import { BrowserRouter as Router } from 'react-router-dom'
-import { userMockConnected } from '../../__mocks__/user-mock'
+import { userMockConnected } from '../__mocks__/user-mock'

 const history = createMemoryHistory()

--- a/client/src/routes/Search.tsx
+++ b/client/src/routes/Search.tsx
@ -97,7 +97,7 @@ class Search extends PureComponent<SearchProps, SearchState> {
        }
    }

-    private handlePageClick = async (data: { selected: number }) => {
+    private onPageClick = async (data: { selected: number }) => {
        // react-pagination starts counting at 0, we start at 1
        const toPage = data.selected + 1

@ -106,7 +106,7 @@ class Search extends PureComponent<SearchProps, SearchState> {
            search: `?text=${this.state.searchTerm}&page=${toPage}`
        })

-        await this.setState({ currentPage: toPage, isLoading: true })
+        this.setState({ currentPage: toPage, isLoading: true })
        await this.searchAssets()
    }

@ -140,7 +140,7 @@ class Search extends PureComponent<SearchProps, SearchState> {
                    <Pagination
                        totalPages={totalPages}
                        currentPage={currentPage}
-                        handlePageClick={this.handlePageClick}
+                        handlePageClick={this.onPageClick}
                    />
                </Content>
            </Route>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -25,26 +25,26 @@
  "dependencies": {},
  "devDependencies": {
    "@release-it/bumper": "^1.0.5",
-    "@typescript-eslint/eslint-plugin": "^1.6.0",
-    "@typescript-eslint/parser": "^1.6.0",
+    "@typescript-eslint/eslint-plugin": "^2.18.0",
+    "@typescript-eslint/parser": "^2.18.0",
    "auto-changelog": "^1.16.2",
-    "concurrently": "^5.0.0",
-    "cypress": "^3.7.0",
+    "concurrently": "^5.1.0",
+    "cypress": "^3.8.3",
    "cypress-log-to-output": "^1.0.7",
-    "eslint": "^5.16.0",
-    "eslint-config-oceanprotocol": "^1.4.0",
-    "eslint-config-prettier": "^6.5.0",
-    "eslint-plugin-cypress": "^2.7.0",
-    "eslint-plugin-prettier": "^3.1.1",
+    "eslint": "^6.8.0",
+    "eslint-config-oceanprotocol": "^1.5.0",
+    "eslint-config-prettier": "^6.10.0",
+    "eslint-plugin-cypress": "^2.8.1",
+    "eslint-plugin-prettier": "^3.1.2",
    "prettier": "^1.19.1",
    "prettier-stylelint": "^0.4.2",
    "release-it": "^12.4.3",
-    "start-server-and-test": "^1.10.6",
-    "stylelint": "^12.0.0",
+    "start-server-and-test": "^1.10.8",
+    "stylelint": "^13.0.0",
    "stylelint-config-bigchaindb": "^1.2.2",
-    "stylelint-config-css-modules": "^2.1.0",
+    "stylelint-config-css-modules": "^2.2.0",
    "stylelint-config-standard": "^19.0.0",
-    "typescript": "^3.7.3"
+    "typescript": "^3.7.5"
  },
  "repository": {
    "type": "git",
--- a/server/package-lock.json
+++ b/server/package-lock.json
--- a/server/package.json
+++ b/server/package.json
@ -13,13 +13,13 @@
    "coverage": "cat coverage/lcov.info | codacy-coverage --token 8801f827fe1144ffa85cd7da94f2bbf7"
  },
  "dependencies": {
-    "@sendgrid/mail": "^6.4.0",
+    "@sendgrid/mail": "^6.5.1",
    "body-parser": "^1.18.3",
    "compression": "^1.7.4",
    "debug": "^4.1.1",
    "dotenv": "^8.2.0",
    "express": "^4.17.1",
-    "express-validator": "^6.3.0",
+    "express-validator": "^6.3.1",
    "morgan": "^1.9.1",
    "request": "^2.88.0"
  },
@ -28,17 +28,17 @@
    "@types/compression": "^1.0.1",
    "@types/debug": "^4.1.5",
    "@types/express": "^4.17.2",
-    "@types/jest": "^24.0.23",
+    "@types/jest": "^24.9.1",
    "@types/morgan": "^1.7.37",
-    "@types/node": "^12.12.14",
-    "@types/request": "^2.48.3",
+    "@types/node": "^13.5.3",
+    "@types/request": "^2.48.4",
    "@types/supertest": "^2.0.8",
-    "jest": "^24.9.0",
-    "nodemon": "^2.0.1",
+    "jest": "24.9.0",
+    "nodemon": "^2.0.2",
    "supertest": "^4.0.2",
-    "ts-jest": "^24.2.0",
-    "ts-node": "^8.5.4",
-    "typescript": "^3.7.3"
+    "ts-jest": "24.3.0",
+    "ts-node": "^8.6.2",
+    "typescript": "^3.7.5"
  },
  "repository": {
    "type": "git",
@ -46,6 +46,10 @@
  },
  "jest": {
    "preset": "ts-jest",
+    "testPathIgnorePatterns": [
+      "/node_modules/",
+      "/dist/"
+    ],
    "collectCoverageFrom": [
      "src/**/*.{ts,tsx}"
    ]
--- a/server/src/config.ts
+++ b/server/src/config.ts
@ -2,7 +2,7 @@ import 'dotenv/config'

 const config = {
    app: { port: 4000 },
-    sendgridApiKey: process.env.SENDGRID_API_KEY,
+    sendgridApiKey: process.env.SENDGRID_API_KEY || '',
    ipfsGatewayUri: process.env.IPFS_GATEWAY_URI || 'https://gateway.ipfs.io'
 }

--- a/server/tsconfig.json
+++ b/server/tsconfig.json
@ -1,5 +1,6 @@
 {
  "compilerOptions": {
+    "strict": true,
    "module": "commonjs",
    "esModuleInterop": true,
    "resolveJsonModule": true,