NodeJS Plugin Runtime (#53)

src-web/components/Sidebar.tsx

@@ -784,7 +784,7 @@ function SidebarItem({
                 key: 'copyCurl',
                 label: 'Copy as Curl',
                 leftSlot: <Icon icon="copy" />,
-                onSelect: copyAsCurl,
+                onSelect: copyAsCurl.mutate,
               },
               { type: 'separator' },
             ]

src-web/components/core/Input.tsx

@@ -40,7 +40,7 @@ export type InputProps = Omit<
     size?: 'xs' | 'sm' | 'md' | 'auto';
     className?: string;
     placeholder: string;
-    validate?: (v: string) => boolean;
+    validate?: boolean | ((v: string) => boolean);
     require?: boolean;
     wrapLines?: boolean;
   };
@@ -94,9 +94,10 @@ export const Input = forwardRef<EditorView | undefined, InputProps>(function Inp
 
   const isValid = useMemo(() => {
     if (require && !validateRequire(currentValue)) return false;
-    if (validate && !validate(currentValue)) return false;
+    if (typeof validate === 'boolean') return validate;
+    if (typeof validate === 'function' && !validate(currentValue)) return false;
     return true;
-  }, [currentValue, validate, require]);
+  }, [require, currentValue, validate]);
 
   const handleChange = useCallback(
     (value: string) => {

src-web/components/responseViewers/TextViewer.tsx

@@ -28,7 +28,7 @@ const useFilterText = createGlobalState<Record<string, string | null>>({});
 export function TextViewer({ response, pretty, className }: Props) {
   const [filterTextMap, setFilterTextMap] = useFilterText();
   const filterText = filterTextMap[response.id] ?? null;
-  const debouncedFilterText = useDebouncedValue(filterText, 300);
+  const debouncedFilterText = useDebouncedValue(filterText, 200);
   const setFilterText = useCallback(
     (v: string | null) => {
       setFilterTextMap((m) => ({ ...m, [response.id]: v }));
@@ -67,6 +67,7 @@ export function TextViewer({ response, pretty, className }: Props) {
         <div key="input" className="w-full !opacity-100">
           <Input
             key={response.id}
+            validate={!filteredResponse.error}
             hideLabel
             autoFocus
             containerClassName="bg-background"
@@ -97,7 +98,16 @@ export function TextViewer({ response, pretty, className }: Props) {
     );
 
     return result;
-  }, [canFilter, filterText, isJson, isSearching, response.id, setFilterText, toggleSearch]);
+  }, [
+    canFilter,
+    filterText,
+    filteredResponse.error,
+    isJson,
+    isSearching,
+    response.id,
+    setFilterText,
+    toggleSearch,
+  ]);
 
   if (rawBody.isLoading) {
     return null;
@@ -118,7 +128,16 @@ export function TextViewer({ response, pretty, className }: Props) {
       ? tryFormatXml(rawBody.data)
       : rawBody.data;
 
-  const body = isSearching && filterText?.length > 0 ? filteredResponse : formattedBody;
+  let body;
+  if (isSearching && filterText?.length > 0) {
+    if (filteredResponse.error) {
+      body = '';
+    } else {
+      body = filteredResponse.data ?? '';
+    }
+  } else {
+    body = formattedBody;
+  }
 
   return (
     <Editor

src-web/hooks/useCopyAsCurl.tsx

@@ -1,3 +1,4 @@
+import { useMutation } from '@tanstack/react-query';
 import { invokeCmd } from '../lib/tauri';
 import { useActiveEnvironmentId } from './useActiveEnvironmentId';
 import { useClipboardText } from './useClipboardText';
@@ -5,9 +6,12 @@ import { useClipboardText } from './useClipboardText';
 export function useCopyAsCurl(requestId: string) {
   const [, copy] = useClipboardText();
   const environmentId = useActiveEnvironmentId();
-  return async () => {
-    const cmd: string = await invokeCmd('cmd_request_to_curl', { requestId, environmentId });
-    copy(cmd);
-    return cmd;
-  };
+  return useMutation({
+    mutationKey: ['copy_as_curl', requestId],
+    mutationFn: async () => {
+      const cmd: string = await invokeCmd('cmd_request_to_curl', { requestId, environmentId });
+      copy(cmd);
+      return cmd;
+    },
+  });
 }

src-web/hooks/useFilterResponse.ts

@@ -8,16 +8,14 @@ export function useFilterResponse({
   responseId: string | null;
   filter: string;
 }) {
-  return (
-    useQuery<string | null>({
-      queryKey: [responseId, filter],
-      queryFn: async () => {
-        if (filter === '') {
-          return null;
-        }
+  return useQuery<string | null, string>({
+    queryKey: ['filter_response', responseId, filter],
+    queryFn: async () => {
+      if (filter === '') {
+        return null;
+      }
 
-        return (await invokeCmd('cmd_filter_response', { responseId, filter })) as string | null;
-      },
-    }).data ?? ''
-  );
+      return (await invokeCmd('cmd_filter_response', { responseId, filter })) as string | null;
+    },
+  });
 }