fix(#28): add empty response view to all response types

getezy · Dec 12, 2022 · 65a84fa · 65a84fa
1 parent 49ac01b
commit 65a84fa
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 40 deletions.
diff --git a/src/app/pages/tabs-container/collection-types/grpc/response/empty-response-view.tsx b/src/app/pages/tabs-container/collection-types/grpc/response/empty-response-view.tsx
@@ -0,0 +1,26 @@
+import { Container, Text } from '@nextui-org/react';
+import React from 'react';
+
+import { Kbd } from '@components';
+import { ShortcutsGroup, useShortcuts } from '@hooks';
+
+export const EmptyResponseView: React.FC = () => {
+  const { getShortcuts } = useShortcuts();
+
+  const shortcuts = getShortcuts(ShortcutsGroup.RESPONSE);
+
+  return (
+    <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>
+  );
+};
diff --git a/...abs-container/collection-types/grpc/response/streams/bidirectional-streaming.response.tsx b/...abs-container/collection-types/grpc/response/streams/bidirectional-streaming.response.tsx
@@ -4,6 +4,7 @@ import { Tab, Tabs, Tree } from '@components';
 import { GrpcMethodType } from '@core/types';
 import { GrpcStreamMessage, GrpcTab } from '@storage';
 
+import { EmptyResponseView } from '../empty-response-view';
 import { ReponseNode } from './response.node';
 import { ListWrapper, StyledContainer } from './response.styled';
 
@@ -17,13 +18,17 @@ export const BidirectionalStreamingResponse: React.FC<BidirectionalStreamingResp
   <StyledContainer>
     <Tabs activeKey={tab.data.response.id} activeBar={{ color: 'secondary', position: 'bottom' }}>
       <Tab title="Response" id={tab.data.response.id} key={tab.data.response.id}>
-        <ListWrapper>
-          <Tree<GrpcStreamMessage> data={tab.data.response.messages} defaultIsOpen={false}>
-            {tab.data.response.messages?.map((message) => (
-              <ReponseNode id={message.id} key={message.id} data={message} />
-            ))}
-          </Tree>
-        </ListWrapper>
+        {tab.data.response.messages ? (
+          <ListWrapper>
+            <Tree<GrpcStreamMessage> data={tab.data.response.messages} defaultIsOpen={false}>
+              {tab.data.response.messages?.map((message) => (
+                <ReponseNode id={message.id} key={message.id} data={message} />
+              ))}
+            </Tree>
+          </ListWrapper>
+        ) : (
+          <EmptyResponseView />
+        )}
       </Tab>
     </Tabs>
   </StyledContainer>

diff --git a/...pages/tabs-container/collection-types/grpc/response/streams/client-streaming.response.tsx b/...pages/tabs-container/collection-types/grpc/response/streams/client-streaming.response.tsx
@@ -4,6 +4,7 @@ import { Tab, Tabs, Tree } from '@components';
 import { GrpcMethodType } from '@core/types';
 import { GrpcStreamMessage, GrpcTab } from '@storage';
 
+import { EmptyResponseView } from '../empty-response-view';
 import { ReponseNode } from './response.node';
 import { ListWrapper, StyledContainer } from './response.styled';
 
@@ -15,13 +16,17 @@ export const ClientStreamingResponse: React.FC<ClientStreamingResponseProps> = (
   <StyledContainer>
     <Tabs activeKey={tab.data.response.id} activeBar={{ color: 'secondary', position: 'bottom' }}>
       <Tab title="Response" id={tab.data.response.id} key={tab.data.response.id}>
-        <ListWrapper>
-          <Tree<GrpcStreamMessage> data={tab.data.response.messages} defaultIsOpen={false}>
-            {tab.data.response.messages?.map((message) => (
-              <ReponseNode id={message.id} key={message.id} data={message} />
-            ))}
-          </Tree>
-        </ListWrapper>
+        {tab.data.response.messages ? (
+          <ListWrapper>
+            <Tree<GrpcStreamMessage> data={tab.data.response.messages} defaultIsOpen={false}>
+              {tab.data.response.messages?.map((message) => (
+                <ReponseNode id={message.id} key={message.id} data={message} />
+              ))}
+            </Tree>
+          </ListWrapper>
+        ) : (
+          <EmptyResponseView />
+        )}
       </Tab>
     </Tabs>
   </StyledContainer>

diff --git a/...pages/tabs-container/collection-types/grpc/response/streams/server-streaming.response.tsx b/...pages/tabs-container/collection-types/grpc/response/streams/server-streaming.response.tsx
@@ -4,6 +4,7 @@ import { Tab, Tabs, Tree } from '@components';
 import { GrpcMethodType } from '@core/types';
 import { GrpcStreamMessage, GrpcTab } from '@storage';
 
+import { EmptyResponseView } from '../empty-response-view';
 import { ReponseNode } from './response.node';
 import { ListWrapper, StyledContainer } from './response.styled';
 
@@ -15,13 +16,17 @@ export const ServerStreamingResponse: React.FC<ServerStreamingResponseProps> = (
   <StyledContainer>
     <Tabs activeKey={tab.data.response.id} activeBar={{ color: 'secondary', position: 'bottom' }}>
       <Tab title="Response" id={tab.data.response.id} key={tab.data.response.id}>
-        <ListWrapper>
-          <Tree<GrpcStreamMessage> data={tab.data.response.messages} defaultIsOpen={false}>
-            {tab.data.response.messages?.map((message) => (
-              <ReponseNode id={message.id} key={message.id} data={message} />
-            ))}
-          </Tree>
-        </ListWrapper>
+        {tab.data.response.messages ? (
+          <ListWrapper>
+            <Tree<GrpcStreamMessage> data={tab.data.response.messages} defaultIsOpen={false}>
+              {tab.data.response.messages?.map((message) => (
+                <ReponseNode id={message.id} key={message.id} data={message} />
+              ))}
+            </Tree>
+          </ListWrapper>
+        ) : (
+          <EmptyResponseView />
+        )}
       </Tab>
     </Tabs>
   </StyledContainer>

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,11 +1,12 @@
-import { Badge, Container, styled, Text } from '@nextui-org/react';
+import { Badge, Container, styled } from '@nextui-org/react';
 import React from 'react';
 
-import { CodeEditor, Kbd, Tab, Tabs } from '@components';
+import { CodeEditor, Tab, Tabs } from '@components';
 import { GrpcMethodType, GrpcStatus } from '@core/types';
-import { ShortcutsGroup, useShortcuts } from '@hooks';
 import { GrpcTab } from '@storage';
 
+import { EmptyResponseView } from './empty-response-view';
+
 const StyledContainer = styled('div', {
   display: 'flex',
   flex: 1,
@@ -18,10 +19,6 @@ export interface UnaryCallResponseProps {
 }
 
 export const UnaryCallResponse: React.FC<UnaryCallResponseProps> = ({ tab }) => {
-  const { getShortcuts } = useShortcuts();
-
-  const shortcuts = getShortcuts(ShortcutsGroup.RESPONSE);
-
   const responseStatus = (
     <Badge
       size="md"
@@ -68,18 +65,7 @@ export const UnaryCallResponse: React.FC<UnaryCallResponseProps> = ({ tab }) =>
               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>
+            <EmptyResponseView />
           )}
         </Tab>
       </Tabs>