Frontend receive sse

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<EventListenerContextData | null>(null);
+
+export const EventListenerProvider = ({
+  url,
+  children,
+}: EventListenerProps) => {
+  const [data, setData] = useState<any>(null);
+  const [listener, setListener] = useState<EventSource | null>(null);
+
+  useEffect(() => {
+    const list = new EventSource(url);
+    list.onmessage = ({ data }) => {
+      setData(JSON.parse(data));
+    };
+    setListener(list);
+  }, []);
+
+  return (
+    <EventListenerContext.Provider value={{ data, listener }}>
+      {children}
+    </EventListenerContext.Provider>
+  );
+};
+
+export const useEventListener = () => {
+  const contextData = useContext(EventListenerContext);
+
+  if (!contextData) {
+    throw new Error("bruh");
+  }
+
+  return contextData;
+};

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 (
     <AuthorizedLayout>
-      To ma wylecieć
+      <EventListenerProvider url={streamURL}>
+        <EventListenerContext.Consumer>
+          {(ctx) => (
+            <Box
+              sx={{ width: "100%", maxWidth: 360, bgcolor: "#eee" }}
+            >
+              {ctx.data ? (
+                <List>
+                  {(ctx.data.organisations as Array<any>).map((org) => (
+                    <ListItem disablePadding key={org.organisationId}>
+                      <ListItemButton>
+                        <ListItemText primary={org.organisationName} />
+                      </ListItemButton>
+                    </ListItem>
+                  ))}
+                </List>
+              ) : (
+                <p>Loading</p>
+              )}
+            </Box>
+          )}
+        </EventListenerContext.Consumer>
+      </EventListenerProvider>
     </AuthorizedLayout>
   );
 };