Fix vercel deployment fetching (#758)

Author: wwwillchen

src/components/VercelConnector.tsx

@@ -4,6 +4,7 @@ import { Globe } from "lucide-react";
 import { IpcClient } from "@/ipc/ipc_client";
 import { useSettings } from "@/hooks/useSettings";
 import { useLoadApp } from "@/hooks/useLoadApp";
+import { useVercelDeployments } from "@/hooks/useVercelDeployments";
 import {
   Select,
   SelectContent,
@@ -14,7 +15,7 @@ import {
 import {} from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import { App, VercelDeployment } from "@/ipc/ipc_types";
+import { App } from "@/ipc/ipc_types";
 
 interface VercelConnectorProps {
   appId: number | null;
@@ -46,41 +47,19 @@ function ConnectedVercelConnector({
   app,
   refreshApp,
 }: ConnectedVercelConnectorProps) {
-  const [isLoadingDeployments, setIsLoadingDeployments] = useState(false);
-  const [deploymentsError, setDeploymentsError] = useState<string | null>(null);
-  const [deployments, setDeployments] = useState<VercelDeployment[]>([]);
-  const [isDisconnecting, setIsDisconnecting] = useState(false);
-  const [disconnectError, setDisconnectError] = useState<string | null>(null);
+  const {
+    deployments,
+    isLoading: isLoadingDeployments,
+    error: deploymentsError,
+    getDeployments: handleGetDeployments,
+    disconnectProject,
+    isDisconnecting,
+    disconnectError,
+  } = useVercelDeployments(appId);
 
   const handleDisconnectProject = async () => {
-    setIsDisconnecting(true);
-    setDisconnectError(null);
-    try {
-      await IpcClient.getInstance().disconnectVercelProject({ appId });
-      refreshApp();
-    } catch (err: any) {
-      setDisconnectError(err.message || "Failed to disconnect project.");
-    } finally {
-      setIsDisconnecting(false);
-    }
-  };
-
-  const handleGetDeployments = async () => {
-    setIsLoadingDeployments(true);
-    setDeploymentsError(null);
-
-    try {
-      const result = await IpcClient.getInstance().getVercelDeployments({
-        appId,
-      });
-      setDeployments(result);
-    } catch (err: any) {
-      setDeploymentsError(
-        err.message || "Failed to get deployments from Vercel.",
-      );
-    } finally {
-      setIsLoadingDeployments(false);
-    }
+    await disconnectProject();
+    refreshApp();
   };
 
   return (
@@ -154,7 +133,7 @@ function ConnectedVercelConnector({
               Getting Deployments...
             </>
           ) : (
-            "Get Deployments"
+            "Refresh Deployments"
           )}
         </Button>
         <Button
@@ -193,7 +172,7 @@ function ConnectedVercelConnector({
                       {deployment.readyState}
                     </span>
                     <span className="text-sm text-gray-600 dark:text-gray-300">
-                      {new Date(deployment.createdAt * 1000).toLocaleString()}
+                      {new Date(deployment.createdAt).toLocaleString()}
                     </span>
                   </div>
                   <a

src/hooks/useVercelDeployments.ts

@@ -0,0 +1,50 @@
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { IpcClient } from "@/ipc/ipc_client";
+import { VercelDeployment } from "@/ipc/ipc_types";
+
+export function useVercelDeployments(appId: number) {
+  const queryClient = useQueryClient();
+
+  const {
+    data: deployments = [],
+    isLoading,
+    error,
+    refetch,
+  } = useQuery<VercelDeployment[], Error>({
+    queryKey: ["vercel-deployments", appId],
+    queryFn: async () => {
+      const ipcClient = IpcClient.getInstance();
+      return ipcClient.getVercelDeployments({ appId });
+    },
+    // enabled: false, // Don't auto-fetch, only fetch when explicitly requested
+  });
+
+  const disconnectProjectMutation = useMutation<void, Error, void>({
+    mutationFn: async () => {
+      const ipcClient = IpcClient.getInstance();
+      return ipcClient.disconnectVercelProject({ appId });
+    },
+    onSuccess: () => {
+      // Clear deployments cache when project is disconnected
+      queryClient.removeQueries({ queryKey: ["vercel-deployments", appId] });
+    },
+  });
+
+  const getDeployments = async () => {
+    return refetch();
+  };
+
+  const disconnectProject = async () => {
+    return disconnectProjectMutation.mutateAsync();
+  };
+
+  return {
+    deployments,
+    isLoading,
+    error: error?.message || null,
+    getDeployments,
+    disconnectProject,
+    isDisconnecting: disconnectProjectMutation.isPending,
+    disconnectError: disconnectProjectMutation.error?.message || null,
+  };
+}

src/ipc/handlers/vercel_handlers.ts

@@ -15,6 +15,7 @@ import {
   CreateVercelProjectParams,
   IsVercelProjectAvailableParams,
   SaveVercelAccessTokenParams,
+  VercelDeployment,
   VercelProject,
 } from "../ipc_types";
 import { ConnectToExistingVercelProjectParams } from "../ipc_types";
@@ -400,16 +401,7 @@ async function handleConnectToExistingProject(
 async function handleGetVercelDeployments(
   event: IpcMainInvokeEvent,
   { appId }: GetVercelDeploymentsParams,
-): Promise<
-  {
-    uid: string;
-    url: string;
-    state: string;
-    createdAt: number;
-    target: string;
-    readyState: string;
-  }[]
-> {
+): Promise<VercelDeployment[]> {
   try {
     const settings = readSettings();
     const accessToken = settings.vercelAccessToken?.value;

src/ipc/ipc_types.ts

@@ -272,15 +272,6 @@ export interface GetAppEnvVarsParams {
   appId: number;
 }
 
-export interface VercelDeployment {
-  uid: string;
-  url: string;
-  state: string;
-  createdAt: number;
-  target: string;
-  readyState: string;
-}
-
 export interface ConnectToExistingVercelProjectParams {
   projectId: string;
   appId: number;
@@ -300,6 +291,15 @@ export interface GetVercelDeploymentsParams {
   appId: number;
 }
 
+export interface VercelDeployment {
+  uid: string;
+  url: string;
+  state: string;
+  createdAt: number;
+  target: string;
+  readyState: string;
+}
+
 export interface DisconnectVercelProjectParams {
   appId: number;
 }