feat: join peer room

.env

@@ -0,0 +1 @@
+REACT_APP_NAME=$npm_package_name

package-lock.json

@@ -26,7 +26,7 @@
         "react-router-dom": "^6.3.0",
         "react-scripts": "5.0.1",
         "sass": "^1.54.3",
-        "trystero": "^0.11.1",
+        "trystero": "github:jeremyckahn/trystero#bugfix/fully-qualified-module-resolution",
         "typeface-public-sans": "^1.1.13",
         "typeface-roboto": "^1.1.13",
         "typescript": "^4.7.4",
@@ -21963,8 +21963,8 @@
     },
     "node_modules/trystero": {
       "version": "0.11.1",
-      "resolved": "https://registry.npmjs.org/trystero/-/trystero-0.11.1.tgz",
+      "resolved": "git+ssh://git@github.com/jeremyckahn/trystero.git#91e9f722302597e232e96932424f3ed47d0d0171",
-      "integrity": "sha512-4enMGKePEeR6WtZbWp9aGf8PkLq5K25q9+tHBIn36egxX+1enAxnXdg+6/YYhI3kcr1PDyBrMYKeZZ5H+J/2NQ==",
+      "license": "MIT",
       "dependencies": {
         "firebase": "^9.6.5",
         "ipfs-core": "0.9.0",
@@ -39551,9 +39551,8 @@
       "integrity": "sha512-c3zayb8/kWWpycWYg87P71E1S1ZL6b6IJxfb5fvsUgsf0S2MVGaDhDXXjDMpdCpfWXqptc+4mXwmiy1ypXqRAA=="
     },
     "trystero": {
-      "version": "0.11.1",
+      "version": "git+ssh://git@github.com/jeremyckahn/trystero.git#91e9f722302597e232e96932424f3ed47d0d0171",
-      "resolved": "https://registry.npmjs.org/trystero/-/trystero-0.11.1.tgz",
+      "from": "trystero@jeremyckahn/trystero#bugfix/fully-qualified-module-resolution",
-      "integrity": "sha512-4enMGKePEeR6WtZbWp9aGf8PkLq5K25q9+tHBIn36egxX+1enAxnXdg+6/YYhI3kcr1PDyBrMYKeZZ5H+J/2NQ==",
       "requires": {
         "firebase": "^9.6.5",
         "ipfs-core": "0.9.0",

package.json

@@ -22,7 +22,7 @@
     "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",
     "sass": "^1.54.3",
-    "trystero": "^0.11.1",
+    "trystero": "github:jeremyckahn/trystero#bugfix/fully-qualified-module-resolution",
     "typeface-public-sans": "^1.1.13",
     "typeface-roboto": "^1.1.13",
     "typescript": "^4.7.4",
@@ -75,5 +75,10 @@
     "prettier": "^2.7.1",
     "pretty-quick": "^3.1.3",
     "tailwindcss": "^3.1.8"
+  },
+  "jest": {
+    "transformIgnorePatterns": [
+      "node_modules/(?!trystero)/"
+    ]
   }
 }

src/components/Room/Room.tsx

@@ -1,9 +1,28 @@
+import { useEffect } from 'react'
 import { useParams } from 'react-router-dom'
 
-export function Room() {
+import { PeerRoom } from '../../services/PeerRoom'
+
+interface RoomProps {
+  peerRoom?: PeerRoom
+}
+
+export function Room({ peerRoom = new PeerRoom() }: RoomProps) {
   const params = useParams()
 
   const { roomId } = params
 
+  useEffect(() => {
+    if (roomId) {
+      peerRoom.joinRoom(roomId)
+    } else {
+      console.error('roomId not specified')
+    }
+
+    return () => {
+      peerRoom.leaveRoom()
+    }
+  }, [peerRoom, roomId])
+
   return <>Room ID: {roomId}</>
 }

src/index.tsx

@@ -17,14 +17,12 @@ const darkTheme = createTheme({
 
 const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
 root.render(
-  <React.StrictMode>
+  <ThemeProvider theme={darkTheme}>
-    <ThemeProvider theme={darkTheme}>
+    <CssBaseline />
-      <CssBaseline />
+    <Router>
-      <Router>
+      <Bootstrap />
-        <Bootstrap />
+    </Router>
-      </Router>
+  </ThemeProvider>
-    </ThemeProvider>
-  </React.StrictMode>
 )
 
 // If you want to start measuring performance in your app, pass a function

src/react-app-env.d.ts

@@ -1 +1,5 @@
 /// <reference types="react-scripts" />
+
+declare module 'trystero' {
+  export function joinRoom(config: any, ns: any): any
+}

src/services/PeerRoom/PeerRoom.ts

@@ -0,0 +1,15 @@
+import { joinRoom } from 'trystero'
+
+export class PeerRoom {
+  room: any
+
+  joinRoom(roomId: string) {
+    this.room = joinRoom({ appId: process.env.REACT_APP_NAME }, roomId)
+  }
+
+  leaveRoom() {
+    if (this.room) {
+      this.room.leave()
+    }
+  }
+}

src/services/PeerRoom/index.ts

@@ -0,0 +1 @@
+export * from './PeerRoom'