Use idiomatic react-query for useProposal (#2018)

src/atoms/proposalAtoms.ts

-import { atom } from "jotai";
-import type { ProposalResult } from "@/lib/schemas";
-
-export const proposalResultAtom = atom<ProposalResult | null>(null);

src/components/chat/ChatInput.tsx

@@ -305,7 +305,7 @@ export function ChatInput({ chatId }: { chatId?: number }) {
       )}
       {proposalError && (
         <div className="p-4 text-sm text-red-600">
-          Error loading proposal: {proposalError}
+          Error loading proposal: {proposalError.message}
         </div>
       )}
       <div className="p-4" data-testid="chat-input-container">

src/hooks/useProposal.ts

-import { useState, useEffect, useCallback } from "react";
+import { useQuery } from "@tanstack/react-query";
 import { IpcClient } from "@/ipc/ipc_client";
-import type { ProposalResult } from "@/lib/schemas"; // Import Proposal type
-import { proposalResultAtom } from "@/atoms/proposalAtoms";
-import { useAtom } from "jotai";
+import type { ProposalResult } from "@/lib/schemas";
+
 export function useProposal(chatId?: number | undefined) {
-  const [proposalResult, setProposalResult] = useAtom(proposalResultAtom);
-  const [isLoading, setIsLoading] = useState<boolean>(false);
-  const [error, setError] = useState<string | null>(null);
-  const fetchProposal = useCallback(
-    async (overrideChatId?: number) => {
-      chatId = overrideChatId ?? chatId;
+  const {
+    data: proposalResult,
+    isLoading,
+    error,
+    refetch: refreshProposal,
+  } = useQuery<ProposalResult | null, Error>({
+    queryKey: ["proposal", chatId],
+    queryFn: async (): Promise<ProposalResult | null> => {
       if (chatId === undefined) {
-        setProposalResult(null);
-        setIsLoading(false);
-        setError(null);
-        return;
-      }
-      setIsLoading(true);
-      setError(null);
-      try {
-        // Type assertion might be needed depending on how IpcClient is typed
-        const result = (await IpcClient.getInstance().getProposal(
-          chatId,
-        )) as ProposalResult | null;
-
-        if (result) {
-          setProposalResult(result);
-        } else {
-          setProposalResult(null); // Explicitly set to null if IPC returns null
-        }
-      } catch (err: any) {
-        console.error("Error fetching proposal:", err);
-        setError(err.message || "Failed to fetch proposal");
-        setProposalResult(null); // Clear proposal data on error
-      } finally {
-        setIsLoading(false);
+        return null;
       }
+      return IpcClient.getInstance().getProposal(chatId);
     },
-    [chatId], // Only depend on chatId, setProposalResult is stable
-  ); // Depend on chatId
-
-  useEffect(() => {
-    fetchProposal();
-
-    // Cleanup function if needed (e.g., for aborting requests)
-    // return () => {
-    //   // Abort logic here
-    // };
-  }, [fetchProposal]); // Re-run effect if fetchProposal changes (due to chatId change)
+    enabled: chatId !== undefined,
+    meta: { showErrorToast: true },
+  });
 
   return {
-    proposalResult: proposalResult,
+    proposalResult,
     isLoading,
     error,
-    refreshProposal: fetchProposal, // Expose the refresh function
+    refreshProposal,
   };
 }

src/hooks/useStreamChat.ts

@@ -20,7 +20,6 @@ import { useLoadApp } from "./useLoadApp";
 import { selectedAppIdAtom } from "@/atoms/appAtoms";
 import { useVersions } from "./useVersions";
 import { showExtraFilesToast } from "@/lib/toast";
-import { useProposal } from "./useProposal";
 import { useSearch } from "@tanstack/react-router";
 import { useRunApp } from "./useRunApp";
 import { useCountTokens } from "./useCountTokens";
@@ -28,6 +27,7 @@ import { useUserBudgetInfo } from "./useUserBudgetInfo";
 import { usePostHog } from "posthog-js/react";
 import { useCheckProblems } from "./useCheckProblems";
 import { useSettings } from "./useSettings";
+import { useQueryClient } from "@tanstack/react-query";
 
 export function getRandomNumberId() {
   return Math.floor(Math.random() * 1_000_000_000_000_000);
@@ -54,13 +54,13 @@ export function useStreamChat({
   const { settings } = useSettings();
   const setRecentStreamChatIds = useSetAtom(recentStreamChatIdsAtom);
   const posthog = usePostHog();
+  const queryClient = useQueryClient();
   let chatId: number | undefined;
 
   if (hasChatId) {
     const { id } = useSearch({ from: "/chat" });
     chatId = id;
   }
-  let { refreshProposal } = hasChatId ? useProposal(chatId) : useProposal();
   const { invalidateTokenCount } = useCountTokens(chatId ?? null, "");
 
   const streamMessage = useCallback(
@@ -141,7 +141,8 @@ export function useStreamChat({
                 posthog,
               });
             }
-            refreshProposal(chatId);
+            // Use queryClient directly with the chatId parameter to avoid stale closure issues
+            queryClient.invalidateQueries({ queryKey: ["proposal", chatId] });
 
             refetchUserBudget();
 
@@ -205,6 +206,7 @@ export function useStreamChat({
       selectedAppId,
       refetchUserBudget,
       settings,
+      queryClient,
     ],
   );