Async connection management

src-web/components/GrpcConnectionLayout.tsx

@@ -9,7 +9,6 @@ import { useGrpc } from '../hooks/useGrpc';
 import { useGrpcConnections } from '../hooks/useGrpcConnections';
 import { useGrpcMessages } from '../hooks/useGrpcMessages';
 import { useUpdateGrpcRequest } from '../hooks/useUpdateGrpcRequest';
-import { count, pluralize } from '../lib/pluralize';
 import { Banner } from './core/Banner';
 import { Button } from './core/Button';
 import { HotKeyList } from './core/HotKeyList';
@@ -33,10 +32,10 @@ export function GrpcConnectionLayout({ style }: Props) {
   const updateRequest = useUpdateGrpcRequest(activeRequest?.id ?? null);
   const alert = useAlert();
   const [activeMessageId, setActiveMessageId] = useState<string | null>(null);
-  const grpc = useGrpc(activeRequest?.url ?? null, activeRequest?.id ?? null);
   const connections = useGrpcConnections(activeRequest?.id ?? null);
   const activeConnection = connections[0] ?? null;
   const messages = useGrpcMessages(activeConnection?.id ?? null);
+  const grpc = useGrpc(activeRequest, activeConnection);
 
   const activeMethod = useMemo(() => {
     if (grpc.services == null || activeRequest == null) return null;
@@ -59,13 +58,13 @@ export function GrpcConnectionLayout({ style }: Props) {
         });
       }
       if (activeMethod.clientStreaming && activeMethod.serverStreaming) {
-        await grpc.streaming.mutateAsync(activeRequest.id);
+        await grpc.streaming.mutateAsync();
       } else if (!activeMethod.clientStreaming && activeMethod.serverStreaming) {
-        await grpc.serverStreaming.mutateAsync(activeRequest.id);
+        await grpc.serverStreaming.mutateAsync();
       } else if (activeMethod.clientStreaming && !activeMethod.serverStreaming) {
-        await grpc.clientStreaming.mutateAsync(activeRequest.id);
+        await grpc.clientStreaming.mutateAsync();
       } else {
-        const msg = await grpc.unary.mutateAsync(activeRequest.id);
+        const msg = await grpc.unary.mutateAsync();
         setActiveMessageId(msg.id);
       }
     },
@@ -291,7 +290,7 @@ export function GrpcConnectionLayout({ style }: Props) {
                   <div className="w-full grid grid-rows-[auto_minmax(0,1fr)] items-center">
                     <HStack className="pl-3 mb-1 font-mono" alignItems="center">
                       <HStack alignItems="center" space={2}>
-                        {count('message', messages.filter((m) => !m.isInfo).length)}
+                        <span>{messages.filter((m) => !m.isInfo).length} messages</span>
                         {grpc.isStreaming && (
                           <Icon icon="refresh" size="sm" spin className="text-gray-600" />
                         )}

src-web/components/RecentConnectionsDropdown.tsx

@@ -1,3 +1,4 @@
+import { formatDistanceToNow } from 'date-fns';
 import { useDeleteGrpcConnection } from '../hooks/useDeleteGrpcConnection';
 import { useDeleteGrpcConnections } from '../hooks/useDeleteGrpcConnections';
 import type { GrpcConnection } from '../lib/models';
@@ -42,6 +43,7 @@ export const RecentConnectionsDropdown = function ResponsePane({
           key: c.id,
           label: (
             <HStack space={2} alignItems="center">
+              {formatDistanceToNow(c.createdAt)} &bull;{' '}
               <span className="font-mono text-xs">{c.elapsed}ms</span>
             </HStack>
           ),

src-web/components/Sidebar.tsx

@@ -21,6 +21,7 @@ import { useGrpcRequests } from '../hooks/useGrpcRequests';
 import { useHotKey } from '../hooks/useHotKey';
 import { useHttpRequests } from '../hooks/useHttpRequests';
 import { useKeyValue } from '../hooks/useKeyValue';
+import { useLatestGrpcConnection } from '../hooks/useLatestGrpcConnection';
 import { useLatestHttpResponse } from '../hooks/useLatestHttpResponse';
 import { usePrompt } from '../hooks/usePrompt';
 import { useSendManyRequests } from '../hooks/useSendFolder';
@@ -558,7 +559,8 @@ const SidebarItem = forwardRef(function SidebarItem(
   const duplicateGrpcRequest = useDuplicateGrpcRequest({ id: itemId, navigateAfter: true });
   const sendRequest = useSendRequest(itemId);
   const sendManyRequests = useSendManyRequests();
-  const latestResponse = useLatestHttpResponse(itemId);
+  const latestHttpResponse = useLatestHttpResponse(itemId);
+  const latestGrpcConnection = useLatestGrpcConnection(itemId);
   const updateHttpRequest = useUpdateHttpRequest(itemId);
   const updateGrpcRequest = useUpdateGrpcRequest(itemId);
   const updateAnyFolder = useUpdateAnyFolder();
@@ -751,15 +753,19 @@ const SidebarItem = forwardRef(function SidebarItem(
           ) : (
             <span className="truncate">{itemName || itemFallbackName}</span>
           )}
-          {latestResponse && (
+          {latestGrpcConnection ? (
             <div className="ml-auto">
-              {isResponseLoading(latestResponse) ? (
+              {latestGrpcConnection.elapsed === 0 && <Icon spin size="sm" icon="update" />}
+            </div>
+          ) : latestHttpResponse ? (
+            <div className="ml-auto">
+              {isResponseLoading(latestHttpResponse) ? (
                 <Icon spin size="sm" icon="update" />
               ) : (
-                <StatusTag className="text-2xs dark:opacity-80" response={latestResponse} />
+                <StatusTag className="text-2xs dark:opacity-80" response={latestHttpResponse} />
               )}
             </div>
-          )}
+          ) : null}
         </button>
       </div>
       {children}

src-web/hooks/useGrpc.ts

@@ -1,100 +1,71 @@
 import { useMutation, useQuery } from '@tanstack/react-query';
 import { invoke } from '@tauri-apps/api';
 import { emit } from '@tauri-apps/api/event';
-import { useEffect, useState } from 'react';
-import type { GrpcConnection, GrpcMessage } from '../lib/models';
-import { useKeyValue } from './useKeyValue';
+import type { GrpcConnection, GrpcMessage, GrpcRequest } from '../lib/models';
 
 interface ReflectResponseService {
   name: string;
   methods: { name: string; schema: string; serverStreaming: boolean; clientStreaming: boolean }[];
 }
 
-export function useGrpc(url: string | null, requestId: string | null) {
-  const messages = useKeyValue<GrpcMessage[]>({
-    namespace: 'debug',
-    key: ['grpc_msgs', requestId ?? 'n/a'],
-    defaultValue: [],
-  });
-  const [activeConnectionId, setActiveConnectionId] = useState<string | null>(null);
+export function useGrpc(req: GrpcRequest | null, conn: GrpcConnection | null) {
+  const requestId = req?.id ?? 'n/a';
 
-  useEffect(() => {
-    setActiveConnectionId(null);
-  }, [requestId]);
-
-  const unary = useMutation<GrpcMessage, string, string>({
-    mutationKey: ['grpc_unary', url],
-    mutationFn: async (id) => {
+  const unary = useMutation<GrpcMessage, string>({
+    mutationKey: ['grpc_unary', conn?.id ?? 'n/a'],
+    mutationFn: async () => {
       const message = (await invoke('cmd_grpc_call_unary', {
-        requestId: id,
+        requestId,
       })) as GrpcMessage;
-      await messages.set([message]);
       return message;
     },
   });
 
-  const clientStreaming = useMutation<void, string, string>({
-    mutationKey: ['grpc_client_streaming', url],
-    mutationFn: async (requestId) => {
-      if (url === null) throw new Error('No URL provided');
-      await messages.set([]);
-      const c = (await invoke('cmd_grpc_client_streaming', { requestId })) as GrpcConnection;
-      setActiveConnectionId(c.id);
+  const clientStreaming = useMutation<void, string>({
+    mutationKey: ['grpc_client_streaming', conn?.id ?? 'n/a'],
+    mutationFn: async () => {
+      await invoke('cmd_grpc_client_streaming', { requestId });
     },
   });
 
-  const serverStreaming = useMutation<void, string, string>({
-    mutationKey: ['grpc_server_streaming', url],
-    mutationFn: async (requestId) => {
-      if (url === null) throw new Error('No URL provided');
-      await messages.set([]);
-      const c = (await invoke('cmd_grpc_server_streaming', { requestId })) as GrpcConnection;
-      setActiveConnectionId(c.id);
+  const serverStreaming = useMutation<void, string>({
+    mutationKey: ['grpc_server_streaming', conn?.id ?? 'n/a'],
+    mutationFn: async () => {
+      await invoke('cmd_grpc_server_streaming', { requestId });
     },
   });
 
-  const streaming = useMutation<void, string, string>({
-    mutationKey: ['grpc_streaming', url],
-    mutationFn: async (requestId) => {
-      if (url === null) throw new Error('No URL provided');
-      await messages.set([]);
-      const id: string = await invoke('cmd_grpc_streaming', {
-        requestId,
-      });
-      setActiveConnectionId(id);
+  const streaming = useMutation<void, string>({
+    mutationKey: ['grpc_streaming', conn?.id ?? 'n/a'],
+    mutationFn: async () => {
+      await invoke('cmd_grpc_streaming', { requestId });
     },
   });
 
   const send = useMutation({
-    mutationKey: ['grpc_send', url],
     mutationFn: async ({ message }: { message: string }) => {
-      if (activeConnectionId == null) throw new Error('No active connection');
-      await messages.set([]);
-      await emit(`grpc_client_msg_${activeConnectionId}`, { Message: message });
+      await emit(`grpc_client_msg_${conn?.id ?? 'none'}`, { Message: message });
     },
   });
 
   const cancel = useMutation({
-    mutationKey: ['grpc_cancel', url],
+    mutationKey: ['grpc_cancel', conn?.id ?? 'n/a'],
     mutationFn: async () => {
-      setActiveConnectionId(null);
-      await emit(`grpc_client_msg_${activeConnectionId}`, 'Cancel');
+      await emit(`grpc_client_msg_${conn?.id ?? 'none'}`, 'Cancel');
     },
   });
 
   const commit = useMutation({
-    mutationKey: ['grpc_commit', url],
+    mutationKey: ['grpc_commit', conn?.id ?? 'n/a'],
     mutationFn: async () => {
-      setActiveConnectionId(null);
-      await emit(`grpc_client_msg_${activeConnectionId}`, 'Commit');
+      await emit(`grpc_client_msg_${conn?.id ?? 'none'}`, 'Commit');
     },
   });
 
   const reflect = useQuery<ReflectResponseService[]>({
-    queryKey: ['grpc_reflect', url ?? ''],
+    queryKey: ['grpc_reflect', conn?.id ?? 'n/a'],
     queryFn: async () => {
-      if (url === null) return [];
-      return (await invoke('cmd_grpc_reflect', { endpoint: url })) as ReflectResponseService[];
+      return (await invoke('cmd_grpc_reflect', { requestId })) as ReflectResponseService[];
     },
   });
 
@@ -106,7 +77,7 @@ export function useGrpc(url: string | null, requestId: string | null) {
     services: reflect.data,
     cancel,
     commit,
-    isStreaming: activeConnectionId !== null,
+    isStreaming: conn?.elapsed === 0,
     send,
   };
 }

src-web/hooks/useLatestGrpcConnection.ts

@@ -0,0 +1,7 @@
+import type { GrpcConnection } from '../lib/models';
+import { useGrpcConnections } from './useGrpcConnections';
+
+export function useLatestGrpcConnection(requestId: string | null): GrpcConnection | null {
+  const connections = useGrpcConnections(requestId);
+  return connections[0] ?? null;
+}