use event listener on gridlist

Kong · Nov 14, 2023 · 7914555 · 7914555
1 parent c64c9aa
commit 7914555
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 11 deletions.
diff --git a/packages/insomnia/src/ui/components/request-url-bar.tsx b/packages/insomnia/src/ui/components/request-url-bar.tsx
@@ -88,24 +88,24 @@ export const RequestUrlBar = forwardRef<RequestUrlBarHandle, Props>(({
     }
   }, [fetcher.state, setLoading]);
   const { organizationId, projectId, workspaceId, requestId } = useParams() as { organizationId: string; projectId: string; workspaceId: string; requestId: string };
-  const connect = (connectParams: ConnectActionParams) => {
+  const connect = useCallback((connectParams: ConnectActionParams) => {
     fetcher.submit(JSON.stringify(connectParams),
       {
         action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/debug/request/${requestId}/connect`,
         method: 'post',
         encType: 'application/json',
       });
-  };
-  const send = (sendParams: SendActionParams) => {
+  }, [fetcher, organizationId, projectId, requestId, workspaceId]);
+  const send = useCallback((sendParams: SendActionParams) => {
     fetcher.submit(JSON.stringify(sendParams),
       {
         action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/debug/request/${requestId}/send`,
         method: 'post',
         encType: 'application/json',
       });
-  };
+  }, [fetcher, organizationId, projectId, requestId, workspaceId]);
 
-  const sendOrConnect = async (shouldPromptForPathAfterResponse?: boolean) => {
+  const sendOrConnect = useCallback(async (shouldPromptForPathAfterResponse?: boolean) => {
     models.stats.incrementExecutedRequests();
     window.main.trackSegmentEvent({
       event: SegmentEvent.requestExecute,
@@ -170,7 +170,19 @@ export const RequestUrlBar = forwardRef<RequestUrlBarHandle, Props>(({
         ),
       });
     }
-  };
+  }, [activeEnvironment._id, activeRequest, activeWorkspace._id, connect, requestId, send, settings.preferredHttpVersion]);
+
+  useEffect(() => {
+    const sendOnMetaEnter = (event: KeyboardEvent) => {
+      if (event.metaKey && event.key === 'Enter') {
+        sendOrConnect();
+      }
+    };
+    document.getElementById('sidebar-request-gridlist')?.addEventListener('keydown', sendOnMetaEnter, { capture: true });
+    return () => {
+      document.getElementById('sidebar-request-gridlist')?.removeEventListener('keydown', sendOnMetaEnter, { capture: true });
+    };
+  }, [sendOrConnect]);
 
   useInterval(sendOrConnect, currentInterval ? currentInterval : null);
   useTimeoutWhen(sendOrConnect, currentTimeout, !!currentTimeout);

diff --git a/packages/insomnia/src/ui/components/websockets/action-bar.tsx b/packages/insomnia/src/ui/components/websockets/action-bar.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useLayoutEffect, useRef } from 'react';
+import React, { FC, useCallback, useEffect, useLayoutEffect, useRef } from 'react';
 import { useFetcher, useParams } from 'react-router-dom';
 import styled from 'styled-components';
 
@@ -74,16 +74,17 @@ export const WebSocketActionBar: FC<ActionBarProps> = ({ request, environmentId,
 
   const fetcher = useFetcher();
   const { organizationId, projectId, workspaceId, requestId } = useParams() as { organizationId: string; projectId: string; workspaceId: string; requestId: string };
-  const connect = (connectParams: ConnectActionParams) => {
+
+  const connect = useCallback((connectParams: ConnectActionParams) => {
     fetcher.submit(JSON.stringify(connectParams),
       {
         action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/debug/request/${requestId}/connect`,
         method: 'post',
         encType: 'application/json',
       });
-  };
+  }, [fetcher, organizationId, projectId, requestId, workspaceId]);
 
-  const handleSubmit = async () => {
+  const handleSubmit = useCallback(async () => {
     if (isOpen) {
       window.main.webSocket.close({ requestId: request._id });
       return;
@@ -109,7 +110,19 @@ export const WebSocketActionBar: FC<ActionBarProps> = ({ request, environmentId,
       suppressUserAgent: rendered.suppressUserAgent,
     });
 
-  };
+  }, [connect, environmentId, isOpen, request, workspaceId]);
+
+  useEffect(() => {
+    const sendOnMetaEnter = (event: KeyboardEvent) => {
+      if (event.metaKey && event.key === 'Enter') {
+        handleSubmit();
+      }
+    };
+    document.getElementById('sidebar-request-gridlist')?.addEventListener('keydown', sendOnMetaEnter, { capture: true });
+    return () => {
+      document.getElementById('sidebar-request-gridlist')?.removeEventListener('keydown', sendOnMetaEnter, { capture: true });
+    };
+  }, [handleSubmit]);
 
   useDocBodyKeyboardShortcuts({
     request_send: () => handleSubmit(),

diff --git a/packages/insomnia/src/ui/routes/debug.tsx b/packages/insomnia/src/ui/routes/debug.tsx
@@ -978,6 +978,7 @@ export const Debug: FC = () => {
 
             <div className='flex-1 overflow-y-auto' ref={parentRef} >
               <GridList
+                id="sidebar-request-gridlist"
                 style={{ height: virtualizer.getTotalSize() }}
                 items={virtualizer.getVirtualItems()}
                 className="relative"