fix(#28): add invoke request shortcut in empty response view

getezy · Dec 12, 2022 · 49ac01b · 49ac01b
1 parent 771da38
commit 49ac01b
Show file tree

Hide file tree

Showing 4 changed files with 104 additions and 50 deletions.
diff --git a/src/app/hooks/index.ts b/src/app/hooks/index.ts
@@ -1,2 +1,3 @@
 export * from './collections';
 export * from './protocols';
+export * from './use-shortcuts';
diff --git a/src/app/hooks/use-shortcuts.ts b/src/app/hooks/use-shortcuts.ts
@@ -0,0 +1,71 @@
+import React from 'react';
+
+import { AppContext } from '@context';
+
+export enum ShortcutsGroup {
+  WELCOME = 'welcome',
+  RESPONSE = 'response',
+}
+
+const shortcuts = [
+  {
+    key: {
+      darwin: '⌘+K',
+      other: 'Ctrl+K',
+    },
+    description: 'Open command bar',
+    groups: [ShortcutsGroup.WELCOME],
+  },
+  {
+    key: {
+      darwin: '⌘+Shift+C',
+      other: 'Ctrl+Shift+C',
+    },
+    description: 'Create new collection',
+    groups: [ShortcutsGroup.WELCOME],
+  },
+  {
+    key: {
+      darwin: '⌘+Shift+S',
+      other: 'Ctrl+Shift+S',
+    },
+    description: 'Synchronize collections',
+    groups: [ShortcutsGroup.WELCOME],
+  },
+  {
+    key: {
+      darwin: '⌘+T',
+      other: 'Ctrl+T',
+    },
+    description: 'New gRPC tab',
+    groups: [ShortcutsGroup.WELCOME],
+  },
+  {
+    key: {
+      darwin: '⌘+Enter',
+      other: 'Ctrl+Enter',
+    },
+    description: 'Invoke request',
+    groups: [ShortcutsGroup.RESPONSE],
+  },
+];
+
+export function useShortcuts() {
+  const context = React.useContext(AppContext);
+
+  const shortcutsMemoized = React.useMemo(
+    () =>
+      shortcuts.map((shortcut) => ({
+        key: context?.platform.os === 'darwin' ? shortcut.key.darwin : shortcut.key.other,
+        description: shortcut.description,
+        groups: shortcut.groups,
+      })),
+    [context?.platform.os]
+  );
+
+  function getShortcuts(group: ShortcutsGroup) {
+    return shortcutsMemoized.filter((shortcut) => shortcut.groups.includes(group));
+  }
+
+  return { getShortcuts };
+}
diff --git a/src/app/pages/tabs-container/collection-types/grpc/response/unary-call.response.tsx b/src/app/pages/tabs-container/collection-types/grpc/response/unary-call.response.tsx
@@ -1,8 +1,9 @@
-import { Badge, Container, styled } from '@nextui-org/react';
+import { Badge, Container, styled, Text } from '@nextui-org/react';
 import React from 'react';
 
-import { CodeEditor, Tab, Tabs } from '@components';
+import { CodeEditor, Kbd, Tab, Tabs } from '@components';
 import { GrpcMethodType, GrpcStatus } from '@core/types';
+import { ShortcutsGroup, useShortcuts } from '@hooks';
 import { GrpcTab } from '@storage';
 
 const StyledContainer = styled('div', {
@@ -17,6 +18,10 @@ export interface UnaryCallResponseProps {
 }
 
 export const UnaryCallResponse: React.FC<UnaryCallResponseProps> = ({ tab }) => {
+  const { getShortcuts } = useShortcuts();
+
+  const shortcuts = getShortcuts(ShortcutsGroup.RESPONSE);
+
   const responseStatus = (
     <Badge
       size="md"
@@ -54,13 +59,28 @@ export const UnaryCallResponse: React.FC<UnaryCallResponseProps> = ({ tab }) =>
         rightNode={rightNode}
       >
         <Tab title="Response" id={tab.data.response.id} key={tab.data.response.id}>
-          <CodeEditor
-            height="100%"
-            maxWidth="100%"
-            width="100%"
-            value={tab.data.response.value}
-            readOnly
-          />
+          {tab.data.response.value ? (
+            <CodeEditor
+              height="100%"
+              maxWidth="100%"
+              width="100%"
+              value={tab.data.response.value}
+              readOnly
+            />
+          ) : (
+            <Container display="flex" direction="column" justify="center" alignItems="center">
+              {shortcuts.map((shortcut) => (
+                <>
+                  <Text size="$sm" css={{ color: '$accents8' }}>
+                    {shortcut.description}
+                  </Text>
+                  <Kbd key={shortcut.key} size="sm">
+                    {shortcut.key}
+                  </Kbd>
+                </>
+              ))}
+            </Container>
+          )}
         </Tab>
       </Tabs>
     </StyledContainer>

diff --git a/src/app/pages/tabs-container/welcome/welcome-container.tsx b/src/app/pages/tabs-container/welcome/welcome-container.tsx
@@ -2,50 +2,12 @@ import { Col, Container, Row, Spacer, Text } from '@nextui-org/react';
 import React from 'react';
 
 import { Kbd } from '@components';
-import { AppContext } from '@context';
-
-const getShortcuts = (os: string) => {
-  const shortcuts = [
-    {
-      key: {
-        darwin: '⌘+K',
-        other: 'Ctrl+K',
-      },
-      description: 'Open command bar',
-    },
-    {
-      key: {
-        darwin: '⌘+Shift+C',
-        other: 'Ctrl+Shift+C',
-      },
-      description: 'Create new collection',
-    },
-    {
-      key: {
-        darwin: '⌘+Shift+S',
-        other: 'Ctrl+Shift+S',
-      },
-      description: 'Synchronize collections',
-    },
-    {
-      key: {
-        darwin: '⌘+T',
-        other: 'Ctrl+T',
-      },
-      description: 'New gRPC tab',
-    },
-  ];
-
-  return shortcuts.map((shortcut) => ({
-    key: os === 'darwin' ? shortcut.key.darwin : shortcut.key.other,
-    description: shortcut.description,
-  }));
-};
+import { ShortcutsGroup, useShortcuts } from '@hooks';
 
 export const WelcomeContainer: React.FC = () => {
-  const context = React.useContext(AppContext);
+  const { getShortcuts } = useShortcuts();
 
-  const shortcuts = getShortcuts(context?.platform.os || 'darwin');
+  const shortcuts = getShortcuts(ShortcutsGroup.WELCOME);
 
   return (
     <Container