more cleanup and better to have some prop drilling but just stay balanced here

packages/api/sockets/index.ts

@@ -29,6 +29,10 @@ const socketIdsToUserIds: {
 export default function InitializeWs(io: any) {
   console.log("initializing web sockets");
 
+  setInterval(() => {
+    console.log(socketIdsToUserIds);
+  }, 5000);
+
   return io
     .use(function (socket: any, next: any) {
       console.log("authenticating user...");
@@ -163,6 +167,9 @@ export default function InitializeWs(io: any) {
         // notify everyone of this disconnection
 
         console.log("user disconnected");
+        console.log(
+          `list of sockets mappings in memory: ${socketIdsToUserIds}`
+        );
       });
     });
 }

packages/desktop/src/pages/router/index.tsx

@@ -13,32 +13,6 @@ import NirvanaHeader from "../../components/header/index";
 import NirvanaTerminal from "../terminal";
 import Overlay from "../overlay";
 
-export interface ILineDetails {
-  lineId: string;
-  name: string;
-
-  profilePictures: string[];
-  numberMembers: number;
-
-  isUserToggleTunedIn: boolean;
-
-  isUserBroadcastingHere: boolean;
-  isSomeoneElseBroadcastingHere: boolean;
-  streamImages: string[];
-
-  audioBlocks: {
-    creatorProfilePicture: string;
-    creatorName: string;
-    lengthOfClip: number;
-    relativeTimeAgo: string;
-  }[];
-  timeAgo: string;
-
-  hasNewActivity: boolean;
-
-  profilePicsLiveBroadcasters?: string[];
-}
-
 export default function NirvanaRouter() {
   const [selectedLineId, setSelectedLineId] = useRecoilState($selectedLineId);
   const [desktopMode, setDesktopMode] = useRecoilState($desktopMode);

packages/desktop/src/pages/terminal/details/index.tsx

@@ -3,7 +3,6 @@ import { GlobalHotKeys, KeyMap } from "react-hotkeys";
 import { useCallback, useMemo } from "react";
 
 import { $selectedLineId } from "../../../controller/recoil";
-import { ILineDetails } from "../../router";
 import LineIcon from "../../../components/lines/lineIcon/index";
 import { LineMemberState } from "@nirvana/core/models/line.model";
 import MasterLineData from "@nirvana/core/models/masterLineData.model";
@@ -11,22 +10,11 @@ import { Tooltip } from "antd";
 import { useLineDataProvider } from "../../../controller/lineDataProvider";
 import { useRecoilState } from "recoil";
 
-export default function LineDetailsTerminal() {
-  const [selectedLineId, setSelectedLineId] = useRecoilState($selectedLineId);
-
-  const { linesMap } = useLineDataProvider();
-
-  const selectedLine: MasterLineData | undefined = useMemo(() => {
-    if (!selectedLineId) return undefined;
-
-    // find the line from the data provider
-    if (linesMap[selectedLineId]) {
-      return linesMap[selectedLineId];
-    }
-
-    return undefined;
-  }, [selectedLineId, linesMap]);
-
+export default function LineDetailsTerminal({
+  selectedLine,
+}: {
+  selectedLine: MasterLineData;
+}) {
   const isUserToggleTuned = useMemo(
     () => selectedLine?.currentUserMember?.state === LineMemberState.TUNED,
     [selectedLine]

packages/desktop/src/pages/terminal/index.tsx

@@ -6,7 +6,6 @@ import { useRecoilState, useSetRecoilState } from "recoil";
 
 import { FaPlus } from "react-icons/fa";
 import { FiActivity } from "react-icons/fi";
-import { ILineDetails } from "../router";
 import IconButton from "../../components/Button/IconButton/index";
 import LineDetailsTerminal from "./details";
 import { LineMemberState } from "@nirvana/core/models/line.model";
@@ -99,6 +98,17 @@ export default function NirvanaTerminal() {
     [selectedLineId]
   );
 
+  const selectedLine: MasterLineData | undefined = useMemo(() => {
+    if (!selectedLineId) return undefined;
+
+    // find the line from the data provider
+    if (linesMap[selectedLineId]) {
+      return linesMap[selectedLineId];
+    }
+
+    return undefined;
+  }, [selectedLineId, linesMap]);
+
   return (
     <>
       <GlobalHotKeys handlers={handlers} keyMap={keyMap} allowChanges />
@@ -169,8 +179,8 @@ export default function NirvanaTerminal() {
           </div>
         </div>
 
-        {desktopMode === "terminalDetails" && selectedLineId && (
-          <LineDetailsTerminal />
+        {desktopMode === "terminalDetails" && selectedLine && (
+          <LineDetailsTerminal selectedLine={selectedLine} />
         )}
       </div>
     </>