clean AF handling of function type with typescript and passing down to context provider types and shit

packages/desktop/src/components/ProtectedRoute/index.tsx

@@ -20,6 +20,7 @@ export default function ProtectedRoute({
     isLoading: serverLoading,
     isSuccess: isServerHealthy,
     error: serverStatusError,
+    isFetching: serverFetching,
   } = useServerCheck();
 
   const { isLoading, isError, isFetching, isSuccess, refetch } = useAuthCheck(
@@ -59,6 +60,7 @@ export default function ProtectedRoute({
     refetch();
   }, [jwtToken]);
 
+  // first time loading
   if (serverLoading)
     return (
       <span className="text-md text-gray-400 flex items-center justify-center flex-1 text-center p-5 h-screen">

packages/desktop/src/controller/index.tsx

@@ -57,7 +57,11 @@ export function useUserLines() {
   // todo: base/source of truth for getting all of the lines for the user
   // merge with sockets + audio clip data + master data + convomember data
 
-  return useQuery("USER_LINES", ApiCalls.getUserLines);
+  return useQuery("USER_LINES", ApiCalls.getUserLines, {
+    refetchOnWindowFocus: false,
+    refetchIntervalInBackground: false,
+    staleTime: Infinity,
+  });
 }
 
 // =========== MUTATIONS

packages/desktop/src/controller/lineDataProvider.tsx

@@ -174,8 +174,9 @@ function useSocketHandler(linesData: MasterLineData[]) {
    * and doing initial connections/tune ins ?could trigger this later?
    */
   useEffect(() => {
-    console.log(linesData);
-    if (linesData) {
+    if (linesData?.length > 0) {
+      console.log("going to make initial connections and create lines map");
+
       setLinesMap((prevMappings) => {
         // go through the lines from the persistent store
 
@@ -282,17 +283,14 @@ function useSocketHandler(linesData: MasterLineData[]) {
     [$ws]
   );
 
+  // TODO: move all of these emitters to just having child views doing the work here
   return {
     linesMap,
-    emitters: $ws
-      ? {
-          handleConnectToLine,
-          handleTuneToLine,
-          handleStartBroadcast,
-          handleStopBroadcast,
-          handleFetchMoreAudioBlocks,
-        }
-      : {},
+    handleConnectToLine,
+    handleTuneToLine,
+    handleStartBroadcast,
+    handleStopBroadcast,
+    handleFetchMoreAudioBlocks,
   };
 }
 
@@ -303,11 +301,17 @@ interface ILineDataContext {
   // represents the modified and up to date lines data with availability from session
   linesMap: LineIdToMasterLine;
   relevantUsers: User[];
+
+  // in case some components need this like in the peer handling
+  $ws: Socket;
 }
 
-const LineDataContext = React.createContext<ILineDataContext>({
+const LineDataContext = React.createContext<
+  Partial<ILineDataContext & ReturnType<typeof useSocketHandler>>
+>({
   linesMap: {},
   relevantUsers: [],
+  $ws: undefined,
 });
 
 export function LineDataProvider({ children }) {
@@ -318,11 +322,19 @@ export function LineDataProvider({ children }) {
   // ?just do simple synchronous axios/fetch in useEffect and manage isLoading ourselves?
   const { data: basicUserLinesData } = useUserLines();
 
-  const { linesMap } = useSocketHandler(basicUserLinesData?.data?.masterLines);
+  const { linesMap, ...handlers } = useSocketHandler(
+    basicUserLinesData?.data?.masterLines
+  );
 
-  const value: ILineDataContext = {
+  if (!$ws) {
+    return <span>attempting to connect you for the here and now...</span>;
+  }
+
+  const value: ILineDataContext & ReturnType<typeof useSocketHandler> = {
     linesMap, // TODO send the updated map instead of this array
     relevantUsers: [],
+    $ws,
+    ...handlers,
   };
 
   return (

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

@@ -16,6 +16,8 @@ export default function LineDetailsTerminal({
 }: {
   selectedLine: MasterLineData;
 }) {
+  const { handleTuneToLine } = useLineDataProvider();
+
   const { data: userDetails } = useGetUserDetails();
   const isUserToggleTuned = useMemo(
     () => selectedLine?.currentUserMember?.state === LineMemberState.TUNED,
@@ -59,6 +61,10 @@ export default function LineDetailsTerminal({
           className="absolute bottom-0 p-4 shadow-2xl
         flex flex-row items-center gap-2 justify-end w-full"
         >
+          <span className="mr-auto text-teal-800">{`${
+            selectedLine?.tunedInMemberIds?.length ?? 0
+          } on the line`}</span>
+
           <button
             className={`p-3 flex justify-center items-center hover:bg-gray-300
            transition-all hover:scale-105`}
@@ -77,6 +83,9 @@ export default function LineDetailsTerminal({
           hover:scale-105 transition-all animate-pulse ${
             isUserToggleTuned ? "bg-gray-800 text-white" : "text-black"
           }`}
+              onClick={() =>
+                handleTuneToLine(selectedLine.lineDetails._id.toString(), true)
+              }
             >
               <FiActivity className="text-lg" />
             </button>

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

@@ -26,6 +26,12 @@ export default function NirvanaTerminal() {
   const { isLoading: isLoadingInitialLines } = useUserLines();
   const { linesMap } = useLineDataProvider();
 
+  useEffect(() => {
+    console.log("change/update in lines map");
+
+    console.log(linesMap);
+  }, [linesMap]);
+
   const allLines: MasterLineData[] = useMemo(() => {
     const masterLines: MasterLineData[] = Object.values(linesMap);
 

packages/desktop/src/styles/index.css

@@ -28,12 +28,12 @@ body {
 }
 
 /* TODO: temporary...remove? later? */
-body {
+/* body {
   -webkit-user-select: none;
   -webkit-app-region: drag;
 
   cursor: pointer;
-}
+} */
 
 .titlebar-button {
   -webkit-app-region: no-drag;