Merge pull request #696 from oceanprotocol/issue-695-add-sample-responses

Feature: Render example JSON response

data/sidebars/references.yml

@@ -13,11 +13,6 @@
     - title: API Reference
       link: /references/aquarius/
 
-- group: Aquarius Py Module
-  items:
-    - title: API Reference
-      link: /references/read-the-docs/aquarius/
-
 - group: provider REST API
   items:
     - title: API Reference

gatsby-node.js

@@ -162,12 +162,10 @@ exports.createPages = ({ graphql, actions }) => {
 
         const markdowns = result.data.allRepoMarkdown.edges
         const oceanPyList = filterMarkdownList(markdowns, 'ocean.py')
-        const aquariusList = filterMarkdownList(markdowns, 'aquarius')
         const providerList = filterMarkdownList(markdowns, 'provider')
         const subgraphList = filterMarkdownList(markdowns, 'ocean-subgraph')
 
         await createReadTheDocsPage(createPage, 'ocean-py', oceanPyList)
-        await createReadTheDocsPage(createPage, 'aquarius', aquariusList)
         await createReadTheDocsPage(createPage, 'provider', providerList)
         await createReadTheDocsPage(createPage, 'ocean-subgraph', subgraphList)
 

package-lock.json

@@ -6254,6 +6254,11 @@
         }
       }
     },
+    "base16": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/base16/-/base16-1.0.0.tgz",
+      "integrity": "sha1-4pf2DX7BAUp6lxo568ipjAtoHnA="
+    },
     "base64-arraybuffer": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-0.1.4.tgz",
@@ -11294,6 +11299,33 @@
         "websocket-driver": ">=0.5.1"
       }
     },
+    "fbemitter": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/fbemitter/-/fbemitter-3.0.0.tgz",
+      "integrity": "sha512-KWKaceCwKQU0+HPoop6gn4eOHk50bBv/VxjJtGMfwmJt3D29JpN4H4eisCtIPA+a8GVBam+ldMMpMjJUvpDyHw==",
+      "requires": {
+        "fbjs": "^3.0.0"
+      }
+    },
+    "fbjs": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-3.0.0.tgz",
+      "integrity": "sha512-dJd4PiDOFuhe7vk4F80Mba83Vr2QuK86FoxtgPmzBqEJahncp+13YCmfoa53KHCo6OnlXLG7eeMWPfB5CrpVKg==",
+      "requires": {
+        "cross-fetch": "^3.0.4",
+        "fbjs-css-vars": "^1.0.0",
+        "loose-envify": "^1.0.0",
+        "object-assign": "^4.1.0",
+        "promise": "^7.1.1",
+        "setimmediate": "^1.0.5",
+        "ua-parser-js": "^0.7.18"
+      }
+    },
+    "fbjs-css-vars": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/fbjs-css-vars/-/fbjs-css-vars-1.0.2.tgz",
+      "integrity": "sha512-b2XGFAFdWZWg0phtAWLHCk836A1Xann+I+Dgd3Gk64MHKZO44FfoD1KxyvbSh0qZsIoXQGGlVztIY+oitJPpRQ=="
+    },
     "fd": {
       "version": "0.0.3",
       "resolved": "https://registry.npmjs.org/fd/-/fd-0.0.3.tgz",
@@ -11502,6 +11534,15 @@
         "readable-stream": "^2.3.6"
       }
     },
+    "flux": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/flux/-/flux-4.0.1.tgz",
+      "integrity": "sha512-emk4RCvJ8RzNP2lNpphKnG7r18q8elDYNAPx7xn+bDeOIo9FFfxEfIQ2y6YbQNmnsGD3nH1noxtLE64Puz1bRQ==",
+      "requires": {
+        "fbemitter": "^3.0.0",
+        "fbjs": "^3.0.0"
+      }
+    },
     "follow-redirects": {
       "version": "1.13.1",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.13.1.tgz",
@@ -17339,6 +17380,11 @@
       "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz",
       "integrity": "sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8="
     },
+    "lodash.curry": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.curry/-/lodash.curry-4.1.1.tgz",
+      "integrity": "sha1-JI42By7ekGUB11lmIAqG2riyMXA="
+    },
     "lodash.debounce": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
@@ -17370,6 +17416,11 @@
       "resolved": "https://registry.npmjs.org/lodash.flattendeep/-/lodash.flattendeep-4.4.0.tgz",
       "integrity": "sha1-+wMJF/hqMTTlvJvsDWngAT3f7bI="
     },
+    "lodash.flow": {
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.flow/-/lodash.flow-3.5.0.tgz",
+      "integrity": "sha1-h79AKSuM+D5OjOGjrkIJ4gBxZ1o="
+    },
     "lodash.foreach": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.foreach/-/lodash.foreach-4.5.0.tgz",
@@ -21122,6 +21173,11 @@
         "escape-goat": "^2.0.0"
       }
     },
+    "pure-color": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/pure-color/-/pure-color-1.3.0.tgz",
+      "integrity": "sha1-H+Bk+wrIUfDeYTIKi/eWg2Qi8z4="
+    },
     "q": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/q/-/q-1.5.1.tgz",
@@ -21235,6 +21291,17 @@
         "object-assign": "^4.1.1"
       }
     },
+    "react-base16-styling": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/react-base16-styling/-/react-base16-styling-0.6.0.tgz",
+      "integrity": "sha1-7yFW1mz0E5aVyKFniGy2nqZgeSw=",
+      "requires": {
+        "base16": "^1.0.0",
+        "lodash.curry": "^4.0.1",
+        "lodash.flow": "^3.3.0",
+        "pure-color": "^1.2.0"
+      }
+    },
     "react-dev-utils": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-4.2.3.tgz",
@@ -21519,6 +21586,17 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.0.tgz",
       "integrity": "sha512-GFMtL0vHkiBv9HluwNZTggSn/sCyEt9n02aM0dSAjGGyqyNlAyftYm4phPxdvCigG15JreC5biwxCgTAJZ7yAA=="
     },
+    "react-json-view": {
+      "version": "1.21.3",
+      "resolved": "https://registry.npmjs.org/react-json-view/-/react-json-view-1.21.3.tgz",
+      "integrity": "sha512-13p8IREj9/x/Ye4WI/JpjhoIwuzEgUAtgJZNBJckfzJt1qyh24BdTm6UQNGnyTq9dapQdrqvquZTo3dz1X6Cjw==",
+      "requires": {
+        "flux": "^4.0.1",
+        "react-base16-styling": "^0.6.0",
+        "react-lifecycles-compat": "^3.0.4",
+        "react-textarea-autosize": "^8.3.2"
+      }
+    },
     "react-lifecycles-compat": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
@@ -21544,6 +21622,26 @@
       "resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.0.tgz",
       "integrity": "sha512-IgmcegOSi5SNX+2Snh1vqmF0Vg/CbkycU9XZbOHJlZ6kMzTmi3yc254oB1WCkgA7OQtIAoLmcSFuHTc/tlcqXg=="
     },
+    "react-textarea-autosize": {
+      "version": "8.3.3",
+      "resolved": "https://registry.npmjs.org/react-textarea-autosize/-/react-textarea-autosize-8.3.3.tgz",
+      "integrity": "sha512-2XlHXK2TDxS6vbQaoPbMOfQ8GK7+irc2fVK6QFIcC8GOnH3zI/v481n+j1L0WaPVvKxwesnY93fEfH++sus2rQ==",
+      "requires": {
+        "@babel/runtime": "^7.10.2",
+        "use-composed-ref": "^1.0.0",
+        "use-latest": "^1.0.0"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.14.8",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.14.8.tgz",
+          "integrity": "sha512-twj3L8Og5SaCRCErB4x4ajbvBIVV77CGeFglHpeg5WC5FF8TZzBWXtTJ4MqaD9QszLYTtr+IsaAL2rEUevb+eg==",
+          "requires": {
+            "regenerator-runtime": "^0.13.4"
+          }
+        }
+      }
+    },
     "react-transition-group": {
       "version": "4.4.2",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.2.tgz",
@@ -24677,6 +24775,11 @@
       "resolved": "https://registry.npmjs.org/true-case-path/-/true-case-path-2.2.1.tgz",
       "integrity": "sha512-0z3j8R7MCjy10kc/g+qg7Ln3alJTodw9aDuVWZa3uiWqfuBMKeAeP2ocWcxoyM3D73yz3Jt/Pu4qPr4wHSdB/Q=="
     },
+    "ts-essentials": {
+      "version": "2.0.12",
+      "resolved": "https://registry.npmjs.org/ts-essentials/-/ts-essentials-2.0.12.tgz",
+      "integrity": "sha512-3IVX4nI6B5cc31/GFFE+i8ey/N2eA0CZDbo6n0yrz0zDX8ZJ8djmU1p+XRz7G3is0F3bB3pu2pAroFdAWQKU3w=="
+    },
     "ts-invariant": {
       "version": "0.6.0",
       "resolved": "https://registry.npmjs.org/ts-invariant/-/ts-invariant-0.6.0.tgz",
@@ -24804,6 +24907,11 @@
         "is-typedarray": "^1.0.0"
       }
     },
+    "ua-parser-js": {
+      "version": "0.7.28",
+      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.28.tgz",
+      "integrity": "sha512-6Gurc1n//gjp9eQNXjD9O3M/sMwVtN5S8Lv9bvOYBfKfDNiIIhqiyi01vMBO45u4zkDE420w/e0se7Vs+sIg+g=="
+    },
     "uc.micro": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.6.tgz",
@@ -25368,6 +25476,27 @@
       "resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz",
       "integrity": "sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ=="
     },
+    "use-composed-ref": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/use-composed-ref/-/use-composed-ref-1.1.0.tgz",
+      "integrity": "sha512-my1lNHGWsSDAhhVAT4MKs6IjBUtG6ZG11uUqexPH9PptiIZDQOzaF4f5tEbJ2+7qvNbtXNBbU3SfmN+fXlWDhg==",
+      "requires": {
+        "ts-essentials": "^2.0.3"
+      }
+    },
+    "use-isomorphic-layout-effect": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.1.tgz",
+      "integrity": "sha512-L7Evj8FGcwo/wpbv/qvSfrkHFtOpCzvM5yl2KVyDJoylVuSvzphiiasmjgQPttIGBAy2WKiBNR98q8w7PiNgKQ=="
+    },
+    "use-latest": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/use-latest/-/use-latest-1.2.0.tgz",
+      "integrity": "sha512-d2TEuG6nSLKQLAfW3By8mKr8HurOlTkul0sOpxbClIv4SQ4iOd7BYr7VIzdbktUCnv7dua/60xzd8igMU6jmyw==",
+      "requires": {
+        "use-isomorphic-layout-effect": "^1.0.0"
+      }
+    },
     "username-sync": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/username-sync/-/username-sync-1.0.2.tgz",

package.json

@@ -56,6 +56,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-helmet": "^6.1.0",
+    "react-json-view": "^1.21.3",
     "react-scrollspy": "^3.4.3",
     "rehype-react": "^7.0.2",
     "remark": "^13.0.0",

src/templates/Swagger/Paths.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import slugify from 'slugify'
 import styles from './Paths.module.scss'
 import stylesDoc from '../Doc.module.scss'
-
+const ResponseExample = React.lazy(() => import('./ResponseExample'))
 const ParameterExample = ({ properties }) => (
   //
   // HEADS UP!
@@ -87,16 +87,28 @@ Parameters.propTypes = {
   parameters: PropTypes.array.isRequired
 }
 
-const Responses = ({ responses }) => (
+const Responses = ({ responses }) => {
-  <>
+  const isSSR = typeof window === 'undefined'
-    <h4 className={styles.subHeading}>Responses</h4>
+
-    {Object.keys(responses).map((key) => (
+  return (
-      <div key={key} className={styles.response}>
+    <>
-        <code>{key}</code> {responses[key].description}
+      <h4 className={styles.subHeading}>Responses</h4>
-      </div>
+      {Object.keys(responses).map((key) => (
-    ))}
+        <div key={key} className={styles.response}>
-  </>
+          <code>{key}</code> {responses[key].description}
-)
+          <br />
+          <>
+            {!isSSR && (
+              <React.Suspense fallback={<div />}>
+                <ResponseExample examples={responses[key].example} />
+              </React.Suspense>
+            )}
+          </>
+        </div>
+      ))}
+    </>
+  )
+}
 
 Responses.propTypes = {
   responses: PropTypes.object.isRequired
@@ -104,7 +116,6 @@ Responses.propTypes = {
 
 const Method = ({ keyName, value }) => {
   const { summary, description, parameters, responses } = value
-
   return (
     <div className={styles.method}>
       <h3 className={styles.pathMethod} data-type={keyName}>

src/templates/Swagger/ResponseExample.jsx

@@ -0,0 +1,45 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import ReactJson from 'react-json-view'
+
+const ResponseExample = ({ examples }) => {
+  if (!examples) return null
+  const jsonExample = examples['application/json']
+  const plainText = examples['text/plain']
+
+  if (jsonExample) {
+    return (
+      <div>
+        <b>Example</b>
+        <br />
+        <code>
+          {typeof jsonExample === 'boolean' ? (
+            <code>{JSON.stringify(jsonExample)}</code>
+          ) : (
+            <ReactJson
+              name={null}
+              src={jsonExample}
+              collapsed
+              enableClipboard={false}
+            />
+          )}
+        </code>
+      </div>
+    )
+  } else if (plainText) {
+    return (
+      <div>
+        <b>Example</b>
+        <code>{plainText}</code>
+      </div>
+    )
+  }
+
+  return null
+}
+
+ResponseExample.propTypes = {
+  examples: PropTypes.object
+}
+
+export default ResponseExample