From 7c6441a9da921b663ccd77e1ed0c564128ef2259 Mon Sep 17 00:00:00 2001
From: Grzegorz Kupczyk <grzegorz.kupczyk@holmsecurity.com>
Date: Fri, 22 Dec 2023 00:30:14 +0100
Subject: [PATCH 1/2] Read server side events for organisations

---
 .../features/EventsSteam/EventListener.tsx    | 51 +++++++++++++++++++
 frontend/pages/organisations.tsx              | 19 ++++++-
 2 files changed, 69 insertions(+), 1 deletion(-)
 create mode 100644 frontend/features/EventsSteam/EventListener.tsx

diff --git a/frontend/features/EventsSteam/EventListener.tsx b/frontend/features/EventsSteam/EventListener.tsx
new file mode 100644
index 0000000..97222c9
--- /dev/null
+++ b/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;
+};
diff --git a/frontend/pages/organisations.tsx b/frontend/pages/organisations.tsx
index 7204b65..f5b6e79 100644
--- a/frontend/pages/organisations.tsx
+++ b/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>
   );
 };

From 746c5c6519a17020d6de43156e9cb6691d6d3105 Mon Sep 17 00:00:00 2001
From: Grzegorz Kupczyk <grzegorz.kupczyk@holmsecurity.com>
Date: Fri, 22 Dec 2023 01:35:57 +0100
Subject: [PATCH 2/2] Display organisations as table

---
 .../features/EventsSteam/EventListener.tsx    |  6 ++---
 frontend/pages/organisations.tsx              | 24 +++++++++++++++----
 2 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/frontend/features/EventsSteam/EventListener.tsx b/frontend/features/EventsSteam/EventListener.tsx
index 97222c9..574c963 100644
--- a/frontend/features/EventsSteam/EventListener.tsx
+++ b/frontend/features/EventsSteam/EventListener.tsx
@@ -7,7 +7,7 @@ import {
 } from "react";
 
 interface EventListenerContextData {
-  data: unknown;
+  data: any;
   listener: EventSource;
 }
 
@@ -22,13 +22,13 @@ export const EventListenerProvider = ({
   url,
   children,
 }: EventListenerProps) => {
-  const [data, setData] = useState<unknown>(null);
+  const [data, setData] = useState<any>(null);
   const [listener, setListener] = useState<EventSource | null>(null);
 
   useEffect(() => {
     const list = new EventSource(url);
     list.onmessage = ({ data }) => {
-      setData(data);
+      setData(JSON.parse(data));
     };
     setListener(list);
   }, []);
diff --git a/frontend/pages/organisations.tsx b/frontend/pages/organisations.tsx
index f5b6e79..3119d52 100644
--- a/frontend/pages/organisations.tsx
+++ b/frontend/pages/organisations.tsx
@@ -1,3 +1,4 @@
+import { Box, List, ListItem, ListItemButton, ListItemText } from "@mui/material";
 import { AuthorizedLayout } from "../components/Layout";
 import {
   EventListenerContext,
@@ -13,11 +14,24 @@ const Organisation = () => {
     <AuthorizedLayout>
       <EventListenerProvider url={streamURL}>
         <EventListenerContext.Consumer>
-          {(organizationsContext) => (
-            <>
-              Organizancje są takie o:
-              <pre>{JSON.stringify(organizationsContext)}</pre>
-            </>
+          {(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>