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

Form urlencoded bodies!

Browse Source
This commit is contained in:
Gregory Schier
2023-11-13 11:28:37 -08:00
parent 4470409a24
commit 9a02b63a6b
5 changed files with 100 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
src-web/components/FormUrlencodedEditor.tsx Normal file
View File

@@ -0,0 +1,37 @@
import { useCallback, useMemo } from 'react';
import type { HttpRequest } from '../lib/models';
import type { PairEditorProps } from './core/PairEditor';
import { PairEditor } from './core/PairEditor';
type Props = {
forceUpdateKey: string;
body: HttpRequest['body'];
onChange: (headers: HttpRequest['body']) => void;
};
export function FormUrlencodedEditor({ body, forceUpdateKey, onChange }: Props) {
const pairs = useMemo(
() =>
(Array.isArray(body.form) ? body.form : []).map((p) => ({
enabled: p.enabled,
name: p.name,
value: p.value,
})),
[body.form],
);
const handleChange = useCallback<PairEditorProps['onChange']>(
(pairs) => onChange({ form: pairs }),
[onChange],
);
return (
<PairEditor
valueAutocompleteVariables
nameAutocompleteVariables
pairs={pairs}
onChange={handleChange}
forceUpdateKey={forceUpdateKey}
/>
);
}

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

@@ -15,6 +15,8 @@ import {
AUTH_TYPE_BASIC,
AUTH_TYPE_BEARER,
AUTH_TYPE_NONE,
BODY_TYPE_FORM_MULTIPART,
BODY_TYPE_FORM_URLENCODED,
BODY_TYPE_GRAPHQL,
BODY_TYPE_JSON,
BODY_TYPE_NONE,
@@ -27,10 +29,11 @@ import { Editor } from './core/Editor';
import type { TabItem } from './core/Tabs/Tabs';
import { TabContent, Tabs } from './core/Tabs/Tabs';
import { EmptyStateText } from './EmptyStateText';
import { FormUrlencodedEditor } from './FormUrlencodedEditor';
import { GraphQLEditor } from './GraphQLEditor';
import { HeadersEditor } from './HeadersEditor';
import { UrlParametersEditor } from './ParameterEditor';
import { UrlBar } from './UrlBar';
import { UrlParametersEditor } from './UrlParameterEditor';
interface Props {
style?: CSSProperties;
@@ -59,10 +62,14 @@ export const RequestPane = memo(function RequestPane({ style, fullHeight, classN
options: {
value: activeRequest.bodyType,
items: [
{ type: 'separator', label: 'Form Data' },
{ label: 'Url Encoded', value: BODY_TYPE_FORM_URLENCODED },
// { label: 'Multi-Part', value: BODY_TYPE_FORM_MULTIPART },
{ type: 'separator', label: 'Text Content' },
{ label: 'JSON', value: BODY_TYPE_JSON },
{ label: 'XML', value: BODY_TYPE_XML },
{ label: 'GraphQL', value: BODY_TYPE_GRAPHQL },
{ type: 'separator' },
{ type: 'separator', label: 'Other' },
{ label: 'No Body', shortLabel: 'Body', value: BODY_TYPE_NONE },
],
onChange: async (bodyType) => {
@@ -71,7 +78,24 @@ export const RequestPane = memo(function RequestPane({ style, fullHeight, classN
patch.headers = activeRequest?.headers.filter(
(h) => h.name.toLowerCase() !== 'content-type',
);
} else if (bodyType == BODY_TYPE_GRAPHQL || bodyType === BODY_TYPE_JSON) {
} else if (
bodyType === BODY_TYPE_FORM_URLENCODED ||
bodyType === BODY_TYPE_FORM_MULTIPART ||
bodyType === BODY_TYPE_JSON ||
bodyType === BODY_TYPE_XML
) {
patch.method = 'POST';
patch.headers = [
...(activeRequest?.headers.filter(
(h) => h.name.toLowerCase() !== 'content-type',
) ?? []),
{
name: 'Content-Type',
value: bodyType,
enabled: true,
},
];
} else if (bodyType == BODY_TYPE_GRAPHQL) {
patch.method = 'POST';
patch.headers = [
...(activeRequest?.headers.filter(
@@ -141,6 +165,10 @@ export const RequestPane = memo(function RequestPane({ style, fullHeight, classN
[activeRequest, updateRequest],
);
const handleBodyChange = useCallback(
(body: HttpRequest['body']) => updateRequest.mutate({ body }),
[updateRequest],
);
const handleBodyTextChange = useCallback(
(text: string) => updateRequest.mutate({ body: { text } }),
[updateRequest],
@@ -223,7 +251,7 @@ export const RequestPane = memo(function RequestPane({ style, fullHeight, classN
placeholder="..."
className="!bg-gray-50"
heightMode={fullHeight ? 'full' : 'auto'}
defaultValue={`${activeRequest?.body?.text}` ?? ''}
defaultValue={`${activeRequest?.body?.text ?? ''}`}
contentType="application/json"
onChange={handleBodyTextChange}
format={(v) => tryFormatJson(v)}
@@ -236,7 +264,7 @@ export const RequestPane = memo(function RequestPane({ style, fullHeight, classN
placeholder="..."
className="!bg-gray-50"
heightMode={fullHeight ? 'full' : 'auto'}
defaultValue={`${activeRequest?.body?.text}` ?? ''}
defaultValue={`${activeRequest?.body?.text ?? ''}`}
contentType="text/xml"
onChange={handleBodyTextChange}
/>
@@ -245,9 +273,15 @@ export const RequestPane = memo(function RequestPane({ style, fullHeight, classN
forceUpdateKey={forceUpdateKey}
baseRequest={activeRequest}
className="!bg-gray-50"
defaultValue={`${activeRequest?.body?.text}` ?? ''}
defaultValue={`${activeRequest?.body?.text ?? ''}`}
onChange={handleBodyTextChange}
/>
) : activeRequest.bodyType === BODY_TYPE_FORM_URLENCODED ? (
<FormUrlencodedEditor
forceUpdateKey={forceUpdateKey}
body={activeRequest.body}
onChange={handleBodyChange}
/>
) : (
<EmptyStateText>No Body</EmptyStateText>
)}

0
src-web/components/ParameterEditor.tsx → src-web/components/UrlParameterEditor.tsx
View File