Parse and import querystring on paste (#89)

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 {