diff --git a/src-web/components/CreateDropdown.tsx b/src-web/components/CreateDropdown.tsx index 17dd05f6..4a41931c 100644 --- a/src-web/components/CreateDropdown.tsx +++ b/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 ( - 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[]), - ]} - > + {children} ); diff --git a/src-web/components/Sidebar.tsx b/src-web/components/Sidebar.tsx index b5bb73c1..8521381a 100644 --- a/src-web/components/Sidebar.tsx +++ b/src-web/components/Sidebar.tsx @@ -9,8 +9,7 @@ import { useActiveEnvironmentId } from '../hooks/useActiveEnvironmentId'; import { useActiveRequest } from '../hooks/useActiveRequest'; import { useActiveWorkspace } from '../hooks/useActiveWorkspace'; import { useAppRoutes } from '../hooks/useAppRoutes'; -import { useCreateFolder } from '../hooks/useCreateFolder'; -import { useCreateHttpRequest } from '../hooks/useCreateHttpRequest'; +import { useCreateDropdownItems } from '../hooks/useCreateDropdownItems'; import { useDeleteFolder } from '../hooks/useDeleteFolder'; import { useDeleteRequest } from '../hooks/useDeleteRequest'; import { useDuplicateGrpcRequest } from '../hooks/useDuplicateGrpcRequest'; @@ -581,8 +580,6 @@ const SidebarItem = forwardRef(function SidebarItem( ref: ForwardedRef, ) { const activeRequest = useActiveRequest(); - const createRequest = useCreateHttpRequest(); - const createFolder = useCreateFolder(); const deleteFolder = useDeleteFolder(itemId); const deleteRequest = useDeleteRequest(activeRequest ?? null); const duplicateHttpRequest = useDuplicateHttpRequest({ id: itemId, navigateAfter: true }); @@ -597,6 +594,7 @@ const SidebarItem = forwardRef(function SidebarItem( const prompt = usePrompt(); const [editing, setEditing] = useState(false); const isActive = activeRequest?.id === itemId; + const createDropdownItems = useCreateDropdownItems({ folderId: itemId }); const handleSubmitNameEdit = useCallback( (el: HTMLInputElement) => { @@ -700,18 +698,7 @@ const SidebarItem = forwardRef(function SidebarItem( onSelect: () => deleteFolder.mutate(), }, { type: 'separator' }, - { - key: 'createRequest', - label: 'New Request', - leftSlot: , - onSelect: () => createRequest.mutate({ folderId: itemId }), - }, - { - key: 'createFolder', - label: 'New Folder', - leftSlot: , - onSelect: () => createFolder.mutate({ folderId: itemId, sortPriority: -1 }), - }, + ...createDropdownItems, ] : [ ...((itemModel === 'http_request' diff --git a/src-web/hooks/useCreateDropdownItems.tsx b/src-web/hooks/useCreateDropdownItems.tsx new file mode 100644 index 00000000..150135c0 --- /dev/null +++ b/src-web/hooks/useCreateDropdownItems.tsx @@ -0,0 +1,59 @@ +import { useMemo } from 'react'; +import type { DropdownItem } from '../components/core/Dropdown'; +import { Icon } from '../components/core/Icon'; +import { BODY_TYPE_GRAPHQL } from '../lib/models'; +import { useCreateFolder } from './useCreateFolder'; +import { useCreateGrpcRequest } from './useCreateGrpcRequest'; +import { useCreateHttpRequest } from './useCreateHttpRequest'; + +export function useCreateDropdownItems({ + hideFolder, + hideIcons, + folderId, +}: { + hideFolder?: boolean; + hideIcons?: boolean; + folderId?: string; +} = {}): DropdownItem[] { + const createHttpRequest = useCreateHttpRequest(); + const createGrpcRequest = useCreateGrpcRequest(); + const createFolder = useCreateFolder(); + + return useMemo( + () => [ + { + key: 'create-http-request', + label: 'HTTP Request', + leftSlot: hideIcons ? undefined : , + onSelect: () => createHttpRequest.mutate({ folderId }), + }, + { + key: 'create-graphql-request', + label: 'GraphQL Query', + leftSlot: hideIcons ? undefined : , + onSelect: () => + createHttpRequest.mutate({ folderId, bodyType: BODY_TYPE_GRAPHQL, method: 'POST' }), + }, + { + key: 'create-grpc-request', + label: 'gRPC Call', + leftSlot: hideIcons ? undefined : , + onSelect: () => createGrpcRequest.mutate({ folderId }), + }, + ...((hideFolder + ? [] + : [ + { + type: 'separator', + }, + { + key: 'create-folder', + label: 'Folder', + leftSlot: hideIcons ? undefined : , + onSelect: () => createFolder.mutate({ folderId }), + }, + ]) as DropdownItem[]), + ], + [createFolder, createGrpcRequest, createHttpRequest, hideFolder], + ); +}