Display organisations as table

ksidelta · Dec 22, 2023 · c081156 · c081156
1 parent 7c6441a
commit c081156
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 8 deletions.
diff --git 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
@@ -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>
+                      <ListItemButton>
+                        <ListItemText primary={org.organisationName} />
+                      </ListItemButton>
+                    </ListItem>
+                  ))}
+                </List>
+              ) : (
+                <p>Loading</p>
+              )}
+            </Box>
           )}
         </EventListenerContext.Consumer>
       </EventListenerProvider>