starred/yaak
1
0
Fork 0
mirror of https://github.com/mountain-loop/yaak.git synced 2026-04-25 02:08:28 +02:00
Code Issues 8 Packages Projects Releases 10 Wiki Activity

Fix state bug

Browse Source
This commit is contained in:
Gregory Schier
2025-07-09 12:48:40 -07:00
parent 036e85d006
commit d9f9ea4047
1 changed files with 11 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src-web/components/GraphQLDocsExplorer.tsx
View File

@@ -26,6 +26,7 @@ import { Fragment, memo, useCallback, useMemo, useRef, useState } from 'react';
import { showGraphQLDocExplorerAtom } from '../atoms/graphqlSchemaAtom'; import { showGraphQLDocExplorerAtom } from '../atoms/graphqlSchemaAtom';
import { useDebouncedValue } from '../hooks/useDebouncedValue'; import { useDebouncedValue } from '../hooks/useDebouncedValue';
import { useRandomKey } from '../hooks/useRandomKey'; import { useRandomKey } from '../hooks/useRandomKey';
import { useStateWithDeps } from '../hooks/useStateWithDeps';
import { jotaiStore } from '../lib/jotai'; import { jotaiStore } from '../lib/jotai';
import { CountBadge } from './core/CountBadge'; import { CountBadge } from './core/CountBadge';
import { Icon } from './core/Icon'; import { Icon } from './core/Icon';
@@ -63,10 +64,10 @@ export const GraphQLDocsExplorer = memo(function GraphQLDocsExplorer({
return ( return (
<div className={classNames(className, 'py-3 mx-3')} style={style}> <div className={classNames(className, 'py-3 mx-3')} style={style}>
<div className="h-full border border-dashed border-border rounded-lg"> <div className="grid grid-rows-[auto_minmax(0,1fr)] h-full border border-dashed border-border rounded-lg">
<GraphQLExplorerHeader item={activeItem} setItem={setActiveItem} schema={schema} /> <GraphQLExplorerHeader item={activeItem} setItem={setActiveItem} schema={schema} />
{activeItem == null ? ( {activeItem == null ? (
<div className="flex flex-col gap-3 overflow-y-auto h-full w-full p-3"> <div className="flex flex-col gap-3 overflow-y-auto h-full w-full px-3 pb-6">
<Heading>Root Types</Heading> <Heading>Root Types</Heading>
<GqlTypeRow <GqlTypeRow
name={{ value: 'query', color: 'primary' }} name={{ value: 'query', color: 'primary' }}
@@ -105,7 +106,7 @@ export const GraphQLDocsExplorer = memo(function GraphQLDocsExplorer({
) : ( ) : (
<div <div
key={activeItem.type.toString()} // Reset scroll position to top key={activeItem.type.toString()} // Reset scroll position to top
className="overflow-y-auto h-full w-full px-3 grid grid-cols-[minmax(0,1fr)]" className="overflow-y-auto h-full w-full p-3 grid grid-cols-[minmax(0,1fr)]"
> >
<GqlTypeInfo item={activeItem} setItem={setActiveItem} schema={schema} /> <GqlTypeInfo item={activeItem} setItem={setActiveItem} schema={schema} />
</div> </div>
@@ -597,7 +598,9 @@ function GqlSchemaSearch({
setItem: (t: ExplorerItem) => void; setItem: (t: ExplorerItem) => void;
className?: string; className?: string;
}) { }) {
const [activeResult, setActiveResult] = useState<SearchResult | null>(null); const [activeResult, setActiveResult] = useStateWithDeps<SearchResult | null>(null, [
currentItem,
]);
const [forceRefreshKey, regenerateForceRefreshKey] = useRandomKey(); const [forceRefreshKey, regenerateForceRefreshKey] = useRandomKey();
const [focused, setFocused] = useState<boolean>(false); const [focused, setFocused] = useState<boolean>(false);
const [value, setValue] = useState<string>(''); const [value, setValue] = useState<string>('');
@@ -680,7 +683,7 @@ function GqlSchemaSearch({
} }
} }
}, },
[results, activeIndex, activeResult, setItem, currentItem], [results, activeIndex, setActiveResult, activeResult, setItem, currentItem],
); );
if (!canSearch) return null; if (!canSearch) return null;
@@ -709,16 +712,14 @@ function GqlSchemaSearch({
} }
onChange={setValue} onChange={setValue}
onKeyDownCapture={handleKeyDown} onKeyDownCapture={handleKeyDown}
onFocus={() => setFocused(true)}
onBlur={() => { onBlur={() => {
setValue('');
regenerateForceRefreshKey();
setTimeout(() => { setTimeout(() => {
setFocused(false); setFocused(false);
setValue('');
regenerateForceRefreshKey();
}, 100); }, 100);
}} }}
onFocus={() => {
setFocused(true);
}}
/> />
<div <div
className={classNames( className={classNames(