🚀 feat(App.tsx): add SSEProvider to App component
🎉 feat(SSEContext.tsx): add SSEContext and SSEProvider components to handle server-sent events
The SSEProvider component was added to the App component to provide the SSEContext to the TabsManagerComponent. The SSEContext component was also added to handle server-sent events. The SSEContext component provides a way to update the sseData state and to access the sseData state from any component that uses the useSSE hook.
This commit is contained in:
parent
036818e9b9
commit
42d5a501bb
2 changed files with 39 additions and 1 deletions
|
|
@ -14,6 +14,7 @@ import TabsManagerComponent from "./pages/FlowPage/components/tabsManagerCompone
|
|||
import { ErrorBoundary } from "react-error-boundary";
|
||||
import CrashErrorComponent from "./components/CrashErrorComponent";
|
||||
import { TabsContext } from "./contexts/tabsContext";
|
||||
import { SSEProvider } from "./contexts/SSEContext";
|
||||
|
||||
export default function App() {
|
||||
let { setCurrent, setShowSideBar, setIsStackedOpen } =
|
||||
|
|
@ -128,7 +129,9 @@ export default function App() {
|
|||
<main className="min-w-0 flex-1 border-t border-gray-200 dark:border-gray-700 flex">
|
||||
{/* Primary column */}
|
||||
<div className="w-full h-full">
|
||||
<TabsManagerComponent></TabsManagerComponent>
|
||||
<SSEProvider>
|
||||
<TabsManagerComponent></TabsManagerComponent>
|
||||
</SSEProvider>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
|
|
|||
35
src/frontend/src/contexts/SSEContext.tsx
Normal file
35
src/frontend/src/contexts/SSEContext.tsx
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
import {
|
||||
createContext,
|
||||
useContext,
|
||||
useState,
|
||||
useEffect,
|
||||
useCallback,
|
||||
} from "react";
|
||||
|
||||
const initialValue = {
|
||||
updateSSEData: ({}) => {},
|
||||
sseData: {},
|
||||
};
|
||||
|
||||
const SSEContext = createContext(initialValue);
|
||||
|
||||
export function useSSE() {
|
||||
return useContext(SSEContext);
|
||||
}
|
||||
|
||||
export function SSEProvider({ children }) {
|
||||
const [sseData, setSSEData] = useState({});
|
||||
|
||||
const updateSSEData = useCallback((newData: any) => {
|
||||
setSSEData((prevData) => ({
|
||||
...prevData,
|
||||
...newData,
|
||||
}));
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<SSEContext.Provider value={{ sseData, updateSSEData }}>
|
||||
{children}
|
||||
</SSEContext.Provider>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue