diff --git a/src/app/components/SSEEventListeners.tsx b/src/app/components/SSEEventListeners.tsx index e77c067..7407dad 100644 --- a/src/app/components/SSEEventListeners.tsx +++ b/src/app/components/SSEEventListeners.tsx @@ -1,13 +1,10 @@ import { useQueryClient } from "@tanstack/react-query"; -import { useSetAtom } from "jotai"; import type { FC, PropsWithChildren } from "react"; import { projectDetailQuery, sessionDetailQuery } from "../../lib/api/queries"; import { useServerEventListener } from "../../lib/sse/hook/useServerEventListener"; -import { sessionProcessesAtom } from "../projects/[projectId]/sessions/[sessionId]/store/sessionProcessesAtom"; export const SSEEventListeners: FC = ({ children }) => { const queryClient = useQueryClient(); - const setSessionProcesses = useSetAtom(sessionProcessesAtom); useServerEventListener("sessionListChanged", async (event) => { await queryClient.invalidateQueries({ @@ -21,9 +18,5 @@ export const SSEEventListeners: FC = ({ children }) => { }); }); - useServerEventListener("sessionProcessChanged", async ({ processes }) => { - setSessionProcesses(processes); - }); - return <>{children}; }; diff --git a/src/app/components/SyncSessionProcess.tsx b/src/app/components/SyncSessionProcess.tsx index b3cb091..c52ce8c 100644 --- a/src/app/components/SyncSessionProcess.tsx +++ b/src/app/components/SyncSessionProcess.tsx @@ -1,16 +1,24 @@ +import { useSuspenseQuery } from "@tanstack/react-query"; import { useSetAtom } from "jotai"; import { type FC, type PropsWithChildren, useEffect } from "react"; -import type { PublicSessionProcess } from "../../types/session-process"; +import { sessionProcessesQuery } from "../../lib/api/queries"; +import { useServerEventListener } from "../../lib/sse/hook/useServerEventListener"; import { sessionProcessesAtom } from "../projects/[projectId]/sessions/[sessionId]/store/sessionProcessesAtom"; -export const SyncSessionProcess: FC< - PropsWithChildren<{ initProcesses: PublicSessionProcess[] }> -> = ({ children, initProcesses }) => { +export const SyncSessionProcess: FC = ({ children }) => { const setSessionProcesses = useSetAtom(sessionProcessesAtom); + const { data } = useSuspenseQuery({ + queryKey: sessionProcessesQuery.queryKey, + queryFn: sessionProcessesQuery.queryFn, + }); + + useServerEventListener("sessionProcessChanged", async ({ processes }) => { + setSessionProcesses(processes); + }); useEffect(() => { - setSessionProcesses(initProcesses); - }, [initProcesses, setSessionProcesses]); + setSessionProcesses(data.processes); + }, [data, setSessionProcesses]); return <>{children}; }; diff --git a/src/routes/__root.tsx b/src/routes/__root.tsx index 08f23cc..b6b3ec0 100644 --- a/src/routes/__root.tsx +++ b/src/routes/__root.tsx @@ -3,6 +3,7 @@ import { createRootRoute, Outlet } from "@tanstack/react-router"; import { TanStackRouterDevtoolsPanel } from "@tanstack/react-router-devtools"; import { RootErrorBoundary } from "../app/components/RootErrorBoundary"; import { SSEEventListeners } from "../app/components/SSEEventListeners"; +import { SyncSessionProcess } from "../app/components/SyncSessionProcess"; import { ThemeProvider } from "../components/ThemeProvider"; import { Toaster } from "../components/ui/sonner"; import { LinguiClientProvider } from "../lib/i18n/LinguiProvider"; @@ -15,18 +16,20 @@ export const Route = createRootRoute({ - - , - }, - ]} - /> + + + , + }, + ]} + /> +