🚀 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:
Gabriel Luiz Freitas Almeida 2023-06-12 09:30:47 -03:00
commit 42d5a501bb
2 changed files with 39 additions and 1 deletions

View file

@ -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>

View 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>
);
}