Merge pull request #45 from nevermined-io/test/setup

Test/setup

Author: jbesraa

example/src/examples/index.tsx

@@ -1,16 +1,35 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import Catalog from 'hello-catalog';
+import { DDO } from '@nevermined-io/nevermined-sdk-js';
 
-const Example = (props: any) => {
-  const ethProvider = Catalog.getEtheruemProvider();
-  const { isAvailable: isEthAvailable } = Catalog.useWeb3Service(ethProvider);
+export const allAssetsDefaultQuery = {
+  offset: 2, // limit response to 2 items
+  page: 1,
+  query: {},
+  sort: {
+    created: -1
+  }
+};
+
+const App = (props: any) => {
+  const { sdk } = Catalog.useNevermined();
+  const { useFetchAssets, assets, isLoadingFetchAssets } = Catalog.useAssetService();
+  useFetchAssets(allAssetsDefaultQuery);
 
   return (
     <>
-      <div>Is Etheruem available: </div>
-      <div>{String(isEthAvailable())}</div>
+      <div>Is SDK Avaialable:</div>
+      <div>{Object.keys(sdk).length > 0 ? 'Yes' : 'No'}</div>
+      <div>Is Loading Assets</div>
+      <div>{isLoadingFetchAssets ? 'Yes' : 'No'}</div>
+      <div>Assets:</div>
+      <div>
+        {assets?.map((asset: DDO) => (
+          <div key={asset.id}>{asset.id}</div>
+        ))}
+      </div>
     </>
   );
 };
 
-export default Example;
+export default App;

lib/.eslintrc

@@ -1,5 +1,6 @@
 {
   "extends": ["react-app", "react-app/jest"],
+  "parse": "@typescript-eslint/parser",
   "env": {
     "es6": true,
     "browser": true,

lib/README.md

@@ -1,55 +1,74 @@
-# Preqrequisites
-
-1. have `yarn` installed
-2. have `nvm` installed (or node version 14)
-3. use node version 14: `nvm use`
-4. install packages: `yarn`.
-
-## Available Scripts
-
-In the project directory, you can run:
-
-### `yarn start`
-
-Runs the app in the development mode.\
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
-
-The page will reload if you make edits.\
-You will also see any lint errors in the console.
-
-### `yarn test`
-
-Launches the test runner in the interactive watch mode.\
-
-### `yarn test:e2e`
-
-Start integration tests.
-
-### `yarn build`
-
-Builds the library. It uses a custom webpack config found under `webpack.config.js`
-
-This config is only used for building the `PACKAGE`, not for dev mode.
-
-### Documentation
-
-Documentation uses [typedoc](https://github.com/TypeStrong/typedoc) under the hood.
-
-To generate documentation:
-
-`yarn docs:generate`.
-
-To view documentation:
-
-`yarn docs:serve`
-
-Utility command to do both:
-
-`yarn docs:dev`
-
-
-Documentation is currently not hosted or committed to git.
-
-## Components
-
-To see the components in action, start the server. The [Example](/src/Example.tsx) contains a small app showcasing all the components. Please make sure to add new component examples to the example when you add new ones.
+# Nevermined React Library
+
+This projects aims to provide generic React components that
+connect and communicate with Nevermined.
+
+### Example
+
+```typescript
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Config, DDO } from '@nevermined-io/nevermined-sdk-js';
+import Catalog from '@nevermined-io/components-catalog';
+import App from 'app';
+
+const metadataUri = 'https://metadata.autonomies.staging.nevermined.rocks';
+const gatewayAddress = '0xe63a11dC61b117D9c2B1Ac8021d4cffEd8EC213b';
+const gatewayUri = 'https://gateway.autonomies.staging.nevermined.rocks';
+const faucetUri = 'https://faucet.autonomies.staging.nevermined.rocks';
+const nodeUri = 'https://polygon-mumbai.infura.io/v3/eda048626e2745b182f43de61ac70be1';
+
+const appConfig = {
+    metadataUri,
+    gatewayUri,
+    faucetUri,
+    nodeUri,
+    gatewayAddress,
+    verbose: true
+} as Config;
+
+const assetsQuery = {
+  offset: 2, // limit response to 2 items
+  page: 1,
+  query: {},
+  sort: {
+    created: -1
+  }
+};
+
+const App = () => {
+  const { sdk } = Catalog.useNevermined();
+  const { useFetchAssets, assets, isLoadingFetchAssets } = Catalog.useAssetService();
+  useFetchAssets(assetsQuery);
+
+  return (
+    <>
+      <div>Is SDK Avaialable:</div>
+      <div>{Object.keys(sdk).length > 0 ? 'Yes' : 'No'}</div>
+      <div>Is Loading Assets</div>
+      <div>{isLoadingFetchAssets ? 'Yes' : 'No'}</div>
+      <div>Assets:</div>
+      <div>
+        {assets?.map((asset: DDO) => (
+          <div key={asset.id}>{asset.id}</div>
+        ))}
+      </div>
+    </>
+  );
+};
+
+ReactDOM.render(
+  <div>
+    <Catalog.NeverminedProvider config={appConfig}>
+      <App />
+    </Catalog.NeverminedProvider>
+  </div>,
+  document.getElementById('root') as HTMLElement
+);
+```
+
+
+### Available Services
+
+#### useAssetService
+#### useWeb3Service

lib/package.json

@@ -8,29 +8,18 @@
     "build:react": "react-scripts build",
     "build:tsc": "tsc --noEmit false",
     "clean": "rm -rf dist",
-    "test": "react-scripts test --coverage --watchAll=false --silent --env=./test/custom-env.js",
+    "test": "jest src --watchAll",
     "eject": "react-scripts eject",
     "ts:lint": "npx eslint . --ext .ts,.tsx"
   },
   "main": "./dist/node/index.js",
   "types": "./dist/node/index.d.ts",
   "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
+    "extends": ["react-app", "react-app/jest"]
   },
   "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
+    "production": [">0.2%", "not dead", "not op_mini all"],
+    "development": ["last 1 chrome version", "last 1 firefox version", "last 1 safari version"]
   },
   "peerDependencies": {
     "react": "^17.0.2",
@@ -47,11 +36,12 @@
     "bem-helpers": "^1.1.0",
     "bip39": "^3.0.4",
     "classnames": "^2.3.1",
+    "jest": "^28.1.0",
     "lodash.uniqby": "^4.7.0",
     "node-fetch": "^3.2.0",
     "os-browserify": "^0.3.0",
     "path-browserify": "^1.0.1",
-    "react": "^17.0.2",
+    "react": "^18.0.0",
     "react-app-rewired": "^2.2.1",
     "react-scripts": "^5.0.1",
     "stream-browserify": "^3.0.0",
@@ -68,8 +58,9 @@
     "@babel/preset-react": "^7.16.5",
     "@metamask/providers": "^8.1.1",
     "@types/jest": "^27.0.3",
-    "@types/lodash.uniqby": "^4.7.6",
     "@types/node": "^12.0.0",
+    "@typescript-eslint/eslint-plugin": "^5.23.0",
+    "@typescript-eslint/parser": "^5.23.0",
     "babel-loader": "8.1.0",
     "eslint-config-react-app": "^6.0.0",
     "prettier": "^2.5.1",

lib/src/nevermined.tsx

@@ -2,6 +2,7 @@ import React, { useState, useEffect, createContext, useContext } from 'react';
 import { Nevermined, Config } from '@nevermined-io/nevermined-sdk-js';
 import Web3 from 'web3';
 import {
+  GenericOutput,
   NeverminedProviderContext,
   NeverminedProviderProps,
   OutputUseNeverminedService
@@ -14,46 +15,56 @@ const DEFAULT_NODE_URI =
 
 export const getEtheruemProvider = () => {
   const handler = (): Web3 => {
-    const provider: provider = window.ethereum;
+    const provider: provider = window?.ethereum;
     const web3 = new Web3(isEmptyObject(provider) ? DEFAULT_NODE_URI : provider);
-
     return web3;
   };
-
   return handler();
 };
 
+export const initializeNevermined = async (
+  config: Config
+): Promise<GenericOutput<Nevermined, any>> => {
+  try {
+    console.log('Loading SDK Started..');
+    const web3Provider = !isEmptyObject(config.web3Provider)
+      ? config.web3Provider
+      : getEtheruemProvider();
+
+    const nvmSdk: Nevermined = await Nevermined.getInstance({
+      ...config,
+      web3Provider
+    });
+    console.log('Loading SDK Finished Successfully');
+    return { data: nvmSdk, error: undefined, success: false };
+  } catch (error) {
+    console.log('Loading SDK Failed:');
+    console.log(error);
+    return { data: {} as Nevermined, error, success: false };
+  }
+};
+
 const useNeverminedService = (config: Config): OutputUseNeverminedService => {
   const [isLoading, setIsLoading] = useState<boolean>(true);
   const [error, setError] = useState<any>(undefined);
   const [sdk, setSdk] = useState({} as Nevermined);
 
   useEffect(() => {
     const loadNevermined = async (): Promise<void> => {
-      try {
-        const sdkAlreadyLoaded = !isEmptyObject(sdk);
-        if (sdkAlreadyLoaded) {
-          console.log('SDK already loaded. Aborting reload.');
-          console.log(sdk);
-          return;
-        }
-
-        console.log('Loading SDK Started..');
-        const web3Provider = !isEmptyObject(config.web3Provider)
-          ? config.web3Provider
-          : getEtheruemProvider();
-
-        const nvmSdk: any = await Nevermined.getInstance({
-          ...config,
-          web3Provider
-        });
-        setSdk(nvmSdk);
-        console.log('Loading SDK Finished:', nvmSdk);
-        setIsLoading(false);
-      } catch (error) {
+      const sdkAlreadyLoaded = !isEmptyObject(sdk);
+      if (sdkAlreadyLoaded) {
+        console.log('SDK already loaded.');
+        return;
+      }
+      setIsLoading(true);
+      const { data, success, error } = await initializeNevermined(config);
+      if (success) {
+        setSdk(data);
+        setError(error);
+      } else {
         setError(error);
-        console.log(error);
       }
+      setIsLoading(false);
     };
     loadNevermined();
   }, [config, sdk]);

lib/src/services/UseAssetService.ts

@@ -1,20 +1,33 @@
-import { DDO, DID, SearchQuery } from '@nevermined-io/nevermined-sdk-js';
+import { DDO, DID, Nevermined, SearchQuery } from '@nevermined-io/nevermined-sdk-js';
 import { useEffect, useState } from 'react';
-import { UseAssetService } from '../types';
+import { GenericOutput, UseAssetService } from '../types';
 import { useNevermined } from '../nevermined';
 
-const allAssetsDefaultQuery: SearchQuery = {
-  offset: 1,
+export const allAssetsDefaultQuery: SearchQuery = {
+  offset: 2, // limit response to 2 items
   page: 1,
   query: {},
   sort: {
     created: -1
   }
 };
 
+export const fetchAssets = async (
+  sdk: Nevermined,
+  q: SearchQuery
+): Promise<GenericOutput<DDO[], any>> => {
+  try {
+    const response = await sdk?.assets.query(q);
+    return { success: true, data: response.results, error: undefined };
+  } catch (error) {
+    return { success: false, data: [], error };
+  }
+};
+
 const useAssetService = (): UseAssetService => {
   const { sdk } = useNevermined();
   const [assets, setAssets] = useState<DDO[]>([]);
+  const [errorFetchAssets, setErrorFetchAssets] = useState<any>(undefined);
   const [isLoadingFetchAssets, setIsLoadingFetchAssets] = useState<boolean>(false);
 
   const getAssetDDO = async (did: DID | string): Promise<DDO> => {
@@ -29,18 +42,22 @@ const useAssetService = (): UseAssetService => {
       if (!sdk?.assets) {
         return;
       }
-      const fetchAllAssets = (q: SearchQuery) => {
-        setIsLoadingFetchAssets(true);
-        sdk?.assets.query(q).then((result: any) => {
-          setAssets(result.results);
-          setIsLoadingFetchAssets(false);
-        });
+      setIsLoadingFetchAssets(true);
+      const handler = async () => {
+        const response = await fetchAssets(sdk, query);
+        if (response.success) {
+          setAssets(response.data);
+          setErrorFetchAssets(undefined);
+        } else {
+          setErrorFetchAssets(response.error);
+        }
+        setIsLoadingFetchAssets(false);
       };
-      fetchAllAssets(query);
+      handler();
     }, [sdk, query]);
   };
 
-  return { getAssetDDO, assets, isLoadingFetchAssets, useFetchAssets };
+  return { getAssetDDO, assets, isLoadingFetchAssets, errorFetchAssets, useFetchAssets };
 };
 
 export default useAssetService;