From 4c83b5c2c0981e528cba99d97c69ee997bfd543e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mi=C5=82osz=20Filimowski?=
 <MiloszFilimowski@users.noreply.github.com>
Date: Tue, 5 Nov 2024 16:34:19 +0100
Subject: [PATCH] FCE-815: Rename `peers` to `remotePeers` in `usePeers` (#166)

## Description

- Deprecated `peers` in place of `remotePeers` in `usePeers` hook.

## Motivation and Context

- This change unifies hook API between mobile and web clients.

## Types of changes

- [ ] Bug fix (non-breaking change which fixes an issue)
- [x] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing
functionality to
      not work as expected)
---
 .../fishjam-chat/src/components/RoomView.tsx  |  6 ++--
 .../minimal-react/src/components/App.tsx      |  4 +--
 packages/react-client/src/hooks/usePeers.ts   | 29 +++++++++++++++++--
 3 files changed, 31 insertions(+), 8 deletions(-)

diff --git a/examples/react-client/fishjam-chat/src/components/RoomView.tsx b/examples/react-client/fishjam-chat/src/components/RoomView.tsx
index 57339464..d1c405eb 100644
--- a/examples/react-client/fishjam-chat/src/components/RoomView.tsx
+++ b/examples/react-client/fishjam-chat/src/components/RoomView.tsx
@@ -5,9 +5,9 @@ import { CallToolbar } from "./CallToolbar";
 import { nonNullablePredicate } from "@/lib/utils";
 
 export const RoomView = () => {
-  const { localPeer, peers } = usePeers();
+  const { localPeer, remotePeers } = usePeers();
 
-  const trackAmount = [localPeer, ...peers]
+  const trackAmount = [localPeer, ...remotePeers]
     .filter(nonNullablePredicate)
     .reduce((acc, curr) => {
       if (curr.cameraTrack) acc++;
@@ -46,7 +46,7 @@ export const RoomView = () => {
             </>
           )}
 
-          {peers.map(
+          {remotePeers.map(
             ({
               id,
               cameraTrack,
diff --git a/examples/react-client/minimal-react/src/components/App.tsx b/examples/react-client/minimal-react/src/components/App.tsx
index 171ac492..828636d9 100644
--- a/examples/react-client/minimal-react/src/components/App.tsx
+++ b/examples/react-client/minimal-react/src/components/App.tsx
@@ -17,7 +17,7 @@ export const App = () => {
   const connect = useConnect();
   const disconnect = useDisconnect();
   const status = useStatus();
-  const { peers } = usePeers();
+  const { remotePeers } = usePeers();
   const screenShare = useScreenShare();
   const client = useFishjamClient_DO_NOT_USE();
 
@@ -67,7 +67,7 @@ export const App = () => {
       </div>
 
       {/* Render the video remote tracks from other peers*/}
-      {peers.map(({ id, cameraTrack, screenShareVideoTrack }) => {
+      {remotePeers.map(({ id, cameraTrack, screenShareVideoTrack }) => {
         const camera = cameraTrack?.stream;
         const screenShare = screenShareVideoTrack?.stream;
 
diff --git a/packages/react-client/src/hooks/usePeers.ts b/packages/react-client/src/hooks/usePeers.ts
index d62953c0..4677e237 100644
--- a/packages/react-client/src/hooks/usePeers.ts
+++ b/packages/react-client/src/hooks/usePeers.ts
@@ -43,20 +43,43 @@ function endpointToPeerState(
   };
 }
 
+/**
+ * Result type for the usePeers hook.
+ */
+export type UsePeersResult = {
+  /**
+   * The local peer with distinguished tracks (camera, microphone, screen share).
+   * Will be null if the local peer is not found.
+   */
+  localPeer: PeerWithTracks | null;
+
+  /**
+   * Array of remote peers with distinguished tracks (camera, microphone, screen share).
+   */
+  remotePeers: PeerWithTracks[];
+
+  /**
+   * @deprecated Use remotePeers instead
+   * Legacy array containing remote peers.
+   * This property will be removed in future versions.
+   */
+  peers: PeerWithTracks[];
+};
+
 /**
  *
  * @category Connection
  */
-export function usePeers() {
+export function usePeers(): UsePeersResult {
   const { clientState } = useFishjamContext();
 
   const localPeer = clientState.localPeer
     ? getPeerWithDistinguishedTracks(endpointToPeerState(clientState.localPeer))
     : null;
 
-  const peers = Object.values(clientState.peers).map((peer) =>
+  const remotePeers = Object.values(clientState.peers).map((peer) =>
     getPeerWithDistinguishedTracks(endpointToPeerState(peer)),
   );
 
-  return { localPeer, peers };
+  return { localPeer, remotePeers, peers: remotePeers };
 }