🚀 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 { ErrorBoundary } from "react-error-boundary";
|
||||||
import CrashErrorComponent from "./components/CrashErrorComponent";
|
import CrashErrorComponent from "./components/CrashErrorComponent";
|
||||||
import { TabsContext } from "./contexts/tabsContext";
|
import { TabsContext } from "./contexts/tabsContext";
|
||||||
|
import { SSEProvider } from "./contexts/SSEContext";
|
||||||
|
|
||||||
export default function App() {
|
export default function App() {
|
||||||
let { setCurrent, setShowSideBar, setIsStackedOpen } =
|
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">
|
<main className="min-w-0 flex-1 border-t border-gray-200 dark:border-gray-700 flex">
|
||||||
{/* Primary column */}
|
{/* Primary column */}
|
||||||
<div className="w-full h-full">
|
<div className="w-full h-full">
|
||||||
<TabsManagerComponent></TabsManagerComponent>
|
<SSEProvider>
|
||||||
|
<TabsManagerComponent></TabsManagerComponent>
|
||||||
|
</SSEProvider>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
</div>
|
</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