starred/yaak
1
0
Fork 0
mirror of https://github.com/mountain-loop/yaak.git synced 2026-01-11 20:00:29 +01:00
Code Issues 8 Packages Projects Releases 10 Wiki Activity

Better creation from folder menu

Browse Source
This commit is contained in:
Gregory Schier
2024-02-26 07:09:59 -08:00
parent 629e92a98e
commit 5a3596478a
3 changed files with 66 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
src-web/components/CreateDropdown.tsx
View File

@@ -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>
);

19
src-web/components/Sidebar.tsx
View File

@@ -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<HTMLLIElement>,
) {
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<boolean>(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: <Icon icon="plus" />,
onSelect: () => createRequest.mutate({ folderId: itemId }),
},
{
key: 'createFolder',
label: 'New Folder',
leftSlot: <Icon icon="plus" />,
onSelect: () => createFolder.mutate({ folderId: itemId, sortPriority: -1 }),
},
...createDropdownItems,
]
: [
...((itemModel === 'http_request'

59
src-web/hooks/useCreateDropdownItems.tsx Normal file
View File

@@ -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<DropdownItem[]>(
() => [
{
key: 'create-http-request',
label: 'HTTP Request',
leftSlot: hideIcons ? undefined : <Icon icon="plus" />,
onSelect: () => createHttpRequest.mutate({ folderId }),
},
{
key: 'create-graphql-request',
label: 'GraphQL Query',
leftSlot: hideIcons ? undefined : <Icon icon="plus" />,
onSelect: () =>
createHttpRequest.mutate({ folderId, bodyType: BODY_TYPE_GRAPHQL, method: 'POST' }),
},
{
key: 'create-grpc-request',
label: 'gRPC Call',
leftSlot: hideIcons ? undefined : <Icon icon="plus" />,
onSelect: () => createGrpcRequest.mutate({ folderId }),
},
...((hideFolder
? []
: [
{
type: 'separator',
},
{
key: 'create-folder',
label: 'Folder',
leftSlot: hideIcons ? undefined : <Icon icon="plus" />,
onSelect: () => createFolder.mutate({ folderId }),
},
]) as DropdownItem[]),
],
[createFolder, createGrpcRequest, createHttpRequest, hideFolder],
);
}