Fix SSE handling

backend/server.js

@@ -31,8 +31,6 @@ async function run() {
   await mongoClient.connect();
   const collection = mongoClient.db().collection(mongoCollection);
 
-  let eventArray = [];
-
   changeStream = collection.watch(pipeline, options);
   console.log("Started watching changes in database");
 
@@ -46,39 +44,32 @@ async function run() {
       secretKey: minioURI.password
     });
 
+    function wrapEvent(doc) {
+      if (doc.screenshot_count) {
+        doc.screenshots = [];
+        for (let i = 1; i <= doc.screenshot_count ; i++) {
+          minioClient.presignedUrl('GET', minioBucket, `${data.fullDocument.camera}/${data.fullDocument._id}/${i}.jpg`, 60 * 60, (err, presignedUrl) => {
+            if (err) { return console.log(err) };
+            doc.screenshots.push({ url: presignedUrl });
+          })
+        }
+      };
+      let blob = JSON.stringify(doc);
+      return `event: log-entry\ndata: ${blob}\n\n`
+    }
+
     // Notify SSE to React
     const header = { 'Content-Type': 'text/event-stream', 'Connection': 'keep-alive' };
     response.writeHead(200, "OK", header);
-    response.write('Connection established \n\n');
 
     const historyCursor = collection.find({}).sort({$natural : -1}).limit(historyNumber);
 
     historyCursor.forEach((document) => {
-      const stringFormat = JSON.stringify(document);
-      eventArray = [stringFormat, ...eventArray];
+      response.write(wrapEvent(document));
     })
-    response.write(`event: events \n`)
-    response.write(`data: [${[...eventArray]}]\n\n`)
 
     changeStream.on("change", data => {
-
-      let document = JSON.stringify(data.fullDocument);
-      eventArray = [document];
-
-      if (data.fullDocument.screenshot_count) {
-
-        for (let i = 1; i <= data.fullDocument.screenshot_count ; i++) {
-          minioClient.presignedUrl('GET', minioBucket, `${data.fullDocument.camera}/${data.fullDocument._id}/${i}.jpg`, 60 * 60, (err, presignedUrl) => {
-            if (err) { return console.log(err) };
-            const realURL = JSON.stringify({ picUrl: presignedUrl });
-            eventArray = [realURL, ...eventArray];
-          })
-        }
-
-      };
-
-      response.write(`data: [${[...eventArray]}]\n\n`);
-
+      response.write(wrapEvent(data.fullDocument));
     });
   });
 

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;