feat: add delegated peer and content routing support (#242)

* feat: allow for configuring content and peer routing

* feat: support multiple peer and content routing modules

* docs: add delegated routing example

examples/delegated-routing/src/App.js

@@ -0,0 +1,153 @@
+// eslint-disable-next-line
+'use strict'
+
+const React = require('react')
+const Component = React.Component
+const Ipfs = require('ipfs')
+const libp2pBundle = require('./libp2p-bundle')
+// require('./App.css')
+
+const BootstrapNode = '/ip4/127.0.0.1/tcp/8081/ws/ipfs/QmdoG8DpzYUZMVP5dGmgmigZwR1RE8Cf6SxMPg1SBXJAQ8'
+
+class App extends Component {
+  constructor (props) {
+    super(props)
+    this.state = {
+      peers: 0,
+      // This hash is the IPFS readme
+      hash: 'QmPZ9gcCEpqKTo6aq61g2nXGUhM4iCL3ewB6LDXZCtioEB',
+      // This peer is one of the Bootstrap nodes for IPFS
+      peer: 'QmV6kA2fB8kTr6jc3pL5zbNsjKbmPUHAPKKHRBYe1kDEyc',
+      isLoading: 0
+    }
+    this.peerInterval = null
+
+    this.handleHashChange = this.handleHashChange.bind(this)
+    this.handleHashSubmit = this.handleHashSubmit.bind(this)
+    this.handlePeerChange = this.handlePeerChange.bind(this)
+    this.handlePeerSubmit = this.handlePeerSubmit.bind(this)
+  }
+
+  handleHashChange (event) {
+    this.setState({
+      hash: event.target.value
+    })
+  }
+  handlePeerChange (event) {
+    this.setState({
+      peer: event.target.value
+    })
+  }
+
+  handleHashSubmit (event) {
+    event.preventDefault()
+    this.setState({
+      isLoading: this.state.isLoading + 1
+    })
+
+    this.ipfs.files.cat(this.state.hash, (err, data) => {
+      if (err) console.log('Error', err)
+
+      this.setState({
+        response: data.toString(),
+        isLoading: this.state.isLoading - 1
+      })
+    })
+  }
+  handlePeerSubmit (event) {
+    event.preventDefault()
+    this.setState({
+      isLoading: this.state.isLoading + 1
+    })
+
+    this.ipfs.dht.findpeer(this.state.peer, (err, results) => {
+      if (err) console.log('Error', err)
+
+      this.setState({
+        response: JSON.stringify(results, null, 2),
+        isLoading: this.state.isLoading - 1
+      })
+    })
+  }
+
+  componentDidMount () {
+    window.ipfs = this.ipfs = new Ipfs({
+      config: {
+        Addresses: {
+          Swarm: []
+        },
+        Discovery: {
+          MDNS: {
+            Enabled: false
+          },
+          webRTCStar: {
+            Enabled: false
+          }
+        },
+        Bootstrap: [
+          BootstrapNode
+        ]
+      },
+      preload: {
+        enabled: false
+      },
+      libp2p: libp2pBundle
+    })
+    this.ipfs.on('ready', () => {
+      if (this.peerInterval) {
+        clearInterval(this.peerInterval)
+      }
+
+      this.ipfs.swarm.connect(BootstrapNode, (err) => {
+        if (err) {
+          console.log('Error connecting to the node', err)
+        }
+        console.log('Connected!')
+      })
+
+      this.peerInterval = setInterval(() => {
+        this.ipfs.swarm.peers((err, peers) => {
+          if (err) console.log(err)
+          if (peers) this.setState({peers: peers.length})
+        })
+      }, 2500)
+    })
+  }
+
+  render () {
+    return (
+      <div>
+        <header className="center">
+          <h1>Delegated Routing</h1>
+          <h2>There are currently {this.state.peers} peers.</h2>
+        </header>
+        <section className="center">
+          <form onSubmit={this.handleHashSubmit}>
+            <label>
+              Hash:
+              <input type="text" value={this.state.hash} onChange={this.handleHashChange} />
+              <input type="submit" value="Find" />
+            </label>
+          </form>
+          <form onSubmit={this.handlePeerSubmit}>
+            <label>
+              Peer:
+              <input type="text" value={this.state.peer} onChange={this.handlePeerChange} />
+              <input type="submit" value="Find" />
+            </label>
+          </form>
+        </section>
+        <section className={[this.state.isLoading > 0 ? 'loading' : '', 'loader'].join(' ')}>
+          <div className="lds-ripple"><div></div><div></div></div>
+        </section>
+        <section>
+          <pre>
+            {this.state.response}
+          </pre>
+        </section>
+      </div>
+    )
+  }
+}
+
+module.exports = App