JoinModal

main.js

@@ -231,12 +231,12 @@ async function scheduleWithHub(multiaddr) {
   }
 }
 
-async function handlePPPPPUri(uri) {
+async function handlePPPPPUri(ev, uri) {
   if (!globalAccountID) {
-    setTimeout(handlePPPPPUri, 100, uri)
+    setTimeout(handlePPPPPUri, 100, null, uri)
     return
   }
-  if (!uri.startsWith('ppppp://')) return
+  if (!uri.startsWith('ppppp://')) return console.log('Not a ppppp:// URI', uri)
   const commands = peer.invite.parse(uri)
   for (const command of commands) {
     console.log('Executing command', JSON.stringify(command))
@@ -296,7 +296,7 @@ if (!hasLock) {
       if (mainWindow.isMinimized()) mainWindow.restore()
       mainWindow.focus()
       if (argv.length > 1) {
-        handlePPPPPUri(argv[argv.length - 1])
+        handlePPPPPUri(null, argv[argv.length - 1])
       }
     }
   })
@@ -307,10 +307,11 @@ if (!hasLock) {
     ipcMain.handle('createInvite', createInvite)
     ipcMain.handle('copyToClipboard', copyToClipboard)
     ipcMain.handle('writeElements', writeElements)
+    ipcMain.handle('consumeInvite', handlePPPPPUri)
     ipcMain.handle('subscribeToReadElements', subscribeToReadElements)
     createWindow()
     if (process.argv.length > 1) {
-      handlePPPPPUri(process.argv[process.argv.length - 1])
+      handlePPPPPUri(null, process.argv[process.argv.length - 1])
     }
 
     app.on('activate', function () {

preload.js

@@ -4,6 +4,7 @@ contextBridge.exposeInMainWorld('electronAPI', {
   loadAccount: () => ipcRenderer.invoke('loadAccount'),
   createInvite: () => ipcRenderer.invoke('createInvite'),
   copyToClipboard: (text) => ipcRenderer.invoke('copyToClipboard', text),
+  consumeInvite: (text) => ipcRenderer.invoke('consumeInvite', text),
   setProfileName: (name) => ipcRenderer.invoke('setProfileName', name),
   writeElements: (actions) => ipcRenderer.invoke('writeElements', actions),
   onReadElements: (callback) => {

src/App.js

@@ -3,7 +3,9 @@ import { Excalidraw } from '@excalidraw/excalidraw'
 import debounce from 'debounce'
 import MyAccount from './MyAccount'
 import Button from './Button'
+import GreenButton from './GreenButton'
 import CreateInviteModal from './CreateInviteModal'
+import JoinModal from './JoinModal'
 import './App.css'
 
 const elemsPersisted = new Map()
@@ -11,11 +13,17 @@ let sceneInitialized = false
 
 function App() {
   const [excalidrawAPI, setExcalidrawAPI] = useState(null)
-  const [inviteModalOpen, setInviteModalOpen] = useState(false)
+
   const [inviteCode, setInviteCode] = useState(null)
+
+  const [inviteModalOpen, setInviteModalOpen] = useState(false)
   const openInviteModal = () => setInviteModalOpen(true)
   const closeInviteModal = () => setInviteModalOpen(false)
 
+  const [joinModalOpen, setJoinModalOpen] = useState(false)
+  const openJoinModal = () => setJoinModalOpen(true)
+  const closeJoinModal = () => setJoinModalOpen(false)
+
   function loadExcalidraw(api) {
     if (excalidrawAPI) return
     setExcalidrawAPI(api)
@@ -40,6 +48,10 @@ function App() {
     })
   }
 
+  function join() {
+    openJoinModal()
+  }
+
   const updateElements = debounce((elems) => {
     if (!sceneInitialized) return
     const actions = []
@@ -59,7 +71,10 @@ function App() {
     <div className="flex flex-row items-stretch h-screen text-slate-900">
       <div className="w-1/6 flex flex-col bg-gray-200 p-2">
         <MyAccount />
+        <div className="h-2"> </div>
         <Button onClick={createInvite}>Invite</Button>
+        <div className="h-2"> </div>
+        <GreenButton onClick={join}>Join</GreenButton>
       </div>
       <div className="w-5/6">
         <Excalidraw
@@ -86,6 +101,7 @@ function App() {
         onClose={closeInviteModal}
         inviteCode={inviteCode}
       />
+      <JoinModal isOpen={joinModalOpen} onClose={closeJoinModal} />
     </div>
   )
 }

src/GreenButton.js

@@ -0,0 +1,14 @@
+function Button({ children, onClick, disabled }) {
+  return (
+    <button
+      onClick={disabled ? undefined : onClick}
+      className={`${
+        disabled ? 'bg-slate-400 cursor-default' : 'bg-green-600 hover:bg-green-700'
+      } text-white font-bold rounded shadow px-2 py-1`}
+    >
+      {children}
+    </button>
+  )
+}
+
+export default Button

src/JoinModal.js

@@ -0,0 +1,33 @@
+import { useState } from 'react'
+import GreenButton from './GreenButton'
+import Modal from './Modal'
+
+function JoinModal({ isOpen, onClose }) {
+  const [code, setCode] = useState('')
+
+  function updateCode(ev) {
+    setCode(ev.target.value)
+  }
+
+  function submitCode() {
+    window.electronAPI.consumeInvite(code)
+    queueMicrotask(onClose)
+  }
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose}>
+      Insert here the ppppp:// invite code you received from your friend.
+      <textarea
+        key="input"
+        placeholder={'ppppp://...'}
+        className="border font-mono border-gray-400 resize-none rounded px-1 text-wrap break-all outline-offset-3 outline-2 outline-green-500 my-4 h-64"
+        onChange={updateCode}
+      />
+      <GreenButton disabled={!code} key="copybtn" onClick={submitCode}>
+        Join
+      </GreenButton>
+    </Modal>
+  )
+}
+
+export default JoinModal