preventing renders really complicated

packages/desktop/src/providers/LocalStreamProvider.tsx

@@ -0,0 +1 @@
+// Manage user's stream and

packages/desktop/src/providers/PeerStreamProvider.tsx

@@ -0,0 +1,20 @@
+/**
+ * take in the rooms
+ * which ones am I in
+ * on mounting, call all other folks
+ *
+ * on someone untuning from a line and they are not in any other lines
+ * if they are in the peer connections that we have stored, then destroy them and remove them
+ *
+ * on someone tuning into a line, they are seen in the list of ids for me
+ * if they are not in my local peers storage then I want to initiate connections so that I can communicate with them
+ *
+ *
+ * on me untuning from a line, we need to destroy the right one from the store of peers and destroy the connection
+ *
+ *
+ * on me changing my media devices, I need to replace stream for all peer connections so that they get a whole new set
+ *
+ *
+ * listen for any calls to me, as well as any answers back to me
+ */

packages/desktop/src/providers/RealTimeRoomProvider.tsx

@@ -28,7 +28,7 @@ type LineIdToMasterLine = {
 interface IRealTimeRoomProvider {
   roomsMap: LineIdToMasterLine;
 
-  selectedLine?: MasterLineData;
+  selectedLineId?: string;
   handleSelectLine: (newLineId: string) => void;
 }
 
@@ -46,7 +46,7 @@ export function RealTimeRoomProvider({ children }: { children: React.ReactChild
   const { $ws } = useSockets();
   const [realTimeRoomMap, setRealTimeRoomMap] = useState<LineIdToMasterLine>({});
 
-  const [selectedLine, setSelectedLine] = useState<MasterLineData>();
+  const [selectedLineId, setSelectedLineId] = useState<string>();
 
   useEffect(() => {
     /**
@@ -203,14 +203,14 @@ export function RealTimeRoomProvider({ children }: { children: React.ReactChild
   const handleSelectLine = useCallback(
     (newLineIdToSelect: string) => {
       toast('selecting line!! NOT IMPLEMENTED');
-      setSelectedLine(realTimeRoomMap[newLineIdToSelect]);
+      setSelectedLineId(newLineIdToSelect);
     },
-    [setSelectedLine, realTimeRoomMap],
+    [setSelectedLineId],
   );
 
   return (
     <RealTimeRoomContext.Provider
-      value={{ roomsMap: realTimeRoomMap, handleSelectLine, selectedLine }}
+      value={{ roomsMap: realTimeRoomMap, handleSelectLine, selectedLineId }}
     >
       {children}
     </RealTimeRoomContext.Provider>

packages/desktop/src/tree/protected/terminal/panels/SidePanel.tsx

@@ -14,7 +14,7 @@ export default function SidePanel() {
   // using merely for loading state...better to add to realtimeroom context?
   const { rooms: initialRoomsFetch } = useRooms();
 
-  const { roomsMap, handleSelectLine, selectedLine } = useRealTimeRooms();
+  const { roomsMap, handleSelectLine, selectedLineId } = useRealTimeRooms();
 
   const [toggleTunedLines, allLines] = useMemo(() => {
     const masterLines: MasterLineData[] = Object.values(roomsMap);
@@ -54,11 +54,8 @@ export default function SidePanel() {
             <LineRow
               key={`terminalListLines-${masterLineData.lineDetails._id.toString()}`}
               line={masterLineData}
-              onClick={() => handleSelectLine(masterLineData.lineDetails._id.toString())}
+              handleSelectLine={handleSelectLine}
-              isSelected={
+              isSelected={masterLineData.lineDetails._id.toString() === selectedLineId}
-                selectedLine?.lineDetails._id.toString() ===
-                masterLineData.lineDetails._id.toString()
-              }
             />
           ))}
         </div>
@@ -79,11 +76,8 @@ export default function SidePanel() {
             <LineRow
               key={`terminalListLines-${masterLineData.lineDetails._id.toString()}`}
               line={masterLineData}
-              onClick={() => handleSelectLine(masterLineData.lineDetails._id.toString())}
+              handleSelectLine={handleSelectLine}
-              isSelected={
+              isSelected={masterLineData.lineDetails._id.toString() === selectedLineId}
-                selectedLine?.lineDetails._id.toString() ===
-                masterLineData.lineDetails._id.toString()
-              }
             />
           ))
         )}
@@ -105,15 +99,19 @@ export default function SidePanel() {
   );
 }
 
-function LineRow({
+const LineRow = React.memo(LineRowTest);
+
+function LineRowTest({
   line,
-  onClick,
+  handleSelectLine,
   isSelected,
 }: {
   line: MasterLineData;
-  onClick: () => void;
+  handleSelectLine: (newLineId: string) => void;
   isSelected: boolean;
 }) {
+  console.warn('re-rendering', line.lineDetails._id.toString());
+
   const { user } = useAuth();
 
   const isUserTunedIn = useMemo(
@@ -198,7 +196,7 @@ function LineRow({
 
   return (
     <div
-      onClick={() => onClick()}
+      onClick={() => handleSelectLine(line.lineDetails._id.toString())}
       role={'presentation'}
       className={`flex flex-row items-center justify-start gap-2 p-2 px-4 h-14 hover:bg-gray-200 cursor-pointer transition-all
 last:border-b-0 border-b border-b-gray-200 relative z-50 rounded ${