From d7ff52038d68cc47705000a66919deb0b75b1838 Mon Sep 17 00:00:00 2001 From: Gregory Schier Date: Mon, 13 Mar 2023 19:37:36 -0700 Subject: [PATCH] Fix header editor and scroll in general --- index.html | 3 ++- src-tauri/icons/icon.icns | Bin 616124 -> 616124 bytes src-web/components/Editor/Editor.css | 13 ------------- src-web/components/Editor/Editor.tsx | 5 +++-- src-web/components/HeaderEditor.tsx | 6 ++++-- src-web/components/RequestPane.tsx | 6 +++--- src-web/components/ResponsePane.tsx | 6 +++--- src-web/components/Sidebar.tsx | 4 ++-- src-web/components/Tabs.tsx | 28 ++++++++++++--------------- src-web/hooks/useRequest.ts | 1 + src-web/main.css | 10 ++++++++++ src-web/pages/Workspace.tsx | 9 ++++++--- vite.config.ts | 2 +- 13 files changed, 47 insertions(+), 46 deletions(-) diff --git a/index.html b/index.html index 305f804a..934cca9b 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,8 @@ - Tauri + React + TS + Yaak App + diff --git a/src-tauri/icons/icon.icns b/src-tauri/icons/icon.icns index 9c0c23ecb1a32129cec46f33f3e6e9e49410505d..789aa51803aeabe6510d5d4bdc2e9c07170b65f5 100644 GIT binary patch delta 84 zcmdmUR&~!=RgTQ$ykZ8z-KKitgm^AP|VEh2LO delta 81 zcmV-X0IvVM%_Y3eB?xI_ZgT($X1uqkZ3GDffeM8R0fh ul { - &::-webkit-scrollbar-corner, - &::-webkit-scrollbar { - @apply w-1.5 h-1.5 bg-transparent; - } - - &::-webkit-scrollbar-thumb { - @apply bg-gray-200 hover:bg-gray-300 rounded-full; - } -} - -/* <-- */ - /* NOTE: Extra selector required to override default styles */ .cm-tooltip.cm-tooltip { @apply shadow-lg bg-gray-50 rounded overflow-hidden text-gray-900 border border-gray-200 z-50 pointer-events-auto; diff --git a/src-web/components/Editor/Editor.tsx b/src-web/components/Editor/Editor.tsx index 6fcb7b98..d7d9635a 100644 --- a/src-web/components/Editor/Editor.tsx +++ b/src-web/components/Editor/Editor.tsx @@ -5,7 +5,8 @@ import classnames from 'classnames'; import { EditorView } from 'codemirror'; import { formatSdl } from 'format-graphql'; import { useEffect, useRef } from 'react'; -import { useUnmount } from 'react-use'; +import { useDebounce, useUnmount } from 'react-use'; +import { debounce } from '../../lib/debounce'; import { IconButton } from '../IconButton'; import './Editor.css'; import { baseExtensions, getLanguageExtension, multiLineExtensions } from './extensions'; @@ -96,7 +97,7 @@ export function _Editor({ readOnly && 'cm-readonly', )} > - {contentType?.includes("graphql") && ( + {contentType?.includes('graphql') && ( ; id: string }; -export function HeaderEditor({ request }: Props) { +export function HeaderEditor({ request, className }: Props) { const updateRequest = useRequestUpdate(request); const saveHeaders = (pairs: PairWithId[]) => { const headers = pairs.map((p) => ({ name: '', value: '', ...p.header })); @@ -59,7 +61,7 @@ export function HeaderEditor({ request }: Props) { }; return ( -
+
{pairs.map((p, i) => ( + + + updateRequest.mutate({ body })} /> - - -
); diff --git a/src-web/components/ResponsePane.tsx b/src-web/components/ResponsePane.tsx index f82dcc97..eed51c2e 100644 --- a/src-web/components/ResponsePane.tsx +++ b/src-web/components/ResponsePane.tsx @@ -1,5 +1,5 @@ import classnames from 'classnames'; -import { useEffect, useMemo, useState } from 'react'; +import { memo, useEffect, useMemo, useState } from 'react'; import { useDeleteAllResponses, useDeleteResponse, useResponses } from '../hooks/useResponses'; import { tryFormatJson } from '../lib/formatters'; import { Dropdown } from './Dropdown'; @@ -15,7 +15,7 @@ interface Props { className?: string; } -export function ResponsePane({ requestId, className }: Props) { +export const ResponsePane = memo(function ResponsePane({ requestId, className }: Props) { const [activeResponseId, setActiveResponseId] = useState(null); const [viewMode, setViewMode] = useState<'pretty' | 'raw'>('pretty'); const responses = useResponses(requestId); @@ -129,4 +129,4 @@ export function ResponsePane({ requestId, className }: Props) {
); -} +}); diff --git a/src-web/components/Sidebar.tsx b/src-web/components/Sidebar.tsx index b60b46e9..2c5a5e74 100644 --- a/src-web/components/Sidebar.tsx +++ b/src-web/components/Sidebar.tsx @@ -22,7 +22,7 @@ export function Sidebar({ className, activeRequestId, workspaceId, requests }: P
@@ -34,7 +34,7 @@ export function Sidebar({ className, activeRequestId, workspaceId, requests }: P }} /> - + {requests.map((r) => ( ))} diff --git a/src-web/components/Tabs.tsx b/src-web/components/Tabs.tsx index 959e34c1..bc0c2d90 100644 --- a/src-web/components/Tabs.tsx +++ b/src-web/components/Tabs.tsx @@ -23,25 +23,21 @@ export function Tabs({ defaultValue, label, children, tabs, className, tabListCl - - - {tabs.map((t) => ( - - {t.label} - - ))} - - + {/**/} + + {tabs.map((t) => ( + + {t.label} + + ))} + + {/**/} {children} @@ -81,7 +77,7 @@ export function TabContent({ value, children, className }: TabContentProps) { {children} diff --git a/src-web/hooks/useRequest.ts b/src-web/hooks/useRequest.ts index 819110a3..dc880ec4 100644 --- a/src-web/hooks/useRequest.ts +++ b/src-web/hooks/useRequest.ts @@ -27,6 +27,7 @@ export function useRequestUpdate(request: HttpRequest | null) { } const updatedRequest = { ...request, ...patch }; + console.log('UPDATE REQUEST', updatedRequest.url); await invoke('update_request', { request: { diff --git a/src-web/main.css b/src-web/main.css index bdaa3bc2..665501e2 100644 --- a/src-web/main.css +++ b/src-web/main.css @@ -23,6 +23,16 @@ cursor: default; } + /* Style the scrollbars */ + ::-webkit-scrollbar-corner, + ::-webkit-scrollbar { + @apply w-1.5 h-1.5 bg-gray-300/10; + } + + ::-webkit-scrollbar-thumb { + @apply bg-gray-200 hover:bg-gray-300 rounded-full; + } + :root { color-scheme: light dark; --transition-duration: 100ms ease-in-out; diff --git a/src-web/pages/Workspace.tsx b/src-web/pages/Workspace.tsx index 57e0726e..33c0ff51 100644 --- a/src-web/pages/Workspace.tsx +++ b/src-web/pages/Workspace.tsx @@ -1,6 +1,7 @@ import classnames from 'classnames'; import { useParams } from 'react-router-dom'; import { useWindowSize } from 'react-use'; +import { HeaderEditor } from '../components/HeaderEditor'; import { RequestPane } from '../components/RequestPane'; import { ResponsePane } from '../components/ResponsePane'; import { Sidebar } from '../components/Sidebar'; @@ -22,7 +23,7 @@ export default function Workspace() { const isH = width > 900; return ( -
+