Websocket Support (#159)

src-web/hooks/useCreateDropdownItems.tsx

@@ -1,10 +1,12 @@
 import { useMemo } from 'react';
 import { createFolder } from '../commands/commands';
+import { upsertWebsocketRequest } from '../commands/upsertWebsocketRequest';
 import type { DropdownItem } from '../components/core/Dropdown';
 import { Icon } from '../components/core/Icon';
 import { generateId } from '../lib/generateId';
 import { BODY_TYPE_GRAPHQL } from '../lib/model_util';
 import { getActiveRequest } from './useActiveRequest';
+import { getActiveWorkspace } from './useActiveWorkspace';
 import { useCreateGrpcRequest } from './useCreateGrpcRequest';
 import { useCreateHttpRequest } from './useCreateHttpRequest';
 
@@ -19,21 +21,24 @@ export function useCreateDropdownItems({
 } = {}): DropdownItem[] {
   const { mutate: createHttpRequest } = useCreateHttpRequest();
   const { mutate: createGrpcRequest } = useCreateGrpcRequest();
+  const activeWorkspace = getActiveWorkspace();
 
-  return useMemo((): DropdownItem[] => {
+  const items = useMemo((): DropdownItem[] => {
+    const activeRequest = getActiveRequest();
     const folderId =
-      folderIdOption === 'active-folder' ? getActiveRequest()?.folderId : folderIdOption;
+      (folderIdOption === 'active-folder' ? activeRequest?.folderId : folderIdOption) ?? null;
+    if (activeWorkspace == null) return [];
 
     return [
       {
-        label: 'HTTP Request',
+        label: 'HTTP',
         leftSlot: hideIcons ? undefined : <Icon icon="plus" />,
         onSelect: () => {
           createHttpRequest({ folderId });
         },
       },
       {
-        label: 'GraphQL Query',
+        label: 'GraphQL',
         leftSlot: hideIcons ? undefined : <Icon icon="plus" />,
         onSelect: () =>
           createHttpRequest({
@@ -44,10 +49,16 @@ export function useCreateDropdownItems({
           }),
       },
       {
-        label: 'gRPC Call',
+        label: 'gRPC',
         leftSlot: hideIcons ? undefined : <Icon icon="plus" />,
         onSelect: () => createGrpcRequest({ folderId }),
       },
+      {
+        label: 'WebSocket',
+        leftSlot: hideIcons ? undefined : <Icon icon="plus" />,
+        onSelect: () =>
+          upsertWebsocketRequest.mutate({ folderId, workspaceId: activeWorkspace.id }),
+      },
       ...((hideFolder
         ? []
         : [
@@ -59,5 +70,14 @@ export function useCreateDropdownItems({
             },
           ]) as DropdownItem[]),
     ];
-  }, [createGrpcRequest, createHttpRequest, folderIdOption, hideFolder, hideIcons]);
+  }, [
+    activeWorkspace,
+    createGrpcRequest,
+    createHttpRequest,
+    folderIdOption,
+    hideFolder,
+    hideIcons,
+  ]);
+
+  return items;
 }