diff --git a/frontend/features/EventsSteam/EventListener.tsx b/frontend/features/EventsSteam/EventListener.tsx new file mode 100644 index 0000000..574c963 --- /dev/null +++ b/frontend/features/EventsSteam/EventListener.tsx @@ -0,0 +1,51 @@ +import { + createContext, + useContext, + useState, + PropsWithChildren, + useEffect, +} from "react"; + +interface EventListenerContextData { + data: any; + listener: EventSource; +} + +type EventListenerProps = PropsWithChildren<{ + url: string; +}>; + +export const EventListenerContext = + createContext(null); + +export const EventListenerProvider = ({ + url, + children, +}: EventListenerProps) => { + const [data, setData] = useState(null); + const [listener, setListener] = useState(null); + + useEffect(() => { + const list = new EventSource(url); + list.onmessage = ({ data }) => { + setData(JSON.parse(data)); + }; + setListener(list); + }, []); + + return ( + + {children} + + ); +}; + +export const useEventListener = () => { + const contextData = useContext(EventListenerContext); + + if (!contextData) { + throw new Error("bruh"); + } + + return contextData; +}; diff --git a/frontend/pages/organisations.tsx b/frontend/pages/organisations.tsx index 7204b65..3119d52 100644 --- a/frontend/pages/organisations.tsx +++ b/frontend/pages/organisations.tsx @@ -1,9 +1,40 @@ +import { Box, List, ListItem, ListItemButton, ListItemText } from "@mui/material"; import { AuthorizedLayout } from "../components/Layout"; +import { + EventListenerContext, + EventListenerProvider, + // useEventListener, +} from "../features/EventsSteam/EventListener"; const Organisation = () => { + const streamURL = "/api/organisation/stream"; + // const eventListenerContext = useEventListener(); + return ( - To ma wylecieć + + + {(ctx) => ( + + {ctx.data ? ( + + {(ctx.data.organisations as Array).map((org) => ( + + + + + + ))} + + ) : ( +

Loading

+ )} +
+ )} +
+
); };