commons/client/src/components/organisms/AssetsUser.tsx

import React, { PureComponent } from 'react'
import { Link } from 'react-router-dom'
import { Logger } from '@oceanprotocol/squid'
import { User } from '../../context/User'
import Spinner from '../atoms/Spinner'
import Asset from '../molecules/Asset'
import Web3message from './Web3message'
import styles from './AssetsUser.module.scss'

export default class AssetsUser extends PureComponent<
    { list?: boolean; recent?: number },
    { results: any[]; isLoading: boolean }
> {
    public state = { results: [], isLoading: true }

    public _isMounted: boolean = false

    public componentDidMount() {
        this._isMounted = true
        this._isMounted && this.searchOcean()
    }

    public componentWillUnmount() {
        this._isMounted = false
    }

    private async searchOcean() {
        const { account, ocean } = this.context

        if (account) {
            ocean.keeper.didRegistry.contract.getPastEvents(
                'DIDAttributeRegistered',
                {
                    filter: { _owner: account },
                    fromBlock: 0,
                    toBlock: 'latest'
                },
                async (error: any, events: any) => {
                    if (error) {
                        Logger.log('error retrieving', error)
                        this._isMounted && this.setState({ isLoading: false })
                    } else {
                        const results = []
                        for (const event of events) {
                            const ddo = await ocean.assets.resolve(
                                `did:op:${event.returnValues._did.substring(2)}`
                            )
                            results.push(ddo)
                        }
                        this._isMounted &&
                            this.setState({ results, isLoading: false })
                    }
                }
            )
        } else {
            this.setState({ isLoading: false })
        }
    }

    public render() {
        const { account, isNile } = this.context

        return isNile && account ? (
            <div className={styles.assetsUser}>
                {this.props.recent && (
                    <h2 className={styles.subTitle}>
                        Your Latest Published Data Sets
                    </h2>
                )}

                {this.state.isLoading ? (
                    <Spinner />
                ) : this.state.results.length ? (
                    <>
                        {this.state.results
                            .slice(
                                0,
                                this.props.recent
                                    ? this.props.recent
                                    : undefined
                            )
                            .filter(asset => !!asset)
                            .map((asset: any) => (
                                <Asset
                                    list={this.props.list}
                                    key={asset.id}
                                    asset={asset}
                                />
                            ))}
                        {this.props.recent && (
                            <Link className={styles.link} to={'/history'}>
                                All Data Sets
                            </Link>
                        )}
                    </>
                ) : (
                    <div className={styles.empty}>
                        <p>No Data Sets Yet.</p>
                        <Link to="/publish">+ Publish A Data Set</Link>
                    </div>
                )}
            </div>
        ) : (
            <Web3message />
        )
    }
}

AssetsUser.contextType = User