Parse and import querystring on paste (#89)

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<number>(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 && (
         <>
           <UrlBar
-            key={forceUpdateKey}
+            key={forceUpdateKey + urlKey}
             url={activeRequest.url}
             method={activeRequest.method}
             placeholder="https://example.com"
-            onPaste={(command) => {
-              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,
                         ),
                     ]
                   : [

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<PairEditorRef>(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}
       />
     </VStack>
   );

src-web/components/core/Editor/Editor.tsx

@@ -228,7 +228,7 @@ export const Editor = forwardRef<EditorView | undefined, EditorProps>(function E
     [dialog],
   );
 
-  const { focusParamValue } = useRequestEditor();
+  const [, { focusParamValue }] = useRequestEditor();
   const onClickPathParameter = useCallback(
     async (name: string) => {
       focusParamValue(name);

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);
+    },
+  });
+}

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<string>(Math.random().toString());
+export const urlParamsKeyAtom = atom<string>(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 {