From 519e27b5c2802446d13905fb923c47fc75aa58d5 Mon Sep 17 00:00:00 2001
From: Jeremy Kahn <jeremyckahn@gmail.com>
Date: Sat, 13 Aug 2022 12:11:59 -0500
Subject: [PATCH] feat: join peer room

---
 .env                              |  1 +
 package-lock.json                 | 11 +++++------
 package.json                      |  7 ++++++-
 src/components/Room/Room.tsx      | 21 ++++++++++++++++++++-
 src/index.tsx                     | 14 ++++++--------
 src/react-app-env.d.ts            |  4 ++++
 src/services/PeerRoom/PeerRoom.ts | 15 +++++++++++++++
 src/services/PeerRoom/index.ts    |  1 +
 8 files changed, 58 insertions(+), 16 deletions(-)
 create mode 100644 .env
 create mode 100644 src/services/PeerRoom/PeerRoom.ts
 create mode 100644 src/services/PeerRoom/index.ts

diff --git a/.env b/.env
new file mode 100644
index 0000000..6e29f7d
--- /dev/null
+++ b/.env
@@ -0,0 +1 @@
+REACT_APP_NAME=$npm_package_name
diff --git a/package-lock.json b/package-lock.json
index d8f4816..4295336 100644
--- a/package-lock.json
+++ b/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",
-      "integrity": "sha512-4enMGKePEeR6WtZbWp9aGf8PkLq5K25q9+tHBIn36egxX+1enAxnXdg+6/YYhI3kcr1PDyBrMYKeZZ5H+J/2NQ==",
+      "resolved": "git+ssh://git@github.com/jeremyckahn/trystero.git#91e9f722302597e232e96932424f3ed47d0d0171",
+      "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",
-      "resolved": "https://registry.npmjs.org/trystero/-/trystero-0.11.1.tgz",
-      "integrity": "sha512-4enMGKePEeR6WtZbWp9aGf8PkLq5K25q9+tHBIn36egxX+1enAxnXdg+6/YYhI3kcr1PDyBrMYKeZZ5H+J/2NQ==",
+      "version": "git+ssh://git@github.com/jeremyckahn/trystero.git#91e9f722302597e232e96932424f3ed47d0d0171",
+      "from": "trystero@jeremyckahn/trystero#bugfix/fully-qualified-module-resolution",
       "requires": {
         "firebase": "^9.6.5",
         "ipfs-core": "0.9.0",
diff --git a/package.json b/package.json
index bed4117..b7dab56 100644
--- a/package.json
+++ b/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)/"
+    ]
   }
 }
diff --git a/src/components/Room/Room.tsx b/src/components/Room/Room.tsx
index a548587..18255bd 100644
--- a/src/components/Room/Room.tsx
+++ b/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}</>
 }
diff --git a/src/index.tsx b/src/index.tsx
index 8272b2f..4824997 100644
--- a/src/index.tsx
+++ b/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}>
-      <CssBaseline />
-      <Router>
-        <Bootstrap />
-      </Router>
-    </ThemeProvider>
-  </React.StrictMode>
+  <ThemeProvider theme={darkTheme}>
+    <CssBaseline />
+    <Router>
+      <Bootstrap />
+    </Router>
+  </ThemeProvider>
 )
 
 // If you want to start measuring performance in your app, pass a function
diff --git a/src/react-app-env.d.ts b/src/react-app-env.d.ts
index 6431bc5..69ee57a 100644
--- a/src/react-app-env.d.ts
+++ b/src/react-app-env.d.ts
@@ -1 +1,5 @@
 /// <reference types="react-scripts" />
+
+declare module 'trystero' {
+  export function joinRoom(config: any, ns: any): any
+}
diff --git a/src/services/PeerRoom/PeerRoom.ts b/src/services/PeerRoom/PeerRoom.ts
new file mode 100644
index 0000000..c8ef900
--- /dev/null
+++ b/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()
+    }
+  }
+}
diff --git a/src/services/PeerRoom/index.ts b/src/services/PeerRoom/index.ts
new file mode 100644
index 0000000..521e349
--- /dev/null
+++ b/src/services/PeerRoom/index.ts
@@ -0,0 +1 @@
+export * from './PeerRoom'