Make FishjamRoom use id instead of url to join room (#479)

## Description

Change the implementation of FishjamRoom so that it uses fishamId
instead of url to connect to the room.

## Motivation and Context

We update the FishjamRoom component so that it uses the new way of
joining the fishjam room.

## How has this been tested?

I've tested this in the fishjam-chat app

## Types of changes

- [ ] Bug fix (non-breaking change which fixes an issue)
- [ ] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing
functionality to
      not work as expected)

## Checklist:

- [ ] My code follows the code style of this project.
- [x] My change requires a change to the documentation.
- [ ] I have updated the documentation accordingly.

Author: anna1901

internal/fishjam-chat/screens/ConnectWithFishjamRoom.tsx

@@ -1,42 +1,31 @@
-import { FishjamRoom } from '@fishjam-cloud/react-native-client';
+import { FishjamRoom, useSandbox } from '@fishjam-cloud/react-native-client';
 import { useEffect, useState } from 'react';
-import { joinRoomWithRoomManager } from '../utils/roomManager';
 import { ActivityIndicator, StyleSheet } from 'react-native';
 
-type RoomData = {
-  url: string;
-  peerToken: string;
-};
-
 export const ConnectWithFishjamRoom = () => {
-  const [roomData, setRoomData] = useState<RoomData | null>(null);
+  const fishjamId = process.env.EXPO_PUBLIC_FISHJAM_ID ?? '';
+  const { getSandboxPeerToken } = useSandbox({ fishjamId: fishjamId });
+  const [peerToken, setPeerToken] = useState<string | null>(null);
 
   useEffect(() => {
-    const fetchRoomData = async () => {
+    const connect = async () => {
       try {
-        const { fishjamUrl, token } = await joinRoomWithRoomManager(
-          'https://room.fishjam.work/api/rooms',
-          'test-room',
-          'test-user',
-        );
-        setRoomData({
-          url: fishjamUrl,
-          peerToken: token,
-        });
-      } catch {
-        setRoomData(null);
+        const uniqPeerName = `test-user-${new Date().getTime()}${Math.random() * 1000}`;
+        const peerToken = await getSandboxPeerToken('test-room', uniqPeerName);
+        setPeerToken(peerToken);
+      } catch (e) {
+        console.error('Error connecting to Fishjam', e);
       }
     };
-    fetchRoomData();
-  }, []);
 
-  if (!roomData) {
+    connect();
+  }, [getSandboxPeerToken]);
+
+  if (!peerToken) {
     return <ActivityIndicator size="large" style={styles.indicator} />;
   }
 
-  return (
-    <FishjamRoom fishjamUrl={roomData.url} peerToken={roomData.peerToken} />
-  );
+  return <FishjamRoom fishjamId={fishjamId} peerToken={peerToken} />;
 };
 
 const styles = StyleSheet.create({

packages/react-native-client/src/components/FishjamRoom/index.tsx

@@ -1,14 +1,14 @@
 import { useEffect } from 'react';
-import { joinRoom, leaveRoom } from '../../common/client';
 import { useCamera } from '../../hooks/useCamera';
+import { useConnection } from '../../hooks/useConnection';
 import { VideosGrid } from './VideosGrid';
 import { SafeAreaView } from 'react-native';
 
 export type FishjamRoomProps = {
   /**
-   * URL to your fishjam instance
+   * ID of your fishjam instance
    */
-  fishjamUrl: string;
+  fishjamId: string;
   /**
    * Peer Token
    */
@@ -23,21 +23,22 @@ export type FishjamRoomProps = {
  * import { FishjamRoom } from '@fishjam-cloud/react-native-client';
  * import React from 'react';
  *
- * const FISHJAM_URL = 'https://fishjam.io/your_fishjam';
+ * const FISHJAM_ID = 'your-fishjam_id';
  * const PEER_TOKEN = 'your-peer-token';
  *
  * <FishjamRoom
- *    fishjamUrl={FISHJAM_URL}
+ *    fishjamId={FISHJAM_ID}
  *    peerToken={PEER_TOKEN}
  * />
  * ```
  * @category Components
  * @param {object} props
- * @param {string} props.fishjamUrl
+ * @param {string} props.fishjamId
  * @param {string} props.peerToken
  */
-export const FishjamRoom = ({ fishjamUrl, peerToken }: FishjamRoomProps) => {
+export const FishjamRoom = ({ fishjamId, peerToken }: FishjamRoomProps) => {
   const { prepareCamera } = useCamera();
+  const { leaveRoom, joinRoom } = useConnection();
 
   useEffect(() => {
     const join = async () => {
@@ -47,10 +48,7 @@ export const FishjamRoom = ({ fishjamUrl, peerToken }: FishjamRoomProps) => {
           quality: 'HD169',
           cameraEnabled: true,
         });
-        await joinRoom(fishjamUrl, peerToken, {
-          peer: {},
-          server: {},
-        });
+        await joinRoom({ fishjamId, peerToken });
       } catch (e) {
         console.warn(e);
       }
@@ -59,7 +57,7 @@ export const FishjamRoom = ({ fishjamUrl, peerToken }: FishjamRoomProps) => {
     return () => {
       leaveRoom();
     };
-  }, [fishjamUrl, peerToken, prepareCamera]);
+  }, [fishjamId, peerToken, prepareCamera, joinRoom, leaveRoom]);
 
   return (
     <SafeAreaView>