Put back event array on React side

backend/server.js

@@ -2,7 +2,7 @@ const { MongoClient } = require("mongodb");
 const express = require('express');
 const minio = require('minio');
 
-  /*============== VARIABLE DECLARATION ==============*/
+/*============== VARIABLE DECLARATION ==============*/
 // Mongo set-up variables
 const mongoCollection = process.env.MONGO_COLLECTION || 'eventlog';
 const mongoUri = process.env.MONGO_URI || 'mongodb://127.0.0.1:27017/default?replicaSet=rs0';
@@ -10,6 +10,7 @@ const mongoUri = process.env.MONGO_URI || 'mongodb://127.0.0.1:27017/default?rep
 // Minio set-up variables
 const minioURI = new URL(process.env.MINIO_URI || 'http://kspace-mugshot:2mSI6HdbJ8@127.0.0.1:9000/kspace-mugshot');
 const minioBucket = minioURI.pathname.substring(1);
+const historyNumber = process.env.HISTORY_AMOUNT || 10;
 
 // Stream set-up variables
 let changeStream;
@@ -31,13 +32,13 @@ async function run() {
   await mongoClient.connect();
   const collection = mongoClient.db().collection(mongoCollection);
 
+  let eventArray = [];
+
   // Opening event listener on the database
   changeStream = collection.watch(pipeline, options);
   console.log("Started watching changes in database");
 
   app.get('/events', async function (request, response) {
-    let eventArray = [];
-
     let minioClient = new minio.Client({
       endPoint: minioURI.hostname,
       port: parseInt(minioURI.port) || (minioURI.protocol == 'https' ? 443 : 80),
@@ -46,9 +47,6 @@ async function run() {
       secretKey: minioURI.password
     });
 
-    // notifies GET requests
-    console.log('/events was requested');
-
     // Setting the header to event-stream for Server Sent Events (Eventsource)
     const header = { 'Content-Type': 'text/event-stream', 'Connection': 'keep-alive' };
     response.writeHead(200, "OK", header);
@@ -59,15 +57,19 @@ async function run() {
 
       // Retrieves modified document on the db and stores it
       let document = JSON.stringify(data.fullDocument);
-      eventArray = [document, ...eventArray];
+      eventArray = [document];
 
       // Fetch screenshot if there is one
       if (data.fullDocument.screenshot_count) {
-        minioClient.presignedUrl('GET', minioBucket, `${data.fullDocument.camera}/${data.fullDocument._id}/1.jpg`, 60 * 60, (err, presignedUrl) => {
-          if (err) { return console.log(err) };
-          const realURL = JSON.stringify({ picUrl: presignedUrl });
-          eventArray = [realURL, ...eventArray];
-        })
+
+        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];
+          })
+        }
+
       };
 
       // sends updated array

frontend/src/components/app/App.js

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

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;