feat: add keyboard shortcuts

invm · Aug 29, 2023 · c18350e · c18350e
1 parent 79dadc5
commit c18350e
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 12 deletions.
diff --git a/src/components/CommandPalette/CommandPaletteContext.tsx b/src/components/CommandPalette/CommandPaletteContext.tsx
@@ -12,6 +12,12 @@ export interface ActionsContext {
 export const CommandPaletteContext = (props: { children: JSX.Element }) => {
   const {
     appService: { toggleThemeSwitcher },
+    connectionsService: {
+      setActiveContentTab,
+      setActiveConnection,
+      addContentTab,
+      removeActiveContentTab,
+    },
   } = useAppSelector();
 
   const actionsContext: ActionsContext = {
@@ -26,7 +32,6 @@ export const CommandPaletteContext = (props: { children: JSX.Element }) => {
 
   onMount(() => {
     document.onkeyup = function(e: KeyboardEvent) {
-      console.log(e.code, e.key, e.metaKey, e.ctrlKey, e.altKey, e.shiftKey);
       const number =
         e.altKey && e.code.startsWith("Digit")
           ? +e.code.replace("Digit", "")
@@ -43,14 +48,21 @@ export const CommandPaletteContext = (props: { children: JSX.Element }) => {
           e.altKey ? "select-query-tab" : "select-connection-tab",
           number
         );
+      } else if ((e.ctrlKey || e.metaKey) && e.code === "KeyT") {
+        if (e.shiftKey) {
+          removeActiveContentTab();
+        } else {
+          addContentTab();
+        }
       }
     };
 
     commandPaletteEmitter.on("select-connection-tab", (val) => {
-      console.log({ val, actions: "select-connection-tab" });
+      setActiveConnection(val - 1);
     });
+
     commandPaletteEmitter.on("select-query-tab", (val) => {
-      console.log({ val, actions: "select-connection-tab" });
+      setActiveContentTab(val);
     });
   });
 

diff --git a/src/components/Screens/Home/Connections/ConnectionsList/ConnectionItem/ActionsMenu.tsx b/src/components/Screens/Home/Connections/ConnectionsList/ConnectionItem/ActionsMenu.tsx
@@ -19,14 +19,14 @@ const columnsToSchema = (columns: Record<string, any>[]) => {
 }
 
 export const ActionsMenu = (props: { connection: ConnectionConfig }) => {
-  const { errorService: { addError }, connectionsService: { addTab } } = useAppSelector()
+  const { errorService: { addError }, connectionsService: { addConnectionTab } } = useAppSelector()
 
   const onConnect = async () => {
     try {
       await invoke('init_connection', { config: props.connection })
       const { result } = await invoke<QueryResult>('get_columns', { connId: props.connection.id });
       const schema = columnsToSchema(result)
-      await addTab({
+      await addConnectionTab ({
         id: props.connection.id,
         label: props.connection.name,
         schema,

diff --git a/src/components/Screens/Main.tsx b/src/components/Screens/Main.tsx
@@ -9,15 +9,15 @@ import { Home } from "./Home/Home";
 export const Main = () => {
   const {
     connectionsService: {
-      removeTab,
+      removeConnectionTab,
       // clearStore,
       connectionStore,
       setConnectionStore,
     },
   } = useAppSelector();
 
   const closeTab = async (id: string) => {
-    await removeTab(id);
+    await removeConnectionTab(id);
   };
 
   return (

diff --git a/src/services/ConnectionTabs.ts b/src/services/ConnectionTabs.ts
@@ -26,7 +26,7 @@ export const newContentTab = (label: string, key: ContentComponentKeys) => {
     case ContentComponent.QueryTab:
       return {
         label,
-        data: { query: "", executed: false,  results: [] },
+        data: { query: "", executed: false, results: [] },
         key,
       };
     case ContentComponent.TableStructureTab:
@@ -156,7 +156,7 @@ export const ConnectionTabsService = () => {
     await store.save();
   }, 1000);
 
-  const addTab = async (tab: ConnectionTab) => {
+  const addConnectionTab = async (tab: ConnectionTab) => {
     if (connectionStore.tabs.find((t) => t.id === tab.id)) return;
     setConnectionStore("tabs", connectionStore.tabs.concat(tab));
     setContentStore("tabs", [
@@ -167,7 +167,7 @@ export const ConnectionTabsService = () => {
     updateStore();
   };
 
-  const removeTab = async (id: string) => {
+  const removeConnectionTab = async (id: string) => {
     setConnectionStore(
       "tabs",
       connectionStore.tabs.filter((t) => t.id !== id)
@@ -188,6 +188,43 @@ export const ConnectionTabsService = () => {
     return contentStore.tabs[contentStore.idx];
   };
 
+  const addContentTab = () => {
+    setContentStore("tabs", [
+      ...contentStore.tabs,
+      newContentTab("Query", ContentComponent.QueryTab),
+    ]);
+    setContentStore("idx", contentStore.tabs.length - 1);
+  };
+
+  const removeActiveConnection = () => {
+    if (connectionStore.tabs.length === 1) return;
+    setConnectionStore(
+      "tabs",
+      connectionStore.tabs.filter((_, i) => i !== connectionStore.idx)
+    );
+  };
+
+  const removeActiveContentTab = () => {
+    if (contentStore.tabs.length === 1) return;
+    setContentStore(
+      "tabs",
+      contentStore.tabs.filter((_, i) => i !== contentStore.idx)
+    );
+    setContentStore("idx", contentStore.tabs.length - 1);
+  };
+
+  const setActiveConnection = (i: number) => {
+    if (i <= connectionStore.tabs.length) {
+      setConnectionStore("idx", i);
+    }
+  };
+
+  const setActiveContentTab = (i: number) => {
+    if (i <= contentStore.tabs.length) {
+      setContentStore("idx", i - 1);
+    }
+  };
+
   const setActiveContentTableStructureTabData = (
     data: TableStructureContentTabData
   ) => {
@@ -248,8 +285,8 @@ export const ConnectionTabsService = () => {
     setConnectionStore,
     contentStore,
     setContentStore,
-    addTab,
-    removeTab,
+    addConnectionTab,
+    removeConnectionTab,
     clearStore,
     getActiveConnection,
     getActiveContentTab,
@@ -258,5 +295,10 @@ export const ConnectionTabsService = () => {
     resetActiveContentQueryTabMessage,
     updateStore,
     setActiveContentTableStructureTabData,
+    setActiveContentTab,
+    setActiveConnection,
+    removeActiveContentTab,
+    removeActiveConnection,
+    addContentTab,
   };
 };