Plugin runtime v2 (#62)

src-web/components/CookieDialog.tsx

@@ -1,6 +1,6 @@
 import { useCookieJars } from '../hooks/useCookieJars';
 import { useUpdateCookieJar } from '../hooks/useUpdateCookieJar';
-import type { Cookie } from '../lib/gen/Cookie';
+import type { Cookie } from '../lib/models/Cookie';
 import { cookieDomain } from '../lib/models';
 import { Banner } from './core/Banner';
 import { IconButton } from './core/IconButton';

src-web/components/ImportDataDialog.tsx

@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import { useLocalStorage } from 'react-use';
 import { Button } from './core/Button';
 import { VStack } from './core/Stacks';
 import { SelectFile } from './SelectFile';
@@ -9,7 +10,7 @@ interface Props {
 
 export function ImportDataDialog({ importData }: Props) {
   const [isLoading, setIsLoading] = useState<boolean>(false);
-  const [filePath, setFilePath] = useState<string | null>(null);
+  const [filePath, setFilePath] = useLocalStorage<string | null>('importFilePath', null);
   return (
     <VStack space={5} className="pb-4">
       <VStack space={1}>
@@ -24,7 +25,10 @@ export function ImportDataDialog({ importData }: Props) {
         </ul>
       </VStack>
       <VStack space={2}>
-        <SelectFile filePath={filePath} onChange={({ filePath }) => setFilePath(filePath)} />
+        <SelectFile
+          filePath={filePath ?? null}
+          onChange={({ filePath }) => setFilePath(filePath)}
+        />
         {filePath && (
           <Button
             color="primary"

src-web/components/responseViewers/TextViewer.tsx

@@ -167,7 +167,7 @@ export function TextViewer({ response, pretty, className }: Props) {
     if (filteredResponse.error) {
       body = '';
     } else {
-      body = filteredResponse.data ?? '';
+      body = filteredResponse.data != null ? filteredResponse.data : '';
     }
   } else {
     body = formattedBody;

src-web/hooks/useActiveCookieJar.ts

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useEffect, useMemo } from 'react';
 import { useActiveWorkspaceId } from './useActiveWorkspaceId';
 import { useCookieJars } from './useCookieJars';
 import { useKeyValue } from './useKeyValue';
@@ -7,22 +7,30 @@ export function useActiveCookieJar() {
   const workspaceId = useActiveWorkspaceId();
   const cookieJars = useCookieJars();
 
-  const kv = useKeyValue<string | null>({
+  const {
+    set: setActiveCookieJarId,
+    value: activeCookieJarId,
+    isLoading: isLoadingActiveCookieJarId,
+  } = useKeyValue<string | null>({
     namespace: 'global',
     key: ['activeCookieJar', workspaceId ?? 'n/a'],
     fallback: null,
   });
 
-  const activeCookieJar = cookieJars.find((cookieJar) => cookieJar.id === kv.value);
+  const activeCookieJar = useMemo(
+    () => cookieJars.find((cookieJar) => cookieJar.id === activeCookieJarId),
+    [activeCookieJarId, cookieJars],
+  );
 
+  // TODO: Make this not be called so many times (move to GlobalHooks?)
   useEffect(() => {
-    if (!kv.isLoading && activeCookieJar == null && cookieJars.length > 0) {
-      kv.set(cookieJars[0]?.id ?? null);
+    if (!isLoadingActiveCookieJarId && activeCookieJar == null && cookieJars.length > 0) {
+      setActiveCookieJarId(cookieJars[0]?.id ?? null).catch(console.error);
     }
-  }, [activeCookieJar, cookieJars, kv]);
+  }, [activeCookieJar, cookieJars, isLoadingActiveCookieJarId, setActiveCookieJarId]);
 
   return {
     activeCookieJar: activeCookieJar ?? null,
-    setActiveCookieJarId: kv.set,
+    setActiveCookieJarId: setActiveCookieJarId,
   };
 }

src-web/hooks/useFilterResponse.ts

@@ -1,4 +1,5 @@
 import { useQuery } from '@tanstack/react-query';
+import type { JsonValue } from '@yaakapp/api/lib/gen/serde_json/JsonValue';
 import { invokeCmd } from '../lib/tauri';
 
 export function useFilterResponse({
@@ -15,7 +16,8 @@ export function useFilterResponse({
         return null;
       }
 
-      return (await invokeCmd('cmd_filter_response', { responseId, filter })) as string | null;
+      const items = (await invokeCmd('cmd_filter_response', { responseId, filter })) as JsonValue[];
+      return JSON.stringify(items, null, 2);
     },
   });
 }

src-web/hooks/useSettings.ts

@@ -1,5 +1,5 @@
 import { useQuery } from '@tanstack/react-query';
-import type { Settings } from '../lib/gen/Settings';
+import type { Settings } from '../lib/models/Settings';
 import { invokeCmd } from '../lib/tauri';
 
 export function settingsQueryKey() {

src-web/hooks/useWorkspaces.ts

@@ -12,9 +12,7 @@ export function useWorkspaces() {
     useQuery({
       queryKey: workspacesQueryKey(),
       queryFn: async () => {
-        console.log('GETTING WORKSPACES');
         const workspaces = await invokeCmd('cmd_list_workspaces');
-        console.log('GOT WORKSPACES');
         return workspaces as Workspace[];
       },
     }).data ?? []

src-web/lib/models.ts

@@ -10,9 +10,9 @@ import type {
   Workspace,
   HttpResponseHeader,
 } from '@yaakapp/api';
-import type { Cookie } from './gen/Cookie';
-import type { CookieJar } from './gen/CookieJar';
-import type { Settings } from './gen/Settings';
+import type { Cookie } from './models/Cookie';
+import type { CookieJar } from './models/CookieJar';
+import type { Settings } from './models/Settings';
 
 export type { CookieJar, Cookie, Settings };
 

src-web/lib/store.ts

@@ -1,6 +1,6 @@
 import type { Environment, Folder, GrpcRequest, HttpRequest, Workspace } from '@yaakapp/api';
-import type { CookieJar } from './gen/CookieJar';
-import type { Settings } from './gen/Settings';
+import type { CookieJar } from './models/CookieJar';
+import type { Settings } from './models/Settings';
 import { invokeCmd } from './tauri';
 
 export async function getSettings(): Promise<Settings> {