flow state and unplugging and such

packages/desktop/src/providers/LocalStreamProvider.tsx

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

packages/desktop/src/providers/SocketProvider.tsx

@@ -1,10 +1,13 @@
-import React, { useState, useEffect, useContext } from 'react';
+import React, { useState, useEffect, useContext, useCallback } from 'react';
 import toast from 'react-hot-toast';
 import { io, Socket } from 'socket.io-client';
 import useAuth from './AuthProvider';
+import FlowState from '../tree/protected/FlowState';
 
 interface ISocketProvider {
   $ws: Socket;
+
+  handleFlowState?: () => void;
 }
 
 const SocketContext = React.createContext<ISocketProvider>({
@@ -16,6 +19,8 @@ export function SocketProvider({ children }: { children: React.ReactNode }) {
 
   const [$ws, set$ws] = useState<Socket>(null);
 
+  const [flowState, setFlowState] = useState<boolean>(false);
+
   useEffect(() => {
     if (!jwtToken) {
       set$ws(undefined);
@@ -52,9 +57,23 @@ export function SocketProvider({ children }: { children: React.ReactNode }) {
 
     return () => {
       socketConnection.disconnect();
+      socketConnection.removeAllListeners();
     };
   }, [set$ws, jwtToken]);
 
+  const handleFlowState = useCallback(() => {
+    setFlowState(true);
+
+    $ws.disconnect();
+    $ws.removeAllListeners();
+  }, [setFlowState, $ws]);
+
+  const handleReconnect = useCallback(() => {
+    setFlowState(false);
+
+    $ws.connect();
+  }, [setFlowState, $ws]);
+
   if (!$ws) {
     return (
       <div className="h-screen w-screen justify-center items-center bg-white flex flex-col">
@@ -63,14 +82,18 @@ export function SocketProvider({ children }: { children: React.ReactNode }) {
             "Please wait for a solid connection. If that doesn't work, please click below or restart the application."
           }
         </span>
-        <button onClick={() => console.warn('NOT IMPLEMENTED...manual reconnect button')}>
-          Reconnect
-        </button>
+        <button onClick={handleReconnect}>Reconnect</button>
       </div>
     );
   }
 
-  return <SocketContext.Provider value={{ $ws }}>{children}</SocketContext.Provider>;
+  if (flowState) {
+    return <FlowState handleReconnect={handleReconnect} />;
+  }
+
+  return (
+    <SocketContext.Provider value={{ $ws, handleFlowState }}>{children}</SocketContext.Provider>
+  );
 }
 
 export default function useSockets() {