Put back event array on React side

frontend/src/components/app/App.js

@@ -1,32 +1,29 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
 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
-  
-  useEffect(() => {
-    
-    sse.onerror = (e) => {
-      console.error();
-      sse.close();
-    }
-    
-    sse.onmessage = (e) => {
-      // parses received data from string to JSON
-      const message = JSON.parse(e.data);
+  const [sse, setSse] = useState(new EventSource('/events', { withCredentials: true })) // creates eventSource listener in state
 
-      // initialises a new array with updated server-side event array
-      const newEvents = [...message];
+  sse.onerror = (e) => {
+    console.error();
+    sse.close();
+  }
 
-      // sets the updated event array as state
-      setEvents(newEvents);
-    };
-  });
+  sse.onmessage = (e) => {
+    // parses received data from string to JSON
+    const message = JSON.parse(e.data);
+
+    // initialises a new array with updated server-side event array
+    const newEvents = [...message, ...events];
+
+    // sets the updated event array as state
+    setEvents(newEvents);
+  };
 
   return <EventList data={events} />
-    
+
 }
 
 export default App;

frontend/src/components/eventList/EventList.css

@@ -1,6 +1,6 @@
 .eventListUl {
     background-color: #c1f1ec;
-    max-width: 50%;
+    max-width: 75%;
     padding: 5px;
     border: 5px solid #26A69A;
     border-radius: 5px;