From 9bc2e186fd274babc4295aadc8ae30dfdd13a2f2 Mon Sep 17 00:00:00 2001
From: talksik <patel.arjun50@gmail.com>
Date: Sat, 25 Jun 2022 12:30:40 -0500
Subject: [PATCH] handling flow state better from overlay

---
 packages/desktop/src/providers/SocketProvider.tsx |  6 +++---
 packages/desktop/src/tree/FooterControls.tsx      | 12 +++++++++++-
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/packages/desktop/src/providers/SocketProvider.tsx b/packages/desktop/src/providers/SocketProvider.tsx
index 7e59977..4bceedd 100644
--- a/packages/desktop/src/providers/SocketProvider.tsx
+++ b/packages/desktop/src/providers/SocketProvider.tsx
@@ -1,10 +1,10 @@
 import { Button, Container, Typography } from '@mui/material';
 import React, { useCallback, useContext, useEffect, useState } from 'react';
 import { Socket, io } from 'socket.io-client';
+import { useMount, useUnmount } from 'react-use';
 
 import toast from 'react-hot-toast';
 import useAuth from './AuthProvider';
-import { useUnmount } from 'react-use';
 
 interface ISocketProvider {
   $ws: Socket;
@@ -63,9 +63,9 @@ export function SocketProvider({ children }: { children: React.ReactNode }) {
     set$ws(socketConnection);
   }, [initiateSocketStabilityListeners, jwtToken, set$ws]);
 
-  useEffect(() => {
+  useMount(() => {
     connect();
-  }, [connect]);
+  });
 
   useUnmount(() => {
     $ws?.disconnect();
diff --git a/packages/desktop/src/tree/FooterControls.tsx b/packages/desktop/src/tree/FooterControls.tsx
index d1c40c9..29ba2a7 100644
--- a/packages/desktop/src/tree/FooterControls.tsx
+++ b/packages/desktop/src/tree/FooterControls.tsx
@@ -52,6 +52,16 @@ export default function FooterControls() {
 
   const [openUserSettings, setOpenUserSettings] = useState<boolean>(false);
 
+  const handleTurnOnFlowState = useCallback(() => {
+    // when in overlay mode, we need to toggle main app and then go into flow state
+
+    if (desktopMode === 'overlayOnly') {
+      handleToggleDesktopMode();
+    }
+
+    handleFlowState();
+  }, [handleFlowState, desktopMode, handleToggleDesktopMode]);
+
   const handleClickProfile = useCallback(
     (event: React.MouseEvent<HTMLElement>) => {
       if (desktopMode === 'overlayOnly') {
@@ -137,7 +147,7 @@ export default function FooterControls() {
 
           <Divider orientation="horizontal" flexItem />
 
-          <Button size={'small'} color={'secondary'} variant="text" onClick={handleFlowState}>
+          <Button size={'small'} color={'secondary'} variant="text" onClick={handleTurnOnFlowState}>
             flow
           </Button>