From eaf474a984163beae00c171bb35434e1ffc6253c Mon Sep 17 00:00:00 2001 From: Bas van den Aakster Date: Wed, 12 Nov 2025 23:18:05 +0100 Subject: [PATCH] Simplify demo: remove topics UI, ID-only connections MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Remove topic selection and peer discovery UI - Remove MethodSelector and TopicsList components - Simplify ConnectionForm to just take a connection ID - Update to use @xtr-dev/rondevu-client@0.3.2 - Demo version: 0.3.2 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- package-lock.json | 12 +-- package.json | 4 +- src/App.jsx | 126 +++++------------------------- src/components/ConnectionForm.jsx | 100 ++++-------------------- src/index.css | 6 ++ 5 files changed, 49 insertions(+), 199 deletions(-) diff --git a/package-lock.json b/package-lock.json index fb04d79..1a62852 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,14 +1,14 @@ { "name": "rondevu-demo", - "version": "1.0.2", + "version": "0.3.2", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "rondevu-demo", - "version": "1.0.2", + "version": "0.3.2", "dependencies": { - "@xtr-dev/rondevu-client": "^0.3.1", + "@xtr-dev/rondevu-client": "^0.3.2", "@zxing/library": "^0.21.3", "qrcode": "^1.5.4", "react": "^18.2.0", @@ -1170,9 +1170,9 @@ } }, "node_modules/@xtr-dev/rondevu-client": { - "version": "0.3.1", - "resolved": "https://registry.npmjs.org/@xtr-dev/rondevu-client/-/rondevu-client-0.3.1.tgz", - "integrity": "sha512-KVbssIVFNyIE4kw1Ygj36Ag29TW3CtNJXgrBRbyt/vNS8Phe0i61J0Z2isEzZs+rkuncaE6TWxNzU5CMljhI5g==", + "version": "0.3.2", + "resolved": "https://registry.npmjs.org/@xtr-dev/rondevu-client/-/rondevu-client-0.3.2.tgz", + "integrity": "sha512-qWQDP6L675bLksKrk8HYc1ZNoAe0X/1Fj92Lffh9HPHcoeME7ateXb0mD7KlPNNOem6u210q35FNTiJWuHEyuw==", "license": "MIT" }, "node_modules/@zxing/library": { diff --git a/package.json b/package.json index ee18263..0296914 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "rondevu-demo", - "version": "1.0.2", + "version": "0.3.2", "description": "Demo application for Rondevu peer signaling and discovery", "type": "module", "scripts": { @@ -10,7 +10,7 @@ "deploy": "npm run build && npx wrangler pages deploy dist --project-name=rondevu-demo" }, "dependencies": { - "@xtr-dev/rondevu-client": "^0.3.1", + "@xtr-dev/rondevu-client": "^0.3.2", "@zxing/library": "^0.21.3", "qrcode": "^1.5.4", "react": "^18.2.0", diff --git a/src/App.jsx b/src/App.jsx index d798c80..03fd7ce 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -3,10 +3,8 @@ import { Rondevu } from '@xtr-dev/rondevu-client'; import QRCode from 'qrcode'; import Header from './components/Header'; import ActionSelector from './components/ActionSelector'; -import MethodSelector from './components/MethodSelector'; import ConnectionForm from './components/ConnectionForm'; import ChatView from './components/ChatView'; -import TopicsList from './components/TopicsList'; const rdv = new Rondevu({ baseUrl: 'https://api.ronde.vu', @@ -35,17 +33,12 @@ function generateConnectionId() { function App() { // Step-based state - const [step, setStep] = useState(1); // 1: action, 2: method, 3: details, 4: connected - const [action, setAction] = useState(null); // 'create', 'join', or 'scan' - const [method, setMethod] = useState(null); // 'topic', 'peer-id', 'connection-id' + const [step, setStep] = useState(1); // 1: action, 2: details, 3: connected + const [action, setAction] = useState(null); // 'create' or 'connect' const [qrCodeUrl, setQrCodeUrl] = useState(''); // Connection state - const [topic, setTopic] = useState(''); const [connectionId, setConnectionId] = useState(''); - const [peerId, setPeerId] = useState(''); - const [topics, setTopics] = useState([]); - const [sessions, setSessions] = useState([]); const [connectionStatus, setConnectionStatus] = useState('disconnected'); const [connectedPeer, setConnectedPeer] = useState(null); const [currentConnectionId, setCurrentConnectionId] = useState(null); @@ -61,9 +54,6 @@ function App() { const [demoVersion, setDemoVersion] = useState('unknown'); const [serverVersion, setServerVersion] = useState('unknown'); - // Topics modal state - const [showTopicsList, setShowTopicsList] = useState(false); - const connectionRef = useRef(null); const dataChannelRef = useRef(null); const fileTransfersRef = useRef(new Map()); // Track ongoing file transfers @@ -71,7 +61,6 @@ function App() { useEffect(() => { log('Demo initialized', 'info'); - loadTopics(); loadVersions(); }, []); @@ -93,32 +82,13 @@ function App() { } }; - const loadTopics = async () => { - try { - const { topics } = await rdv.api.listTopics(); - setTopics(topics); - } catch (error) { - log(`Error loading topics: ${error.message}`, 'error'); - } - }; - - const discoverPeers = async (topicName) => { - try { - const { sessions: foundSessions } = await rdv.api.listSessions(topicName); - const otherSessions = foundSessions.filter(s => s.peerId !== rdv.peerId); - setSessions(otherSessions); - } catch (error) { - log(`Error discovering peers: ${error.message}`, 'error'); - } - }; - const setupConnection = (connection) => { connectionRef.current = connection; connection.on('connect', () => { log('✅ Connected!', 'success'); setConnectionStatus('connected'); - setStep(4); + setStep(3); const channel = connection.dataChannel('chat'); setupDataChannel(channel); @@ -176,17 +146,10 @@ function App() { let connId; if (action === 'create') { - if (method === 'connection-id') { - connId = connectionId || generateConnectionId(); - connection = await rdv.create(connId, topic || 'default'); - setCurrentConnectionId(connId); - log(`Created connection: ${connId}`, 'success'); - } else { - connId = generateConnectionId(); - connection = await rdv.create(connId, topic); - setCurrentConnectionId(connId); - log(`Created connection: ${connId}`, 'success'); - } + connId = connectionId || generateConnectionId(); + connection = await rdv.create(connId); + setCurrentConnectionId(connId); + log(`Created connection: ${connId}`, 'success'); // Generate QR code if creating a connection try { @@ -204,18 +167,8 @@ function App() { log(`QR code generation error: ${err.message}`, 'error'); } } else { - if (method === 'topic') { - connection = await rdv.join(topic); - setCurrentConnectionId(connection.id); - } else if (method === 'peer-id') { - connection = await rdv.join(topic, { - filter: (s) => s.peerId === peerId - }); - setCurrentConnectionId(connection.id); - } else if (method === 'connection-id') { - connection = await rdv.connect(connectionId); - setCurrentConnectionId(connectionId); - } + connection = await rdv.connect(connectionId); + setCurrentConnectionId(connectionId); } setConnectedPeer(connection.remotePeerId || 'Waiting...'); @@ -435,11 +388,7 @@ function App() { } setStep(1); setAction(null); - setMethod(null); - setTopic(''); setConnectionId(''); - setPeerId(''); - setSessions([]); setConnectionStatus('disconnected'); setConnectedPeer(null); setCurrentConnectionId(null); @@ -452,9 +401,8 @@ function App() { const handleScanComplete = (scannedId) => { setConnectionId(scannedId); - setAction('join'); - setMethod('connection-id'); - setStep(3); + setAction('connect'); + setStep(2); }; const handleScanCancel = () => { @@ -482,39 +430,19 @@ function App() { )} {step === 2 && ( - { - setMethod(m); - setStep(3); - }} + connectionId={connectionId} + setConnectionId={setConnectionId} + connectionStatus={connectionStatus} + qrCodeUrl={qrCodeUrl} + currentConnectionId={currentConnectionId} + onConnect={handleConnect} onBack={() => setStep(1)} /> )} {step === 3 && ( - setStep(2)} - onTopicSelect={setTopic} - onDiscoverPeers={discoverPeers} - /> - )} - - {step === 4 && ( Your Peer ID: {rdv.peerId} - - {/* Floating button to view topics */} - {step !== 4 && ( - - )} - - {/* Topics modal */} - {showTopicsList && ( - setShowTopicsList(false)} - /> - )}