starred/yaak-mountain-loop
1
0
Fork 0
mirror of https://github.com/mountain-loop/yaak.git synced 2026-03-27 20:01:10 +01:00
Code Issues 8 Packages Projects Releases 10 Wiki Activity

Refactor hooks to be easier to use

Browse Source
This commit is contained in:
Gregory Schier
2023-03-13 23:25:41 -07:00
parent d7ff52038d
commit 02574cf5e0
19 changed files with 314 additions and 258 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src-web/components/RequestPane.tsx
View File

@@ -1,27 +1,31 @@
import classnames from 'classnames';
import { useRequestUpdate, useSendRequest } from '../hooks/useRequest';
import type { HttpRequest } from '../lib/models';
import { useActiveRequest } from '../hooks/useActiveRequest';
import { useSendRequest } from '../hooks/useSendRequest';
import { useUpdateRequest } from '../hooks/useUpdateRequest';
import { Editor } from './Editor';
import { HeaderEditor } from './HeaderEditor';
import { TabContent, Tabs } from './Tabs';
import { UrlBar } from './UrlBar';
interface Props {
request: HttpRequest;
fullHeight: boolean;
className?: string;
}
export function RequestPane({ fullHeight, request, className }: Props) {
const updateRequest = useRequestUpdate(request ?? null);
const sendRequest = useSendRequest(request ?? null);
export function RequestPane({ fullHeight, className }: Props) {
const activeRequest = useActiveRequest();
const updateRequest = useUpdateRequest(activeRequest);
const sendRequest = useSendRequest(activeRequest);
if (activeRequest === null) return null;
return (
<div className={classnames(className, 'py-2 grid grid-rows-[auto_minmax(0,1fr)] grid-cols-1')}>
<div className="pl-2">
<UrlBar
key={request.id}
method={request.method}
url={request.url}
key={activeRequest.id}
method={activeRequest.method}
url={activeRequest.url}
loading={sendRequest.isLoading}
onMethodChange={(method) => updateRequest.mutate({ method })}
onUrlChange={(url) => updateRequest.mutate({ url })}
@@ -41,15 +45,15 @@ export function RequestPane({ fullHeight, request, className }: Props) {
label="Request body"
>
<TabContent value="headers" className="pl-2">
<HeaderEditor key={request.id} request={request} />
<HeaderEditor key={activeRequest.id} request={activeRequest} />
</TabContent>
<TabContent value="body">
<Editor
key={request.id}
key={activeRequest.id}
className="!bg-gray-50"
heightMode={fullHeight ? 'full' : 'auto'}
useTemplating
defaultValue={request.body ?? ''}
defaultValue={activeRequest.body ?? ''}
contentType="application/graphql+json"
onChange={(body) => updateRequest.mutate({ body })}
/>