diff --git a/src-web/components/GrpcConnectionSetupPane.tsx b/src-web/components/GrpcConnectionSetupPane.tsx index 82eeb19b..9e610b38 100644 --- a/src-web/components/GrpcConnectionSetupPane.tsx +++ b/src-web/components/GrpcConnectionSetupPane.tsx @@ -1,7 +1,8 @@ import useResizeObserver from '@react-hook/resize-observer'; import classNames from 'classnames'; import type { CSSProperties, FormEvent } from 'react'; -import React, { useCallback, useMemo, useRef, useState } from 'react'; +import React, { useCallback, useMemo, useRef } from 'react'; +import { useDebouncedState } from '../hooks/useDebouncedState'; import type { ReflectResponseService } from '../hooks/useGrpc'; import { useGrpcConnections } from '../hooks/useGrpcConnections'; import { useUpdateGrpcRequest } from '../hooks/useUpdateGrpcRequest'; @@ -57,7 +58,7 @@ export function GrpcConnectionSetupPane({ const activeConnection = connections[0] ?? null; const isStreaming = activeConnection?.elapsed === 0; - const [paneSize, setPaneSize] = useState(99999); + const [paneSize, setPaneSize] = useDebouncedState(99999, 100); const urlContainerEl = useRef(null); useResizeObserver(urlContainerEl.current, (entry) => { setPaneSize(entry.contentRect.width); diff --git a/src-web/components/RecentRequestsDropdown.tsx b/src-web/components/RecentRequestsDropdown.tsx index 9d143734..f6e82604 100644 --- a/src-web/components/RecentRequestsDropdown.tsx +++ b/src-web/components/RecentRequestsDropdown.tsx @@ -7,8 +7,8 @@ import { useActiveWorkspaceId } from '../hooks/useActiveWorkspaceId'; import { useAppRoutes } from '../hooks/useAppRoutes'; import { useGrpcRequests } from '../hooks/useGrpcRequests'; import { useHotKey } from '../hooks/useHotKey'; -import { useRecentRequests } from '../hooks/useRecentRequests'; import { useHttpRequests } from '../hooks/useHttpRequests'; +import { useRecentRequests } from '../hooks/useRecentRequests'; import { fallbackRequestName } from '../lib/fallbackRequestName'; import type { ButtonProps } from './core/Button'; import { Button } from './core/Button'; @@ -77,10 +77,11 @@ export function RecentRequestsDropdown({ className }: Pick createHttpRequest.mutate({}), }, - { - key: 'create-grpc-request', - label: 'GRPC Request', - onSelect: () => createGrpcRequest.mutate({}), - }, { key: 'create-graphql-request', - label: 'GraphQL Request', + label: 'GraphQL Query', onSelect: () => createHttpRequest.mutate({ bodyType: BODY_TYPE_GRAPHQL, method: 'POST' }), }, + { + key: 'create-grpc-request', + label: 'GRPC Call', + onSelect: () => createGrpcRequest.mutate({}), + }, { key: 'create-folder', label: 'Folder', diff --git a/src-web/components/UrlBar.tsx b/src-web/components/UrlBar.tsx index 21f842b3..6c351769 100644 --- a/src-web/components/UrlBar.tsx +++ b/src-web/components/UrlBar.tsx @@ -69,7 +69,7 @@ export const UrlBar = memo(function UrlBar({ ) } @@ -80,7 +80,7 @@ export const UrlBar = memo(function UrlBar({ iconSize="md" title="Send Request" type="submit" - className="w-8 mr-0.5 my-0.5" + className="w-8 !h-auto my-0.5 mr-0.5" icon={isLoading ? 'update' : submitIcon} spin={isLoading} hotkeyAction="http_request.send" diff --git a/src-web/components/Workspace.tsx b/src-web/components/Workspace.tsx index 27ef7b60..06787861 100644 --- a/src-web/components/Workspace.tsx +++ b/src-web/components/Workspace.tsx @@ -71,7 +71,7 @@ export default function Workspace() { move: async (e: MouseEvent) => { e.preventDefault(); // Prevent text selection and things const newWidth = startWidth + (e.clientX - mouseStartX); - if (newWidth < 100) { + if (newWidth < 50) { await hide(); resetWidth(); } else { diff --git a/src-web/components/core/SplitLayout.tsx b/src-web/components/core/SplitLayout.tsx index 9a3aab55..eb125910 100644 --- a/src-web/components/core/SplitLayout.tsx +++ b/src-web/components/core/SplitLayout.tsx @@ -5,6 +5,7 @@ import React, { useCallback, useMemo, useRef, useState } from 'react'; import { useLocalStorage } from 'react-use'; import { useActiveRequestId } from '../../hooks/useActiveRequestId'; import { useActiveWorkspaceId } from '../../hooks/useActiveWorkspaceId'; +import { useDebouncedState } from '../../hooks/useDebouncedState'; import { clamp } from '../../lib/clamp'; import { ResizeHandle } from '../ResizeHandle'; import { HotKeyList } from './HotKeyList'; @@ -44,7 +45,7 @@ export function SplitLayout({ minWidthPx = 10, }: Props) { const containerRef = useRef(null); - const [vertical, setVertical] = useState(false); + const [vertical, setVertical] = useDebouncedState(false, 100); const [widthRaw, setWidth] = useLocalStorage(`${name}_width::${useActiveWorkspaceId()}`); const [heightRaw, setHeight] = useLocalStorage( `${name}_height::${useActiveWorkspaceId()}`, diff --git a/src-web/hooks/useDebouncedState.ts b/src-web/hooks/useDebouncedState.ts index cf71a868..7a6b4251 100644 --- a/src-web/hooks/useDebouncedState.ts +++ b/src-web/hooks/useDebouncedState.ts @@ -4,7 +4,7 @@ import { debounce } from '../lib/debounce'; export function useDebouncedState( defaultValue: T, - delay?: number, + delay = 500, ): [T, Dispatch>, Dispatch>] { const [state, setState] = useState(defaultValue); const debouncedSetState = useMemo(() => debounce(setState, delay), [delay]); diff --git a/src-web/hooks/useKeyValue.ts b/src-web/hooks/useKeyValue.ts index bdec4cab..e9025d1b 100644 --- a/src-web/hooks/useKeyValue.ts +++ b/src-web/hooks/useKeyValue.ts @@ -45,11 +45,13 @@ export function useKeyValue({ if (newV === kv) return; return mutate.mutateAsync(newV); }); - } else if (value !== query.data) { + } else { + // TODO: Make this only update if the value is different. I tried this but it seems query.data + // is stale. await mutate.mutateAsync(value); } }, - [defaultValue, key, mutate, namespace, query.data], + [defaultValue, key, mutate, namespace], ); const reset = useCallback(async () => mutate.mutateAsync(defaultValue), [mutate, defaultValue]); diff --git a/src-web/hooks/useRecentRequests.ts b/src-web/hooks/useRecentRequests.ts index 96feea03..640cd3cf 100644 --- a/src-web/hooks/useRecentRequests.ts +++ b/src-web/hooks/useRecentRequests.ts @@ -1,14 +1,13 @@ import { useEffect, useMemo } from 'react'; -import { createGlobalState, useEffectOnce } from 'react-use'; +import { createGlobalState } from 'react-use'; import { getKeyValue, NAMESPACE_GLOBAL } from '../lib/keyValueStore'; import { useActiveRequestId } from './useActiveRequestId'; import { useActiveWorkspaceId } from './useActiveWorkspaceId'; import { useGrpcRequests } from './useGrpcRequests'; -import { useHttpRequest } from './useHttpRequest'; import { useHttpRequests } from './useHttpRequests'; import { useKeyValue } from './useKeyValue'; -const useHistoryState = createGlobalState([]); +const useHistoryState = createGlobalState(null); const kvKey = (workspaceId: string) => 'recent_requests::' + workspaceId; const namespace = NAMESPACE_GLOBAL; @@ -29,29 +28,33 @@ export function useRecentRequests() { }); // Load local storage state on initial render - useEffectOnce(() => { + useEffect(() => { if (kv.value) { + console.log('SET HISTORY', kv.value); setHistory(kv.value); } - }); + }, [kv.isLoading]); // Update local storage state when history changes useEffect(() => { + if (history == null) return; + console.log('SET KV', history); kv.set(history); // eslint-disable-next-line react-hooks/exhaustive-deps }, [history]); // Set history when active request changes useEffect(() => { - setHistory((currentHistory: string[]) => { - if (activeRequestId === null) return currentHistory; + setHistory((currentHistory) => { + console.log('ACTIVE REQUEST CHANGED', kv.isLoading, activeRequestId, currentHistory); + if (activeRequestId === null || currentHistory == null) return currentHistory; const withoutCurrentRequest = currentHistory.filter((id) => id !== activeRequestId); return [activeRequestId, ...withoutCurrentRequest]; }); - }, [activeRequestId, setHistory]); + }, [activeRequestId, kv.isLoading, setHistory]); const onlyValidIds = useMemo( - () => history.filter((id) => requests.some((r) => r.id === id)), + () => history?.filter((id) => requests.some((r) => r.id === id)) ?? [], [history, requests], ); diff --git a/src-web/hooks/useSidebarWidth.ts b/src-web/hooks/useSidebarWidth.ts index cedfa829..44b8de93 100644 --- a/src-web/hooks/useSidebarWidth.ts +++ b/src-web/hooks/useSidebarWidth.ts @@ -4,7 +4,7 @@ import { useActiveWorkspaceId } from './useActiveWorkspaceId'; export function useSidebarWidth() { const activeWorkspaceId = useActiveWorkspaceId(); - const [width, setWidth] = useLocalStorage(`sidebar_width::${activeWorkspaceId}`, 220); - const resetWidth = useCallback(() => setWidth(220), [setWidth]); + const [width, setWidth] = useLocalStorage(`sidebar_width::${activeWorkspaceId}`, 250); + const resetWidth = useCallback(() => setWidth(250), [setWidth]); return useMemo(() => ({ width, setWidth, resetWidth }), [width, setWidth, resetWidth]); }