Proto selection UI/models

src-web/hooks/useGrpc.ts

@@ -1,8 +1,9 @@
 import { useMutation, useQuery } from '@tanstack/react-query';
 import { invoke } from '@tauri-apps/api';
 import { emit } from '@tauri-apps/api/event';
-import { useCallback } from 'react';
+import { minPromiseMillis } from '../lib/minPromiseMillis';
 import type { GrpcConnection, GrpcMessage, GrpcRequest } from '../lib/models';
+import { useDebouncedValue } from './useDebouncedValue';
 
 export interface ReflectResponseService {
   name: string;
@@ -50,11 +51,16 @@ export function useGrpc(req: GrpcRequest | null, conn: GrpcConnection | null) {
     mutationFn: async () => await emit(`grpc_client_msg_${conn?.id ?? 'none'}`, 'Commit'),
   });
 
-  const reflect = useQuery<ReflectResponseService[]>({
-    queryKey: ['grpc_reflect', req?.url ?? 'n/a'],
+  const debouncedUrl = useDebouncedValue<string>(req?.url ?? 'n/a', 1000);
+  const reflect = useQuery<ReflectResponseService[] | null>({
+    enabled: req != null && req.protoFiles.length === 0,
+    queryKey: ['grpc_reflect', debouncedUrl],
     queryFn: async () => {
-      await new Promise((resolve) => setTimeout(resolve, 1000));
-      return (await invoke('cmd_grpc_reflect', { requestId })) as ReflectResponseService[];
+      console.log('REFLECTING...');
+      return (await minPromiseMillis(
+        invoke('cmd_grpc_reflect', { requestId }),
+        1000,
+      )) as ReflectResponseService[];
     },
   });
 

src-web/hooks/useGrpcRequest.ts

@@ -0,0 +1,7 @@
+import type { GrpcRequest } from '../lib/models';
+import { useGrpcRequests } from './useGrpcRequests';
+
+export function useGrpcRequest(id: string | null): GrpcRequest | null {
+  const requests = useGrpcRequests();
+  return requests.find((r) => r.id === id) ?? null;
+}

src-web/hooks/useHttpRequest.ts

@@ -1,7 +1,7 @@
 import type { HttpRequest } from '../lib/models';
 import { useHttpRequests } from './useHttpRequests';
 
-export function useRequest(id: string | null): HttpRequest | null {
+export function useHttpRequest(id: string | null): HttpRequest | null {
   const requests = useHttpRequests();
   return requests.find((r) => r.id === id) ?? null;
 }

src-web/hooks/useKeyValue.ts

@@ -28,6 +28,7 @@ export function useKeyValue<T extends Object | null>({
   const query = useQuery<T>({
     queryKey: keyValueQueryKey({ namespace, key }),
     queryFn: async () => getKeyValue({ namespace, key, fallback: defaultValue }),
+    refetchOnWindowFocus: false,
   });
 
   const mutate = useMutation<void, unknown, T>({

src-web/hooks/useUpdateAnyGrpcRequest.ts

@@ -1,6 +1,7 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { invoke } from '@tauri-apps/api';
 import type { GrpcRequest } from '../lib/models';
+import { sleep } from '../lib/sleep';
 import { getGrpcRequest } from '../lib/store';
 import { grpcRequestsQueryKey } from './useGrpcRequests';
 

src-web/hooks/useUpdateGrpcRequest.ts

@@ -3,8 +3,10 @@ import type { GrpcRequest } from '../lib/models';
 import { useUpdateAnyGrpcRequest } from './useUpdateAnyGrpcRequest';
 
 export function useUpdateGrpcRequest(id: string | null) {
-  const updateAnyRequest = useUpdateAnyGrpcRequest();
+  const updateAnyGrpcRequest = useUpdateAnyGrpcRequest();
   return useMutation<void, unknown, Partial<GrpcRequest> | ((r: GrpcRequest) => GrpcRequest)>({
-    mutationFn: async (update) => updateAnyRequest.mutateAsync({ id: id ?? 'n/a', update }),
+    mutationFn: async (update) => {
+      return updateAnyGrpcRequest.mutateAsync({ id: id ?? 'n/a', update });
+    },
   });
 }