Implement react-hooks-sse library

frontend/src/components/app/App.js

@@ -1,28 +1,29 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
+import { useSSE, SSEProvider, createCustomSource } from 'react-hooks-sse';
 import './App.css';
 import EventList from '../eventList/EventList.js';
 
-function App(props) {
-  const [events, setEvents] = useState(['EventLog']); // initialises Event state
-  const [sse, setSse] = useState(new EventSource('/events', { withCredentials: true })) // creates eventSource listener in state
+function SSE() {
+  const state = useSSE('events');
+  const [events, setEvents] = useState([]); // initialises Event state
 
-  sse.onerror = (e) => {
-    console.error();
-    sse.close();
-  }
+  useEffect(() => {
+    console.log('render');
+    if (state) {
+      setEvents([JSON.parse(state.data), ...events]);
+    }
+  }, [state])
 
-  sse.onmessage = (e) => {
-    // parses received data from string to JSON
-    const message = JSON.parse(e.data);
+  return events;
+}
 
-    // initialises a new array with updated server-side event array
-    const newEvents = [...message, ...events];
+function App() {
 
-    // sets the updated event array as state
-    setEvents(newEvents);
-  };
-
-  return <EventList data={events} />
+  return (
+  <SSEProvider endpoint="/events">
+    <SSE/>
+  </SSEProvider>
+  )
 
 }
 

frontend/src/components/eventList/EventList.js

@@ -3,15 +3,13 @@ import Event from '../event/Event.js';
 import './EventList.css';
 
 function EventList(props) {
-    console.log(`FROM LIST: ${props.data}`);
-
-    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>
+    
 
 }