reogranized with a simple socket extension to data provider

packages/desktop/src/controller/lineDataProvider.tsx

@@ -3,12 +3,13 @@ import {
   ConnectToLine,
   SomeoneConnected,
   SomeoneTuned,
+  TuneToLine,
   UserBroadcastPull,
   UserBroadcastingPush,
 } from "@nirvana/core/sockets/channels";
-import React, { useContext } from "react";
+import React, { useContext, useState } from "react";
 import { Socket, io } from "socket.io-client";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect } from "react";
 
 import MasterLineData from "@nirvana/core/models/masterLineData.model";
 import SocketChannels from "@nirvana/core/sockets/channels";
@@ -18,35 +19,39 @@ import toast from "react-hot-toast";
 import { useRecoilValue } from "recoil";
 import { useUserLines } from "./index";
 
-type LineIdToMasterLine = {
-  [lineId: string]: MasterLineData;
-};
-interface ILineDataContext {
-  // represents the modified and up to date lines data with availability from session
-  linesMap: LineIdToMasterLine;
-  relevantUsers: User[];
-  handleUserBroadcast: (lineId: string, isTurningOn: boolean) => void;
-}
-
-const LineDataContext = React.createContext<ILineDataContext>({
-  linesMap: {},
-  relevantUsers: [],
-  handleUserBroadcast: (lineId: string, isTurningOn: boolean = true) => {},
-});
-
 let $ws: Socket;
 
-export function LineDataProvider({ children }) {
-  // TODO: have internal loading to prevent showing even router and all if something is not ready
-  // or have it within each property within the context value
-
-  // persistent store of lines
-  // ?just do simple synchronous axios/fetch in useEffect and manage isLoading ourselves?
-  const { data: basicUserLinesData } = useUserLines();
+export function useSocketHandler(linesData: MasterLineData[]) {
   const jwtToken = useRecoilValue($jwtToken);
 
   const [linesMap, setLinesMap] = useState<LineIdToMasterLine>({});
 
+  useEffect(() => {
+    console.log(linesData);
+    if (linesData) {
+      setLinesMap((prevMappings) => {
+        // go through the lines from the persistent store
+
+        // get all of the id's and map assign to the main object
+
+        // ?prolly have no previous at this point...but I'm okay with override since this
+        // ?useeffect is triggered on the refetching of the persistent store so we
+        // ?are prolly looking to do a full app refresh and connection refresh
+        const newMap = { ...prevMappings };
+
+        linesData.map((masterLine) => {
+          newMap[masterLine.lineDetails._id.toString()] = masterLine;
+
+          handleConnectToLine(masterLine.lineDetails._id.toString());
+
+          // tune into lines
+        });
+
+        return newMap;
+      });
+    }
+  }, [linesData, setLinesMap]);
+
   useEffect(() => {
     $ws = io("http://localhost:5000", {
       query: { token: jwtToken },
@@ -99,53 +104,15 @@ export function LineDataProvider({ children }) {
           `someone or myself buzz on or off in line ${pull.lineId}`
         );
 
-        setLinesMap((prevLinesMap) => {
-          const newMap = { ...prevLinesMap };
+        const newMap = {};
 
-          // todo: check if it's the user or someone else broadcasting
+        // todo: check if it's the user or someone else broadcasting
 
-          if (newMap[pull.lineId])
-            newMap[pull.lineId].isUserBroadcasting = pull.isTurningOn;
-
-          return newMap;
-        });
+        if (newMap[pull.lineId])
+          newMap[pull.lineId].isUserBroadcasting = pull.isTurningOn;
       }
     );
-  }, [setLinesMap]);
-
-  // connect through ws to enrich basic lines data
-  useEffect(() => {
-    console.log("got basic user lines data!!!");
-
-    // ?need to calculate diff and only do stuff then?
-
-    // $ws.on(SocketChannels.CONNECT, console.log());
-
-    $ws.on("test", () => console.log("test"));
-
-    if (basicUserLinesData?.data?.masterLines.length > 0) {
-      setLinesMap((prevMappings) => {
-        // go through the lines from the persistent store
-
-        // get all of the id's and map assign to the main object
-
-        // ?prolly have no previous at this point...but I'm okay with override since this
-        // ?useeffect is triggered on the refetching of the persistent store so we
-        // ?are prolly looking to do a full app refresh and connection refresh
-        const newMap = { ...prevMappings };
-
-        basicUserLinesData.data.masterLines.map((masterLine) => {
-          newMap[masterLine.lineDetails._id.toString()] = masterLine;
-
-          handleConnectToLine(masterLine.lineDetails._id.toString());
-
-          // tune into lines
-        });
-
-        return newMap;
-      });
-    }
-  }, [basicUserLinesData]);
+  }, []);
 
   const handleConnectToLine = (lineId: string) => {
     $ws.emit(SocketChannels.CONNECT_TO_LINE, new ConnectToLine(lineId));
@@ -160,7 +127,8 @@ export function LineDataProvider({ children }) {
     // they already are in the socket room for updates including media connections and disconnections
     // but set the flag so that the line row can know whether or not to start the webrtc process
     // and know when to get out or disconnect from the webrtc when the flag turns off
-    // $ws.emit(SocketChannels.TUNE_INTO_LINE, new TuneIntoLine(lineId));
+
+    $ws.emit(SocketChannels.TUNE_TO_LINE, new TuneToLine(lineId, turnToggleOn));
   };
 
   /**
@@ -197,13 +165,45 @@ export function LineDataProvider({ children }) {
       // update the specific line in lines map
       // set the state to trigger the re-renders in the tree
     },
-    [setLinesMap]
+    [$ws]
   );
 
+  return {
+    linesMap,
+    handleConnectToLine,
+    handleTuneToLine,
+    handleUserBroadcast,
+    handleFetchMoreAudioBlocks,
+  };
+}
+
+export type LineIdToMasterLine = {
+  [lineId: string]: MasterLineData;
+};
+interface ILineDataContext {
+  // represents the modified and up to date lines data with availability from session
+  linesMap: LineIdToMasterLine;
+  relevantUsers: User[];
+}
+
+const LineDataContext = React.createContext<ILineDataContext>({
+  linesMap: {},
+  relevantUsers: [],
+});
+
+export function LineDataProvider({ children }) {
+  // TODO: have internal loading to prevent showing even router and all if something is not ready
+  // or have it within each property within the context value
+
+  // persistent store of lines
+  // ?just do simple synchronous axios/fetch in useEffect and manage isLoading ourselves?
+  const { data: basicUserLinesData } = useUserLines();
+
+  const { linesMap } = useSocketHandler(basicUserLinesData?.data?.masterLines);
+
   const value: ILineDataContext = {
     linesMap, // TODO send the updated map instead of this array
     relevantUsers: [],
-    handleUserBroadcast,
   };
 
   return (

packages/desktop/src/controller/sockets.tsx

@@ -1,6 +0,0 @@
-import SocketChannels from "@nirvana/core/sockets/channels";
-import { io } from "socket.io-client";
-
-const $ws = io("http://localhost:5000");
-
-export default $ws;