app/page/network.jsView |
---|
1 | 1 … | const nest = require('depnest') |
2 | | -const { h, Value, Dict, dictToCollection, onceTrue, computed, watch, watchAll, throttle } = require('mutant') |
| 2 … | +const { h, Value, Dict, dictToCollection, onceTrue, computed, watch, watchAll, throttle, resolve } = require('mutant') |
3 | 3 … | const Chart = require('chart.js') |
4 | 4 … | const pull = require('pull-stream') |
| 5 … | +const { isInvite } = require('ssb-ref') |
5 | 6 … | |
6 | 7 … | const MINUTE = 60 * 1000 |
7 | 8 … | const DAY = 24 * 60 * MINUTE |
8 | 9 … | |
41 | 42 … | |
42 | 43 … | const state = buildState({ api, minsPerStep, scale }) |
43 | 44 … | const canvas = h('canvas', { height: 500, width: 1200, style: { height: '500px', width: '1200px' } }) |
44 | 45 … | |
| 46 … | + const inputInvite = ev => { |
| 47 … | + state.inviteResult.set(null) |
| 48 … | + const invite = ev.target.value.replace(/^\s*"?/, '').replace(/"?\s*$/, '') |
| 49 … | + if (!isInvite(invite)) { |
| 50 … | + state.invite.set() |
| 51 … | + return |
| 52 … | + } |
| 53 … | + |
| 54 … | + ev.target.value = invite |
| 55 … | + state.invite.set(invite) |
| 56 … | + } |
| 57 … | + const useInvite = () => { |
| 58 … | + state.inviteProcessing.set(true) |
| 59 … | + |
| 60 … | + onceTrue(api.sbot.obs.connection, server => { |
| 61 … | + server.invite.accept(resolve(state.invite), (err, data) => { |
| 62 … | + state.inviteProcessing.set(false) |
| 63 … | + state.invite.set() |
| 64 … | + |
| 65 … | + if (err) { |
| 66 … | + state.inviteResult.set(false) |
| 67 … | + console.error(err) |
|
| 68 … | + return |
| 69 … | + } |
| 70 … | + state.inviteResult.set(true) |
| 71 … | + console.log(data) |
| 72 … | + }) |
| 73 … | + }) |
| 74 … | + } |
| 75 … | + |
45 | 76 … | const page = h('NetworkPage', [ |
46 | 77 … | h('div.container', [ |
47 | 78 … | h('h1', 'Network'), |
48 | 79 … | h('section', [ |
64 | 95 … | computed(state.remotePeers, peers => { |
65 | 96 … | if (!peers.length) return h('p', 'No remote peers connected') |
66 | 97 … | |
67 | 98 … | return peers.map(peer => api.about.html.avatar(peer)) |
68 | | - }) |
| 99 … | + }), |
| 100 … | + h('div.invite', [ |
| 101 … | + h('input', { |
| 102 … | + 'placeholder': 'invite code for a remote peer (pub)', |
| 103 … | + 'ev-input': inputInvite |
| 104 … | + }), |
| 105 … | + computed([state.invite, state.inviteProcessing], (invite, processing) => { |
| 106 … | + if (processing) return h('i.fa.fa-spinner.fa-pulse') |
| 107 … | + if (invite) return h('button -primary', { 'ev-click': useInvite }, 'use invite') |
| 108 … | + |
| 109 … | + return h('button', { disabled: 'disabled', title: 'not a valid invite code' }, 'use invite') |
| 110 … | + }), |
| 111 … | + computed(state.inviteResult, result => { |
| 112 … | + if (result === null) return |
| 113 … | + |
| 114 … | + return result |
| 115 … | + ? h('i.fa.fa-check') |
| 116 … | + : h('i.fa.fa-times') |
| 117 … | + }) |
| 118 … | + ]) |
69 | 119 … | ]), |
70 | 120 … | h('section', [ |
71 | 121 … | h('h2', 'My state'), |
72 | 122 … | |
210 | 260 … | remotePeers, |
211 | 261 … | seq, |
212 | 262 … | replication, |
213 | 263 … | data, |
214 | | - range |
| 264 … | + range, |
| 265 … | + invite: Value(), |
| 266 … | + inviteProcessing: Value(false), |
| 267 … | + inviteResult: Value(null) |
215 | 268 … | } |
216 | 269 … | } |
217 | 270 … | |
218 | 271 … | function getData ({ data, server, minsPerStep, scale }) { |