Merge pull request #22 from oceanprotocol/feature/updates

Fixes and updates

package.json

@@ -12,32 +12,32 @@
   "author": "Matthias Kretschmann <matthias@oceanprotocol.com>",
   "license": "Apache-2.0",
   "dependencies": {
-    "@mdx-js/loader": "^1.5.5",
-    "@next/mdx": "^9.2.1",
+    "@mdx-js/loader": "^1.6.5",
+    "@next/mdx": "^9.4.4",
     "@oceanprotocol/art": "^2.2.0",
     "@oceanprotocol/typographies": "^0.1.0",
     "axios": "^0.19.2",
-    "ipfs-http-client": "^42.0.0",
-    "next": "9.2.2",
-    "next-seo": "^4.1.0",
+    "ipfs-http-client": "^44.1.1",
+    "next": "^9.4.4",
+    "next-seo": "^4.5.0",
     "next-svgr": "^0.0.2",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
     "react-dropzone": "^11.0.0"
   },
   "devDependencies": {
     "@types/next-seo": "^1.10.0",
     "@types/node": "^14.0.0",
-    "@types/react": "^16.9.19",
-    "@typescript-eslint/eslint-plugin": "^2.19.1",
-    "@typescript-eslint/parser": "^2.19.1",
-    "eslint": "^6.8.0",
+    "@types/react": "^16.9.32",
+    "@typescript-eslint/eslint-plugin": "^3.1.0",
+    "@typescript-eslint/parser": "^3.1.0",
+    "eslint": "^7.1.0",
     "eslint-config-oceanprotocol": "^1.5.0",
-    "eslint-config-prettier": "^6.10.0",
-    "eslint-plugin-prettier": "^3.1.2",
-    "eslint-plugin-react": "^7.18.3",
-    "prettier": "^1.19.1",
-    "typescript": "^3.7.5"
+    "eslint-config-prettier": "^6.11.0",
+    "eslint-plugin-prettier": "^3.1.3",
+    "eslint-plugin-react": "^7.20.0",
+    "prettier": "^2.0.5",
+    "typescript": "^3.9.5"
   },
   "repository": {
     "type": "git",

src/Layout.tsx

@@ -27,7 +27,6 @@ export default function Layout({
           title,
           description,
           images: [{ url: `${url}/share.png` }],
-          // eslint-disable-next-line @typescript-eslint/camelcase
           site_name: title
         }}
         twitter={{

src/components/Add.tsx

@@ -16,11 +16,11 @@ const ipfsConfig: IpfsConfig = {
 
 export default function Add() {
   const { ipfs, isIpfsReady, ipfsError } = useIpfsApi(ipfsConfig)
-  const [fileHash, setFileHash] = useState()
+  const [fileHash, setFileHash] = useState('')
   const [loading, setLoading] = useState(false)
-  const [message, setMessage] = useState()
-  const [error, setError] = useState()
-  const [fileSize, setFileSize] = useState()
+  const [message, setMessage] = useState('')
+  const [error, setError] = useState('')
+  const [fileSize, setFileSize] = useState('')
   const [fileSizeReceived] = useState('')
 
   useEffect(() => {
@@ -34,7 +34,7 @@ export default function Add() {
     if (!acceptedFiles[0]) return
 
     setLoading(true)
-    setError(null)
+    setError('')
 
     const totalSize = formatBytes(acceptedFiles[0].size, 0)
     setFileSize(totalSize)
@@ -54,7 +54,7 @@ export default function Add() {
     <div className={styles.add}>
       {loading ? (
         <Spinner message={message} />
-      ) : fileHash ? (
+      ) : fileHash !== '' ? (
         <a
           target="_blank"
           rel="noopener noreferrer"

src/components/Dropzone.tsx

@@ -13,7 +13,7 @@ export default function Dropzone({
   multiple?: boolean
   error?: string
 }) {
-  const onDrop = useCallback(acceptedFiles => handleOnDrop(acceptedFiles), [
+  const onDrop = useCallback((acceptedFiles) => handleOnDrop(acceptedFiles), [
     handleOnDrop
   ])
 
@@ -39,7 +39,7 @@ export default function Dropzone({
         `Drop it like it's hot!`
       ) : multiple ? (
         `Drag 'n' drop some files here, or click to select files`
-      ) : error ? (
+      ) : error || error !== '' ? (
         <div className={styles.error}>{error}</div>
       ) : (
         `Drag 'n' drop a file here, or click to select a file`

src/components/Footer.tsx

@@ -13,7 +13,7 @@ export default function Footer() {
         All Rights Reserved
       </div>
       <div>
-        {links.map(link => (
+        {links.map((link) => (
           <a key={link.name} href={link.url}>
             {link.name}
           </a>

src/hooks/use-ipfs-api.tsx

@@ -18,7 +18,7 @@ export default function useIpfsApi(config: IpfsConfig) {
   useEffect(() => {
     async function initIpfs() {
       if (ipfs !== null) return
-      // eslint-disable-next-line
+
       ipfs = await ipfsClient(config)
 
       try {
@@ -44,7 +44,6 @@ export default function useIpfsApi(config: IpfsConfig) {
   }, [config])
 
   useEffect(() => {
-    // just like componentWillUnmount()
     return function cleanup() {
       if (ipfs) {
         setIpfsReady(false)

src/utils.ts

@@ -9,32 +9,26 @@ export function formatBytes(a: number, b: number) {
   return parseFloat((a / Math.pow(c, f)).toFixed(d)) + ' ' + e[f]
 }
 
-const streamFiles = (ipfs: any, file: any) =>
-  new Promise((resolve, reject) => {
-    const stream = ipfs.addReadableStream({
-      wrapWithDirectory: true
-      // progress: (length: number) => setFileSizeReceived(formatBytes(length, 0))
-    })
-
-    stream.on('data', (data: any) => {
-      console.log(`Added ${data.path} hash: ${data.hash}`)
-
-      // The last data event will contain the directory hash
-      if (data.path === '') resolve(data.hash)
-    })
-
-    stream.on('error', reject)
-    stream.write(file)
-    stream.end()
-  })
-
 export async function addToIpfs(files: File[], ipfs: any) {
   const file = [...files][0]
   const fileDetails = { path: file.name, content: file }
 
-  const directoryCid = await streamFiles(ipfs, fileDetails)
-  const cid = `${directoryCid}/${file.name}`
+  const source = await ipfs.add(fileDetails, {
+    wrapWithDirectory: true,
+    progress: (prog: number) => console.log(`received: ${prog}`)
+  })
+
+  try {
+    for await (const ipfsFile of source) {
+      // The last path will contain the directory hash
+      if (ipfsFile.path === '') {
+        const cid = `${ipfsFile.cid.toString()}/${file.name}`
         return cid
+      }
+    }
+  } catch (err) {
+    console.error(err)
+  }
 }
 
 export async function pingUrl(url: string) {