Hotkeys and view mode kvs

src-web/hooks/useDeleteResponses.ts

@@ -1,5 +1,6 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { invoke } from '@tauri-apps/api';
+import { responsesQueryKey } from './useResponses';
 
 export function useDeleteResponses(requestId?: string) {
   const queryClient = useQueryClient();
@@ -10,7 +11,7 @@ export function useDeleteResponses(requestId?: string) {
     },
     onSuccess: () => {
       if (!requestId) return;
-      queryClient.setQueryData(['responses', { requestId: requestId }], []);
+      queryClient.setQueryData(responsesQueryKey(requestId), []);
     },
   });
 }

src-web/hooks/useIsResponseLoading.ts

@@ -0,0 +1,8 @@
+import { useResponses } from './useResponses';
+
+export function useIsResponseLoading(): boolean {
+  const responses = useResponses();
+  const response = responses[responses.length - 1];
+  if (!response) return false;
+  return !(response.body || response.error);
+}

src-web/hooks/useKeyValues.ts

@@ -2,25 +2,46 @@ import { useMutation, useQuery } from '@tanstack/react-query';
 import { invoke } from '@tauri-apps/api';
 import type { KeyValue } from '../lib/models';
 
-export function keyValueQueryKey(namespace: string, key: string) {
-  return ['key_value', { namespace, key }];
+const DEFAULT_NAMESPACE = 'app';
+
+export function keyValueQueryKey({
+  namespace = DEFAULT_NAMESPACE,
+  key,
+}: {
+  namespace: string;
+  key: string | string[];
+}) {
+  return ['key_value', { namespace, key: buildKey(key) }];
 }
 
-export function useKeyValues(namespace: string, key: string) {
+export function useKeyValues({
+  namespace = DEFAULT_NAMESPACE,
+  key,
+  initialValue,
+}: {
+  namespace: string;
+  key: string | string[];
+  initialValue: string;
+}) {
   const query = useQuery<KeyValue | null>({
     initialData: null,
-    queryKey: keyValueQueryKey(namespace, key),
-    queryFn: async () => invoke('get_key_value', { namespace, key }),
+    queryKey: keyValueQueryKey({ namespace, key }),
+    queryFn: async () => invoke('get_key_value', { namespace, key: buildKey(key) }),
   });
 
-  const mutate = useMutation<KeyValue, unknown, KeyValue['value']>({
+  const mutate = useMutation<KeyValue, unknown, string>({
     mutationFn: (value) => {
-      return invoke('set_key_value', { namespace, key, value });
+      return invoke('set_key_value', { namespace, key: buildKey(key), value });
     },
   });
 
   return {
-    value: query.data?.value ?? null,
-    set: (value: KeyValue['value']) => mutate.mutate(value),
+    value: query.data?.value ?? initialValue,
+    set: (value: string) => mutate.mutate(value),
   };
 }
+
+function buildKey(key: string | string[]): string {
+  if (typeof key === 'string') return key;
+  return key.join('::');
+}

src-web/hooks/useResponseViewMode.ts

@@ -0,0 +1,15 @@
+import { useKeyValues } from './useKeyValues';
+
+export function useResponseViewMode(requestId?: string): [string, () => void] {
+  const v = useKeyValues({
+    namespace: 'app',
+    key: ['response_view_mode', requestId ?? 'n/a'],
+    initialValue: 'pretty',
+  });
+
+  const toggle = () => {
+    v.set(v.value === 'pretty' ? 'raw' : 'pretty');
+  };
+
+  return [v.value, toggle];
+}

src-web/hooks/useSendRequest.ts

@@ -14,5 +14,5 @@ export function useSendRequest(request: HttpRequest | null) {
       if (request == null) return;
       await queryClient.invalidateQueries(responsesQueryKey(request.id));
     },
-  });
+  }).mutate;
 }