From b09c1dbc27dae6faba3f6fe9035db7099b921d6e Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Wed, 23 Sep 2020 14:54:56 +0200
Subject: [PATCH] typing fixes

---
 src/components/atoms/BaseDialog.tsx               |  6 +++---
 src/components/atoms/Dropzone.tsx                 |  4 ++--
 src/components/atoms/FormikPersist.tsx            |  2 +-
 src/components/atoms/Input/Row.tsx                |  4 ++--
 src/components/atoms/Lists.tsx                    | 10 ++++++++--
 src/components/atoms/Table/index.tsx              |  2 +-
 src/components/atoms/Time.tsx                     |  4 ++--
 src/components/atoms/Tooltip.tsx                  |  2 +-
 .../molecules/FormFields/Price/Dynamic.tsx        |  2 +-
 src/components/molecules/SearchBar.tsx            |  4 +---
 src/components/organisms/AssetActions/Compute.tsx |  6 +++---
 .../organisms/AssetActions/Pool/Add.tsx           |  2 +-
 .../organisms/AssetActions/Pool/index.tsx         |  2 +-
 .../organisms/AssetContent/MetaFull.tsx           |  2 +-
 src/components/organisms/Footer.tsx               |  4 ++--
 src/components/pages/Home.tsx                     |  4 ++--
 src/components/pages/Publish/PublishForm.tsx      |  9 ++++-----
 src/components/pages/Publish/index.tsx            |  6 +++---
 src/components/templates/Search/index.tsx         |  2 +-
 src/helpers/NetworkMonitor.tsx                    | 15 ++++++++-------
 src/utils/cleanupContentType.ts                   |  2 +-
 src/utils/index.ts                                |  4 ++--
 22 files changed, 51 insertions(+), 47 deletions(-)

diff --git a/src/components/atoms/BaseDialog.tsx b/src/components/atoms/BaseDialog.tsx
index 47393dcad..6c9f659aa 100644
--- a/src/components/atoms/BaseDialog.tsx
+++ b/src/components/atoms/BaseDialog.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { ReactNode, ReactElement } from 'react'
 import styles from './BaseDialog.module.css'
 import { Modal } from 'react-responsive-modal'
 
@@ -14,10 +14,10 @@ export default function BaseDialog({
   open: boolean
   title: string
   onClose: () => void
-  children: React.ReactNode
+  children: ReactNode
   disableClose?: boolean
   actions?: any
-}) {
+}): ReactElement {
   return (
     <Modal
       open={open}
diff --git a/src/components/atoms/Dropzone.tsx b/src/components/atoms/Dropzone.tsx
index 7f78e7b9f..e88cba4a1 100644
--- a/src/components/atoms/Dropzone.tsx
+++ b/src/components/atoms/Dropzone.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react'
+import React, { ReactElement, useCallback } from 'react'
 import { useDropzone } from 'react-dropzone'
 import styles from './Dropzone.module.css'
 import { formatBytes } from '../../utils'
@@ -13,7 +13,7 @@ export default function Dropzone({
   disabled?: boolean
   multiple?: boolean
   error?: string
-}) {
+}): ReactElement {
   const onDrop = useCallback((acceptedFiles) => handleOnDrop(acceptedFiles), [
     handleOnDrop
   ])
diff --git a/src/components/atoms/FormikPersist.tsx b/src/components/atoms/FormikPersist.tsx
index d51eb8f0e..612921c53 100644
--- a/src/components/atoms/FormikPersist.tsx
+++ b/src/components/atoms/FormikPersist.tsx
@@ -64,7 +64,7 @@ class PersistImpl extends React.Component<
     }
   }
 
-  render(): any {
+  render(): null {
     return null
   }
 }
diff --git a/src/components/atoms/Input/Row.tsx b/src/components/atoms/Input/Row.tsx
index 4d1ac3e02..d16ef549b 100644
--- a/src/components/atoms/Input/Row.tsx
+++ b/src/components/atoms/Input/Row.tsx
@@ -1,7 +1,7 @@
-import React from 'react'
+import React, { ReactElement, ReactNode } from 'react'
 import styles from './Row.module.css'
 
-const Row = ({ children }: { children: any }) => (
+const Row = ({ children }: { children: ReactNode }): ReactElement => (
   <div className={styles.row}>{children}</div>
 )
 
diff --git a/src/components/atoms/Lists.tsx b/src/components/atoms/Lists.tsx
index 27e2701f2..536a782f1 100644
--- a/src/components/atoms/Lists.tsx
+++ b/src/components/atoms/Lists.tsx
@@ -1,7 +1,13 @@
-import React from 'react'
+import React, { ReactElement, ReactNode } from 'react'
 import styles from './Lists.module.css'
 
-export function ListItem({ children, ol }: { children: any; ol?: boolean }) {
+export function ListItem({
+  children,
+  ol
+}: {
+  children: ReactNode
+  ol?: boolean
+}): ReactElement {
   const classes = ol
     ? `${styles.item} ${styles.olItem}`
     : `${styles.item} ${styles.ulItem}`
diff --git a/src/components/atoms/Table/index.tsx b/src/components/atoms/Table/index.tsx
index 829b5e8f1..34aa55472 100644
--- a/src/components/atoms/Table/index.tsx
+++ b/src/components/atoms/Table/index.tsx
@@ -22,7 +22,7 @@ export default function Table({
   columns: any
   data: any
   pagination?: AssetTablePagination
-}) {
+}): ReactElement {
   return (
     <div>
       {data?.length ? (
diff --git a/src/components/atoms/Time.tsx b/src/components/atoms/Time.tsx
index 8998d86f1..7151ca3b4 100644
--- a/src/components/atoms/Time.tsx
+++ b/src/components/atoms/Time.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { ReactElement } from 'react'
 import { format, formatDistance } from 'date-fns'
 
 export default function Time({
@@ -7,7 +7,7 @@ export default function Time({
 }: {
   date: string
   relative?: boolean
-}) {
+}): ReactElement {
   const dateNew = new Date(date)
   const dateIso = dateNew.toISOString()
 
diff --git a/src/components/atoms/Tooltip.tsx b/src/components/atoms/Tooltip.tsx
index a65d7c36a..76de71a01 100644
--- a/src/components/atoms/Tooltip.tsx
+++ b/src/components/atoms/Tooltip.tsx
@@ -44,7 +44,7 @@ export default function Tooltip({
     })
   }
 
-  function onHide({ unmount }: { unmount: any }) {
+  function onHide({ unmount }: { unmount: () => void }) {
     setSpring({
       ...animation.from,
       onRest: unmount,
diff --git a/src/components/molecules/FormFields/Price/Dynamic.tsx b/src/components/molecules/FormFields/Price/Dynamic.tsx
index fc5b52d89..88401f6f9 100644
--- a/src/components/molecules/FormFields/Price/Dynamic.tsx
+++ b/src/components/molecules/FormFields/Price/Dynamic.tsx
@@ -58,7 +58,7 @@ export default function Dynamic({
     return () => {
       clearInterval(balanceInterval)
     }
-  }, [ocean, chainId, account])
+  }, [ocean, chainId, account, refreshBalance])
 
   return (
     <div className={styles.dynamic}>
diff --git a/src/components/molecules/SearchBar.tsx b/src/components/molecules/SearchBar.tsx
index 1f2c60945..05c1831d1 100644
--- a/src/components/molecules/SearchBar.tsx
+++ b/src/components/molecules/SearchBar.tsx
@@ -8,13 +8,11 @@ import InputGroup from '../atoms/Input/InputGroup'
 export default function SearchBar({
   placeholder,
   initialValue,
-  filters,
-  large
+  filters
 }: {
   placeholder?: string
   initialValue?: string
   filters?: boolean
-  large?: true
 }): ReactElement {
   const navigate = useNavigate()
   const [value, setValue] = useState(initialValue || '')
diff --git a/src/components/organisms/AssetActions/Compute.tsx b/src/components/organisms/AssetActions/Compute.tsx
index 5792a12b7..07bd70ea3 100644
--- a/src/components/organisms/AssetActions/Compute.tsx
+++ b/src/components/organisms/AssetActions/Compute.tsx
@@ -1,4 +1,4 @@
-import React, { useState, ReactElement } from 'react'
+import React, { useState, ReactElement, ChangeEvent } from 'react'
 import { DDO } from '@oceanprotocol/lib'
 import Loader from '../../atoms/Loader'
 import Web3Feedback from '../../molecules/Wallet/Feedback'
@@ -45,13 +45,13 @@ export default function Compute({
     !ocean ||
     !isBalanceSufficient
 
-  const onDrop = async (files: any) => {
+  const onDrop = async (files: File[]) => {
     setFile(files[0])
     const fileText = await readFileContent(files[0])
     setAlgorithmRawCode(fileText)
   }
 
-  const handleSelectChange = (event: any) => {
+  const handleSelectChange = (event: ChangeEvent<HTMLSelectElement>) => {
     const comType = event.target.value
     setComputeType(comType)
 
diff --git a/src/components/organisms/AssetActions/Pool/Add.tsx b/src/components/organisms/AssetActions/Pool/Add.tsx
index 97e9e9922..0ab429b5d 100644
--- a/src/components/organisms/AssetActions/Pool/Add.tsx
+++ b/src/components/organisms/AssetActions/Pool/Add.tsx
@@ -1,4 +1,4 @@
-import React, { ReactElement, useState, ChangeEvent, useEffect } from 'react'
+import React, { ReactElement, useState, ChangeEvent } from 'react'
 import styles from './Add.module.css'
 import { useOcean } from '@oceanprotocol/react'
 import Header from './Header'
diff --git a/src/components/organisms/AssetActions/Pool/index.tsx b/src/components/organisms/AssetActions/Pool/index.tsx
index 57b753ac7..a3b2eb166 100644
--- a/src/components/organisms/AssetActions/Pool/index.tsx
+++ b/src/components/organisms/AssetActions/Pool/index.tsx
@@ -118,7 +118,7 @@ export default function Pool({ ddo }: { ddo: DDO }): ReactElement {
       }
     }
     init()
-  }, [ocean, accountId, price])
+  }, [ocean, accountId, price, ddo.dataToken])
 
   return (
     <>
diff --git a/src/components/organisms/AssetContent/MetaFull.tsx b/src/components/organisms/AssetContent/MetaFull.tsx
index 707f3eeca..7e31d0084 100644
--- a/src/components/organisms/AssetContent/MetaFull.tsx
+++ b/src/components/organisms/AssetContent/MetaFull.tsx
@@ -32,7 +32,7 @@ export default function MetaFull({
       setDtSymbol(symbol)
     }
     getDataTokenInfo()
-  }, [ocean])
+  }, [ocean, accountId, dataToken])
 
   return (
     <div className={styles.metaFull}>
diff --git a/src/components/organisms/Footer.tsx b/src/components/organisms/Footer.tsx
index bf5eb592d..1a20105fa 100644
--- a/src/components/organisms/Footer.tsx
+++ b/src/components/organisms/Footer.tsx
@@ -1,9 +1,9 @@
-import React from 'react'
+import React, { ReactElement } from 'react'
 import styles from './Footer.module.css'
 import Markdown from '../atoms/Markdown'
 import { useSiteMetadata } from '../../hooks/useSiteMetadata'
 
-export default function Footer() {
+export default function Footer(): ReactElement {
   const { copyright } = useSiteMetadata()
   const year = new Date().getFullYear()
 
diff --git a/src/components/pages/Home.tsx b/src/components/pages/Home.tsx
index 2cd27a11a..b9e291792 100644
--- a/src/components/pages/Home.tsx
+++ b/src/components/pages/Home.tsx
@@ -38,12 +38,12 @@ export default function HomePage(): ReactElement {
       setLoading(false)
     }
     init()
-  }, [])
+  }, [config.metadataStoreUri])
 
   return (
     <>
       <Container narrow className={styles.searchWrap}>
-        <SearchBar large />
+        <SearchBar />
       </Container>
 
       <section className={styles.latest}>
diff --git a/src/components/pages/Publish/PublishForm.tsx b/src/components/pages/Publish/PublishForm.tsx
index 7b927adf2..e7d354c81 100644
--- a/src/components/pages/Publish/PublishForm.tsx
+++ b/src/components/pages/Publish/PublishForm.tsx
@@ -28,19 +28,18 @@ export default function PublishForm({
     initialValues
   } = useFormikContext()
   const formName = 'ocean-publish-form'
+
   // reset form validation on every mount
   useEffect(() => {
     setErrors({})
     setTouched({})
 
     // setSubmitting(false)
-  }, [])
+  }, [setErrors, setTouched])
 
-  const resetFormAndClearStorage = async (e: FormEvent<Element>) => {
+  const resetFormAndClearStorage = (e: FormEvent<Element>) => {
     e.preventDefault()
-
-    await resetForm({ values: initialValues, status: 'empty' })
-
+    resetForm({ values: initialValues, status: 'empty' })
     setStatus('empty')
   }
 
diff --git a/src/components/pages/Publish/index.tsx b/src/components/pages/Publish/index.tsx
index 5a7774768..6962b4d79 100644
--- a/src/components/pages/Publish/index.tsx
+++ b/src/components/pages/Publish/index.tsx
@@ -10,9 +10,9 @@ import { FormContent } from '../../../@types/Form'
 import { initialValues, validationSchema } from '../../../models/FormPublish'
 import { transformPublishFormToMetadata } from './utils'
 import Preview from './Preview'
-import { MetadataPublishForm } from '../../../@types/MetaData'
+import { MetadataMarket, MetadataPublishForm } from '../../../@types/MetaData'
 import { useUserPreferences } from '../../../providers/UserPreferences'
-import { Logger } from '@oceanprotocol/lib'
+import { Logger, Metadata } from '@oceanprotocol/lib'
 
 export default function PublishPage({
   content
@@ -35,7 +35,7 @@ export default function PublishPage({
       Logger.log('Publish with ', price, serviceType, price.datatoken)
 
       const ddo = await publish(
-        metadata as any,
+        (metadata as unknown) as Metadata,
         {
           ...price,
           liquidityProviderFee: `${price.liquidityProviderFee}`
diff --git a/src/components/templates/Search/index.tsx b/src/components/templates/Search/index.tsx
index e3a1ad218..d3e42e101 100644
--- a/src/components/templates/Search/index.tsx
+++ b/src/components/templates/Search/index.tsx
@@ -34,7 +34,7 @@ export default function SearchPage({
       setLoading(false)
     }
     initSearch()
-  }, [text, tag, page])
+  }, [text, tag, page, config.metadataStoreUri, parsed])
 
   return (
     <section className={styles.grid}>
diff --git a/src/helpers/NetworkMonitor.tsx b/src/helpers/NetworkMonitor.tsx
index 8aa4d241a..3dd6a8a2a 100644
--- a/src/helpers/NetworkMonitor.tsx
+++ b/src/helpers/NetworkMonitor.tsx
@@ -1,23 +1,24 @@
-import React, { useEffect } from 'react'
+import React, { ReactElement, useEffect } from 'react'
 import { useOcean } from '@oceanprotocol/react'
 import { getOceanConfig } from './wrapRootElement'
 
-export function NetworkMonitor() {
+export function NetworkMonitor(): ReactElement {
   const { connect, web3Provider } = useOcean()
 
-  const handleNetworkChanged = (chainId: number) => {
-    const config = getOceanConfig(chainId)
-    connect(config)
-  }
   useEffect(() => {
     if (!web3Provider) return
 
+    async function handleNetworkChanged(chainId: number) {
+      const config = getOceanConfig(chainId)
+      await connect(config)
+    }
+
     web3Provider.on('chainChanged', handleNetworkChanged)
 
     return () => {
       web3Provider.removeListener('chainChanged', handleNetworkChanged)
     }
-  }, [web3Provider])
+  }, [web3Provider, connect])
 
   return <></>
 }
diff --git a/src/utils/cleanupContentType.ts b/src/utils/cleanupContentType.ts
index f0a0ca826..6e1060c52 100644
--- a/src/utils/cleanupContentType.ts
+++ b/src/utils/cleanupContentType.ts
@@ -1,4 +1,4 @@
-const cleanupContentType = (contentType: string) => {
+const cleanupContentType = (contentType: string): string => {
   // strip away the 'application/' part
   const contentTypeSplit = contentType.split('/')[1]
 
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 54d19526b..1b844823a 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -64,7 +64,7 @@ export async function getFileInfo(url: string): Promise<FileMetadata> {
   }
 }
 
-export async function fetchData(url: string): Promise<any> {
+export async function fetchData(url: string): Promise<AxiosResponse['data']> {
   try {
     const response = await axios(url)
 
@@ -123,7 +123,7 @@ export function setProperty<T extends Record<string, unknown>>(
   objectToBeUpdated: T,
   propertyName: keyof T,
   value?: T[keyof T]
-) {
+): void {
   if (value) {
     objectToBeUpdated[propertyName] = value
   } else {