flow state and unplugging and such

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'}>