Better creation from folder menu

src-web/components/CreateDropdown.tsx

@@ -1,8 +1,5 @@
-import { useCreateFolder } from '../hooks/useCreateFolder';
-import { useCreateGrpcRequest } from '../hooks/useCreateGrpcRequest';
-import { useCreateHttpRequest } from '../hooks/useCreateHttpRequest';
-import { BODY_TYPE_GRAPHQL } from '../lib/models';
-import type { DropdownItem, DropdownProps } from './core/Dropdown';
+import { useCreateDropdownItems } from '../hooks/useCreateDropdownItems';
+import type { DropdownProps } from './core/Dropdown';
 import { Dropdown } from './core/Dropdown';
 
 interface Props {
@@ -12,43 +9,9 @@ interface Props {
 }
 
 export function CreateDropdown({ hideFolder, children, openOnHotKeyAction }: Props) {
-  const createHttpRequest = useCreateHttpRequest();
-  const createGrpcRequest = useCreateGrpcRequest();
-  const createFolder = useCreateFolder();
-
+  const items = useCreateDropdownItems({ hideFolder, hideIcons: true });
   return (
-    <Dropdown
-      openOnHotKeyAction={openOnHotKeyAction}
-      items={[
-        {
-          key: 'create-http-request',
-          label: 'HTTP Request',
-          onSelect: () => createHttpRequest.mutate({}),
-        },
-        {
-          key: 'create-graphql-request',
-          label: 'GraphQL Query',
-          onSelect: () => createHttpRequest.mutate({ bodyType: BODY_TYPE_GRAPHQL, method: 'POST' }),
-        },
-        {
-          key: 'create-grpc-request',
-          label: 'gRPC Call',
-          onSelect: () => createGrpcRequest.mutate({}),
-        },
-        ...((hideFolder
-          ? []
-          : [
-              {
-                type: 'separator',
-              },
-              {
-                key: 'create-folder',
-                label: 'Folder',
-                onSelect: () => createFolder.mutate({}),
-              },
-            ]) as DropdownItem[]),
-      ]}
-    >
+    <Dropdown openOnHotKeyAction={openOnHotKeyAction} items={items}>
       {children}
     </Dropdown>
   );