From 655f5a8eed3ee86286a61bbb8e4f724c7b62121c Mon Sep 17 00:00:00 2001 From: Gregory Schier Date: Mon, 6 Nov 2023 10:53:39 -0800 Subject: [PATCH] Send all in a folder --- src-web/components/Sidebar.tsx | 29 ++++++++++++++++++++++++----- src-web/components/UrlBar.tsx | 4 ++-- src-web/hooks/useSendAnyRequest.ts | 11 +++++++++++ src-web/hooks/useSendRequest.ts | 9 ++++----- 4 files changed, 41 insertions(+), 12 deletions(-) create mode 100644 src-web/hooks/useSendAnyRequest.ts diff --git a/src-web/components/Sidebar.tsx b/src-web/components/Sidebar.tsx index b6b8219a..8654a0fa 100644 --- a/src-web/components/Sidebar.tsx +++ b/src-web/components/Sidebar.tsx @@ -1,6 +1,6 @@ import classNames from 'classnames'; import type { ForwardedRef, ReactNode } from 'react'; -import React, { forwardRef, Fragment, memo, useCallback, useMemo, useRef, useState } from 'react'; +import React, { forwardRef, Fragment, useCallback, useMemo, useRef, useState } from 'react'; import type { XYCoord } from 'react-dnd'; import { useDrag, useDrop } from 'react-dnd'; import { useKey, useKeyPressEvent } from 'react-use'; @@ -17,6 +17,7 @@ import { useKeyValue } from '../hooks/useKeyValue'; import { useLatestResponse } from '../hooks/useLatestResponse'; import { useListenToTauriEvent } from '../hooks/useListenToTauriEvent'; import { useRequests } from '../hooks/useRequests'; +import { useSendAnyRequest } from '../hooks/useSendAnyRequest'; import { useSidebarHidden } from '../hooks/useSidebarHidden'; import { useUpdateAnyFolder } from '../hooks/useUpdateAnyFolder'; import { useUpdateAnyRequest } from '../hooks/useUpdateAnyRequest'; @@ -45,7 +46,7 @@ interface TreeNode { depth: number; } -export const Sidebar = memo(function Sidebar({ className }: Props) { +export function Sidebar({ className }: Props) { const { hidden } = useSidebarHidden(); const createRequest = useCreateRequest(); const sidebarRef = useRef(null); @@ -367,7 +368,7 @@ export const Sidebar = memo(function Sidebar({ className }: Props) { /> ); -}); +} interface SidebarItemsProps { tree: TreeNode; @@ -426,6 +427,7 @@ function SidebarItems({ onDragStart={handleDragStart} useProminentStyles={focused} collapsed={collapsed} + child={child} > {child.item.model === 'folder' && !collapsed[child.item.id] && @@ -467,6 +469,7 @@ type SidebarItemProps = { draggable?: boolean; children?: ReactNode; collapsed: Record; + child: TreeNode; }; const SidebarItem = forwardRef(function SidebarItem( @@ -480,9 +483,11 @@ const SidebarItem = forwardRef(function SidebarItem( selected, onSelect, collapsed, + child, }: SidebarItemProps, ref: ForwardedRef, ) { + const sendAnyRequest = useSendAnyRequest(); const createRequest = useCreateRequest(); const createFolder = useCreateFolder(); const deleteRequest = useDeleteFolder(itemId); @@ -554,6 +559,17 @@ const SidebarItem = forwardRef(function SidebarItem( label: 'New Folder', onSelect: () => createFolder.mutate({ folderId: itemId, sortPriority: -1 }), }, + { + key: 'sendAll', + label: 'Send All', + onSelect: () => { + for (const { item } of child.children) { + if (item.model === 'http_request') { + sendAnyRequest.mutate(item.id); + } + } + }, + }, { type: 'separator' }, { key: 'deleteFolder', @@ -631,6 +647,7 @@ type DraggableSidebarItemProps = SidebarItemProps & { onEnd: (id: string) => void; onDragStart: (id: string) => void; children?: ReactNode; + child?: TreeNode; }; type DragItem = { @@ -638,10 +655,11 @@ type DragItem = { itemName: string; }; -const DraggableSidebarItem = memo(function DraggableSidebarItem({ +function DraggableSidebarItem({ itemName, itemId, itemModel, + child, onMove, onEnd, onDragStart, @@ -688,7 +706,8 @@ const DraggableSidebarItem = memo(function DraggableSidebarItem({ itemName={itemName} itemId={itemId} itemModel={itemModel} + child={child} {...props} /> ); -}); +} diff --git a/src-web/components/UrlBar.tsx b/src-web/components/UrlBar.tsx index 5d443018..8b6e6808 100644 --- a/src-web/components/UrlBar.tsx +++ b/src-web/components/UrlBar.tsx @@ -3,9 +3,9 @@ import type { EditorView } from 'codemirror'; import type { FormEvent } from 'react'; import { memo, useCallback, useRef, useState } from 'react'; import { useIsResponseLoading } from '../hooks/useIsResponseLoading'; +import { useListenToTauriEvent } from '../hooks/useListenToTauriEvent'; import { useRequestUpdateKey } from '../hooks/useRequestUpdateKey'; import { useSendRequest } from '../hooks/useSendRequest'; -import { useListenToTauriEvent } from '../hooks/useListenToTauriEvent'; import { useUpdateRequest } from '../hooks/useUpdateRequest'; import type { HttpRequest } from '../lib/models'; import { IconButton } from './core/IconButton'; @@ -35,7 +35,7 @@ export const UrlBar = memo(function UrlBar({ id: requestId, url, method, classNa const handleSubmit = useCallback( async (e: FormEvent) => { e.preventDefault(); - sendRequest(); + sendRequest.mutate(); }, [sendRequest], ); diff --git a/src-web/hooks/useSendAnyRequest.ts b/src-web/hooks/useSendAnyRequest.ts new file mode 100644 index 00000000..5bf5cf3a --- /dev/null +++ b/src-web/hooks/useSendAnyRequest.ts @@ -0,0 +1,11 @@ +import { useMutation } from '@tanstack/react-query'; +import { invoke } from '@tauri-apps/api'; +import type { HttpResponse } from '../lib/models'; +import { useActiveEnvironmentId } from './useActiveEnvironmentId'; + +export function useSendAnyRequest() { + const environmentId = useActiveEnvironmentId(); + return useMutation({ + mutationFn: (id) => invoke('send_request', { requestId: id, environmentId }), + }); +} diff --git a/src-web/hooks/useSendRequest.ts b/src-web/hooks/useSendRequest.ts index 4d640434..1ce64ac3 100644 --- a/src-web/hooks/useSendRequest.ts +++ b/src-web/hooks/useSendRequest.ts @@ -1,11 +1,10 @@ import { useMutation } from '@tanstack/react-query'; -import { invoke } from '@tauri-apps/api'; import type { HttpResponse } from '../lib/models'; -import { useActiveEnvironmentId } from './useActiveEnvironmentId'; +import { useSendAnyRequest } from './useSendAnyRequest'; export function useSendRequest(id: string | null) { - const environmentId = useActiveEnvironmentId(); + const sendAnyRequest = useSendAnyRequest(); return useMutation({ - mutationFn: () => invoke('send_request', { requestId: id, environmentId }), - }).mutate; + mutationFn: () => sendAnyRequest.mutateAsync(id), + }); }