From fd2cfb07e4d03f9b424597e54748a2b58f8730c3 Mon Sep 17 00:00:00 2001
From: "Pablo F. Mescher" <pfmescher@gmail.com>
Date: Fri, 24 Jan 2020 11:54:48 +0100
Subject: [PATCH] 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                                    |  3 +
 .../src/components/organisms/AssetsLatest.tsx | 86 +++++++------------
 client/src/context/index.tsx                  |  4 +-
 3 files changed, 38 insertions(+), 55 deletions(-)

diff --git a/.gitignore b/.gitignore
index 5132172..181c95e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -28,3 +28,6 @@ cypress/videos
 cypress/fixtures/did.txt
 cypress/fixtures/did-ipfs.txt
 artifacts
+
+# IDE
+.idea
\ No newline at end of file
diff --git a/client/src/components/organisms/AssetsLatest.tsx b/client/src/components/organisms/AssetsLatest.tsx
index a705309..7c80092 100644
--- a/client/src/components/organisms/AssetsLatest.tsx
+++ b/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
diff --git a/client/src/context/index.tsx b/client/src/context/index.tsx
index 1bdfcf2..4f19b98 100644
--- a/client/src/context/index.tsx
+++ b/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