From 06ce7abfb97ce7954d79ac2f8c3929ecd44a2fd6 Mon Sep 17 00:00:00 2001 From: Gregory Schier Date: Wed, 29 Mar 2023 14:00:34 -0700 Subject: [PATCH] Fix bundle parts --- src-web/components/GraphQLEditor.tsx | 13 ++++++---- src-web/components/RequestPane.tsx | 31 ++++++++++++----------- src-web/components/core/Editor/Editor.tsx | 21 +++++++++------ src-web/components/core/Editor/index.tsx | 12 ++++++--- src-web/hooks/useWindowFocus.ts | 20 +++++++++++++++ 5 files changed, 65 insertions(+), 32 deletions(-) create mode 100644 src-web/hooks/useWindowFocus.ts diff --git a/src-web/components/GraphQLEditor.tsx b/src-web/components/GraphQLEditor.tsx index bc37333d..d0f10bb9 100644 --- a/src-web/components/GraphQLEditor.tsx +++ b/src-web/components/GraphQLEditor.tsx @@ -1,13 +1,16 @@ import type { Extension } from '@codemirror/state'; -import { graphql } from 'cm6-graphql'; -import { formatSdl } from 'format-graphql'; -import { buildClientSchema, getIntrospectionQuery } from 'graphql/utilities'; import { useEffect, useMemo, useState } from 'react'; import { useUniqueKey } from '../hooks/useUniqueKey'; import type { HttpRequest } from '../lib/models'; import { sendEphemeralRequest } from '../lib/sendEphemeralRequest'; import type { EditorProps } from './core/Editor'; -import { Editor } from './core/Editor'; +import { + buildClientSchema, + Editor, + formatGraphQL, + getIntrospectionQuery, + graphql, +} from './core/Editor'; import { Separator } from './core/Separator'; type Props = Pick & { @@ -83,7 +86,7 @@ export function GraphQLEditor({ defaultValue, onChange, baseRequest, ...extraEdi onChange={handleChangeQuery} contentType="application/graphql" placeholder="..." - format={formatSdl} + format={formatGraphQL} {...extraEditorProps} /> diff --git a/src-web/components/RequestPane.tsx b/src-web/components/RequestPane.tsx index 07273b9e..fb782c6b 100644 --- a/src-web/components/RequestPane.tsx +++ b/src-web/components/RequestPane.tsx @@ -1,10 +1,10 @@ -import { appWindow } from '@tauri-apps/api/window'; import classnames from 'classnames'; import type { CSSProperties } from 'react'; import { memo, useCallback, useMemo, useState } from 'react'; import { useActiveRequest } from '../hooks/useActiveRequest'; import { useKeyValue } from '../hooks/useKeyValue'; import { useUpdateRequest } from '../hooks/useUpdateRequest'; +import { useWindowFocus } from '../hooks/useWindowFocus'; import { tryFormatJson } from '../lib/formatters'; import type { HttpHeader, HttpRequest } from '../lib/models'; import { @@ -125,12 +125,13 @@ export const RequestPane = memo(function RequestPane({ style, fullHeight, classN [], ); - const forceUpdateKey = useMemo(() => { - if (activeRequest == null) return undefined; - if (activeRequest.updatedBy === appWindow.label) return appWindow.label; - return `${appWindow.label}::${activeRequest?.updatedAt}`; - }, [activeRequest]); - console.log('FORCE UPDATE KEY', forceUpdateKey); + const visible = useWindowFocus(); + const multiWindowKey = useMemo(() => { + // If the window has focus, don't ever force an update + if (visible) return undefined; + // If the window is not focused, force an update if the request has been updated + return activeRequest?.updatedAt; + }, [visible, activeRequest?.updatedAt]); return (
{activeRequest.authenticationType === AUTH_TYPE_BASIC ? ( ) : activeRequest.authenticationType === AUTH_TYPE_BEARER ? ( @@ -173,18 +174,18 @@ export const RequestPane = memo(function RequestPane({ style, fullHeight, classN - null} /> + null} /> {activeRequest.bodyType === BODY_TYPE_JSON ? ( ) : activeRequest.bodyType === BODY_TYPE_XML ? ( ) : activeRequest.bodyType === BODY_TYPE_GRAPHQL ? ( (null); const wrapperRef = useRef(null); // Use ref so we can update the onChange handler without re-initializing the editor - const handleChange = useRef<_EditorProps['onChange']>(onChange); + const handleChange = useRef(onChange); useEffect(() => { handleChange.current = onChange; }, [onChange]); // Use ref so we can update the onChange handler without re-initializing the editor - const handleFocus = useRef<_EditorProps['onFocus']>(onFocus); + const handleFocus = useRef(onFocus); useEffect(() => { handleFocus.current = onFocus; }, [onFocus]); @@ -167,10 +172,10 @@ function getExtensions({ singleLine, onChange, onFocus, -}: Pick<_EditorProps, 'singleLine' | 'readOnly'> & { +}: Pick & { container: HTMLDivElement | null; - onChange: MutableRefObject<_EditorProps['onChange']>; - onFocus: MutableRefObject<_EditorProps['onFocus']>; + onChange: MutableRefObject; + onFocus: MutableRefObject; }) { // TODO: Ensure tooltips render inside the dialog if we are in one. const parent = diff --git a/src-web/components/core/Editor/index.tsx b/src-web/components/core/Editor/index.tsx index bc7b9692..48c6255a 100644 --- a/src-web/components/core/Editor/index.tsx +++ b/src-web/components/core/Editor/index.tsx @@ -1,6 +1,10 @@ import { memo } from 'react'; -import { _Editor } from './Editor'; -import type { _EditorProps } from './Editor'; -export type EditorProps = _EditorProps; -export const Editor = memo(_Editor); +export type { EditorProps } from './Editor'; +const editor = await import('./Editor'); + +export const Editor = memo(editor.Editor); +export const graphql = editor.graphql; +export const getIntrospectionQuery = editor.getIntrospectionQuery; +export const buildClientSchema = editor.buildClientSchema; +export const formatGraphQL = editor.formatSdl; diff --git a/src-web/hooks/useWindowFocus.ts b/src-web/hooks/useWindowFocus.ts new file mode 100644 index 00000000..2376b424 --- /dev/null +++ b/src-web/hooks/useWindowFocus.ts @@ -0,0 +1,20 @@ +import { appWindow } from '@tauri-apps/api/window'; +import { useEffect, useState } from 'react'; + +export function useWindowFocus() { + const [visible, setVisible] = useState(true); + + useEffect(() => { + let unsub: undefined | (() => void) = undefined; + appWindow + .onFocusChanged((e) => { + setVisible(e.payload); + }) + .then((fn) => { + unsub = fn; + }); + return () => unsub?.(); + }, []); + + return visible; +}