From 4fd9677fb6b6150c5da806cccee8f8e056c18e14 Mon Sep 17 00:00:00 2001
From: igorrCarvalho <igorsilvabhz6@gmail.com>
Date: Sun, 9 Jun 2024 16:50:57 -0300
Subject: [PATCH] Feat: add shortcut to open flow Share modal

---
 .../src/components/chatComponent/index.tsx    | 21 +++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

diff --git a/src/frontend/src/components/chatComponent/index.tsx b/src/frontend/src/components/chatComponent/index.tsx
index 4ef0c1cf2..6fc0da4b9 100644
--- a/src/frontend/src/components/chatComponent/index.tsx
+++ b/src/frontend/src/components/chatComponent/index.tsx
@@ -13,25 +13,32 @@ import ForwardedIconComponent from "../genericIconComponent";
 import { Separator } from "../ui/separator";
 
 export default function FlowToolbar(): JSX.Element {
+  const preventDefault = true;
   function handleAPIWShortcut(e: KeyboardEvent) {
-    e.preventDefault();
     setOpenCodeModal((oldOpen) => !oldOpen);
   }
 
   function handleChatWShortcut(e: KeyboardEvent) {
     if (useFlowStore.getState().hasIO) {
-      e.preventDefault();
       setOpen((oldState) => !oldState);
     }
   }
 
+  function handleShareWShortcut(e: KeyboardEvent) {
+    setOpenShareModal((oldState) => !oldState);
+  }
+
   const openPlayground = useShortcutsStore((state) => state.open);
   const api = useShortcutsStore((state) => state.api);
+  const share = useShortcutsStore((state) => state.share);
 
-  useHotkeys(openPlayground, handleChatWShortcut);
-  useHotkeys(api, handleAPIWShortcut);
-  const [open, setOpen] = useState(false);
+  useHotkeys(openPlayground, handleChatWShortcut, { preventDefault });
+  useHotkeys(api, handleAPIWShortcut, { preventDefault });
+  useHotkeys(share, handleShareWShortcut, { preventDefault });
+
+  const [open, setOpen] = useState<boolean>(false);
   const [openCodeModal, setOpenCodeModal] = useState<boolean>(false);
+  const [openShareModal, setOpenShareModal] = useState<boolean>(false);
 
   const hasIO = useFlowStore((state) => state.hasIO);
   const hasStore = useStoreStore((state) => state.hasStore);
@@ -47,6 +54,8 @@ export default function FlowToolbar(): JSX.Element {
         is_component={false}
         component={currentFlow!}
         disabled={!hasApiKey || !validApiKey || !hasStore}
+        open={openShareModal}
+        setOpen={setOpen}
       >
         <button
           disabled={!hasApiKey || !validApiKey || !hasStore}
@@ -70,7 +79,7 @@ export default function FlowToolbar(): JSX.Element {
         </button>
       </ShareModal>
     ),
-    [hasApiKey, validApiKey, currentFlow, hasStore],
+    [hasApiKey, validApiKey, currentFlow, hasStore, openShareModal, setOpen],
   );
 
   return (