status checks and fixes

package.json

@@ -17,6 +17,7 @@
     "@oceanprotocol/art": "^2.2.0",
     "@oceanprotocol/typographies": "^0.1.0",
     "@zeit/next-css": "^1.0.1",
+    "axios": "^0.19.0",
     "ipfs-http-client": "^39.0.0",
     "next": "9.1.1",
     "next-seo": "^2.1.2",

src/components/Add.tsx

@@ -24,9 +24,9 @@ const ipfsConfig: IpfsConfig = {
 
 async function addToIpfs(
   files: File[],
-  setFileSizeReceived: (size: string) => void
+  setFileSizeReceived: (size: string) => void,
+  ipfs: any
 ) {
-  const { ipfs } = useIpfsApi(ipfsConfig)
   const file = [...files][0]
   const fileDetails = { path: file.name, content: file }
 
@@ -36,12 +36,12 @@ async function addToIpfs(
   })
 
   // CID of wrapping directory is returned last
-  const cid = response[response.length - 1].hash
+  const cid = `${response[response.length - 1].hash}/${file.name}`
   return cid
 }
 
 export default function Add() {
-  const { isIpfsReady, ipfsError } = useIpfsApi(ipfsConfig)
+  const { ipfs, isIpfsReady, ipfsError } = useIpfsApi(ipfsConfig)
   const [fileHash, setFileHash] = useState()
   const [loading, setLoading] = useState(false)
   const [message, setMessage] = useState()
@@ -66,7 +66,7 @@ export default function Add() {
     setFileSize(totalSize)
 
     try {
-      const cid = await addToIpfs(acceptedFiles, setFileSizeReceived)
+      const cid = await addToIpfs(acceptedFiles, setFileSizeReceived, ipfs)
       if (!cid) return
       setFileHash(cid)
       setLoading(false)
@@ -89,14 +89,12 @@ export default function Add() {
           ipfs://{fileHash}
         </a>
       ) : (
-        <>
         <Dropzone
           multiple={false}
           handleOnDrop={handleOnDrop}
           disabled={!isIpfsReady}
           error={error || ipfsError}
         />
-        </>
       )}
     </div>
   )

src/components/Info.mdx

@@ -1,17 +1,18 @@
+import Status from './Status'
 import styles from './Info.module.css'
 
-export default ({ children }) => (
+export default ({ children }) => {
-  <aside className={styles.info}>{children}</aside>
+  return <aside className={styles.info}>{children}</aside>
-)
+}
 
-## Gateway
+## <Status type="gateway" /> Gateway
 
 ```text
 https://ipfs.oceanprotocol.com/ipfs/<hash>
 https://ipfs.oceanprotocol.com/ipns/<domain>
 ```
 
-## API
+## <Status type="api" /> API
 
 The IPFS node exposes selected endpoints:
 

src/components/Status.module.css

@@ -0,0 +1,28 @@
+@import '../styles/_variables.css';
+
+/* default: red square */
+.status {
+  width: var(--font-size-mini);
+  height: var(--font-size-mini);
+  display: inline-block;
+  background: var(--red);
+  margin-right: calc(var(--spacer) / 8);
+}
+
+/* yellow triangle */
+.loading {
+  composes: status;
+  background: none;
+  width: 0;
+  height: 0;
+  border-left: calc(var(--font-size-mini) / 1.7) solid transparent;
+  border-right: calc(var(--font-size-mini) / 1.7) solid transparent;
+  border-bottom: var(--font-size-mini) solid var(--yellow);
+}
+
+/* green circle */
+.online {
+  composes: status;
+  border-radius: 50%;
+  background: var(--green);
+}

src/components/Status.tsx

@@ -0,0 +1,47 @@
+import React, { useState, useEffect } from 'react'
+import { pingUrl } from '../utils'
+import { ipfsGateway, ipfsNodeUri } from '../../site.config'
+import styles from './Status.module.css'
+
+export default function Status({ type }: { type: string }) {
+  const [isOnline, setIsOnline] = useState(false)
+  const [isLoading, setIsLoading] = useState(true)
+
+  async function ping() {
+    const url =
+      type === 'gateway'
+        ? `${ipfsGateway}/ipfs/QmYwAPJzv5CZsnA625s3Xf2nemtYgPpHdWEz79ojWnPbdG/readme`
+        : `${ipfsNodeUri}/api/v0/id`
+
+    const ping = await pingUrl(url)
+    setIsLoading(false)
+    isOnline !== ping && setIsOnline(ping)
+  }
+
+  useEffect(() => {
+    ping()
+
+    const timer = setInterval(() => {
+      ping()
+    }, 10000) // run every 10 sec.
+
+    return () => {
+      clearInterval(timer)
+      setIsOnline(false)
+      setIsLoading(false)
+    }
+  }, [])
+
+  const classes = isLoading
+    ? styles.loading
+    : isOnline
+    ? styles.online
+    : styles.status
+
+  return (
+    <span
+      className={classes}
+      title={isLoading ? 'Checking...' : isOnline ? 'Online' : 'Offline'}
+    />
+  )
+}

src/utils.ts

@@ -0,0 +1,12 @@
+import axios from 'axios'
+
+export async function pingUrl(url: string) {
+  try {
+    const response = await axios(url, { timeout: 5000 })
+    if (!response || response.status !== 200) return false
+    return true
+  } catch (error) {
+    console.error(error.message)
+    return false
+  }
+}