[FCE-890] Update documentation to use new useConnection hook (#54)

## Description

Changed `usePeerStatus` and `useReconnection` to `useConnection`.

docs/react-native/connecting.mdx

@@ -46,7 +46,9 @@ follow our [server setup instructions](/production/server).
 In order to connect, you just need to call `joinRoom` method with data from previous step:
 
 ```ts
-import { joinRoom } from "@fishjam-cloud/react-native-client";
+import { useConnection } from "@fishjam-cloud/react-native-client";
+
+const { joinRoom } = useConnection();
 
 await joinRoom(fishjamUrl, peerToken);
 ```
@@ -56,7 +58,9 @@ await joinRoom(fishjamUrl, peerToken);
 In order to close connection, you have to call `leaveRoom` method.
 
 ```ts
-import { leaveRoom } from "@fishjam-cloud/react-native-client";
+import { useConnection } from "@fishjam-cloud/react-native-client";
+
+const { leaveRoom } = useConnection();
 
 await leaveRoom();
 ```

docs/react-native/quick-setup.mdx

@@ -71,6 +71,7 @@ function StartStreamingButton({
   userName: string;
 }) {
   const { prepareCamera } = useCamera();
+  const { joinRoom } = useConnection();
 
   const startStreaming = async () => {
     const response = await fetch(
@@ -89,10 +90,10 @@ function StartStreamingButton({
 
 ### 3. Check if you are connected
 
-Once you are connected, you can check connection status with `usePeerStatus` hook
+Once you are connected, you can check connection status with `useConnection` hook
 
 ```ts
-const { peerStatus } = usePeerStatus();
+const { connectionStatus } = useConnection();
 ```
 
 ### 4. Show other peers
@@ -161,7 +162,7 @@ npx expo install expo-camera && npx expo prebuild
 import { useCallback, useEffect } from "react";
 import { Button, StyleSheet, View } from "react-native";
 import {
-  joinRoom,
+  useConnection,
   useCamera,
   usePeers,
   VideoRendererView,
@@ -171,7 +172,7 @@ import { useCameraPermissions } from "expo-camera";
 
 function TracksView() {
   const { peers } = usePeers();
-  const { peerStatus } = usePeerStatus();
+  const { connectionStatus } = useConnection();
 
   const videoTracks = peers.flatMap((peer) =>
     peer.tracks.filter((track) => track.type === "Video" && track.isActive),
@@ -199,6 +200,7 @@ function StartStreamingButton({
   userName: string;
 }) {
   const { prepareCamera } = useCamera();
+  const { joinRoom } = useConnection();
 
   const startStreaming = async () => {
     const response = await fetch(
@@ -216,7 +218,7 @@ function StartStreamingButton({
 
 export default function HomeScreen() {
   const [permission, requestPermission] = useCameraPermissions();
-  const { peerStatus } = usePeerStatus();
+  const { connectionStatus } = useConnection();
 
   useEffect(() => {
     requestPermission();
@@ -228,7 +230,7 @@ export default function HomeScreen() {
 
   return (
     <SafeAreaView style={styles.container}>
-      {peerStatus !== "connected" && (
+      {connectionStatus !== "connected" && (
         <StartStreamingButton roomName="*roomName*" userName="*username*" />
       )}
       <TracksView />

docs/react-native/reconnect.mdx

@@ -4,33 +4,33 @@ sidebar_position: 7
 
 # Reconnect
 
-If your connection is lost while you are connected to a room, the app will automatically handle the reconnection process. You can monitor these events by utilizing the `useReconnection` hook.
+If your connection is lost while you are connected to a room, the app will automatically handle the reconnection process. You can monitor these events by utilizing the `useConnection` hook.
 
 ### Example hook that logs the current status to the console:
 
 ```ts
 import { useEffect, useRef } from "react";
 import {
-  ReconnectionStatus,
-  useReconnection,
+  ConnectionStatus,
+  useConnection,
 } from "@fishjam-cloud/react-native-client";
 
-function useLogReconnectionStatus() {
-  const prevStatus = useRef<ReconnectionStatus>("idle");
-  const { reconnectionStatus } = useReconnection();
+function useLogConnectionStatus() {
+  const prevStatus = useRef<ConnectionStatus>("idle");
+  const { connectionStatus } = useConnection();
 
   useEffect(() => {
-    if (prevStatus.current === reconnectionStatus) return;
-    prevStatus.current = reconnectionStatus;
+    if (prevStatus.current === connectionStatus) return;
+    prevStatus.current = connectionStatus;
 
-    switch (reconnectionStatus) {
+    switch (connectionStatus) {
       case "error":
         return console.log("Failed to reconnect");
       case "reconnecting":
         return console.log("Connection is broken, reconnecting...");
       default:
         return console.log("Connected succesfully");
     }
-  }, [reconnectionStatus]);
+  }, [connectionStatus]);
 }
 ```