From 4c77fb127d9454437a8ae70d067b6920f5f2377b Mon Sep 17 00:00:00 2001
From: rakbaal <rakbaal@k-space.ee>
Date: Tue, 15 Feb 2022 10:55:59 +0200
Subject: [PATCH] Put back event array on React side

---
 backend/server.js                             | 26 +++++++------
 frontend/src/components/app/App.js            | 37 +++++++++----------
 .../src/components/eventList/EventList.css    |  2 +-
 3 files changed, 32 insertions(+), 33 deletions(-)

diff --git a/backend/server.js b/backend/server.js
index 2813d86..163ad2d 100644
--- a/backend/server.js
+++ b/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
diff --git a/frontend/src/components/app/App.js b/frontend/src/components/app/App.js
index f5a4061..71df5d9 100644
--- a/frontend/src/components/app/App.js
+++ b/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;
diff --git a/frontend/src/components/eventList/EventList.css b/frontend/src/components/eventList/EventList.css
index 88cdaee..7271378 100644
--- a/frontend/src/components/eventList/EventList.css
+++ b/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;