add diagnostic menu to sandbox

src/DiagnosticMenu/index.js

@@ -89,7 +89,9 @@ class SwarmState extends Component {
     return (
       <div className="swarm_state__container">
         <table>
-          {rows}
+          <tbody>
+            {rows}
+          </tbody>
         </table>
       </div>
     );
@@ -327,8 +329,6 @@ class DiagnosticMenu extends Component {
     this.state = {
       expanded: false,
     };
-
-    console.log(this.props.swarm);
   }
 
   handleButtonClick = () => {

src/Test.js

@@ -2,11 +2,13 @@ import React, {useEffect, useState} from 'react';
 import {Server, ConnManager} from './loopback';
 import {ClientManager} from './client';
 import {ChunkedReadStream, ChunkedWriteStreamInjector} from './chunkedStream';
+import DiagnosticMenu from './DiagnosticMenu';
 
 import './App.css';
 
 const App = () => {
   const [server] = useState(new Server());
+  const [swarms, setSwarms] = useState([]);
   const [swarmUri, setSwarmUri] = useState('');
 
   useEffect(() => {
@@ -26,20 +28,26 @@ const App = () => {
     return () => injector.stop();
   }, []);
 
-  const onAddPeerClick = () => {
+  const handleAddPeerClick = () => {
     const clientManager = new ClientManager(new ConnManager(server));
 
     clientManager.createClient().then(({ppsppClient}) => {
       const swarm = ppsppClient.joinSwarm(swarmUri);
-      console.log(swarm);
+      // console.log(ppsppClient);
+
+      setSwarms([...swarms, swarm]);
+
       const stream = new ChunkedReadStream(swarm);
       stream.on('data', d => console.log(`received ${d.length} bytes`));
     });
   };
 
+  const diagnosticMenus = swarms.map((swarm, i) => <DiagnosticMenu key={i} swarm={swarm} />);
+
   return (
     <div>
-      <button onClick={onAddPeerClick}>add peer</button>
+      {diagnosticMenus}
+      <button onClick={handleAddPeerClick}>add peer</button>
     </div>
   );
 };

src/client.js

@@ -78,7 +78,7 @@ export class ClientManager {
   }
 
   handleReceiveConnectRequest({data: {channelId, from}, callback}) {
-    console.log('handleReceiveConnectRequest', {channelId, from, callback});
+    // console.log('handleReceiveConnectRequest', {channelId, from, callback});
     const id = new hexToUint8Array(from);
     const client = this.connManager.createClient(new dht.SubChannel(this.dhtClient, id, channelId));
 

src/dht.js

@@ -19,6 +19,7 @@ const DEFAULT_PEER_REQUEST_COUNT = 10;
 class Client extends EventEmitter {
   constructor(id) {
     super();
+    this.setMaxListeners(Infinity);
 
     this.id = id;
 
@@ -95,7 +96,7 @@ class Client extends EventEmitter {
   }
 
   handleMessage(channel, event) {
-    console.log('handleMessage', event.data);
+    // console.log('handleMessage', event.data);
 
     const req = JSON.parse(event.data);
     const {type, id} = req;
@@ -246,7 +247,7 @@ class Channel {
 
 class SubChannel {
   constructor(client, peerId, id=arrayBufferToHex(randomBytes(16))) {
-    console.log('subchannel created', id);
+    // console.log('subchannel created', id);
     this.client = client;
     this.peerId = peerId;
     this.id = id;

src/loopback.js

@@ -119,7 +119,7 @@ class Client extends EventEmitter {
 
     mediator.on('datachannel', this.handleDataChannel.bind(this));
     mediator.once('connection', this.handleConnection.bind(this));
-    mediator.once('open', () => this.handleOpen.bind(this));
+    mediator.once('open', this.handleOpen.bind(this));
   }
 
   handleDataChannel(label) {

src/ppspp/index.js

@@ -349,7 +349,7 @@ class Peer {
   }
 }
 
-class SwarmMap extends EventEmitter {
+class SwarmSet extends EventEmitter {
   constructor() {
     super();
     this.setMaxListeners(Infinity);
@@ -358,23 +358,23 @@ class SwarmMap extends EventEmitter {
   }
 
   insert(swarm) {
-    const key = SwarmMap.swarmIdToKey(swarm.uri.swarmId);
+    const key = SwarmSet.swarmIdToKey(swarm.uri.swarmId);
     if (this.swarms[key] === undefined) {
       this.swarms[key] = swarm;
       this.emit('insert', swarm);
     }
   }
 
   remove(swarm) {
-    const key = SwarmMap.swarmIdToKey(swarm.uri.swarmId);
+    const key = SwarmSet.swarmIdToKey(swarm.uri.swarmId);
     if (this.swarms[key] !== undefined) {
       delete this.swarms[key];
       this.emit('remove', swarm);
     }
   }
 
   get(swarmId) {
-    return this.swarms[SwarmMap.swarmIdToKey(swarmId)];
+    return this.swarms[SwarmSet.swarmIdToKey(swarmId)];
   }
 
   toArray() {
@@ -390,7 +390,7 @@ class Client {
   constructor() {
     this.channels = [];
 
-    this.swarms = new SwarmMap();
+    this.swarms = new SwarmSet();
   }
 
   publishSwarm(swarm) {
@@ -433,11 +433,13 @@ class Channel extends EventEmitter {
     this.swarms = swarms;
     this.peers = {};
 
+    this.handleSwarmInsert = this.getOrCreatePeer.bind(this);
+    this.swarms.on('insert', this.handleSwarmInsert);
+
+    const liveSwarms = swarms.toArray();
+    this.channel.addEventListener('open', () => liveSwarms.forEach(this.handleSwarmInsert));
     this.channel.addEventListener('message', this.handleMessage.bind(this));
     this.channel.addEventListener('error', err => console.log('channel error:', err));
-
-    this.handleSwarmInsert = this.handleSwarmInsert.bind(this);
-    this.swarms.on('insert', this.handleSwarmInsert);
   }
 
   handleMessage(event) {
@@ -469,8 +471,7 @@ class Channel extends EventEmitter {
         return;
       }
 
-      peer = new Peer(swarm, this);
-      this.peers[peer.localId] = peer;
+      peer = this.getOrCreatePeer(swarm);
     }
 
     data = new peer.swarm.encoding.Datagram();
@@ -488,11 +489,17 @@ class Channel extends EventEmitter {
   }
 
   handleClose() {
+    this.swarms.removeListener('insert', this.handleSwarmInsert);
     Object.values(this.peers).forEach(peer => peer.close());
     this.emit('close');
   }
 
-  handleSwarmInsert(swarm) {
+  getOrCreatePeer(swarm) {
+    let peer = Object.values(this.peers).find(p => p.swarm === swarm);
+    return peer || this.createPeer(swarm);
+  }
+
+  createPeer(swarm) {
     const {peers, swarms} = this;
 
     const peer = new Peer(swarm, this);
@@ -509,6 +516,8 @@ class Channel extends EventEmitter {
     }
 
     swarms.on('remove', handleRemove);
+
+    return peer;
   }
 }