diff --git a/src-web/components/Sidebar.tsx b/src-web/components/Sidebar.tsx index 26d3d99c..82824374 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, { 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(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); diff --git a/src-web/hooks/useActiveRequest.ts b/src-web/hooks/useActiveRequest.ts index 4512ac98..2887c7e9 100644 --- a/src-web/hooks/useActiveRequest.ts +++ b/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 { useHttpRequests } from './useHttpRequests'; +import { useRequests } from './useRequests'; interface TypeMap { http_request: HttpRequest; @@ -12,16 +11,14 @@ export function useActiveRequest( model?: T | undefined, ): TypeMap[T] | null { const requestId = useActiveRequestId(); - const httpRequests = useHttpRequests(); - const grpcRequests = useGrpcRequests(); + const requests = useRequests(); - if (model === 'http_request') { - return (httpRequests.find((r) => r.id === requestId) ?? null) as TypeMap[T] | null; - } else if (model === 'grpc_request') { - return (grpcRequests.find((r) => r.id === requestId) ?? null) as TypeMap[T] | null; - } else { - return (grpcRequests.find((r) => r.id === requestId) ?? - httpRequests.find((r) => r.id === requestId) ?? - null) as TypeMap[T] | null; + for (const request of requests) { + const modelMatch = model == null ? true : request.model === model; + if (modelMatch && request.id === requestId) { + return request as TypeMap[T]; + } } + + return null; } diff --git a/src-web/hooks/useRecentRequests.ts b/src-web/hooks/useRecentRequests.ts index f78d8608..95c6068e 100644 --- a/src-web/hooks/useRecentRequests.ts +++ b/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 grpcRequests = useGrpcRequests(); - const requests = useMemo(() => [...httpRequests, ...grpcRequests], [httpRequests, grpcRequests]); + const requests = useRequests(); const activeWorkspaceId = useActiveWorkspaceId(); const activeRequestId = useActiveRequestId(); diff --git a/src-web/hooks/useRequests.ts b/src-web/hooks/useRequests.ts new file mode 100644 index 00000000..c37c0836 --- /dev/null +++ b/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]); +}