useRequests hook

src-web/components/Sidebar.tsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 import type { ForwardedRef, ReactNode } from 'react';
-import React, { Fragment, forwardRef, 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';
@@ -15,13 +15,12 @@ import { useDeleteRequest } from '../hooks/useDeleteRequest';
 import { useDuplicateGrpcRequest } from '../hooks/useDuplicateGrpcRequest';
 import { useDuplicateHttpRequest } from '../hooks/useDuplicateHttpRequest';
 import { useFolders } from '../hooks/useFolders';
-import { useGrpcRequests } from '../hooks/useGrpcRequests';
 import { useHotKey } from '../hooks/useHotKey';
-import { useHttpRequests } from '../hooks/useHttpRequests';
 import { useKeyValue } from '../hooks/useKeyValue';
 import { useLatestGrpcConnection } from '../hooks/useLatestGrpcConnection';
 import { useLatestHttpResponse } from '../hooks/useLatestHttpResponse';
 import { usePrompt } from '../hooks/usePrompt';
+import { useRequests } from '../hooks/useRequests';
 import { useSendManyRequests } from '../hooks/useSendFolder';
 import { useSendRequest } from '../hooks/useSendRequest';
 import { useSidebarHidden } from '../hooks/useSidebarHidden';
@@ -61,9 +60,8 @@ export function Sidebar({ className }: Props) {
   const sidebarRef = useRef<HTMLLIElement>(null);
   const activeRequest = useActiveRequest();
   const activeEnvironmentId = useActiveEnvironmentId();
-  const httpRequests = useHttpRequests();
-  const grpcRequests = useGrpcRequests();
   const folders = useFolders();
+  const requests = useRequests();
   const activeWorkspace = useActiveWorkspace();
   const duplicateHttpRequest = useDuplicateHttpRequest({
     id: activeRequest?.id ?? null,
@@ -135,7 +133,7 @@ export function Sidebar({ className }: Props) {
         selectedRequest = node.item;
       }
 
-      const childItems = [...httpRequests, ...grpcRequests, ...folders].filter((f) =>
+      const childItems = [...requests, ...folders].filter((f) =>
         node.item.model === 'workspace' ? f.folderId == null : f.folderId === node.item.id,
       );
 
@@ -154,7 +152,7 @@ export function Sidebar({ className }: Props) {
     const tree = next({ item: activeWorkspace, children: [], depth: 0 });
 
     return { tree, treeParentMap, selectableRequests, selectedRequest };
-  }, [activeWorkspace, selectedId, httpRequests, grpcRequests, folders]);
+  }, [activeWorkspace, selectedId, requests, folders]);
 
   const deleteSelectedRequest = useDeleteRequest(selectedRequest);
 

src-web/hooks/useActiveRequest.ts

@@ -1,7 +1,6 @@
 import type { GrpcRequest, HttpRequest } from '../lib/models';
 import { useActiveRequestId } from './useActiveRequestId';
-import { useGrpcRequests } from './useGrpcRequests';
+import { useRequests } from './useRequests';
-import { useHttpRequests } from './useHttpRequests';
 
 interface TypeMap {
   http_request: HttpRequest;
@@ -12,16 +11,14 @@ export function useActiveRequest<T extends keyof TypeMap>(
   model?: T | undefined,
 ): TypeMap[T] | null {
   const requestId = useActiveRequestId();
-  const httpRequests = useHttpRequests();
+  const requests = useRequests();
-  const grpcRequests = useGrpcRequests();
 
-  if (model === 'http_request') {
+  for (const request of requests) {
-    return (httpRequests.find((r) => r.id === requestId) ?? null) as TypeMap[T] | null;
+    const modelMatch = model == null ? true : request.model === model;
-  } else if (model === 'grpc_request') {
+    if (modelMatch && request.id === requestId) {
-    return (grpcRequests.find((r) => r.id === requestId) ?? null) as TypeMap[T] | null;
+      return request as TypeMap[T];
-  } else {
+    }
-    return (grpcRequests.find((r) => r.id === requestId) ??
-      httpRequests.find((r) => r.id === requestId) ??
-      null) as TypeMap[T] | null;
   }
+
+  return null;
 }

src-web/hooks/useRecentRequests.ts

@@ -2,18 +2,15 @@ import { useEffect, useMemo } from 'react';
 import { getKeyValue } from '../lib/keyValueStore';
 import { useActiveRequestId } from './useActiveRequestId';
 import { useActiveWorkspaceId } from './useActiveWorkspaceId';
-import { useGrpcRequests } from './useGrpcRequests';
-import { useHttpRequests } from './useHttpRequests';
 import { useKeyValue } from './useKeyValue';
+import { useRequests } from './useRequests';
 
 const kvKey = (workspaceId: string) => 'recent_requests::' + workspaceId;
 const namespace = 'global';
 const fallback: string[] = [];
 
 export function useRecentRequests() {
-  const httpRequests = useHttpRequests();
+  const requests = useRequests();
-  const grpcRequests = useGrpcRequests();
-  const requests = useMemo(() => [...httpRequests, ...grpcRequests], [httpRequests, grpcRequests]);
   const activeWorkspaceId = useActiveWorkspaceId();
   const activeRequestId = useActiveRequestId();
 

src-web/hooks/useRequests.ts

@@ -0,0 +1,9 @@
+import { useMemo } from 'react';
+import { useGrpcRequests } from './useGrpcRequests';
+import { useHttpRequests } from './useHttpRequests';
+
+export function useRequests() {
+  const httpRequests = useHttpRequests();
+  const grpcRequests = useGrpcRequests();
+  return useMemo(() => [...httpRequests, ...grpcRequests], [httpRequests, grpcRequests]);
+}