docs: port examples to new api (ipfs#1222)

* fix: change name-api examples to new api

* fix: change files-api example to new api

* fix: change upload example to new api

* fix: change bundle-webpack to support new api

* fix: remove browserify example

doesnt support imports

* fix: change pubsub example to the new api

* Update examples/bundle-webpack/src/App.js

Co-Authored-By: Alan Shaw <alan.shaw@protocol.ai>

* Update examples/bundle-webpack/src/App.js

Co-Authored-By: Alan Shaw <alan.shaw@protocol.ai>

* Update examples/files-api/files-api.js

Co-Authored-By: Alan Shaw <alan.shaw@protocol.ai>

* Update examples/upload-file-via-browser/src/App.js

Co-Authored-By: Alan Shaw <alan.shaw@protocol.ai>

* Update examples/upload-file-via-browser/src/App.js

Co-Authored-By: Alan Shaw <alan.shaw@protocol.ai>

Co-authored-by: Alan Shaw <alan.shaw@protocol.ai>

examples/browser-pubsub/index.html

@@ -37,6 +37,6 @@ <h1 class="aqua fw2 montserrat dib ma0 pv2 ph1 v-mid fr f3 lh-copy">Pubsub</h1>
     <div id="console" class="f7 db w-100 ph1 pv2 monospace input-reset ba b--black-20 border-box overflow-scroll" style="height: 300px">
     </div>
   </div>
-  <script src="bundle.js"></script>
+  <script src="index.js"></script>
 </body>
 </html>

examples/browser-pubsub/package.json

@@ -5,16 +5,17 @@
   "private": true,
   "main": "index.js",
   "scripts": {
-    "start": "npm run build && npm run serve",
-    "build": "browserify index.js > bundle.js",
-    "serve": "http-server -a 127.0.0.1 -p 8888",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "start": "parcel index.html"
   },
   "author": "Alan Shaw",
   "license": "MIT",
   "dependencies": {
-    "browserify": "^16.5.0",
-    "http-server": "^0.11.1",
     "ipfs-http-client": "../../"
+  },
+  "browserslist": [
+    "last 2 versions and not dead and > 2%"
+  ],
+  "devDependencies": {
+    "parcel-bundler": "^1.12.4"
   }
 }

examples/bundle-webpack/package.json

@@ -21,9 +21,6 @@
     "webpack-dev-server": "~3.3.1"
   },
   "browserslist": [
-    ">1%",
-    "not dead",
-    "not ie <= 11",
-    "not op_mini all"
+    "last 2 versions and not dead and > 2%"
   ]
 }

examples/bundle-webpack/src/App.js

@@ -2,7 +2,7 @@
 const React = require('react')
 const ipfsClient = require('ipfs-http-client')
 
-const ipfs = ipfsClient('localhost', '5001')
+const ipfs = ipfsClient('/ip4/127.0.0.1/tcp/5001')
 const stringToUse = 'hello world from webpacked IPFS'
 
 class App extends React.Component {
@@ -16,24 +16,27 @@ class App extends React.Component {
       added_file_contents: null
     }
   }
-  componentDidMount () {
-    ipfs.id((err, res) => {
-      if (err) throw err
-      this.setState({
-        id: res.id,
-        version: res.agentVersion,
-        protocol_version: res.protocolVersion
-      })
+  async componentDidMount () {
+    const id = await ipfs.id()
+    this.setState({
+      id: id.id,
+      version: id.agentVersion,
+      protocol_version: id.protocolVersion
     })
-    ipfs.add([Buffer.from(stringToUse)], (err, res) => {
-      if (err) throw err
-      const hash = res[0].hash
+
+    const source = ipfs.add(stringToUse)
+    for await (const file of source) {
+      console.log("TCL: App -> forawait -> file", file)
+      const hash = file.path
       this.setState({ added_file_hash: hash })
-      ipfs.cat(hash, (err, data) => {
-        if (err) throw err
-        this.setState({ added_file_contents: data.toString() })
-      })
-    })
+
+      const source = ipfs.cat(hash)
+      const data = []
+      for await (const chunk of source) {
+        data.push(chunk)
+      }
+      this.setState({ added_file_contents: Buffer.concat(data).toString() })
+    }
   }
   render () {
     return <div style={{ textAlign: 'center' }}>

examples/files-api/files-api.js

@@ -1,14 +1,21 @@
+/* eslint-disable no-console */
 'use strict'
 
-const ipfs = require('../../src')('localhost', 5001)
+// Run `ipfs daemon` in your terminal to start the IPFS daemon
+// Look for `API server listening on /ip4/127.0.0.1/tcp/5001`
+const ipfs = require('../../src')('/ip4/127.0.0.1/tcp/5001')
 
-ipfs.files.ls('/folder1', function (err, res) {
-  if (err) {
-    return console.log('got an error', err)
-  }
-  if (res.readable) {
-    res.pipe(process.stdout)
-  } else {
-    console.log(res)
+const run = async () => {
+  await ipfs.files.write(
+    '/temp/hello-world',
+    Buffer.from('Hello, world!'),
+    { create: true, parents: true }
+  )
+  const source = ipfs.files.ls('/temp')
+
+  for await (const file of source) {
+    console.log(file)
   }
-})
+}
+
+run()

examples/name-api/index.html

@@ -58,7 +58,6 @@ <h3>Resolve an IPNS name</h3>
       </p>
     </div>
 
-    <script src="https://unpkg.com/ipfs-http-client/dist/index.js"></script>
-    <script src="bundle.js"></script>
+    <script src="index.js"></script>
   </body>
 </html>

examples/name-api/index.js

@@ -1,6 +1,7 @@
+/* eslint-disable no-console */
 'use strict'
-
-const ipfs = window.IpfsHttpClient('/ip4/127.0.0.1/tcp/5001')
+const ipfsHttp = require('ipfs-http-client')
+const ipfs = ipfsHttp('/ip4/127.0.0.1/tcp/5001')
 
 const DOM = {
   status: document.getElementById('status'),
@@ -30,7 +31,7 @@ const showStatus = (text, bg) => {
 }
 
 const enableForms = () => {
-  for (let btn of DOM.buttons) {
+  for (const btn of DOM.buttons) {
     btn.disabled = false
   }
 }
@@ -48,31 +49,30 @@ const init = () => {
 }
 
 // Adds a new file to IPFS and publish it
-const addAndPublish = (e) => {
+const addAndPublish = async (e) => {
   e.preventDefault()
 
-  let input = e.target.elements['text']
-  let buffer = Buffer.from(input.value)
+  const input = e.target.elements.text
+  const buffer = Buffer.from(input.value)
 
   showStatus('adding to IPFS...', COLORS.active)
+  try {
+    for await (const file of ipfs.add(buffer)) {
+      showStatus('success!', COLORS.success)
 
-  ipfs.add(buffer)
-    .then(res => {
-      showStatus(`success!`, COLORS.success)
-
-      publish(res[0].path)
+      publish(file.path)
 
       input.value = ''
-    })
-    .catch(err => {
-      showStatus('failed to add the data', COLORS.error)
-      console.error(err)
-    })
+    }
+  } catch (err) {
+    showStatus('failed to add the data', COLORS.error)
+    console.error(err)
+  }
 }
 
 // Publishes an IPFS file or directory under your node's identity
 const publish = (path) => {
-  showStatus(`publishing...`, COLORS.active)
+  showStatus('publishing...', COLORS.active)
   DOM.publishResultsDiv.classList.add('hidden')
 
   ipfs.name.publish(path)
@@ -90,36 +90,35 @@ const publish = (path) => {
 }
 
 // Resolves an IPNS name
-const resolve = (name) => {
-  showStatus(`resolving...`, COLORS.active)
+const resolve = async (name) => {
+  showStatus('resolving...', COLORS.active)
   DOM.resolveResultsDiv.classList.add('hidden')
-
-  ipfs.name.resolve(name)
-    .then(path => {
+  try {
+    for await (const path of ipfs.name.resolve(name)) {
       showStatus('success!', COLORS.success)
       DOM.resolveResultsDiv.classList.remove('hidden')
       DOM.resolveResult.innerText = path
       DOM.resolveGatewayLink.href = `${IPFS_DOMAIN}${path}`
-    })
-    .catch(err => {
-      showStatus(`error resolving ${name}`, COLORS.error)
-      console.error(err)
-    })
+    }
+  } catch (err) {
+    showStatus(`error resolving ${name}`, COLORS.error)
+    console.error(err)
+  }
 }
 
 // Event listeners
 DOM.publishNew.onsubmit = addAndPublish
 
 DOM.publishPath.onsubmit = (e) => {
   e.preventDefault()
-  let input = e.target.elements['path']
+  const input = e.target.elements.path
   publish(input.value)
   input.value = ''
 }
 
 DOM.resolveName.onsubmit = (e) => {
   e.preventDefault()
-  let input = e.target.elements['name']
+  const input = e.target.elements.name
   resolve(input.value)
   input.value = ''
 }