From d5ac44c6370d2169713eb20d976ab13ddaa51cd1 Mon Sep 17 00:00:00 2001
From: Daniel Kantor <kd@stacklok.com>
Date: Thu, 16 Jan 2025 13:42:48 +0100
Subject: [PATCH] refactor: use react-query to implement refetch logic

---
 src/App.tsx                        | 7 +------
 src/hooks/__tests__/useSee.test.ts | 5 +++--
 src/hooks/useSse.ts                | 7 +++++--
 3 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index d2b61b9e..25a1467e 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,6 +1,5 @@
 import { Header } from "./components/Header";
 import { PromptList } from "./components/PromptList";
-import { useEffect } from "react";
 import { Dashboard } from "./components/Dashboard";
 import { Routes, Route, Link } from "react-router-dom";
 import { Chat } from "./components/Chat";
@@ -20,14 +19,10 @@ import {
 import { useBreadcrumb } from "./hooks/useBreadcrumb";
 
 function App() {
-  const { data: prompts, isLoading, refetch } = usePromptsData();
+  const { data: prompts, isLoading } = usePromptsData();
   useSse();
   const breadcrumb = useBreadcrumb();
 
-  useEffect(() => {
-    refetch();
-  }, [refetch]);
-
   return (
     <div className="flex w-screen h-screen">
       <Sidebar loading={isLoading}>
diff --git a/src/hooks/__tests__/useSee.test.ts b/src/hooks/__tests__/useSee.test.ts
index 57155060..9c0bdf4c 100644
--- a/src/hooks/__tests__/useSee.test.ts
+++ b/src/hooks/__tests__/useSee.test.ts
@@ -1,6 +1,7 @@
 import { renderHook, act } from "@testing-library/react";
 import { vi } from "vitest";
 import { useSse } from "../useSse";
+import { TestQueryClientProvider } from "@/lib/test-utils";
 
 vi.mock("react-router-dom", () => ({
   useLocation: vi.fn(() => ({ pathname: "/" })),
@@ -63,7 +64,7 @@ describe("useSse", () => {
   });
 
   it("should send notification if new alert is detected", () => {
-    renderHook(() => useSse());
+    renderHook(() => useSse(), { wrapper: TestQueryClientProvider });
 
     expect(MockEventSource.instances.length).toBe(1);
     const instance = MockEventSource.instances[0];
@@ -87,7 +88,7 @@ describe("useSse", () => {
   });
 
   it("should send notification if new alert is detected", () => {
-    renderHook(() => useSse());
+    renderHook(() => useSse(), { wrapper: TestQueryClientProvider });
 
     act(() => {
       MockEventSource.triggerMessage("other message");
diff --git a/src/hooks/useSse.ts b/src/hooks/useSse.ts
index 6de6bd53..9ee84483 100644
--- a/src/hooks/useSse.ts
+++ b/src/hooks/useSse.ts
@@ -1,19 +1,22 @@
 import { useEffect } from "react";
 import { useBrowserNotification } from "./useBrowserNotification";
 import { useLocation } from "react-router-dom";
+import { useQueryClient } from "@tanstack/react-query";
 
 const BASE_URL = import.meta.env.VITE_BASE_API_URL;
 
 export function useSse() {
   const location = useLocation();
   const { sendNotification } = useBrowserNotification();
+  const queryClient = useQueryClient();
 
   useEffect(() => {
     const eventSource = new EventSource(
-      `${BASE_URL}/dashboard/alerts_notification`
+      `${BASE_URL}/dashboard/alerts_notification`,
     );
 
     eventSource.onmessage = function (event) {
+      queryClient.invalidateQueries({ refetchType: "all" });
       if (event.data.toLowerCase().includes("new alert detected")) {
         sendNotification("CodeGate Dashboard", {
           body: "New Alert detected!",
@@ -28,5 +31,5 @@ export function useSse() {
     return () => {
       eventSource.close();
     };
-  }, [location.pathname, sendNotification]);
+  }, [location.pathname, queryClient, sendNotification]);
 }