Read server side events for organisations

Author: Grzegorz Kupczyk

frontend/features/EventsSteam/EventListener.tsx

@@ -0,0 +1,51 @@
+import {
+  createContext,
+  useContext,
+  useState,
+  PropsWithChildren,
+  useEffect,
+} from "react";
+
+interface EventListenerContextData {
+  data: unknown;
+  listener: EventSource;
+}
+
+type EventListenerProps = PropsWithChildren<{
+  url: string;
+}>;
+
+export const EventListenerContext =
+  createContext<EventListenerContextData | null>(null);
+
+export const EventListenerProvider = ({
+  url,
+  children,
+}: EventListenerProps) => {
+  const [data, setData] = useState<unknown>(null);
+  const [listener, setListener] = useState<EventSource | null>(null);
+
+  useEffect(() => {
+    const list = new EventSource(url);
+    list.onmessage = ({ data }) => {
+      setData(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,26 @@
 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>
+          {(organizationsContext) => (
+            <>
+              Organizancje są takie o:
+              <pre>{JSON.stringify(organizationsContext)}</pre>
+            </>
+          )}
+        </EventListenerContext.Consumer>
+      </EventListenerProvider>
     </AuthorizedLayout>
   );
 };