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( - - - - - - - - + + + + + + ) // 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 @@ /// + +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'