Send all in a folder

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<HTMLLIElement>(null);
@@ -367,7 +368,7 @@ export const Sidebar = memo(function Sidebar({ className }: Props) {
       />
     </aside>
   );
-});
+}
 
 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<string, boolean>;
+  child: TreeNode;
 };
 
 const SidebarItem = forwardRef(function SidebarItem(
@@ -480,9 +483,11 @@ const SidebarItem = forwardRef(function SidebarItem(
     selected,
     onSelect,
     collapsed,
+    child,
   }: SidebarItemProps,
   ref: ForwardedRef<HTMLLIElement>,
 ) {
+  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}
     />
   );
-});
+}

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],
   );

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<HttpResponse, string, string | null>({
+    mutationFn: (id) => invoke('send_request', { requestId: id, environmentId }),
+  });
+}

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<HttpResponse, string>({
-    mutationFn: () => invoke('send_request', { requestId: id, environmentId }),
-  }).mutate;
+    mutationFn: () => sendAnyRequest.mutateAsync(id),
+  });
 }