cleanup and using unmount function to keep it clean

packages/desktop/src/providers/ConversationProvider.tsx

@@ -22,7 +22,7 @@ import {
   getConversationById,
   getConversations,
 } from '../api/NirvanaApi';
-import { useAsyncFn, useEffectOnce } from 'react-use';
+import { useAsyncFn, useEffectOnce, useUnmount } from 'react-use';
 
 import CreateConversationRequest from '@nirvana/core/requests/CreateConversationRequest.request';
 import Peer from 'simple-peer';
@@ -431,13 +431,23 @@ function Room({
   const { user } = useAuth();
   const { $ws } = useSockets();
 
+  const [userLocalStream, setUserLocalStream] = useState<MediaStream>();
+
   // have internal state to manage details of this "room"
 
   // ============== STREAMING ===============
 
   // handle incoming calls and accept calls and create objects for them
   useEffectOnce(() => {
-    const localPeersForRoom: Peer[] = [];
+    (async () => {
+      // TODO : bring this stream object higher and add this later to the room
+      // set up local stream for this room - temporary until we figure out global stream handling and passing down
+      const localMediaStream = await navigator.mediaDevices.getUserMedia({
+        video: videoConstraints,
+        audio: true,
+      });
+
+      setUserLocalStream(localMediaStream);
 
       // ?will there be race condition where this room component is rendered but we don't have the latest
       // ?list of tunedin folks and so we may just end up calling select few?
@@ -450,10 +460,8 @@ function Room({
         );
         toast.success('calling bunch of people');
 
-      // TODO : bring this stream object higher and add this later to the room
-      navigator.mediaDevices
-        .getUserMedia({ video: videoConstraints, audio: true })
-        .then((localMediaStream: MediaStream) => {
+        setUserLocalStream(localMediaStream);
+
         // for each person, create peer object
         allOtherUserIds.forEach((otherUserId) => {
           const connectingToast = toast.loading('calling peer for a snappy experience');
@@ -533,30 +541,13 @@ function Room({
             console.error(err);
             toast.error('there was a problem with the peer connection');
           });
-
-            localPeersForRoom.push(localPeerConnection);
         });
-        });
-
-      return () => {
-        // go through all peer connections and destroy them
-        // remove all room contents as well
-        localPeersForRoom.forEach((peerConnection) => {
-          peerConnection.destroy();
-        });
-      };
       }
-
-    // ======= LISTEN FOR INCOMING CALLS AND ACCEPT THEM
-
-    return () => {
-      localPeersForRoom.forEach((peerToClose) => peerToClose.destroy());
-    };
+    })();
   });
 
-  useEffectOnce(() => {
-    const localNewbiesForRoom: Peer[] = [];
-
+  // ======= LISTEN FOR INCOMING CALLS AND RETURN SIGNALS AND ACCEPT THEM
+  useEffect(() => {
     const someoneJoinedChannelNameForRoom = `${
       ServerResponseChannels.RTC_NEW_USER_JOINED
     }:${conversation._id.toString()}`;
@@ -570,6 +561,7 @@ function Room({
 
       const peerForMeAndNewbie = new Peer({
         initiator: false,
+        stream: userLocalStream,
         trickle: true, // prevents the multiple tries on different ice servers and signal from getting called a bunch of times
         config: {
           iceServers,
@@ -638,8 +630,6 @@ function Room({
         console.error(err);
         toast.error('there was a problem with the peer connection');
       });
-
-      localNewbiesForRoom.push(peerForMeAndNewbie);
     });
 
     $ws.on(mastersAnswerReceivedChannelNameForRoom, (res: RtcReceiveAnswerResponse) => {
@@ -663,6 +653,20 @@ function Room({
     };
   });
 
+  // go through all of the peers and destroy and update conversation map
+  useUnmount(() => {
+    setConversationMap((draft) => {
+      if (draft[conversation._id.toString()].room) {
+        Object.values(draft[conversation._id.toString()].room).forEach((roomPeerContents) => {
+          roomPeerContents.peer.destroy();
+          toast('destroyed peer connection as I am leaving room');
+        });
+      }
+
+      delete draft[conversation._id.toString()].room;
+    });
+  });
+
   // TODO: improved listener manager for each peer connection
   const setPeerListeners = useCallback(
     (peer) => {