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() {

packages/desktop/src/tree/protected/FlowState.tsx

@@ -0,0 +1,49 @@
+import React, { useEffect, useState } from 'react';
+import FullMottoLogo, { LogoType } from '@nirvana/components/logo/fullMotto';
+
+type Quote = {
+  content: string;
+  author: string;
+  length: number;
+  dateAdded: Date;
+  _id: string;
+  tags: string[];
+};
+export default function FlowState({ handleReconnect }: { handleReconnect: () => void }) {
+  const [quote, setQuote] = useState<Quote>(null);
+
+  useEffect(() => {
+    fetch('https://api.quotable.io/random')
+      .then((res) => res.json())
+      .then((data: Quote) => {
+        console.warn(data);
+
+        setQuote(data);
+      })
+      .catch((error) => {
+        // do nothing, don't bother user, just don't show the quote
+        console.warn(error);
+      });
+  }, []);
+
+  return (
+    <div className="flex flex-col flex-1 justify-center items-center relative">
+      {/* <img src="https://source.unsplash.com/random/?nature" /> */}
+      <FullMottoLogo type={LogoType.small} className={'absolute bottom-2 mx-auto'} />
+
+      {quote && (
+        <span className="flex flex-col justify-center items-center max-w-screen-sm">
+          <span className="text-xl text-gray-800 font-semibold text-center">{`"${quote.content}"`}</span>
+          <span className="tex-md italic text-gray-400">{quote.author}</span>
+        </span>
+      )}
+
+      <button
+        onClick={handleReconnect}
+        className="text-gray-300 text-xs p-3 transition-all hover:bg-gray-200 fixed top-5 right-5"
+      >
+        reconnect
+      </button>
+    </div>
+  );
+}

packages/desktop/src/tree/protected/terminal/navbar/Navbar.tsx

@@ -5,6 +5,7 @@ import React, { useMemo, useRef, useState } from 'react';
 import { FaSearch } from 'react-icons/fa';
 import useAuth from '../../../../providers/AuthProvider';
 import useElectron from '../../../../providers/ElectronProvider';
+import useSockets from '../../../../providers/SocketProvider';
 
 /**
  * TODO: add in video mode
@@ -14,6 +15,8 @@ export default function NavBar() {
   const { user, handleLogout } = useAuth();
   const { desktopMode } = useElectron();
 
+  const { handleFlowState } = useSockets();
+
   const inputRef = useRef<HTMLInputElement>(null);
   const [searchInput, setSearchInput] = useState<string>('');
 
@@ -120,22 +123,12 @@ export default function NavBar() {
           </div>
         )}
 
-        {/* todo: move this ghost button to components */}
-        {/* {desktopMode === 'flowState' ? (
-          <button
-            onClick={() => setDesktopMode('terminal')}
-            className="ml-auto text-gray-300 text-xs p-3 transition-all hover:bg-gray-200"
-          >
-            connect
-          </button>
-        ) : (
-          <button
-            onClick={() => setDesktopMode('flowState')}
-            className="text-gray-300 text-xs p-3 transition-all hover:bg-gray-200"
-          >
-            flow state
-          </button>
-        )} */}
+        <button
+          onClick={handleFlowState}
+          className="text-gray-300 text-xs p-3 transition-all hover:bg-gray-200"
+        >
+          flow state
+        </button>
 
         <Dropdown overlay={profileMenu}>
           <div className={'cursor-pointer ml-2'}>