Fix SSE handling

frontend/src/components/app/App.js

@@ -1,30 +1,35 @@
 import React, { useState, useEffect } from 'react';
-import { useSSE, SSEProvider, createCustomSource } from 'react-hooks-sse';
+import { useSSE, SSEProvider } from 'react-hooks-sse';
 import './App.css';
 import EventList from '../eventList/EventList.js';
 
-const SSE = () => {
-  const state = useSSE('events');
-  const [events, setEvents] = useState([]); // initialises Event state
 
-  useEffect(() => {
-    console.log('render');
-    if (state) {
-      setEvents([JSON.parse(state.data), ...events]);
+import './App.css';
+
+
+const Component = () => {
+  const event = useSSE('log-entry')
+  const [events, setEvents] = useState([])
+
+  useEffect(() =>{
+    console.info(event);
+    if (event) {
+      setEvents([event, ...events]);
     }
-  }, [state])
-
-  return events;
+  }, [event])
+  return <EventList data={events} />
 }
 
 function App() {
-
   return (
-  <SSEProvider endpoint="/events">
-    <SSE/>
-  </SSEProvider>
-  )
 
+    <SSEProvider endpoint="/events" >
+        <Component />
+
+
+    </SSEProvider>
+
+  )
 }
 
 export default App;

frontend/src/components/event/Event.js

@@ -5,7 +5,7 @@ function Event(props) {
 
     return (
         <div className="eventDiv">
-            {props.data.picUrl? <img className="eventPic" src={props.data.picUrl}></img> : JSON.stringify(props.data)}
+            {props.screenshots ? <img className="eventPic" src={props.screenshots[0].url}></img> : JSON.stringify(props)}
         </div>
     );
 }

frontend/src/components/eventList/EventList.js

@@ -3,14 +3,13 @@ import Event from '../event/Event.js';
 import './EventList.css';
 
 function EventList(props) {
-    return ;
-        // <ul className="eventListUl">
-        //     {props.data.map((event) => {
-        //         return <li className="eventListLi"><Event data={event} /></li>
-        //     })}
-        // </ul>
-    
-
+    return (
+        <ul className="eventListUl">
+            {props.data.map((event) => {
+                return <li className="eventListLi"><Event data={event} /></li>
+            })}
+        </ul>
+    )
 }
 
 export default EventList;