From 3bbe9d92018b60e964268a93ee1b5f056d430010 Mon Sep 17 00:00:00 2001 From: Gregory Schier Date: Wed, 15 Mar 2023 09:41:38 -0700 Subject: [PATCH] Better request delete and formatting --- src-tauri/src/main.rs | 2 +- src-web/components/RequestPane.tsx | 2 + src-web/components/Sidebar.tsx | 16 +++++- src-web/components/Workspaces.tsx | 4 +- src-web/components/core/Editor/Editor.tsx | 58 +++++++++++++++----- src-web/components/core/Icon.tsx | 6 +- src-web/components/editors/GraphQLEditor.tsx | 29 +++------- 7 files changed, 76 insertions(+), 41 deletions(-) diff --git a/src-tauri/src/main.rs b/src-tauri/src/main.rs index 78ad3349..4ec71c20 100644 --- a/src-tauri/src/main.rs +++ b/src-tauri/src/main.rs @@ -441,5 +441,5 @@ fn main() { fn is_dev() -> bool { let env = option_env!("YAAK_ENV"); - env.unwrap_or("production") == "development" + env.unwrap_or("production") != "production" } diff --git a/src-web/components/RequestPane.tsx b/src-web/components/RequestPane.tsx index 96920039..06c1cc5d 100644 --- a/src-web/components/RequestPane.tsx +++ b/src-web/components/RequestPane.tsx @@ -2,6 +2,7 @@ import classnames from 'classnames'; import { useActiveRequest } from '../hooks/useActiveRequest'; import { useSendRequest } from '../hooks/useSendRequest'; import { useUpdateRequest } from '../hooks/useUpdateRequest'; +import { tryFormatJson } from '../lib/formatters'; import { Editor } from './core/Editor'; import { TabContent, Tabs } from './core/Tabs/Tabs'; import { GraphQLEditor } from './editors/GraphQLEditor'; @@ -71,6 +72,7 @@ export function RequestPane({ fullHeight, className }: Props) { defaultValue={activeRequest.body ?? ''} contentType="application/json" onChange={(body) => updateRequest.mutate({ body })} + format={activeRequest.bodyType === 'json' ? (v) => tryFormatJson(v) : undefined} /> ) : activeRequest.bodyType === 'graphql' ? ( - deleteRequest.mutate()} /> (false); const handleSubmitNameEdit = async (el: HTMLInputElement) => { @@ -76,7 +76,16 @@ function SidebarItem({ request, active }: { request: HttpRequest; active: boolea }; return ( -
  • +
  • + deleteRequest.mutate()} + /> ))} - ); } diff --git a/src-web/components/core/Editor/Editor.tsx b/src-web/components/core/Editor/Editor.tsx index 99c06b70..c71ca2f2 100644 --- a/src-web/components/core/Editor/Editor.tsx +++ b/src-web/components/core/Editor/Editor.tsx @@ -1,11 +1,12 @@ import { defaultKeymap } from '@codemirror/commands'; import { Compartment, EditorState } from '@codemirror/state'; -import { keymap, placeholder as placeholderExt, tooltips } from '@codemirror/view'; +import { keymap, placeholder as placeholderExt, tooltips, ViewPlugin } from '@codemirror/view'; import classnames from 'classnames'; import { EditorView } from 'codemirror'; import type { MutableRefObject } from 'react'; -import { useEffect, useRef } from 'react'; -import { useUnmount } from 'react-use'; +import { useEffect, useMemo, useRef } from 'react'; +import { useMount, useUnmount } from 'react-use'; +import { IconButton } from '../IconButton'; import './Editor.css'; import { baseExtensions, getLanguageExtension, multiLineExtensions } from './extensions'; import { singleLineExt } from './singleLine'; @@ -24,6 +25,7 @@ export interface _EditorProps { onChange?: (value: string) => void; onFocus?: () => void; singleLine?: boolean; + format?: (v: string) => string; } export function _Editor({ @@ -38,6 +40,7 @@ export function _Editor({ onFocus, className, singleLine, + format, }: _EditorProps) { const cm = useRef<{ view: EditorView; languageCompartment: Compartment } | null>(null); const wrapperRef = useRef(null); @@ -109,18 +112,47 @@ export function _Editor({ syncGutterBg({ parent: wrapperRef.current, className }); }, [className]); + const cmContainer = useMemo( + () => ( +
    + ), + [], + ); + + if (singleLine) { + return cmContainer; + } + return ( -
    + {cmContainer} + {format && ( + { + if (cm.current === null) return; + const { doc } = cm.current.view.state; + const insert = format(doc.toString()); + // Update editor and blur because the cursor will reset anyway + cm.current.view.dispatch({ changes: { from: 0, to: doc.length, insert } }); + cm.current.view.contentDOM.blur(); + }} + /> )} - /> +
    ); } diff --git a/src-web/components/core/Icon.tsx b/src-web/components/core/Icon.tsx index 0247c15e..d800d6e8 100644 --- a/src-web/components/core/Icon.tsx +++ b/src-web/components/core/Icon.tsx @@ -22,6 +22,7 @@ import { TriangleRightIcon, UpdateIcon, RowsIcon, + MagicWandIcon, } from '@radix-ui/react-icons'; import classnames from 'classnames'; @@ -48,6 +49,7 @@ const icons = { triangleLeft: TriangleLeftIcon, triangleRight: TriangleRightIcon, update: UpdateIcon, + magicWand: MagicWandIcon, x: Cross2Icon, }; @@ -66,8 +68,8 @@ export function Icon({ icon, spin, size = 'md', className }: IconProps) { className, 'text-inherit', size === 'md' && 'h-4 w-4', - size === 'sm' && 'h-3 w-3', - size === 'xs' && 'h-2 w-2', + size === 'sm' && 'h-3.5 w-3.5', + size === 'xs' && 'h-3 w-3', spin && 'animate-spin', )} /> diff --git a/src-web/components/editors/GraphQLEditor.tsx b/src-web/components/editors/GraphQLEditor.tsx index 15a5533d..2d84dae5 100644 --- a/src-web/components/editors/GraphQLEditor.tsx +++ b/src-web/components/editors/GraphQLEditor.tsx @@ -46,26 +46,15 @@ export function GraphQLEditor({ defaultValue, onChange, ...extraEditorProps }: P return (
    -
    - - { - handleChangeQuery(formatSdl(query)); - setTimeout(queryKey.regenerate, 200); - }} - /> -
    +

    Variables