diff --git a/src-web/components/RequestPane.tsx b/src-web/components/RequestPane.tsx index 3dfa1ba4..15b12f47 100644 --- a/src-web/components/RequestPane.tsx +++ b/src-web/components/RequestPane.tsx @@ -7,8 +7,9 @@ import { useCancelHttpResponse } from '../hooks/useCancelHttpResponse'; import { useContentTypeFromHeaders } from '../hooks/useContentTypeFromHeaders'; import { useImportCurl } from '../hooks/useImportCurl'; import { useIsResponseLoading } from '../hooks/useIsResponseLoading'; +import { useImportQuerystring } from '../hooks/useImportQuerystring'; import { usePinnedHttpResponse } from '../hooks/usePinnedHttpResponse'; -import { useRequestEditorEvent } from '../hooks/useRequestEditor'; +import { useRequestEditor, useRequestEditorEvent } from '../hooks/useRequestEditor'; import { useRequests } from '../hooks/useRequests'; import { useRequestUpdateKey } from '../hooks/useRequestUpdateKey'; import { useSendAnyHttpRequest } from '../hooks/useSendAnyHttpRequest'; @@ -75,6 +76,7 @@ export const RequestPane = memo(function RequestPane({ const [activeTabs, setActiveTabs] = useActiveTab(); const [forceUpdateHeaderEditorKey, setForceUpdateHeaderEditorKey] = useState(0); const { updateKey: forceUpdateKey } = useRequestUpdateKey(activeRequest.id ?? null); + const [{ urlKey }] = useRequestEditor(); const contentType = useContentTypeFromHeaders(activeRequest.headers); const handleContentTypeChange = useCallback( @@ -292,9 +294,10 @@ export const RequestPane = memo(function RequestPane({ [activeRequestId, updateRequest], ); - const isLoading = useIsResponseLoading(activeRequestId ?? null); - const { updateKey } = useRequestUpdateKey(activeRequestId ?? null); + const isLoading = useIsResponseLoading(activeRequestId); + const { updateKey } = useRequestUpdateKey(activeRequestId); const importCurl = useImportCurl(); + const importQuerystring = useImportQuerystring(activeRequestId); const activeTab = activeTabs[activeRequestId] ?? DEFAULT_TAB; const setActiveTab = useCallback( @@ -316,15 +319,16 @@ export const RequestPane = memo(function RequestPane({ {activeRequest && ( <> { - if (!command.startsWith('curl ')) { - return; + onPaste={(text) => { + if (text.startsWith('curl ')) { + importCurl.mutate({ overwriteRequestId: activeRequestId, command: text }); + } else { + importQuerystring.mutate(text); } - importCurl.mutate({ overwriteRequestId: activeRequestId, command }); }} autocomplete={{ minMatch: 3, @@ -338,7 +342,7 @@ export const RequestPane = memo(function RequestPane({ ({ type: 'constant', label: r.url, - } as GenericCompletionOption), + }) as GenericCompletionOption, ), ] : [ diff --git a/src-web/components/UrlParameterEditor.tsx b/src-web/components/UrlParameterEditor.tsx index 941b145c..fb78635d 100644 --- a/src-web/components/UrlParameterEditor.tsx +++ b/src-web/components/UrlParameterEditor.tsx @@ -1,5 +1,5 @@ import type { HttpRequest } from '@yaakapp/api'; -import { useRequestEditorEvent } from '../hooks/useRequestEditor'; +import { useRequestEditor, useRequestEditorEvent } from '../hooks/useRequestEditor'; import type { PairEditorRef } from './core/PairEditor'; import { PairOrBulkEditor } from './core/PairOrBulkEditor'; import { VStack } from './core/Stacks'; @@ -13,6 +13,7 @@ type Props = { export function UrlParametersEditor({ pairs, forceUpdateKey, onChange }: Props) { const pairEditor = useRef(null); + const [{ urlParametersKey }] = useRequestEditor(); useRequestEditorEvent( 'request_params.focus_value', @@ -38,7 +39,7 @@ export function UrlParametersEditor({ pairs, forceUpdateKey, onChange }: Props) valuePlaceholder="Value" pairs={pairs} onChange={onChange} - forceUpdateKey={forceUpdateKey} + forceUpdateKey={forceUpdateKey + urlParametersKey} /> ); diff --git a/src-web/components/core/Editor/Editor.tsx b/src-web/components/core/Editor/Editor.tsx index b2f36445..732b32f7 100644 --- a/src-web/components/core/Editor/Editor.tsx +++ b/src-web/components/core/Editor/Editor.tsx @@ -228,7 +228,7 @@ export const Editor = forwardRef(function E [dialog], ); - const { focusParamValue } = useRequestEditor(); + const [, { focusParamValue }] = useRequestEditor(); const onClickPathParameter = useCallback( async (name: string) => { focusParamValue(name); diff --git a/src-web/hooks/useImportQuerystring.ts b/src-web/hooks/useImportQuerystring.ts new file mode 100644 index 00000000..86ebd7b6 --- /dev/null +++ b/src-web/hooks/useImportQuerystring.ts @@ -0,0 +1,69 @@ +import { useMutation } from '@tanstack/react-query'; +import type { HttpUrlParameter } from '@yaakapp/api'; +import { useToast } from '../components/ToastContext'; +import { pluralize } from '../lib/pluralize'; +import { getHttpRequest } from '../lib/store'; +import { useRequestEditor } from './useRequestEditor'; +import { useUpdateAnyHttpRequest } from './useUpdateAnyHttpRequest'; + +export function useImportQuerystring(requestId: string) { + const updateRequest = useUpdateAnyHttpRequest(); + const toast = useToast(); + const [, { focusParamsTab, forceParamsRefresh, forceUrlRefresh }] = useRequestEditor(); + + return useMutation({ + mutationKey: ['import_querystring'], + mutationFn: async (url: string) => { + const [baseUrl, ...rest] = url.split('?'); + if (rest.length === 0) return; + + const request = await getHttpRequest(requestId); + if (request == null) return; + + const querystring = rest.join('?'); + const parsedParams = Array.from(new URLSearchParams(querystring).entries()); + const additionalUrlParameters: HttpUrlParameter[] = parsedParams.map( + ([name, value]): HttpUrlParameter => ({ + name, + value, + enabled: true, + }), + ); + + const urlParameters: HttpUrlParameter[] = [...request.urlParameters]; + for (const newParam of additionalUrlParameters) { + const index = urlParameters.findIndex((p) => p.name === newParam.name); + if (index >= 0) { + urlParameters[index]!.value = decodeURIComponent(newParam.value); + } else { + urlParameters.push(newParam); + } + } + + await updateRequest.mutateAsync({ + id: requestId, + update: { + url: baseUrl ?? '', + urlParameters, + }, + }); + + if (additionalUrlParameters.length > 0) { + toast.show({ + id: 'querystring-imported', + variant: 'info', + message: `Imported ${additionalUrlParameters.length} ${pluralize('param', additionalUrlParameters.length)} from URL`, + }); + } + + focusParamsTab(); + + // Wait for request to update, then refresh the UI + // TODO: Somehow make this deterministic + setTimeout(() => { + forceUrlRefresh(); + forceParamsRefresh(); + }, 100); + }, + }); +} diff --git a/src-web/hooks/useRequestEditor.tsx b/src-web/hooks/useRequestEditor.tsx index 7a0ad1c1..718babed 100644 --- a/src-web/hooks/useRequestEditor.tsx +++ b/src-web/hooks/useRequestEditor.tsx @@ -1,4 +1,6 @@ import EventEmitter from 'eventemitter3'; +import { atom } from 'jotai'; +import { useAtom } from 'jotai/index'; import type { DependencyList } from 'react'; import { useCallback, useEffect } from 'react'; @@ -20,7 +22,12 @@ export function useRequestEditorEvent< }, deps); } +export const urlKeyAtom = atom(Math.random().toString()); +export const urlParamsKeyAtom = atom(Math.random().toString()); + export function useRequestEditor() { + const [urlParametersKey, setUrlParametersKey] = useAtom(urlParamsKeyAtom); + const [urlKey, setUrlKey] = useAtom(urlKeyAtom); const focusParamsTab = useCallback(() => { emitter.emit('request_pane.focus_tab', undefined); }, []); @@ -33,10 +40,24 @@ export function useRequestEditor() { [focusParamsTab], ); - return { - focusParamValue, - focusParamsTab, - }; + const forceUrlRefresh = useCallback(() => setUrlKey(Math.random().toString()), [setUrlKey]); + const forceParamsRefresh = useCallback( + () => setUrlParametersKey(Math.random().toString()), + [setUrlParametersKey], + ); + + return [ + { + urlParametersKey, + urlKey, + }, + { + focusParamValue, + focusParamsTab, + forceParamsRefresh, + forceUrlRefresh, + }, + ] as const; } const emitter = new (class RequestEditorEventEmitter {