Moved AssetsLatest to useContext hook

Moving all components to functional components style and using hooks for
state, context and component lifecycles

Signed-off-by: Pablo F. Mescher <pfmescher@gmail.com>

.gitignore

@@ -28,3 +28,6 @@ cypress/videos
 cypress/fixtures/did.txt
 cypress/fixtures/did-ipfs.txt
 artifacts
+
+# IDE
+.idea

client/src/components/organisms/AssetsLatest.tsx

@@ -1,32 +1,16 @@
-import React, { PureComponent } from 'react'
-import { Logger } from '@oceanprotocol/squid'
+import React, { useContext, useEffect, useState } from 'react'
+import { DDO, Logger } from '@oceanprotocol/squid'
 import { User } from '../../context'
 import Spinner from '../atoms/Spinner'
 import AssetTeaser from '../molecules/AssetTeaser'
 import styles from './AssetsLatest.module.scss'
 
-interface AssetsLatestState {
-    latestAssets?: any[]
-    isLoadingLatest?: boolean
-}
-
-export default class AssetsLatest extends PureComponent<{}, AssetsLatestState> {
-    public state = { latestAssets: [], isLoadingLatest: true }
-
-    public _isMounted = false
-
-    public componentDidMount() {
-        this._isMounted = true
-        this._isMounted && this.getLatestAssets()
-    }
-
-    public componentWillUnmount() {
-        this._isMounted = false
-    }
-
-    private getLatestAssets = async () => {
-        const { ocean } = this.context
+const AssetsLatest = () => {
+    const [latestAssets, setLatestAssets] = useState<DDO[]>([])
+    const [isLoadingLatest, setIsLoadingLatest] = useState(false)
+    const { ocean } = useContext(User)
 
+    const getLatestAssets = async () => {
         const searchQuery = {
             offset: 15,
             page: 1,
@@ -38,42 +22,36 @@ export default class AssetsLatest extends PureComponent<{}, AssetsLatestState> {
 
         try {
             const search = await ocean.assets.query(searchQuery)
-            this.setState({
-                latestAssets: search.results,
-                isLoadingLatest: false
-            })
+            setLatestAssets(search.results)
+            setIsLoadingLatest(false)
         } catch (error) {
             Logger.error(error.message)
-            this.setState({ isLoadingLatest: false })
+            setIsLoadingLatest(false)
         }
     }
 
-    public render() {
-        const { latestAssets, isLoadingLatest } = this.state
+    useEffect(() => {
+        getLatestAssets()
+    }, [])
 
-        return (
-            <>
-                <h2 className={styles.title}>Latest published assets</h2>
-                <div className={styles.latestAssetsWrap}>
-                    {isLoadingLatest ? (
-                        <Spinner message="Loading..." />
-                    ) : latestAssets && latestAssets.length ? (
-                        <div className={styles.latestAssets}>
-                            {latestAssets.map((asset: any) => (
-                                <AssetTeaser
-                                    key={asset.id}
-                                    asset={asset}
-                                    minimal
-                                />
-                            ))}
-                        </div>
-                    ) : (
-                        <div>No data sets found.</div>
-                    )}
-                </div>
-            </>
-        )
-    }
+    return (
+        <>
+            <h2 className={styles.title}>Latest published assets</h2>
+            <div className={styles.latestAssetsWrap}>
+                {isLoadingLatest ? (
+                    <Spinner message="Loading..." />
+                ) : latestAssets && latestAssets.length ? (
+                    <div className={styles.latestAssets}>
+                        {latestAssets.map(asset => (
+                            <AssetTeaser key={asset.id} asset={asset} minimal />
+                        ))}
+                    </div>
+                ) : (
+                    <div>No data sets found.</div>
+                )}
+            </div>
+        </>
+    )
 }
 
-AssetsLatest.contextType = User
+export default AssetsLatest

client/src/context/index.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import { Ocean } from '@oceanprotocol/squid'
 
 export const User = React.createContext({
     isLogged: false,
@@ -7,7 +8,8 @@ export const User = React.createContext({
     isLoading: false,
     account: '',
     web3: {},
-    ocean: {},
+    // eslint-disable-next-line
+    ocean: {} as Ocean,
     balance: {
         eth: 0,
         ocn: 0